[{"data":1,"prerenderedAt":9828},["ShallowReactive",2],{"navigation":3,"/api/loaders":498,"/api/loaders-surround":519,"loaders-list":524},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":127,"body":500,"description":512,"extension":513,"links":514,"meta":515,"navigation":516,"path":128,"seo":517,"stem":129,"__hash__":518},"docs/2.api/3.loaders/index.md",{"type":501,"value":502,"toc":507},"minimark",[503],[504,505],"api-list",{"list-name":506},"loaders-list",{"title":508,"searchDepth":509,"depth":510,"links":511},"",1,2,[],"Asset loading composables for TresJS scenes.","md",null,{},true,{"title":127,"description":512},"1deHEv7mVomRvNpTEqtIO8-vwuq08C4YMNS233eCd28",[520,522],{"title":123,"path":124,"stem":125,"description":521,"children":-1},"Set of three gizmos that can be used to translate, rotate and scale objects",{"title":133,"path":134,"stem":135,"description":523,"children":-1},"A composable to load GLTF models in TresJS scenes.",[525,1696,2488,3109,3749,4405,5887,8761,9242],{"id":526,"title":133,"body":527,"description":523,"extension":513,"links":514,"meta":1693,"navigation":516,"path":134,"seo":1694,"stem":135,"__hash__":1695},"docs/2.api/3.loaders/1.use-gltf.md",{"type":501,"value":528,"toc":1685},[529,535,544,548,1004,1022,1102,1106,1253,1257,1330,1334,1337,1433,1436,1440,1457,1621,1631,1635,1644,1675,1681],[530,531,532],"scene-wrapper",{},[533,534],"loaders-gltf",{},[536,537,538,539,543],"p",{},"A composable that allows you to easily load glb/glTF models into your ",[540,541,542],"strong",{},"TresJS"," scene.",[545,546,15],"h2",{"id":547},"usage",[549,550,551,754],"code-group",{},[552,553,560],"pre",{"className":554,"code":555,"filename":556,"highlights":557,"language":559,"meta":508,"style":508},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\nconst { state, nodes, materials } = useGLTF(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state?.scene\" />\n\u003C/template>\n","TheModel.vue",[510,558],5,"vue",[561,562,563,597,627,633,651,684,694,699,709,745],"code",{"__ignoreMap":508},[564,565,567,571,575,579,582,585,588,592,594],"span",{"class":566,"line":509},"line",[564,568,570],{"class":569},"sMK4o","\u003C",[564,572,574],{"class":573},"swJcz","script",[564,576,578],{"class":577},"spNyl"," setup",[564,580,581],{"class":577}," lang",[564,583,584],{"class":569},"=",[564,586,587],{"class":569},"\"",[564,589,591],{"class":590},"sfazB","ts",[564,593,587],{"class":569},[564,595,596],{"class":569},">\n",[564,598,601,605,608,612,615,618,621,624],{"class":599,"line":510},[566,600],"highlight",[564,602,604],{"class":603},"s7zQu","import",[564,606,607],{"class":569}," {",[564,609,611],{"class":610},"sTEyZ"," useGLTF",[564,613,614],{"class":569}," }",[564,616,617],{"class":603}," from",[564,619,620],{"class":569}," '",[564,622,623],{"class":590},"@tresjs/cientos",[564,625,626],{"class":569},"'\n",[564,628,630],{"class":566,"line":629},3,[564,631,632],{"emptyLinePlaceholder":516},"\n",[564,634,636,639,642,644,646,649],{"class":566,"line":635},4,[564,637,638],{"class":577},"const",[564,640,641],{"class":610}," path ",[564,643,584],{"class":569},[564,645,620],{"class":569},[564,647,648],{"class":590},"./blender-cube.glb",[564,650,626],{"class":569},[564,652,654,656,658,661,664,667,669,672,675,678,681],{"class":653,"line":558},[566,600],[564,655,638],{"class":577},[564,657,607],{"class":569},[564,659,660],{"class":610}," state",[564,662,663],{"class":569},",",[564,665,666],{"class":610}," nodes",[564,668,663],{"class":569},[564,670,671],{"class":610}," materials ",[564,673,674],{"class":569},"}",[564,676,677],{"class":569}," =",[564,679,611],{"class":680},"s2Zo4",[564,682,683],{"class":610},"(path)\n",[564,685,687,690,692],{"class":566,"line":686},6,[564,688,689],{"class":569},"\u003C/",[564,691,574],{"class":573},[564,693,596],{"class":569},[564,695,697],{"class":566,"line":696},7,[564,698,632],{"emptyLinePlaceholder":516},[564,700,702,704,707],{"class":566,"line":701},8,[564,703,570],{"class":569},[564,705,706],{"class":573},"template",[564,708,596],{"class":569},[564,710,712,715,718,721,723,725,728,730,733,735,737,740,742],{"class":566,"line":711},9,[564,713,714],{"class":569},"  \u003C",[564,716,717],{"class":573},"primitive",[564,719,720],{"class":577}," v-if",[564,722,584],{"class":569},[564,724,587],{"class":569},[564,726,727],{"class":590},"state",[564,729,587],{"class":569},[564,731,732],{"class":577}," :object",[564,734,584],{"class":569},[564,736,587],{"class":569},[564,738,739],{"class":590},"state?.scene",[564,741,587],{"class":569},[564,743,744],{"class":569}," />\n",[564,746,748,750,752],{"class":566,"line":747},10,[564,749,689],{"class":569},[564,751,706],{"class":573},[564,753,596],{"class":569},[552,755,758],{"className":554,"code":756,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#F78B3D\">\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[561,759,760,780,799,819,836,844,848,856,877,899,908,918,926,942,957,963,985,995],{"__ignoreMap":508},[564,761,762,764,766,768,770,772,774,776,778],{"class":566,"line":509},[564,763,570],{"class":569},[564,765,574],{"class":573},[564,767,578],{"class":577},[564,769,581],{"class":577},[564,771,584],{"class":569},[564,773,587],{"class":569},[564,775,591],{"class":590},[564,777,587],{"class":569},[564,779,596],{"class":569},[564,781,782,784,786,789,791,793,795,797],{"class":566,"line":510},[564,783,604],{"class":603},[564,785,607],{"class":569},[564,787,788],{"class":610}," OrbitControls",[564,790,614],{"class":569},[564,792,617],{"class":603},[564,794,620],{"class":569},[564,796,623],{"class":590},[564,798,626],{"class":569},[564,800,801,803,805,808,810,812,814,817],{"class":566,"line":629},[564,802,604],{"class":603},[564,804,607],{"class":569},[564,806,807],{"class":610}," TresCanvas",[564,809,614],{"class":569},[564,811,617],{"class":603},[564,813,620],{"class":569},[564,815,816],{"class":590},"@tresjs/core",[564,818,626],{"class":569},[564,820,821,823,826,829,831,834],{"class":566,"line":635},[564,822,604],{"class":603},[564,824,825],{"class":610}," TheModel ",[564,827,828],{"class":603},"from",[564,830,620],{"class":569},[564,832,833],{"class":590},"./TheModel.vue",[564,835,626],{"class":569},[564,837,838,840,842],{"class":566,"line":558},[564,839,689],{"class":569},[564,841,574],{"class":573},[564,843,596],{"class":569},[564,845,846],{"class":566,"line":686},[564,847,632],{"emptyLinePlaceholder":516},[564,849,850,852,854],{"class":566,"line":696},[564,851,570],{"class":569},[564,853,706],{"class":573},[564,855,596],{"class":569},[564,857,858,860,863,866,868,870,873,875],{"class":566,"line":701},[564,859,714],{"class":569},[564,861,862],{"class":573},"TresCanvas",[564,864,865],{"class":577}," clear-color",[564,867,584],{"class":569},[564,869,587],{"class":569},[564,871,872],{"class":590},"#F78B3D",[564,874,587],{"class":569},[564,876,596],{"class":569},[564,878,879,882,885,888,890,892,895,897],{"class":566,"line":711},[564,880,881],{"class":569},"    \u003C",[564,883,884],{"class":573},"TresPerspectiveCamera",[564,886,887],{"class":577}," :position",[564,889,584],{"class":569},[564,891,587],{"class":569},[564,893,894],{"class":590},"[3, 2, 5]",[564,896,587],{"class":569},[564,898,744],{"class":569},[564,900,901,903,906],{"class":566,"line":747},[564,902,881],{"class":569},[564,904,905],{"class":573},"OrbitControls",[564,907,744],{"class":569},[564,909,911,913,916],{"class":566,"line":910},11,[564,912,881],{"class":569},[564,914,915],{"class":573},"TheModel",[564,917,744],{"class":569},[564,919,921,923],{"class":566,"line":920},12,[564,922,881],{"class":569},[564,924,925],{"class":573},"TresDirectionalLight\n",[564,927,929,932,934,936,939],{"class":566,"line":928},13,[564,930,931],{"class":577},"      :intensity",[564,933,584],{"class":569},[564,935,587],{"class":569},[564,937,938],{"class":590},"2",[564,940,941],{"class":569},"\"\n",[564,943,945,948,950,952,955],{"class":566,"line":944},14,[564,946,947],{"class":577},"      :position",[564,949,584],{"class":569},[564,951,587],{"class":569},[564,953,954],{"class":590},"[3, 3, 3]",[564,956,941],{"class":569},[564,958,960],{"class":566,"line":959},15,[564,961,962],{"class":569},"    />\n",[564,964,966,968,971,974,976,978,981,983],{"class":566,"line":965},16,[564,967,881],{"class":569},[564,969,970],{"class":573},"TresAmbientLight",[564,972,973],{"class":577}," :intensity",[564,975,584],{"class":569},[564,977,587],{"class":569},[564,979,980],{"class":590},"1",[564,982,587],{"class":569},[564,984,744],{"class":569},[564,986,988,991,993],{"class":566,"line":987},17,[564,989,990],{"class":569},"  \u003C/",[564,992,862],{"class":573},[564,994,596],{"class":569},[564,996,998,1000,1002],{"class":566,"line":997},18,[564,999,689],{"class":569},[564,1001,706],{"class":573},[564,1003,596],{"class":569},[536,1005,1006,1007,1009,1010,1013,1014,1021],{},"An advantage of using ",[561,1008,133],{}," is that you can pass a ",[561,1011,1012],{},"draco"," prop to enable ",[1015,1016,1020],"a",{"href":1017,"rel":1018},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1019],"nofollow","Draco compression"," for the model. This will reduce the size of the model and improve performance.",[552,1023,1026],{"className":1024,"code":1025,"language":591,"meta":508,"style":508},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[561,1027,1028,1046,1050],{"__ignoreMap":508},[564,1029,1030,1032,1034,1036,1038,1040,1042,1044],{"class":566,"line":509},[564,1031,604],{"class":603},[564,1033,607],{"class":569},[564,1035,611],{"class":610},[564,1037,614],{"class":569},[564,1039,617],{"class":603},[564,1041,620],{"class":569},[564,1043,623],{"class":590},[564,1045,626],{"class":569},[564,1047,1048],{"class":566,"line":510},[564,1049,632],{"emptyLinePlaceholder":516},[564,1051,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1075,1078,1081,1083,1085,1087,1090,1093,1097,1099],{"class":566,"line":629},[564,1053,638],{"class":577},[564,1055,607],{"class":569},[564,1057,660],{"class":610},[564,1059,663],{"class":569},[564,1061,666],{"class":610},[564,1063,663],{"class":569},[564,1065,671],{"class":610},[564,1067,674],{"class":569},[564,1069,677],{"class":569},[564,1071,611],{"class":680},[564,1073,1074],{"class":610},"(",[564,1076,1077],{"class":569},"'",[564,1079,1080],{"class":590},"/models/AkuAku.gltf",[564,1082,1077],{"class":569},[564,1084,663],{"class":569},[564,1086,607],{"class":569},[564,1088,1089],{"class":573}," draco",[564,1091,1092],{"class":569},":",[564,1094,1096],{"class":1095},"sfNiH"," true",[564,1098,614],{"class":569},[564,1100,1101],{"class":610},")\n",[545,1103,1105],{"id":1104},"return-values","Return Values",[1107,1108,1109,1126],"table",{},[1110,1111,1112],"thead",{},[1113,1114,1115,1120,1123],"tr",{},[1116,1117,1119],"th",{"align":1118},"left","Name",[1116,1121,1122],{},"Type",[1116,1124,1125],{},"Description",[1127,1128,1129,1148,1163,1178,1193,1208,1223,1238],"tbody",{},[1113,1130,1131,1136,1141],{},[1132,1133,1134],"td",{"align":1118},[540,1135,727],{},[1132,1137,1138],{},[561,1139,1140],{},"Ref\u003CGLTF | null>",[1132,1142,1143,1144,1147],{},"The loaded GLTF, or ",[561,1145,1146],{},"null"," until it arrives",[1113,1149,1150,1155,1160],{},[1132,1151,1152],{"align":1118},[540,1153,1154],{},"nodes",[1132,1156,1157],{},[561,1158,1159],{},"ComputedRef\u003CTNodes>",[1132,1161,1162],{},"All nodes in the scene, keyed by name",[1113,1164,1165,1170,1175],{},[1132,1166,1167],{"align":1118},[540,1168,1169],{},"materials",[1132,1171,1172],{},[561,1173,1174],{},"ComputedRef\u003CTMaterials>",[1132,1176,1177],{},"All materials in the scene, keyed by name",[1113,1179,1180,1185,1190],{},[1132,1181,1182],{"align":1118},[540,1183,1184],{},"isLoading",[1132,1186,1187],{},[561,1188,1189],{},"Ref\u003Cboolean>",[1132,1191,1192],{},"Whether the model is currently loading",[1113,1194,1195,1200,1205],{},[1132,1196,1197],{"align":1118},[540,1198,1199],{},"error",[1132,1201,1202],{},[561,1203,1204],{},"Ref\u003Cunknown>",[1132,1206,1207],{},"Whatever the loader threw, if anything",[1113,1209,1210,1215,1220],{},[1132,1211,1212],{"align":1118},[540,1213,1214],{},"progress",[1132,1216,1217],{},[561,1218,1219],{},"{ loaded: number, total: number, percentage: number }",[1132,1221,1222],{},"Progress of the current load",[1113,1224,1225,1230,1235],{},[1132,1226,1227],{"align":1118},[540,1228,1229],{},"load",[1132,1231,1232],{},[561,1233,1234],{},"(path: string) => void",[1132,1236,1237],{},"Load a different model into the same state",[1113,1239,1240,1245,1250],{},[1132,1241,1242],{"align":1118},[540,1243,1244],{},"execute",[1132,1246,1247],{},[561,1248,1249],{},"(delay?: number) => Promise\u003CGLTF>",[1132,1251,1252],{},"Re-run the load",[545,1254,1256],{"id":1255},"options","Options",[1107,1258,1259,1272],{},[1110,1260,1261],{},[1113,1262,1263,1265,1267,1270],{},[1116,1264,1119],{"align":1118},[1116,1266,1122],{},[1116,1268,1269],{},"Default",[1116,1271,1125],{},[1127,1273,1274,1293,1313],{},[1113,1275,1276,1280,1285,1290],{},[1132,1277,1278],{"align":1118},[540,1279,1012],{},[1132,1281,1282],{},[561,1283,1284],{},"boolean",[1132,1286,1287],{},[561,1288,1289],{},"false",[1132,1291,1292],{},"Whether to enable Draco compression.",[1113,1294,1295,1300,1305,1310],{},[1132,1296,1297],{"align":1118},[540,1298,1299],{},"decoderPath",[1132,1301,1302],{},[561,1303,1304],{},"string",[1132,1306,1307],{},[561,1308,1309],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[1132,1311,1312],{},"Path to the Draco decoder.",[1113,1314,1315,1320,1325,1327],{},[1132,1316,1317],{"align":1118},[540,1318,1319],{},"traverse",[1132,1321,1322],{},[561,1323,1324],{},"Function",[1132,1326],{},[1132,1328,1329],{},"A traverse function applied to the scene upon loading the model.",[545,1331,1333],{"id":1332},"accessing-nodes-and-materials","Accessing Nodes and Materials",[536,1335,1336],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[552,1338,1340],{"className":1024,"code":1339,"language":591,"meta":508,"style":508},"const { nodes, materials } = useGLTF('/model.glb')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[561,1341,1342,1371,1375,1381,1403,1407,1412],{"__ignoreMap":508},[564,1343,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1367,1369],{"class":566,"line":509},[564,1345,638],{"class":577},[564,1347,607],{"class":569},[564,1349,666],{"class":610},[564,1351,663],{"class":569},[564,1353,671],{"class":610},[564,1355,674],{"class":569},[564,1357,677],{"class":569},[564,1359,611],{"class":680},[564,1361,1074],{"class":610},[564,1363,1077],{"class":569},[564,1365,1366],{"class":590},"/model.glb",[564,1368,1077],{"class":569},[564,1370,1101],{"class":610},[564,1372,1373],{"class":566,"line":510},[564,1374,632],{"emptyLinePlaceholder":516},[564,1376,1377],{"class":566,"line":629},[564,1378,1380],{"class":1379},"sHwdD","// Access a specific node\n",[564,1382,1383,1385,1388,1390,1392,1395,1398,1400],{"class":566,"line":635},[564,1384,638],{"class":577},[564,1386,1387],{"class":610}," mesh ",[564,1389,584],{"class":569},[564,1391,666],{"class":610},[564,1393,1394],{"class":569},".",[564,1396,1397],{"class":610},"value",[564,1399,1394],{"class":569},[564,1401,1402],{"class":610},"MeshName\n",[564,1404,1405],{"class":566,"line":558},[564,1406,632],{"emptyLinePlaceholder":516},[564,1408,1409],{"class":566,"line":686},[564,1410,1411],{"class":1379},"// Access a specific material\n",[564,1413,1414,1416,1419,1421,1424,1426,1428,1430],{"class":566,"line":696},[564,1415,638],{"class":577},[564,1417,1418],{"class":610}," material ",[564,1420,584],{"class":569},[564,1422,1423],{"class":610}," materials",[564,1425,1394],{"class":569},[564,1427,1397],{"class":610},[564,1429,1394],{"class":569},[564,1431,1432],{"class":610},"MaterialName\n",[536,1434,1435],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[545,1437,1439],{"id":1438},"typing-nodes-and-materials","Typing Nodes and Materials",[536,1441,1442,1443,1445,1446,1448,1449,1452,1453,1456],{},"The keys of ",[561,1444,1154],{}," and ",[561,1447,1169],{}," come from the file, so by default both are a loose record and\n",[561,1450,1451],{},"nodes.value.Body"," is an ",[561,1454,1455],{},"any",". Pass the shape of your model as generics to get them typed:",[552,1458,1460],{"className":1024,"code":1459,"language":591,"meta":508,"style":508},"import type { Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs/cientos'\n\ninterface ModelNodes { Body: Mesh }\ninterface ModelMaterials { Skin: MeshStandardMaterial }\n\nconst { nodes, materials } = useGLTF\u003CModelNodes, ModelMaterials>('/models/robot.glb')\n\nnodes.value.Body.geometry // Mesh, not any\n",[561,1461,1462,1490,1508,1512,1533,1551,1555,1596,1600],{"__ignoreMap":508},[564,1463,1464,1466,1469,1471,1474,1476,1479,1481,1483,1485,1488],{"class":566,"line":509},[564,1465,604],{"class":603},[564,1467,1468],{"class":603}," type",[564,1470,607],{"class":569},[564,1472,1473],{"class":610}," Mesh",[564,1475,663],{"class":569},[564,1477,1478],{"class":610}," MeshStandardMaterial",[564,1480,614],{"class":569},[564,1482,617],{"class":603},[564,1484,620],{"class":569},[564,1486,1487],{"class":590},"three",[564,1489,626],{"class":569},[564,1491,1492,1494,1496,1498,1500,1502,1504,1506],{"class":566,"line":510},[564,1493,604],{"class":603},[564,1495,607],{"class":569},[564,1497,611],{"class":610},[564,1499,614],{"class":569},[564,1501,617],{"class":603},[564,1503,620],{"class":569},[564,1505,623],{"class":590},[564,1507,626],{"class":569},[564,1509,1510],{"class":566,"line":629},[564,1511,632],{"emptyLinePlaceholder":516},[564,1513,1514,1517,1521,1523,1526,1528,1530],{"class":566,"line":635},[564,1515,1516],{"class":577},"interface",[564,1518,1520],{"class":1519},"sBMFI"," ModelNodes",[564,1522,607],{"class":569},[564,1524,1525],{"class":573}," Body",[564,1527,1092],{"class":569},[564,1529,1473],{"class":1519},[564,1531,1532],{"class":569}," }\n",[564,1534,1535,1537,1540,1542,1545,1547,1549],{"class":566,"line":558},[564,1536,1516],{"class":577},[564,1538,1539],{"class":1519}," ModelMaterials",[564,1541,607],{"class":569},[564,1543,1544],{"class":573}," Skin",[564,1546,1092],{"class":569},[564,1548,1478],{"class":1519},[564,1550,1532],{"class":569},[564,1552,1553],{"class":566,"line":686},[564,1554,632],{"emptyLinePlaceholder":516},[564,1556,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1578,1580,1582,1585,1587,1589,1592,1594],{"class":566,"line":696},[564,1558,638],{"class":577},[564,1560,607],{"class":569},[564,1562,666],{"class":610},[564,1564,663],{"class":569},[564,1566,671],{"class":610},[564,1568,674],{"class":569},[564,1570,677],{"class":569},[564,1572,611],{"class":680},[564,1574,570],{"class":569},[564,1576,1577],{"class":1519},"ModelNodes",[564,1579,663],{"class":569},[564,1581,1539],{"class":1519},[564,1583,1584],{"class":569},">",[564,1586,1074],{"class":610},[564,1588,1077],{"class":569},[564,1590,1591],{"class":590},"/models/robot.glb",[564,1593,1077],{"class":569},[564,1595,1101],{"class":610},[564,1597,1598],{"class":566,"line":701},[564,1599,632],{"emptyLinePlaceholder":516},[564,1601,1602,1604,1606,1608,1610,1613,1615,1618],{"class":566,"line":711},[564,1603,1154],{"class":610},[564,1605,1394],{"class":569},[564,1607,1397],{"class":610},[564,1609,1394],{"class":569},[564,1611,1612],{"class":610},"Body",[564,1614,1394],{"class":569},[564,1616,1617],{"class":610},"geometry ",[564,1619,1620],{"class":1379},"// Mesh, not any\n",[1622,1623,1624],"prose-note",{},[536,1625,1626,1627,1630],{},"These interfaces are a claim about the model, not a proof: nothing checks them against the file at\nruntime. ",[561,1628,1629],{},"tres gltf"," reads them off the model and writes them for you, which is the only version\nof this that cannot drift.",[545,1632,1634],{"id":1633},"generating-a-component-instead","Generating a Component Instead",[536,1636,1637,1638,1643],{},"For a whole model, writing an element per node by hand does not scale. The\n",[1015,1639,1642],{"href":1640,"rel":1641},"https://docs.tresjs.org/cli/gltf",[1019],"TresJS CLI"," generates that component from the model itself,\ntyped, with a slot for every node so your overrides survive the next export:",[552,1645,1649],{"className":1646,"code":1647,"language":1648,"meta":508,"style":508},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli gltf public/models/robot.glb\n# ✔ src/models/Robot.gen.vue\n#   3 slots: Head, Body, Base\n","bash",[561,1650,1651,1665,1670],{"__ignoreMap":508},[564,1652,1653,1656,1659,1662],{"class":566,"line":509},[564,1654,1655],{"class":1519},"npx",[564,1657,1658],{"class":590}," @tresjs/cli",[564,1660,1661],{"class":590}," gltf",[564,1663,1664],{"class":590}," public/models/robot.glb\n",[564,1666,1667],{"class":566,"line":510},[564,1668,1669],{"class":1379},"# ✔ src/models/Robot.gen.vue\n",[564,1671,1672],{"class":566,"line":629},[564,1673,1674],{"class":1379},"#   3 slots: Head, Body, Base\n",[1676,1677,1678],"read-more",{"to":20},[536,1679,1680],{},"The three ways to load a model, and when to reach for each one.",[1682,1683,1684],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":508,"searchDepth":509,"depth":510,"links":1686},[1687,1688,1689,1690,1691,1692],{"id":547,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{"id":1255,"depth":510,"text":1256},{"id":1332,"depth":510,"text":1333},{"id":1438,"depth":510,"text":1439},{"id":1633,"depth":510,"text":1634},{},{"title":133,"description":523},"mVv2TZo5-pqLqIwJ-gYXHQx7OoCZ9HEO3CnPATpAwMA",{"id":1697,"title":137,"body":1698,"description":2484,"extension":513,"links":514,"meta":2485,"navigation":516,"path":138,"seo":2486,"stem":139,"__hash__":2487},"docs/2.api/3.loaders/2.gltf-model.md",{"type":501,"value":1699,"toc":2478},[1700,1704,1715,1717,2046,2050,2057,2317,2321,2418,2434,2438,2456,2471,2475],[530,1701,1702],{},[533,1703],{},[536,1705,1706,1707,1709,1710,1714],{},"The ",[561,1708,137],{}," component is a wrapper around ",[1015,1711,1712],{"href":134},[561,1713,133],{}," composable and accepts the same options as props.",[545,1716,15],{"id":547},[549,1718,1719,1832],{},[552,1720,1723],{"className":554,"code":1721,"filename":556,"highlights":1722,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel :path=\"path\" />\n\u003C/template>\n",[510,701],[561,1724,1725,1745,1765,1769,1783,1791,1795,1803,1824],{"__ignoreMap":508},[564,1726,1727,1729,1731,1733,1735,1737,1739,1741,1743],{"class":566,"line":509},[564,1728,570],{"class":569},[564,1730,574],{"class":573},[564,1732,578],{"class":577},[564,1734,581],{"class":577},[564,1736,584],{"class":569},[564,1738,587],{"class":569},[564,1740,591],{"class":590},[564,1742,587],{"class":569},[564,1744,596],{"class":569},[564,1746,1748,1750,1752,1755,1757,1759,1761,1763],{"class":1747,"line":510},[566,600],[564,1749,604],{"class":603},[564,1751,607],{"class":569},[564,1753,1754],{"class":610}," GLTFModel",[564,1756,614],{"class":569},[564,1758,617],{"class":603},[564,1760,620],{"class":569},[564,1762,623],{"class":590},[564,1764,626],{"class":569},[564,1766,1767],{"class":566,"line":629},[564,1768,632],{"emptyLinePlaceholder":516},[564,1770,1771,1773,1775,1777,1779,1781],{"class":566,"line":635},[564,1772,638],{"class":577},[564,1774,641],{"class":610},[564,1776,584],{"class":569},[564,1778,620],{"class":569},[564,1780,648],{"class":590},[564,1782,626],{"class":569},[564,1784,1785,1787,1789],{"class":566,"line":558},[564,1786,689],{"class":569},[564,1788,574],{"class":573},[564,1790,596],{"class":569},[564,1792,1793],{"class":566,"line":686},[564,1794,632],{"emptyLinePlaceholder":516},[564,1796,1797,1799,1801],{"class":566,"line":696},[564,1798,570],{"class":569},[564,1800,706],{"class":573},[564,1802,596],{"class":569},[564,1804,1806,1808,1810,1813,1815,1817,1820,1822],{"class":1805,"line":701},[566,600],[564,1807,714],{"class":569},[564,1809,137],{"class":573},[564,1811,1812],{"class":577}," :path",[564,1814,584],{"class":569},[564,1816,587],{"class":569},[564,1818,1819],{"class":590},"path",[564,1821,587],{"class":569},[564,1823,744],{"class":569},[564,1825,1826,1828,1830],{"class":566,"line":711},[564,1827,689],{"class":569},[564,1829,706],{"class":573},[564,1831,596],{"class":569},[552,1833,1834],{"className":554,"code":756,"filename":757,"language":559,"meta":508,"style":508},[561,1835,1836,1856,1874,1892,1906,1914,1918,1926,1944,1962,1970,1978,1984,1996,2008,2012,2030,2038],{"__ignoreMap":508},[564,1837,1838,1840,1842,1844,1846,1848,1850,1852,1854],{"class":566,"line":509},[564,1839,570],{"class":569},[564,1841,574],{"class":573},[564,1843,578],{"class":577},[564,1845,581],{"class":577},[564,1847,584],{"class":569},[564,1849,587],{"class":569},[564,1851,591],{"class":590},[564,1853,587],{"class":569},[564,1855,596],{"class":569},[564,1857,1858,1860,1862,1864,1866,1868,1870,1872],{"class":566,"line":510},[564,1859,604],{"class":603},[564,1861,607],{"class":569},[564,1863,788],{"class":610},[564,1865,614],{"class":569},[564,1867,617],{"class":603},[564,1869,620],{"class":569},[564,1871,623],{"class":590},[564,1873,626],{"class":569},[564,1875,1876,1878,1880,1882,1884,1886,1888,1890],{"class":566,"line":629},[564,1877,604],{"class":603},[564,1879,607],{"class":569},[564,1881,807],{"class":610},[564,1883,614],{"class":569},[564,1885,617],{"class":603},[564,1887,620],{"class":569},[564,1889,816],{"class":590},[564,1891,626],{"class":569},[564,1893,1894,1896,1898,1900,1902,1904],{"class":566,"line":635},[564,1895,604],{"class":603},[564,1897,825],{"class":610},[564,1899,828],{"class":603},[564,1901,620],{"class":569},[564,1903,833],{"class":590},[564,1905,626],{"class":569},[564,1907,1908,1910,1912],{"class":566,"line":558},[564,1909,689],{"class":569},[564,1911,574],{"class":573},[564,1913,596],{"class":569},[564,1915,1916],{"class":566,"line":686},[564,1917,632],{"emptyLinePlaceholder":516},[564,1919,1920,1922,1924],{"class":566,"line":696},[564,1921,570],{"class":569},[564,1923,706],{"class":573},[564,1925,596],{"class":569},[564,1927,1928,1930,1932,1934,1936,1938,1940,1942],{"class":566,"line":701},[564,1929,714],{"class":569},[564,1931,862],{"class":573},[564,1933,865],{"class":577},[564,1935,584],{"class":569},[564,1937,587],{"class":569},[564,1939,872],{"class":590},[564,1941,587],{"class":569},[564,1943,596],{"class":569},[564,1945,1946,1948,1950,1952,1954,1956,1958,1960],{"class":566,"line":711},[564,1947,881],{"class":569},[564,1949,884],{"class":573},[564,1951,887],{"class":577},[564,1953,584],{"class":569},[564,1955,587],{"class":569},[564,1957,894],{"class":590},[564,1959,587],{"class":569},[564,1961,744],{"class":569},[564,1963,1964,1966,1968],{"class":566,"line":747},[564,1965,881],{"class":569},[564,1967,905],{"class":573},[564,1969,744],{"class":569},[564,1971,1972,1974,1976],{"class":566,"line":910},[564,1973,881],{"class":569},[564,1975,915],{"class":573},[564,1977,744],{"class":569},[564,1979,1980,1982],{"class":566,"line":920},[564,1981,881],{"class":569},[564,1983,925],{"class":573},[564,1985,1986,1988,1990,1992,1994],{"class":566,"line":928},[564,1987,931],{"class":577},[564,1989,584],{"class":569},[564,1991,587],{"class":569},[564,1993,938],{"class":590},[564,1995,941],{"class":569},[564,1997,1998,2000,2002,2004,2006],{"class":566,"line":944},[564,1999,947],{"class":577},[564,2001,584],{"class":569},[564,2003,587],{"class":569},[564,2005,954],{"class":590},[564,2007,941],{"class":569},[564,2009,2010],{"class":566,"line":959},[564,2011,962],{"class":569},[564,2013,2014,2016,2018,2020,2022,2024,2026,2028],{"class":566,"line":965},[564,2015,881],{"class":569},[564,2017,970],{"class":573},[564,2019,973],{"class":577},[564,2021,584],{"class":569},[564,2023,587],{"class":569},[564,2025,980],{"class":590},[564,2027,587],{"class":569},[564,2029,744],{"class":569},[564,2031,2032,2034,2036],{"class":566,"line":987},[564,2033,990],{"class":569},[564,2035,862],{"class":573},[564,2037,596],{"class":569},[564,2039,2040,2042,2044],{"class":566,"line":997},[564,2041,689],{"class":569},[564,2043,706],{"class":573},[564,2045,596],{"class":569},[545,2047,2049],{"id":2048},"model-reference","Model reference",[536,2051,2052,2053,2056],{},"The component exposes the loaded GLTF as ",[561,2054,2055],{},"instance",", so a template ref gets you the parsed model:",[552,2058,2060],{"className":554,"code":2059,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\nimport { ref, watch } from 'vue'\n\nconst modelRef = ref\u003CInstanceType\u003Ctypeof GLTFModel>>()\n\n// `instance` is null until the file lands, so watch it rather than the ref\nwatch(() => modelRef.value?.instance, (gltf) => {\n  gltf?.scene.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n  />\n\u003C/template>\n",[561,2061,2062,2082,2100,2124,2128,2155,2159,2164,2206,2243,2249,2257,2261,2269,2276,2290,2304,2309],{"__ignoreMap":508},[564,2063,2064,2066,2068,2070,2072,2074,2076,2078,2080],{"class":566,"line":509},[564,2065,570],{"class":569},[564,2067,574],{"class":573},[564,2069,578],{"class":577},[564,2071,581],{"class":577},[564,2073,584],{"class":569},[564,2075,587],{"class":569},[564,2077,591],{"class":590},[564,2079,587],{"class":569},[564,2081,596],{"class":569},[564,2083,2084,2086,2088,2090,2092,2094,2096,2098],{"class":566,"line":510},[564,2085,604],{"class":603},[564,2087,607],{"class":569},[564,2089,1754],{"class":610},[564,2091,614],{"class":569},[564,2093,617],{"class":603},[564,2095,620],{"class":569},[564,2097,623],{"class":590},[564,2099,626],{"class":569},[564,2101,2102,2104,2106,2109,2111,2114,2116,2118,2120,2122],{"class":566,"line":629},[564,2103,604],{"class":603},[564,2105,607],{"class":569},[564,2107,2108],{"class":610}," ref",[564,2110,663],{"class":569},[564,2112,2113],{"class":610}," watch",[564,2115,614],{"class":569},[564,2117,617],{"class":603},[564,2119,620],{"class":569},[564,2121,559],{"class":590},[564,2123,626],{"class":569},[564,2125,2126],{"class":566,"line":635},[564,2127,632],{"emptyLinePlaceholder":516},[564,2129,2130,2132,2135,2137,2139,2141,2144,2147,2149,2152],{"class":566,"line":558},[564,2131,638],{"class":577},[564,2133,2134],{"class":610}," modelRef ",[564,2136,584],{"class":569},[564,2138,2108],{"class":680},[564,2140,570],{"class":569},[564,2142,2143],{"class":1519},"InstanceType",[564,2145,2146],{"class":569},"\u003Ctypeof",[564,2148,1754],{"class":610},[564,2150,2151],{"class":569},">>",[564,2153,2154],{"class":610},"()\n",[564,2156,2157],{"class":566,"line":686},[564,2158,632],{"emptyLinePlaceholder":516},[564,2160,2161],{"class":566,"line":696},[564,2162,2163],{"class":1379},"// `instance` is null until the file lands, so watch it rather than the ref\n",[564,2165,2166,2169,2171,2174,2177,2180,2182,2184,2187,2189,2191,2194,2198,2201,2203],{"class":566,"line":701},[564,2167,2168],{"class":680},"watch",[564,2170,1074],{"class":610},[564,2172,2173],{"class":569},"()",[564,2175,2176],{"class":577}," =>",[564,2178,2179],{"class":610}," modelRef",[564,2181,1394],{"class":569},[564,2183,1397],{"class":610},[564,2185,2186],{"class":569},"?.",[564,2188,2055],{"class":610},[564,2190,663],{"class":569},[564,2192,2193],{"class":569}," (",[564,2195,2197],{"class":2196},"sHdIc","gltf",[564,2199,2200],{"class":569},")",[564,2202,2176],{"class":577},[564,2204,2205],{"class":569}," {\n",[564,2207,2208,2211,2213,2216,2218,2221,2223,2226,2228,2232,2234,2237,2239,2241],{"class":566,"line":711},[564,2209,2210],{"class":610},"  gltf",[564,2212,2186],{"class":569},[564,2214,2215],{"class":610},"scene",[564,2217,1394],{"class":569},[564,2219,2220],{"class":610},"position",[564,2222,1394],{"class":569},[564,2224,2225],{"class":680},"set",[564,2227,1074],{"class":573},[564,2229,2231],{"class":2230},"sbssI","0",[564,2233,663],{"class":569},[564,2235,2236],{"class":2230}," 0",[564,2238,663],{"class":569},[564,2240,2236],{"class":2230},[564,2242,1101],{"class":573},[564,2244,2245,2247],{"class":566,"line":747},[564,2246,674],{"class":569},[564,2248,1101],{"class":610},[564,2250,2251,2253,2255],{"class":566,"line":910},[564,2252,689],{"class":569},[564,2254,574],{"class":573},[564,2256,596],{"class":569},[564,2258,2259],{"class":566,"line":920},[564,2260,632],{"emptyLinePlaceholder":516},[564,2262,2263,2265,2267],{"class":566,"line":928},[564,2264,570],{"class":569},[564,2266,706],{"class":573},[564,2268,596],{"class":569},[564,2270,2271,2273],{"class":566,"line":944},[564,2272,714],{"class":569},[564,2274,2275],{"class":573},"GLTFModel\n",[564,2277,2278,2281,2283,2285,2288],{"class":566,"line":959},[564,2279,2280],{"class":577},"    ref",[564,2282,584],{"class":569},[564,2284,587],{"class":569},[564,2286,2287],{"class":590},"modelRef",[564,2289,941],{"class":569},[564,2291,2292,2295,2297,2299,2302],{"class":566,"line":965},[564,2293,2294],{"class":577},"    path",[564,2296,584],{"class":569},[564,2298,587],{"class":569},[564,2300,2301],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[564,2303,941],{"class":569},[564,2305,2306],{"class":566,"line":987},[564,2307,2308],{"class":569},"  />\n",[564,2310,2311,2313,2315],{"class":566,"line":997},[564,2312,689],{"class":569},[564,2314,706],{"class":573},[564,2316,596],{"class":569},[545,2318,2320],{"id":2319},"props","Props",[1107,2322,2323,2334],{},[1110,2324,2325],{},[1113,2326,2327,2330,2332],{},[1116,2328,2329],{"align":1118},"Prop",[1116,2331,1125],{"align":1118},[1116,2333,1269],{},[1127,2335,2336,2353,2370,2384,2402],{},[1113,2337,2338,2342,2348],{},[1132,2339,2340],{"align":1118},[561,2341,1819],{},[1132,2343,2344,2345,1394],{"align":1118},"Path to the model file. ",[540,2346,2347],{},"Required",[1132,2349,2350],{},[561,2351,2352],{},"undefined",[1113,2354,2355,2359,2366],{},[1132,2356,2357],{"align":1118},[561,2358,1012],{},[1132,2360,2361,2362,2365],{"align":1118},"Enable ",[1015,2363,1020],{"href":1017,"rel":2364},[1019]," for the model.",[1132,2367,2368],{},[561,2369,1289],{},[1113,2371,2372,2376,2379],{},[1132,2373,2374],{"align":1118},[561,2375,1299],{},[1132,2377,2378],{"align":1118},"Path to a Draco decoder.",[1132,2380,2381],{},[561,2382,2383],{},"'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'",[1113,2385,2386,2391,2398],{},[1132,2387,2388],{"align":1118},[561,2389,2390],{},"castShadow",[1132,2392,2393,2394,2397],{"align":1118},"Apply ",[561,2395,2396],{},"cast-shadow"," to all meshes inside your model.",[1132,2399,2400],{},[561,2401,1289],{},[1113,2403,2404,2409,2414],{},[1132,2405,2406],{"align":1118},[561,2407,2408],{},"receiveShadow",[1132,2410,2393,2411,2397],{"align":1118},[561,2412,2413],{},"receive-shadow",[1132,2415,2416],{},[561,2417,1289],{},[1622,2419,2420],{},[536,2421,2422,2424,2425,2429,2430,2433],{},[561,2423,1819],{}," is not reactive: the component reads it once on setup. Use\n",[1015,2426,2427],{"href":134},[561,2428,133],{}," with a ",[561,2431,2432],{},"ref"," path if you need to swap models at runtime.",[545,2435,2437],{"id":2436},"when-to-reach-for-something-else","When to reach for something else",[536,2439,2440,2442,2443,2446,2447,2451,2452,2455],{},[561,2441,137],{}," renders the model's scene graph as-is, which means there is no element to hang a\nmaterial swap, a click handler or a ",[561,2444,2445],{},"v-if"," on. When you need that, use\n",[1015,2448,2449],{"href":134},[561,2450,133],{}," to compose the parts yourself, or let the\n",[1015,2453,1642],{"href":1640,"rel":2454},[1019]," generate a typed component with a slot per node:",[552,2457,2459],{"className":1646,"code":2458,"language":1648,"meta":508,"style":508},"npx @tresjs/cli gltf public/models/robot.glb\n",[561,2460,2461],{"__ignoreMap":508},[564,2462,2463,2465,2467,2469],{"class":566,"line":509},[564,2464,1655],{"class":1519},[564,2466,1658],{"class":590},[564,2468,1661],{"class":590},[564,2470,1664],{"class":590},[1676,2472,2473],{"to":20},[536,2474,1680],{},[1682,2476,2477],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":2479},[2480,2481,2482,2483],{"id":547,"depth":510,"text":15},{"id":2048,"depth":510,"text":2049},{"id":2319,"depth":510,"text":2320},{"id":2436,"depth":510,"text":2437},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":137,"description":2484},"p4XhK3Pj_fVq7UM9x8iv0ZyIb6SI_to_pSQUrYE8GQs",{"id":2489,"title":141,"body":2490,"description":3105,"extension":513,"links":514,"meta":3106,"navigation":516,"path":142,"seo":3107,"stem":143,"__hash__":3108},"docs/2.api/3.loaders/3.use-fbx.md",{"type":501,"value":2491,"toc":3099},[2492,2497,2502,2504,2893,2895,2976,2978,3004,3006,3008,3094,3096],[530,2493,2494],{},[2495,2496],"loaders-fbx",{},[536,2498,2499,2500,543],{},"A composable that allows you to easily load FBX models into your ",[540,2501,542],{},[545,2503,15],{"id":547},[549,2505,2506,2676],{},[552,2507,2510],{"className":554,"code":2508,"filename":556,"highlights":2509,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useFBX } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'\nconst { state, nodes, materials } = useFBX(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state\" :scale=\"0.025\" />\n\u003C/template>\n",[510,686],[561,2511,2512,2532,2552,2556,2571,2583,2608,2616,2620,2628,2668],{"__ignoreMap":508},[564,2513,2514,2516,2518,2520,2522,2524,2526,2528,2530],{"class":566,"line":509},[564,2515,570],{"class":569},[564,2517,574],{"class":573},[564,2519,578],{"class":577},[564,2521,581],{"class":577},[564,2523,584],{"class":569},[564,2525,587],{"class":569},[564,2527,591],{"class":590},[564,2529,587],{"class":569},[564,2531,596],{"class":569},[564,2533,2535,2537,2539,2542,2544,2546,2548,2550],{"class":2534,"line":510},[566,600],[564,2536,604],{"class":603},[564,2538,607],{"class":569},[564,2540,2541],{"class":610}," useFBX",[564,2543,614],{"class":569},[564,2545,617],{"class":603},[564,2547,620],{"class":569},[564,2549,623],{"class":590},[564,2551,626],{"class":569},[564,2553,2554],{"class":566,"line":629},[564,2555,632],{"emptyLinePlaceholder":516},[564,2557,2558,2560,2562,2564,2566,2569],{"class":566,"line":635},[564,2559,638],{"class":577},[564,2561,641],{"class":610},[564,2563,584],{"class":569},[564,2565,620],{"class":569},[564,2567,2568],{"class":590},"https://raw.githubusercontent.com/",[564,2570,626],{"class":569},[564,2572,2573,2576,2578,2581],{"class":566,"line":558},[564,2574,2575],{"class":569},"  +",[564,2577,620],{"class":569},[564,2579,2580],{"class":590},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[564,2582,626],{"class":569},[564,2584,2586,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606],{"class":2585,"line":686},[566,600],[564,2587,638],{"class":577},[564,2589,607],{"class":569},[564,2591,660],{"class":610},[564,2593,663],{"class":569},[564,2595,666],{"class":610},[564,2597,663],{"class":569},[564,2599,671],{"class":610},[564,2601,674],{"class":569},[564,2603,677],{"class":569},[564,2605,2541],{"class":680},[564,2607,683],{"class":610},[564,2609,2610,2612,2614],{"class":566,"line":696},[564,2611,689],{"class":569},[564,2613,574],{"class":573},[564,2615,596],{"class":569},[564,2617,2618],{"class":566,"line":701},[564,2619,632],{"emptyLinePlaceholder":516},[564,2621,2622,2624,2626],{"class":566,"line":711},[564,2623,570],{"class":569},[564,2625,706],{"class":573},[564,2627,596],{"class":569},[564,2629,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648,2650,2652,2654,2657,2659,2661,2664,2666],{"class":566,"line":747},[564,2631,714],{"class":569},[564,2633,717],{"class":573},[564,2635,720],{"class":577},[564,2637,584],{"class":569},[564,2639,587],{"class":569},[564,2641,727],{"class":590},[564,2643,587],{"class":569},[564,2645,732],{"class":577},[564,2647,584],{"class":569},[564,2649,587],{"class":569},[564,2651,727],{"class":590},[564,2653,587],{"class":569},[564,2655,2656],{"class":577}," :scale",[564,2658,584],{"class":569},[564,2660,587],{"class":569},[564,2662,2663],{"class":590},"0.025",[564,2665,587],{"class":569},[564,2667,744],{"class":569},[564,2669,2670,2672,2674],{"class":566,"line":910},[564,2671,689],{"class":569},[564,2673,706],{"class":573},[564,2675,596],{"class":569},[552,2677,2679],{"className":554,"code":2678,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#1F90FF\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,2680,2681,2701,2719,2737,2751,2759,2763,2771,2790,2809,2817,2825,2831,2843,2855,2859,2877,2885],{"__ignoreMap":508},[564,2682,2683,2685,2687,2689,2691,2693,2695,2697,2699],{"class":566,"line":509},[564,2684,570],{"class":569},[564,2686,574],{"class":573},[564,2688,578],{"class":577},[564,2690,581],{"class":577},[564,2692,584],{"class":569},[564,2694,587],{"class":569},[564,2696,591],{"class":590},[564,2698,587],{"class":569},[564,2700,596],{"class":569},[564,2702,2703,2705,2707,2709,2711,2713,2715,2717],{"class":566,"line":510},[564,2704,604],{"class":603},[564,2706,607],{"class":569},[564,2708,788],{"class":610},[564,2710,614],{"class":569},[564,2712,617],{"class":603},[564,2714,620],{"class":569},[564,2716,623],{"class":590},[564,2718,626],{"class":569},[564,2720,2721,2723,2725,2727,2729,2731,2733,2735],{"class":566,"line":629},[564,2722,604],{"class":603},[564,2724,607],{"class":569},[564,2726,807],{"class":610},[564,2728,614],{"class":569},[564,2730,617],{"class":603},[564,2732,620],{"class":569},[564,2734,816],{"class":590},[564,2736,626],{"class":569},[564,2738,2739,2741,2743,2745,2747,2749],{"class":566,"line":635},[564,2740,604],{"class":603},[564,2742,825],{"class":610},[564,2744,828],{"class":603},[564,2746,620],{"class":569},[564,2748,833],{"class":590},[564,2750,626],{"class":569},[564,2752,2753,2755,2757],{"class":566,"line":558},[564,2754,689],{"class":569},[564,2756,574],{"class":573},[564,2758,596],{"class":569},[564,2760,2761],{"class":566,"line":686},[564,2762,632],{"emptyLinePlaceholder":516},[564,2764,2765,2767,2769],{"class":566,"line":696},[564,2766,570],{"class":569},[564,2768,706],{"class":573},[564,2770,596],{"class":569},[564,2772,2773,2775,2777,2779,2781,2783,2786,2788],{"class":566,"line":701},[564,2774,714],{"class":569},[564,2776,862],{"class":573},[564,2778,865],{"class":577},[564,2780,584],{"class":569},[564,2782,587],{"class":569},[564,2784,2785],{"class":590},"#1F90FF",[564,2787,587],{"class":569},[564,2789,596],{"class":569},[564,2791,2792,2794,2796,2798,2800,2802,2805,2807],{"class":566,"line":711},[564,2793,881],{"class":569},[564,2795,884],{"class":573},[564,2797,887],{"class":577},[564,2799,584],{"class":569},[564,2801,587],{"class":569},[564,2803,2804],{"class":590},"[11, 11, 11]",[564,2806,587],{"class":569},[564,2808,744],{"class":569},[564,2810,2811,2813,2815],{"class":566,"line":747},[564,2812,881],{"class":569},[564,2814,905],{"class":573},[564,2816,744],{"class":569},[564,2818,2819,2821,2823],{"class":566,"line":910},[564,2820,881],{"class":569},[564,2822,915],{"class":573},[564,2824,744],{"class":569},[564,2826,2827,2829],{"class":566,"line":920},[564,2828,881],{"class":569},[564,2830,925],{"class":573},[564,2832,2833,2835,2837,2839,2841],{"class":566,"line":928},[564,2834,931],{"class":577},[564,2836,584],{"class":569},[564,2838,587],{"class":569},[564,2840,938],{"class":590},[564,2842,941],{"class":569},[564,2844,2845,2847,2849,2851,2853],{"class":566,"line":944},[564,2846,947],{"class":577},[564,2848,584],{"class":569},[564,2850,587],{"class":569},[564,2852,954],{"class":590},[564,2854,941],{"class":569},[564,2856,2857],{"class":566,"line":959},[564,2858,962],{"class":569},[564,2860,2861,2863,2865,2867,2869,2871,2873,2875],{"class":566,"line":965},[564,2862,881],{"class":569},[564,2864,970],{"class":573},[564,2866,973],{"class":577},[564,2868,584],{"class":569},[564,2870,587],{"class":569},[564,2872,980],{"class":590},[564,2874,587],{"class":569},[564,2876,744],{"class":569},[564,2878,2879,2881,2883],{"class":566,"line":987},[564,2880,990],{"class":569},[564,2882,862],{"class":573},[564,2884,596],{"class":569},[564,2886,2887,2889,2891],{"class":566,"line":997},[564,2888,689],{"class":569},[564,2890,706],{"class":573},[564,2892,596],{"class":569},[545,2894,1105],{"id":1104},[1107,2896,2897,2907],{},[1110,2898,2899],{},[1113,2900,2901,2903,2905],{},[1116,2902,1119],{"align":1118},[1116,2904,1122],{},[1116,2906,1125],{},[1127,2908,2909,2923,2937,2950,2962],{},[1113,2910,2911,2915,2920],{},[1132,2912,2913],{"align":1118},[540,2914,727],{},[1132,2916,2917],{},[561,2918,2919],{},"Group",[1132,2921,2922],{},"The loaded FBX model state",[1113,2924,2925,2929,2934],{},[1132,2926,2927],{"align":1118},[540,2928,1154],{},[1132,2930,2931],{},[561,2932,2933],{},"object",[1132,2935,2936],{},"Computed object containing all nodes in the scene",[1113,2938,2939,2943,2947],{},[1132,2940,2941],{"align":1118},[540,2942,1169],{},[1132,2944,2945],{},[561,2946,2933],{},[1132,2948,2949],{},"Computed object containing all materials in the scene",[1113,2951,2952,2956,2960],{},[1132,2953,2954],{"align":1118},[540,2955,1184],{},[1132,2957,2958],{},[561,2959,1284],{},[1132,2961,1192],{},[1113,2963,2964,2968,2973],{},[1132,2965,2966],{"align":1118},[540,2967,1244],{},[1132,2969,2970],{},[561,2971,2972],{},"() => Promise\u003Cvoid>",[1132,2974,2975],{},"Function to reload the model",[545,2977,1256],{"id":1255},[1107,2979,2980,2990],{},[1110,2981,2982],{},[1113,2983,2984,2986,2988],{},[1116,2985,1119],{"align":1118},[1116,2987,1122],{},[1116,2989,1125],{},[1127,2991,2992],{},[1113,2993,2994,2998,3002],{},[1132,2995,2996],{"align":1118},[540,2997,1319],{},[1132,2999,3000],{},[561,3001,1324],{},[1132,3003,1329],{},[545,3005,1333],{"id":1332},[536,3007,1336],{},[552,3009,3011],{"className":1024,"code":3010,"language":591,"meta":508,"style":508},"const { nodes, materials } = useFBX('/model.fbx')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[561,3012,3013,3042,3046,3050,3068,3072,3076],{"__ignoreMap":508},[564,3014,3015,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3038,3040],{"class":566,"line":509},[564,3016,638],{"class":577},[564,3018,607],{"class":569},[564,3020,666],{"class":610},[564,3022,663],{"class":569},[564,3024,671],{"class":610},[564,3026,674],{"class":569},[564,3028,677],{"class":569},[564,3030,2541],{"class":680},[564,3032,1074],{"class":610},[564,3034,1077],{"class":569},[564,3036,3037],{"class":590},"/model.fbx",[564,3039,1077],{"class":569},[564,3041,1101],{"class":610},[564,3043,3044],{"class":566,"line":510},[564,3045,632],{"emptyLinePlaceholder":516},[564,3047,3048],{"class":566,"line":629},[564,3049,1380],{"class":1379},[564,3051,3052,3054,3056,3058,3060,3062,3064,3066],{"class":566,"line":635},[564,3053,638],{"class":577},[564,3055,1387],{"class":610},[564,3057,584],{"class":569},[564,3059,666],{"class":610},[564,3061,1394],{"class":569},[564,3063,1397],{"class":610},[564,3065,1394],{"class":569},[564,3067,1402],{"class":610},[564,3069,3070],{"class":566,"line":558},[564,3071,632],{"emptyLinePlaceholder":516},[564,3073,3074],{"class":566,"line":686},[564,3075,1411],{"class":1379},[564,3077,3078,3080,3082,3084,3086,3088,3090,3092],{"class":566,"line":696},[564,3079,638],{"class":577},[564,3081,1418],{"class":610},[564,3083,584],{"class":569},[564,3085,1423],{"class":610},[564,3087,1394],{"class":569},[564,3089,1397],{"class":610},[564,3091,1394],{"class":569},[564,3093,1432],{"class":610},[536,3095,1435],{},[1682,3097,3098],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":3100},[3101,3102,3103,3104],{"id":547,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{"id":1255,"depth":510,"text":1256},{"id":1332,"depth":510,"text":1333},"A composable to load FBX models in TresJS scenes.",{},{"title":141,"description":3105},"a0FODUjY-1cIilnPPnu0dmaRDyIq0-nUrGnriL5rksc",{"id":3110,"title":145,"body":3111,"description":3745,"extension":513,"links":514,"meta":3746,"navigation":516,"path":146,"seo":3747,"stem":147,"__hash__":3748},"docs/2.api/3.loaders/4.fbx-model.md",{"type":501,"value":3112,"toc":3740},[3113,3117,3125,3127,3455,3457,3466,3680,3682,3737],[530,3114,3115],{},[2495,3116],{},[536,3118,1706,3119,1709,3121,1714],{},[561,3120,145],{},[1015,3122,3123],{"href":142},[561,3124,141],{},[545,3126,15],{"id":547},[549,3128,3129,3241],{},[552,3130,3133],{"className":554,"code":3131,"filename":556,"highlights":3132,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { FBXModel } from '@tresjs/cientos'\n\nconst path = './Jeep_done.fbx'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel :path=\"path\" />\n\u003C/template>\n",[510,701],[561,3134,3135,3155,3175,3179,3194,3202,3206,3214,3233],{"__ignoreMap":508},[564,3136,3137,3139,3141,3143,3145,3147,3149,3151,3153],{"class":566,"line":509},[564,3138,570],{"class":569},[564,3140,574],{"class":573},[564,3142,578],{"class":577},[564,3144,581],{"class":577},[564,3146,584],{"class":569},[564,3148,587],{"class":569},[564,3150,591],{"class":590},[564,3152,587],{"class":569},[564,3154,596],{"class":569},[564,3156,3158,3160,3162,3165,3167,3169,3171,3173],{"class":3157,"line":510},[566,600],[564,3159,604],{"class":603},[564,3161,607],{"class":569},[564,3163,3164],{"class":610}," FBXModel",[564,3166,614],{"class":569},[564,3168,617],{"class":603},[564,3170,620],{"class":569},[564,3172,623],{"class":590},[564,3174,626],{"class":569},[564,3176,3177],{"class":566,"line":629},[564,3178,632],{"emptyLinePlaceholder":516},[564,3180,3181,3183,3185,3187,3189,3192],{"class":566,"line":635},[564,3182,638],{"class":577},[564,3184,641],{"class":610},[564,3186,584],{"class":569},[564,3188,620],{"class":569},[564,3190,3191],{"class":590},"./Jeep_done.fbx",[564,3193,626],{"class":569},[564,3195,3196,3198,3200],{"class":566,"line":558},[564,3197,689],{"class":569},[564,3199,574],{"class":573},[564,3201,596],{"class":569},[564,3203,3204],{"class":566,"line":686},[564,3205,632],{"emptyLinePlaceholder":516},[564,3207,3208,3210,3212],{"class":566,"line":696},[564,3209,570],{"class":569},[564,3211,706],{"class":573},[564,3213,596],{"class":569},[564,3215,3217,3219,3221,3223,3225,3227,3229,3231],{"class":3216,"line":701},[566,600],[564,3218,714],{"class":569},[564,3220,145],{"class":573},[564,3222,1812],{"class":577},[564,3224,584],{"class":569},[564,3226,587],{"class":569},[564,3228,1819],{"class":590},[564,3230,587],{"class":569},[564,3232,744],{"class":569},[564,3234,3235,3237,3239],{"class":566,"line":711},[564,3236,689],{"class":569},[564,3238,706],{"class":573},[564,3240,596],{"class":569},[552,3242,3243],{"className":554,"code":756,"filename":757,"language":559,"meta":508,"style":508},[561,3244,3245,3265,3283,3301,3315,3323,3327,3335,3353,3371,3379,3387,3393,3405,3417,3421,3439,3447],{"__ignoreMap":508},[564,3246,3247,3249,3251,3253,3255,3257,3259,3261,3263],{"class":566,"line":509},[564,3248,570],{"class":569},[564,3250,574],{"class":573},[564,3252,578],{"class":577},[564,3254,581],{"class":577},[564,3256,584],{"class":569},[564,3258,587],{"class":569},[564,3260,591],{"class":590},[564,3262,587],{"class":569},[564,3264,596],{"class":569},[564,3266,3267,3269,3271,3273,3275,3277,3279,3281],{"class":566,"line":510},[564,3268,604],{"class":603},[564,3270,607],{"class":569},[564,3272,788],{"class":610},[564,3274,614],{"class":569},[564,3276,617],{"class":603},[564,3278,620],{"class":569},[564,3280,623],{"class":590},[564,3282,626],{"class":569},[564,3284,3285,3287,3289,3291,3293,3295,3297,3299],{"class":566,"line":629},[564,3286,604],{"class":603},[564,3288,607],{"class":569},[564,3290,807],{"class":610},[564,3292,614],{"class":569},[564,3294,617],{"class":603},[564,3296,620],{"class":569},[564,3298,816],{"class":590},[564,3300,626],{"class":569},[564,3302,3303,3305,3307,3309,3311,3313],{"class":566,"line":635},[564,3304,604],{"class":603},[564,3306,825],{"class":610},[564,3308,828],{"class":603},[564,3310,620],{"class":569},[564,3312,833],{"class":590},[564,3314,626],{"class":569},[564,3316,3317,3319,3321],{"class":566,"line":558},[564,3318,689],{"class":569},[564,3320,574],{"class":573},[564,3322,596],{"class":569},[564,3324,3325],{"class":566,"line":686},[564,3326,632],{"emptyLinePlaceholder":516},[564,3328,3329,3331,3333],{"class":566,"line":696},[564,3330,570],{"class":569},[564,3332,706],{"class":573},[564,3334,596],{"class":569},[564,3336,3337,3339,3341,3343,3345,3347,3349,3351],{"class":566,"line":701},[564,3338,714],{"class":569},[564,3340,862],{"class":573},[564,3342,865],{"class":577},[564,3344,584],{"class":569},[564,3346,587],{"class":569},[564,3348,872],{"class":590},[564,3350,587],{"class":569},[564,3352,596],{"class":569},[564,3354,3355,3357,3359,3361,3363,3365,3367,3369],{"class":566,"line":711},[564,3356,881],{"class":569},[564,3358,884],{"class":573},[564,3360,887],{"class":577},[564,3362,584],{"class":569},[564,3364,587],{"class":569},[564,3366,894],{"class":590},[564,3368,587],{"class":569},[564,3370,744],{"class":569},[564,3372,3373,3375,3377],{"class":566,"line":747},[564,3374,881],{"class":569},[564,3376,905],{"class":573},[564,3378,744],{"class":569},[564,3380,3381,3383,3385],{"class":566,"line":910},[564,3382,881],{"class":569},[564,3384,915],{"class":573},[564,3386,744],{"class":569},[564,3388,3389,3391],{"class":566,"line":920},[564,3390,881],{"class":569},[564,3392,925],{"class":573},[564,3394,3395,3397,3399,3401,3403],{"class":566,"line":928},[564,3396,931],{"class":577},[564,3398,584],{"class":569},[564,3400,587],{"class":569},[564,3402,938],{"class":590},[564,3404,941],{"class":569},[564,3406,3407,3409,3411,3413,3415],{"class":566,"line":944},[564,3408,947],{"class":577},[564,3410,584],{"class":569},[564,3412,587],{"class":569},[564,3414,954],{"class":590},[564,3416,941],{"class":569},[564,3418,3419],{"class":566,"line":959},[564,3420,962],{"class":569},[564,3422,3423,3425,3427,3429,3431,3433,3435,3437],{"class":566,"line":965},[564,3424,881],{"class":569},[564,3426,970],{"class":573},[564,3428,973],{"class":577},[564,3430,584],{"class":569},[564,3432,587],{"class":569},[564,3434,980],{"class":590},[564,3436,587],{"class":569},[564,3438,744],{"class":569},[564,3440,3441,3443,3445],{"class":566,"line":987},[564,3442,990],{"class":569},[564,3444,862],{"class":573},[564,3446,596],{"class":569},[564,3448,3449,3451,3453],{"class":566,"line":997},[564,3450,689],{"class":569},[564,3452,706],{"class":573},[564,3454,596],{"class":569},[545,3456,2049],{"id":2048},[536,3458,3459,3460,3462,3463,3465],{},"You can access the model reference by passing a ",[561,3461,2432],{}," to the ",[561,3464,145],{}," component and then using it to get the object.",[552,3467,3469],{"className":554,"code":3468,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from '@tresjs/core'\nimport { FBXModel } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTresObject>()\n\nwatch(modelRef, (model) => {\n  // Do something with the model\n  model.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx\"\n  />\n\u003C/template>\n",[561,3470,3471,3491,3512,3530,3534,3554,3558,3578,3583,3610,3616,3624,3628,3636,3643,3655,3668,3672],{"__ignoreMap":508},[564,3472,3473,3475,3477,3479,3481,3483,3485,3487,3489],{"class":566,"line":509},[564,3474,570],{"class":569},[564,3476,574],{"class":573},[564,3478,578],{"class":577},[564,3480,581],{"class":577},[564,3482,584],{"class":569},[564,3484,587],{"class":569},[564,3486,591],{"class":590},[564,3488,587],{"class":569},[564,3490,596],{"class":569},[564,3492,3493,3495,3497,3499,3502,3504,3506,3508,3510],{"class":566,"line":510},[564,3494,604],{"class":603},[564,3496,1468],{"class":603},[564,3498,607],{"class":569},[564,3500,3501],{"class":610}," TresObject",[564,3503,614],{"class":569},[564,3505,617],{"class":603},[564,3507,620],{"class":569},[564,3509,816],{"class":590},[564,3511,626],{"class":569},[564,3513,3514,3516,3518,3520,3522,3524,3526,3528],{"class":566,"line":629},[564,3515,604],{"class":603},[564,3517,607],{"class":569},[564,3519,3164],{"class":610},[564,3521,614],{"class":569},[564,3523,617],{"class":603},[564,3525,620],{"class":569},[564,3527,623],{"class":590},[564,3529,626],{"class":569},[564,3531,3532],{"class":566,"line":635},[564,3533,632],{"emptyLinePlaceholder":516},[564,3535,3536,3538,3540,3542,3545,3547,3550,3552],{"class":566,"line":558},[564,3537,638],{"class":577},[564,3539,2134],{"class":610},[564,3541,584],{"class":569},[564,3543,3544],{"class":680}," shallowRef",[564,3546,570],{"class":569},[564,3548,3549],{"class":1519},"TresObject",[564,3551,1584],{"class":569},[564,3553,2154],{"class":610},[564,3555,3556],{"class":566,"line":686},[564,3557,632],{"emptyLinePlaceholder":516},[564,3559,3560,3562,3565,3567,3569,3572,3574,3576],{"class":566,"line":696},[564,3561,2168],{"class":680},[564,3563,3564],{"class":610},"(modelRef",[564,3566,663],{"class":569},[564,3568,2193],{"class":569},[564,3570,3571],{"class":2196},"model",[564,3573,2200],{"class":569},[564,3575,2176],{"class":577},[564,3577,2205],{"class":569},[564,3579,3580],{"class":566,"line":701},[564,3581,3582],{"class":1379},"  // Do something with the model\n",[564,3584,3585,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608],{"class":566,"line":711},[564,3586,3587],{"class":610},"  model",[564,3589,1394],{"class":569},[564,3591,2220],{"class":610},[564,3593,1394],{"class":569},[564,3595,2225],{"class":680},[564,3597,1074],{"class":573},[564,3599,2231],{"class":2230},[564,3601,663],{"class":569},[564,3603,2236],{"class":2230},[564,3605,663],{"class":569},[564,3607,2236],{"class":2230},[564,3609,1101],{"class":573},[564,3611,3612,3614],{"class":566,"line":747},[564,3613,674],{"class":569},[564,3615,1101],{"class":610},[564,3617,3618,3620,3622],{"class":566,"line":910},[564,3619,689],{"class":569},[564,3621,574],{"class":573},[564,3623,596],{"class":569},[564,3625,3626],{"class":566,"line":920},[564,3627,632],{"emptyLinePlaceholder":516},[564,3629,3630,3632,3634],{"class":566,"line":928},[564,3631,570],{"class":569},[564,3633,706],{"class":573},[564,3635,596],{"class":569},[564,3637,3638,3640],{"class":566,"line":944},[564,3639,714],{"class":569},[564,3641,3642],{"class":573},"FBXModel\n",[564,3644,3645,3647,3649,3651,3653],{"class":566,"line":959},[564,3646,2280],{"class":577},[564,3648,584],{"class":569},[564,3650,587],{"class":569},[564,3652,2287],{"class":590},[564,3654,941],{"class":569},[564,3656,3657,3659,3661,3663,3666],{"class":566,"line":965},[564,3658,2294],{"class":577},[564,3660,584],{"class":569},[564,3662,587],{"class":569},[564,3664,3665],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[564,3667,941],{"class":569},[564,3669,3670],{"class":566,"line":987},[564,3671,2308],{"class":569},[564,3673,3674,3676,3678],{"class":566,"line":997},[564,3675,689],{"class":569},[564,3677,706],{"class":573},[564,3679,596],{"class":569},[545,3681,2320],{"id":2319},[1107,3683,3684,3694],{},[1110,3685,3686],{},[1113,3687,3688,3690,3692],{},[1116,3689,2329],{"align":1118},[1116,3691,1125],{"align":1118},[1116,3693,1269],{},[1127,3695,3696,3709,3723],{},[1113,3697,3698,3702,3705],{},[1132,3699,3700],{"align":1118},[561,3701,1819],{},[1132,3703,3704],{"align":1118},"Path to the model file.",[1132,3706,3707],{},[561,3708,2352],{},[1113,3710,3711,3715,3719],{},[1132,3712,3713],{"align":1118},[561,3714,2390],{},[1132,3716,2393,3717,2397],{"align":1118},[561,3718,2396],{},[1132,3720,3721],{},[561,3722,1289],{},[1113,3724,3725,3729,3733],{},[1132,3726,3727],{"align":1118},[561,3728,2408],{},[1132,3730,2393,3731,2397],{"align":1118},[561,3732,2413],{},[1132,3734,3735],{},[561,3736,1289],{},[1682,3738,3739],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":3741},[3742,3743,3744],{"id":547,"depth":510,"text":15},{"id":2048,"depth":510,"text":2049},{"id":2319,"depth":510,"text":2320},"A component based on useFBX to load models in TresJS scenes.",{},{"title":145,"description":3745},"j1JukrpGAkW0gX6FKFZWThJUv3fBnEg_xZmIH8lkEcc",{"id":3750,"title":149,"body":3751,"description":4401,"extension":513,"links":514,"meta":4402,"navigation":516,"path":150,"seo":4403,"stem":151,"__hash__":4404},"docs/2.api/3.loaders/5.use-texture.md",{"type":501,"value":3752,"toc":4395},[3753,3758,3769,3771,3929,3931,3983,3985,4040,4044,4051,4392],[530,3754,3755],{},[3756,3757],"loaders-use-texture",{},[536,3759,3760,3761,3766,3767,543],{},"A composable that allows you to load textures using the ",[1015,3762,3765],{"href":3763,"rel":3764},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1019],"Three.js texture loader"," into your ",[540,3768,542],{},[545,3770,15],{"id":547},[552,3772,3775],{"className":554,"code":3773,"highlights":3774,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useTexture } from '@tresjs/cientos'\n\nconst { state: texture, isLoading, error } = useTexture(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :map=\"texture\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[510,635,747],[561,3776,3777,3797,3817,3821,3853,3861,3865,3873,3882,3891,3913,3921],{"__ignoreMap":508},[564,3778,3779,3781,3783,3785,3787,3789,3791,3793,3795],{"class":566,"line":509},[564,3780,570],{"class":569},[564,3782,574],{"class":573},[564,3784,578],{"class":577},[564,3786,581],{"class":577},[564,3788,584],{"class":569},[564,3790,587],{"class":569},[564,3792,591],{"class":590},[564,3794,587],{"class":569},[564,3796,596],{"class":569},[564,3798,3800,3802,3804,3807,3809,3811,3813,3815],{"class":3799,"line":510},[566,600],[564,3801,604],{"class":603},[564,3803,607],{"class":569},[564,3805,3806],{"class":610}," useTexture",[564,3808,614],{"class":569},[564,3810,617],{"class":603},[564,3812,620],{"class":569},[564,3814,623],{"class":590},[564,3816,626],{"class":569},[564,3818,3819],{"class":566,"line":629},[564,3820,632],{"emptyLinePlaceholder":516},[564,3822,3824,3826,3828,3830,3832,3835,3837,3840,3842,3845,3847,3849,3851],{"class":3823,"line":635},[566,600],[564,3825,638],{"class":577},[564,3827,607],{"class":569},[564,3829,660],{"class":573},[564,3831,1092],{"class":569},[564,3833,3834],{"class":610}," texture",[564,3836,663],{"class":569},[564,3838,3839],{"class":610}," isLoading",[564,3841,663],{"class":569},[564,3843,3844],{"class":610}," error ",[564,3846,674],{"class":569},[564,3848,677],{"class":569},[564,3850,3806],{"class":680},[564,3852,683],{"class":610},[564,3854,3855,3857,3859],{"class":566,"line":558},[564,3856,689],{"class":569},[564,3858,574],{"class":573},[564,3860,596],{"class":569},[564,3862,3863],{"class":566,"line":686},[564,3864,632],{"emptyLinePlaceholder":516},[564,3866,3867,3869,3871],{"class":566,"line":696},[564,3868,570],{"class":569},[564,3870,706],{"class":573},[564,3872,596],{"class":569},[564,3874,3875,3877,3880],{"class":566,"line":701},[564,3876,714],{"class":569},[564,3878,3879],{"class":573},"TresMesh",[564,3881,596],{"class":569},[564,3883,3884,3886,3889],{"class":566,"line":711},[564,3885,881],{"class":569},[564,3887,3888],{"class":573},"TresSphereGeometry",[564,3890,744],{"class":569},[564,3892,3894,3896,3899,3902,3904,3906,3909,3911],{"class":3893,"line":747},[566,600],[564,3895,881],{"class":569},[564,3897,3898],{"class":573},"TresMeshStandardMaterial",[564,3900,3901],{"class":577}," :map",[564,3903,584],{"class":569},[564,3905,587],{"class":569},[564,3907,3908],{"class":590},"texture",[564,3910,587],{"class":569},[564,3912,744],{"class":569},[564,3914,3915,3917,3919],{"class":566,"line":910},[564,3916,990],{"class":569},[564,3918,3879],{"class":573},[564,3920,596],{"class":569},[564,3922,3923,3925,3927],{"class":566,"line":920},[564,3924,689],{"class":569},[564,3926,706],{"class":573},[564,3928,596],{"class":569},[545,3930,1256],{"id":1255},[1107,3932,3933,3945],{},[1110,3934,3935],{},[1113,3936,3937,3939,3941,3943],{},[1116,3938,1119],{"align":1118},[1116,3940,1122],{},[1116,3942,1269],{},[1116,3944,1125],{},[1127,3946,3947,3964],{},[1113,3948,3949,3953,3957,3961],{},[1132,3950,3951],{"align":1118},[540,3952,1819],{},[1132,3954,3955],{},[561,3956,1304],{},[1132,3958,3959],{},[561,3960,2352],{},[1132,3962,3963],{},"The path to the texture.",[1113,3965,3966,3971,3976,3980],{},[1132,3967,3968],{"align":1118},[540,3969,3970],{},"manager",[1132,3972,3973],{},[561,3974,3975],{},"THREE.LoadingManager",[1132,3977,3978],{},[561,3979,2352],{},[1132,3981,3982],{},"The loading manager to use for the texture.",[545,3984,1105],{"id":1104},[1107,3986,3987,3997],{},[1110,3988,3989],{},[1113,3990,3991,3993,3995],{},[1116,3992,1119],{"align":1118},[1116,3994,1122],{"align":1118},[1116,3996,1125],{"align":1118},[1127,3998,3999,4013,4026],{},[1113,4000,4001,4005,4010],{},[1132,4002,4003],{"align":1118},[561,4004,727],{},[1132,4006,4007],{"align":1118},[561,4008,4009],{},"Texture | null",[1132,4011,4012],{"align":1118},"The loaded texture",[1113,4014,4015,4019,4023],{},[1132,4016,4017],{"align":1118},[561,4018,1184],{},[1132,4020,4021],{"align":1118},[561,4022,1284],{},[1132,4024,4025],{"align":1118},"Whether the texture is loading",[1113,4027,4028,4032,4037],{},[1132,4029,4030],{"align":1118},[561,4031,1199],{},[1132,4033,4034],{"align":1118},[561,4035,4036],{},"string | null",[1132,4038,4039],{"align":1118},"Error message if loading failed",[545,4041,4043],{"id":4042},"component-usage","Component Usage",[536,4045,4046,4047,4050],{},"You can also use the ",[561,4048,4049],{},"UseTexture"," component directly in your template:",[552,4052,4059],{"className":554,"code":4053,"highlights":4054,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { UseTexture } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'\n\nconst handleLoaded = (texture: Texture) => {\n  console.log('Loaded texture', texture)\n}\n\nconst handleError = (error: unknown) => {\n  console.error('error', error)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUseTexture\n    v-slot=\"{ state: texture }\"\n    :path=\"path\"\n    @loaded=\"handleLoaded\"\n    @error=\"handleError\"\n  >\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshStandardMaterial :map=\"texture\" />\n    \u003C/TresMesh>\n  \u003C/UseTexture>\n\u003C/template>\n",[510,965,987,997,4055,4056,4057,4058],19,20,21,26,[561,4060,4061,4081,4101,4105,4120,4124,4148,4173,4178,4182,4206,4229,4233,4241,4245,4253,4261,4276,4290,4305,4320,4326,4335,4345,4364,4374,4383],{"__ignoreMap":508},[564,4062,4063,4065,4067,4069,4071,4073,4075,4077,4079],{"class":566,"line":509},[564,4064,570],{"class":569},[564,4066,574],{"class":573},[564,4068,578],{"class":577},[564,4070,581],{"class":577},[564,4072,584],{"class":569},[564,4074,587],{"class":569},[564,4076,591],{"class":590},[564,4078,587],{"class":569},[564,4080,596],{"class":569},[564,4082,4084,4086,4088,4091,4093,4095,4097,4099],{"class":4083,"line":510},[566,600],[564,4085,604],{"class":603},[564,4087,607],{"class":569},[564,4089,4090],{"class":610}," UseTexture",[564,4092,614],{"class":569},[564,4094,617],{"class":603},[564,4096,620],{"class":569},[564,4098,623],{"class":590},[564,4100,626],{"class":569},[564,4102,4103],{"class":566,"line":629},[564,4104,632],{"emptyLinePlaceholder":516},[564,4106,4107,4109,4111,4113,4115,4118],{"class":566,"line":635},[564,4108,638],{"class":577},[564,4110,641],{"class":610},[564,4112,584],{"class":569},[564,4114,620],{"class":569},[564,4116,4117],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[564,4119,626],{"class":569},[564,4121,4122],{"class":566,"line":558},[564,4123,632],{"emptyLinePlaceholder":516},[564,4125,4126,4128,4131,4133,4135,4137,4139,4142,4144,4146],{"class":566,"line":686},[564,4127,638],{"class":577},[564,4129,4130],{"class":610}," handleLoaded ",[564,4132,584],{"class":569},[564,4134,2193],{"class":569},[564,4136,3908],{"class":2196},[564,4138,1092],{"class":569},[564,4140,4141],{"class":1519}," Texture",[564,4143,2200],{"class":569},[564,4145,2176],{"class":577},[564,4147,2205],{"class":569},[564,4149,4150,4153,4155,4158,4160,4162,4165,4167,4169,4171],{"class":566,"line":696},[564,4151,4152],{"class":610},"  console",[564,4154,1394],{"class":569},[564,4156,4157],{"class":680},"log",[564,4159,1074],{"class":573},[564,4161,1077],{"class":569},[564,4163,4164],{"class":590},"Loaded texture",[564,4166,1077],{"class":569},[564,4168,663],{"class":569},[564,4170,3834],{"class":610},[564,4172,1101],{"class":573},[564,4174,4175],{"class":566,"line":701},[564,4176,4177],{"class":569},"}\n",[564,4179,4180],{"class":566,"line":711},[564,4181,632],{"emptyLinePlaceholder":516},[564,4183,4184,4186,4189,4191,4193,4195,4197,4200,4202,4204],{"class":566,"line":747},[564,4185,638],{"class":577},[564,4187,4188],{"class":610}," handleError ",[564,4190,584],{"class":569},[564,4192,2193],{"class":569},[564,4194,1199],{"class":2196},[564,4196,1092],{"class":569},[564,4198,4199],{"class":1519}," unknown",[564,4201,2200],{"class":569},[564,4203,2176],{"class":577},[564,4205,2205],{"class":569},[564,4207,4208,4210,4212,4214,4216,4218,4220,4222,4224,4227],{"class":566,"line":910},[564,4209,4152],{"class":610},[564,4211,1394],{"class":569},[564,4213,1199],{"class":680},[564,4215,1074],{"class":573},[564,4217,1077],{"class":569},[564,4219,1199],{"class":590},[564,4221,1077],{"class":569},[564,4223,663],{"class":569},[564,4225,4226],{"class":610}," error",[564,4228,1101],{"class":573},[564,4230,4231],{"class":566,"line":920},[564,4232,4177],{"class":569},[564,4234,4235,4237,4239],{"class":566,"line":928},[564,4236,689],{"class":569},[564,4238,574],{"class":573},[564,4240,596],{"class":569},[564,4242,4243],{"class":566,"line":944},[564,4244,632],{"emptyLinePlaceholder":516},[564,4246,4247,4249,4251],{"class":566,"line":959},[564,4248,570],{"class":569},[564,4250,706],{"class":573},[564,4252,596],{"class":569},[564,4254,4256,4258],{"class":4255,"line":965},[566,600],[564,4257,714],{"class":569},[564,4259,4260],{"class":573},"UseTexture\n",[564,4262,4264,4267,4269,4271,4274],{"class":4263,"line":987},[566,600],[564,4265,4266],{"class":577},"    v-slot",[564,4268,584],{"class":569},[564,4270,587],{"class":569},[564,4272,4273],{"class":590},"{ state: texture }",[564,4275,941],{"class":569},[564,4277,4279,4282,4284,4286,4288],{"class":4278,"line":997},[566,600],[564,4280,4281],{"class":577},"    :path",[564,4283,584],{"class":569},[564,4285,587],{"class":569},[564,4287,1819],{"class":590},[564,4289,941],{"class":569},[564,4291,4293,4296,4298,4300,4303],{"class":4292,"line":4055},[566,600],[564,4294,4295],{"class":577},"    @loaded",[564,4297,584],{"class":569},[564,4299,587],{"class":569},[564,4301,4302],{"class":590},"handleLoaded",[564,4304,941],{"class":569},[564,4306,4308,4311,4313,4315,4318],{"class":4307,"line":4056},[566,600],[564,4309,4310],{"class":577},"    @error",[564,4312,584],{"class":569},[564,4314,587],{"class":569},[564,4316,4317],{"class":590},"handleError",[564,4319,941],{"class":569},[564,4321,4323],{"class":4322,"line":4057},[566,600],[564,4324,4325],{"class":569},"  >\n",[564,4327,4329,4331,4333],{"class":566,"line":4328},22,[564,4330,881],{"class":569},[564,4332,3879],{"class":573},[564,4334,596],{"class":569},[564,4336,4338,4341,4343],{"class":566,"line":4337},23,[564,4339,4340],{"class":569},"      \u003C",[564,4342,3888],{"class":573},[564,4344,744],{"class":569},[564,4346,4348,4350,4352,4354,4356,4358,4360,4362],{"class":566,"line":4347},24,[564,4349,4340],{"class":569},[564,4351,3898],{"class":573},[564,4353,3901],{"class":577},[564,4355,584],{"class":569},[564,4357,587],{"class":569},[564,4359,3908],{"class":590},[564,4361,587],{"class":569},[564,4363,744],{"class":569},[564,4365,4367,4370,4372],{"class":566,"line":4366},25,[564,4368,4369],{"class":569},"    \u003C/",[564,4371,3879],{"class":573},[564,4373,596],{"class":569},[564,4375,4377,4379,4381],{"class":4376,"line":4058},[566,600],[564,4378,990],{"class":569},[564,4380,4049],{"class":573},[564,4382,596],{"class":569},[564,4384,4386,4388,4390],{"class":566,"line":4385},27,[564,4387,689],{"class":569},[564,4389,706],{"class":573},[564,4391,596],{"class":569},[1682,4393,4394],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":508,"searchDepth":509,"depth":510,"links":4396},[4397,4398,4399,4400],{"id":547,"depth":510,"text":15},{"id":1255,"depth":510,"text":1256},{"id":1104,"depth":510,"text":1105},{"id":4042,"depth":510,"text":4043},"A composable to load textures in TresJS scenes.",{},{"title":149,"description":4401},"l_rJPS1esq3wmeHFxC2Nl14B5pGSLe_sPmpKSPgbazk",{"id":4406,"title":153,"body":4407,"description":5883,"extension":513,"links":514,"meta":5884,"navigation":516,"path":154,"seo":5885,"stem":155,"__hash__":5886},"docs/2.api/3.loaders/6.use-textures.md",{"type":501,"value":4408,"toc":5874},[4409,4414,4422,4424,4673,4677,4680,5735,5739,5744,5779,5783,5839,5843,5871],[530,4410,4411],{},[4412,4413],"loaders-use-textures",{},[536,4415,4416,4417,3766,4420,543],{},"A composable that allows you to load multiple textures at once using the ",[1015,4418,3765],{"href":3763,"rel":4419},[1019],[540,4421,542],{},[545,4423,15],{"id":547},[552,4425,4428],{"className":554,"code":4426,"highlights":4427,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useTextures } from '@tresjs/cientos'\n\n// Define an array of texture paths\nconst texturePaths = [\n  '/textures/color.jpg',\n  '/textures/normal.jpg',\n  '/textures/roughness.jpg'\n]\n\n// Load all textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial\n      :map=\"textures[0]\"\n      :normal-map=\"textures[1]\"\n      :roughness-map=\"textures[2]\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n",[510,920,4055,4056,4057],[561,4429,4430,4450,4470,4474,4479,4491,4504,4515,4524,4529,4533,4538,4565,4573,4577,4585,4593,4601,4608,4623,4638,4653,4657,4665],{"__ignoreMap":508},[564,4431,4432,4434,4436,4438,4440,4442,4444,4446,4448],{"class":566,"line":509},[564,4433,570],{"class":569},[564,4435,574],{"class":573},[564,4437,578],{"class":577},[564,4439,581],{"class":577},[564,4441,584],{"class":569},[564,4443,587],{"class":569},[564,4445,591],{"class":590},[564,4447,587],{"class":569},[564,4449,596],{"class":569},[564,4451,4453,4455,4457,4460,4462,4464,4466,4468],{"class":4452,"line":510},[566,600],[564,4454,604],{"class":603},[564,4456,607],{"class":569},[564,4458,4459],{"class":610}," useTextures",[564,4461,614],{"class":569},[564,4463,617],{"class":603},[564,4465,620],{"class":569},[564,4467,623],{"class":590},[564,4469,626],{"class":569},[564,4471,4472],{"class":566,"line":629},[564,4473,632],{"emptyLinePlaceholder":516},[564,4475,4476],{"class":566,"line":635},[564,4477,4478],{"class":1379},"// Define an array of texture paths\n",[564,4480,4481,4483,4486,4488],{"class":566,"line":558},[564,4482,638],{"class":577},[564,4484,4485],{"class":610}," texturePaths ",[564,4487,584],{"class":569},[564,4489,4490],{"class":610}," [\n",[564,4492,4493,4496,4499,4501],{"class":566,"line":686},[564,4494,4495],{"class":569},"  '",[564,4497,4498],{"class":590},"/textures/color.jpg",[564,4500,1077],{"class":569},[564,4502,4503],{"class":569},",\n",[564,4505,4506,4508,4511,4513],{"class":566,"line":696},[564,4507,4495],{"class":569},[564,4509,4510],{"class":590},"/textures/normal.jpg",[564,4512,1077],{"class":569},[564,4514,4503],{"class":569},[564,4516,4517,4519,4522],{"class":566,"line":701},[564,4518,4495],{"class":569},[564,4520,4521],{"class":590},"/textures/roughness.jpg",[564,4523,626],{"class":569},[564,4525,4526],{"class":566,"line":711},[564,4527,4528],{"class":610},"]\n",[564,4530,4531],{"class":566,"line":747},[564,4532,632],{"emptyLinePlaceholder":516},[564,4534,4535],{"class":566,"line":910},[564,4536,4537],{"class":1379},"// Load all textures at once\n",[564,4539,4541,4543,4545,4548,4550,4552,4554,4556,4558,4560,4562],{"class":4540,"line":920},[566,600],[564,4542,638],{"class":577},[564,4544,607],{"class":569},[564,4546,4547],{"class":610}," textures",[564,4549,663],{"class":569},[564,4551,3839],{"class":610},[564,4553,663],{"class":569},[564,4555,3844],{"class":610},[564,4557,674],{"class":569},[564,4559,677],{"class":569},[564,4561,4459],{"class":680},[564,4563,4564],{"class":610},"(texturePaths)\n",[564,4566,4567,4569,4571],{"class":566,"line":928},[564,4568,689],{"class":569},[564,4570,574],{"class":573},[564,4572,596],{"class":569},[564,4574,4575],{"class":566,"line":944},[564,4576,632],{"emptyLinePlaceholder":516},[564,4578,4579,4581,4583],{"class":566,"line":959},[564,4580,570],{"class":569},[564,4582,706],{"class":573},[564,4584,596],{"class":569},[564,4586,4587,4589,4591],{"class":566,"line":965},[564,4588,714],{"class":569},[564,4590,3879],{"class":573},[564,4592,596],{"class":569},[564,4594,4595,4597,4599],{"class":566,"line":987},[564,4596,881],{"class":569},[564,4598,3888],{"class":573},[564,4600,744],{"class":569},[564,4602,4603,4605],{"class":566,"line":997},[564,4604,881],{"class":569},[564,4606,4607],{"class":573},"TresMeshStandardMaterial\n",[564,4609,4611,4614,4616,4618,4621],{"class":4610,"line":4055},[566,600],[564,4612,4613],{"class":577},"      :map",[564,4615,584],{"class":569},[564,4617,587],{"class":569},[564,4619,4620],{"class":590},"textures[0]",[564,4622,941],{"class":569},[564,4624,4626,4629,4631,4633,4636],{"class":4625,"line":4056},[566,600],[564,4627,4628],{"class":577},"      :normal-map",[564,4630,584],{"class":569},[564,4632,587],{"class":569},[564,4634,4635],{"class":590},"textures[1]",[564,4637,941],{"class":569},[564,4639,4641,4644,4646,4648,4651],{"class":4640,"line":4057},[566,600],[564,4642,4643],{"class":577},"      :roughness-map",[564,4645,584],{"class":569},[564,4647,587],{"class":569},[564,4649,4650],{"class":590},"textures[2]",[564,4652,941],{"class":569},[564,4654,4655],{"class":566,"line":4328},[564,4656,962],{"class":569},[564,4658,4659,4661,4663],{"class":566,"line":4337},[564,4660,990],{"class":569},[564,4662,3879],{"class":573},[564,4664,596],{"class":569},[564,4666,4667,4669,4671],{"class":566,"line":4347},[564,4668,689],{"class":569},[564,4670,706],{"class":573},[564,4672,596],{"class":569},[545,4674,4676],{"id":4675},"pbr-textures-example","PBR Textures Example",[536,4678,4679],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[552,4681,4684],{"className":554,"code":4682,"filename":4683,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLightHelper } from '@tresjs/core'\nimport { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'\nimport { MeshStandardMaterial } from 'three'\n\n// Load the 3D model\nconst { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })\nconst cube = computed(() => model.value?.nodes?.BlenderCube)\nconst material = computed(() => model.value?.materials?.Material)\n\n// Define texture paths\nconst texturePaths = [\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'\n]\n\n// Load all PBR textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\n// Apply textures to material when loaded\nwatch([material, textures], ([modelMaterial, textures]) => {\n  if (modelMaterial && textures && textures.length === texturePaths.length) {\n    // Cast to MeshStandardMaterial to access PBR properties\n    const pbrMaterial = modelMaterial as MeshStandardMaterial\n\n    // Apply textures\n    pbrMaterial.map = textures[0]\n    pbrMaterial.normalMap = textures[1]\n    pbrMaterial.roughnessMap = textures[2]\n    pbrMaterial.metalnessMap = textures[3]\n    pbrMaterial.displacementMap = textures[4]\n\n    // Set material properties\n    pbrMaterial.displacementScale = 0\n    pbrMaterial.metalness = 0.8\n    pbrMaterial.roughness = 0.2\n  }\n})\n\n// Handle loading state and errors\nwatch(isLoading, (_loading) => {\n  // Handle loading state\n})\n\nwatch(error, (errs) => {\n  if (errs) {\n    console.error('Error loading textures:', errs)\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4f4f4f\">\n    \u003CSuspense>\n      \u003CEnvironment preset=\"studio\" background :blur=\"1\" />\n    \u003C/Suspense>\n    \u003CTresPerspectiveCamera :position=\"[8, 8, 8]\" />\n    \u003COrbitControls />\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight :intensity=\"2\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[5, 5, 5]\" :intensity=\"0.5\" color=\"#ff0000\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[-5, 2, 2]\" :intensity=\"0.5\" color=\"#0000ff\" />\n    \u003CTresGroup position-y=\"2\">\n      \u003Cprimitive v-if=\"cube\" :object=\"cube\" />\n    \u003C/TresGroup>\n  \u003C/TresCanvas>\n\u003C/template>\n","PBRTextures.vue",[561,4685,4686,4706,4729,4760,4778,4782,4787,4829,4863,4894,4898,4903,4913,4924,4935,4946,4957,4966,4970,4974,4979,5003,5007,5012,5043,5082,5087,5106,5111,5117,5139,5159,5179,5200,5221,5226,5232,5247,5262,5277,5283,5290,5295,5301,5322,5328,5335,5340,5361,5374,5400,5405,5412,5421,5426,5435,5455,5465,5500,5509,5529,5538,5548,5567,5614,5657,5678,5708,5717,5726],{"__ignoreMap":508},[564,4687,4688,4690,4692,4694,4696,4698,4700,4702,4704],{"class":566,"line":509},[564,4689,570],{"class":569},[564,4691,574],{"class":573},[564,4693,578],{"class":577},[564,4695,581],{"class":577},[564,4697,584],{"class":569},[564,4699,587],{"class":569},[564,4701,591],{"class":590},[564,4703,587],{"class":569},[564,4705,596],{"class":569},[564,4707,4708,4710,4712,4714,4716,4719,4721,4723,4725,4727],{"class":566,"line":510},[564,4709,604],{"class":603},[564,4711,607],{"class":569},[564,4713,807],{"class":610},[564,4715,663],{"class":569},[564,4717,4718],{"class":610}," vLightHelper",[564,4720,614],{"class":569},[564,4722,617],{"class":603},[564,4724,620],{"class":569},[564,4726,816],{"class":590},[564,4728,626],{"class":569},[564,4730,4731,4733,4735,4738,4740,4742,4744,4746,4748,4750,4752,4754,4756,4758],{"class":566,"line":629},[564,4732,604],{"class":603},[564,4734,607],{"class":569},[564,4736,4737],{"class":610}," Environment",[564,4739,663],{"class":569},[564,4741,788],{"class":610},[564,4743,663],{"class":569},[564,4745,611],{"class":610},[564,4747,663],{"class":569},[564,4749,4459],{"class":610},[564,4751,614],{"class":569},[564,4753,617],{"class":603},[564,4755,620],{"class":569},[564,4757,623],{"class":590},[564,4759,626],{"class":569},[564,4761,4762,4764,4766,4768,4770,4772,4774,4776],{"class":566,"line":635},[564,4763,604],{"class":603},[564,4765,607],{"class":569},[564,4767,1478],{"class":610},[564,4769,614],{"class":569},[564,4771,617],{"class":603},[564,4773,620],{"class":569},[564,4775,1487],{"class":590},[564,4777,626],{"class":569},[564,4779,4780],{"class":566,"line":558},[564,4781,632],{"emptyLinePlaceholder":516},[564,4783,4784],{"class":566,"line":686},[564,4785,4786],{"class":1379},"// Load the 3D model\n",[564,4788,4789,4791,4793,4795,4797,4800,4802,4804,4806,4808,4810,4813,4815,4817,4819,4821,4823,4825,4827],{"class":566,"line":696},[564,4790,638],{"class":577},[564,4792,607],{"class":569},[564,4794,660],{"class":573},[564,4796,1092],{"class":569},[564,4798,4799],{"class":610}," model ",[564,4801,674],{"class":569},[564,4803,677],{"class":569},[564,4805,611],{"class":680},[564,4807,1074],{"class":610},[564,4809,1077],{"class":569},[564,4811,4812],{"class":590},"/blender-cube-draco.glb",[564,4814,1077],{"class":569},[564,4816,663],{"class":569},[564,4818,607],{"class":569},[564,4820,1089],{"class":573},[564,4822,1092],{"class":569},[564,4824,1096],{"class":1095},[564,4826,614],{"class":569},[564,4828,1101],{"class":610},[564,4830,4831,4833,4836,4838,4841,4843,4845,4847,4850,4852,4854,4856,4858,4860],{"class":566,"line":701},[564,4832,638],{"class":577},[564,4834,4835],{"class":610}," cube ",[564,4837,584],{"class":569},[564,4839,4840],{"class":680}," computed",[564,4842,1074],{"class":610},[564,4844,2173],{"class":569},[564,4846,2176],{"class":577},[564,4848,4849],{"class":610}," model",[564,4851,1394],{"class":569},[564,4853,1397],{"class":610},[564,4855,2186],{"class":569},[564,4857,1154],{"class":610},[564,4859,2186],{"class":569},[564,4861,4862],{"class":610},"BlenderCube)\n",[564,4864,4865,4867,4869,4871,4873,4875,4877,4879,4881,4883,4885,4887,4889,4891],{"class":566,"line":711},[564,4866,638],{"class":577},[564,4868,1418],{"class":610},[564,4870,584],{"class":569},[564,4872,4840],{"class":680},[564,4874,1074],{"class":610},[564,4876,2173],{"class":569},[564,4878,2176],{"class":577},[564,4880,4849],{"class":610},[564,4882,1394],{"class":569},[564,4884,1397],{"class":610},[564,4886,2186],{"class":569},[564,4888,1169],{"class":610},[564,4890,2186],{"class":569},[564,4892,4893],{"class":610},"Material)\n",[564,4895,4896],{"class":566,"line":747},[564,4897,632],{"emptyLinePlaceholder":516},[564,4899,4900],{"class":566,"line":910},[564,4901,4902],{"class":1379},"// Define texture paths\n",[564,4904,4905,4907,4909,4911],{"class":566,"line":920},[564,4906,638],{"class":577},[564,4908,4485],{"class":610},[564,4910,584],{"class":569},[564,4912,4490],{"class":610},[564,4914,4915,4917,4920,4922],{"class":566,"line":928},[564,4916,4495],{"class":569},[564,4918,4919],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[564,4921,1077],{"class":569},[564,4923,4503],{"class":569},[564,4925,4926,4928,4931,4933],{"class":566,"line":944},[564,4927,4495],{"class":569},[564,4929,4930],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[564,4932,1077],{"class":569},[564,4934,4503],{"class":569},[564,4936,4937,4939,4942,4944],{"class":566,"line":959},[564,4938,4495],{"class":569},[564,4940,4941],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[564,4943,1077],{"class":569},[564,4945,4503],{"class":569},[564,4947,4948,4950,4953,4955],{"class":566,"line":965},[564,4949,4495],{"class":569},[564,4951,4952],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[564,4954,1077],{"class":569},[564,4956,4503],{"class":569},[564,4958,4959,4961,4964],{"class":566,"line":987},[564,4960,4495],{"class":569},[564,4962,4963],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[564,4965,626],{"class":569},[564,4967,4968],{"class":566,"line":997},[564,4969,4528],{"class":610},[564,4971,4972],{"class":566,"line":4055},[564,4973,632],{"emptyLinePlaceholder":516},[564,4975,4976],{"class":566,"line":4056},[564,4977,4978],{"class":1379},"// Load all PBR textures at once\n",[564,4980,4981,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001],{"class":566,"line":4057},[564,4982,638],{"class":577},[564,4984,607],{"class":569},[564,4986,4547],{"class":610},[564,4988,663],{"class":569},[564,4990,3839],{"class":610},[564,4992,663],{"class":569},[564,4994,3844],{"class":610},[564,4996,674],{"class":569},[564,4998,677],{"class":569},[564,5000,4459],{"class":680},[564,5002,4564],{"class":610},[564,5004,5005],{"class":566,"line":4328},[564,5006,632],{"emptyLinePlaceholder":516},[564,5008,5009],{"class":566,"line":4337},[564,5010,5011],{"class":1379},"// Apply textures to material when loaded\n",[564,5013,5014,5016,5019,5021,5024,5026,5029,5032,5034,5036,5039,5041],{"class":566,"line":4347},[564,5015,2168],{"class":680},[564,5017,5018],{"class":610},"([material",[564,5020,663],{"class":569},[564,5022,5023],{"class":610}," textures]",[564,5025,663],{"class":569},[564,5027,5028],{"class":569}," ([",[564,5030,5031],{"class":2196},"modelMaterial",[564,5033,663],{"class":569},[564,5035,4547],{"class":2196},[564,5037,5038],{"class":569},"])",[564,5040,2176],{"class":577},[564,5042,2205],{"class":569},[564,5044,5045,5048,5050,5052,5055,5057,5059,5061,5063,5066,5069,5072,5074,5076,5079],{"class":566,"line":4366},[564,5046,5047],{"class":603},"  if",[564,5049,2193],{"class":573},[564,5051,5031],{"class":610},[564,5053,5054],{"class":569}," &&",[564,5056,4547],{"class":610},[564,5058,5054],{"class":569},[564,5060,4547],{"class":610},[564,5062,1394],{"class":569},[564,5064,5065],{"class":610},"length",[564,5067,5068],{"class":569}," ===",[564,5070,5071],{"class":610}," texturePaths",[564,5073,1394],{"class":569},[564,5075,5065],{"class":610},[564,5077,5078],{"class":573},") ",[564,5080,5081],{"class":569},"{\n",[564,5083,5084],{"class":566,"line":4058},[564,5085,5086],{"class":1379},"    // Cast to MeshStandardMaterial to access PBR properties\n",[564,5088,5089,5092,5095,5097,5100,5103],{"class":566,"line":4385},[564,5090,5091],{"class":577},"    const",[564,5093,5094],{"class":610}," pbrMaterial",[564,5096,677],{"class":569},[564,5098,5099],{"class":610}," modelMaterial",[564,5101,5102],{"class":603}," as",[564,5104,5105],{"class":1519}," MeshStandardMaterial\n",[564,5107,5109],{"class":566,"line":5108},28,[564,5110,632],{"emptyLinePlaceholder":516},[564,5112,5114],{"class":566,"line":5113},29,[564,5115,5116],{"class":1379},"    // Apply textures\n",[564,5118,5120,5123,5125,5128,5130,5132,5135,5137],{"class":566,"line":5119},30,[564,5121,5122],{"class":610},"    pbrMaterial",[564,5124,1394],{"class":569},[564,5126,5127],{"class":610},"map",[564,5129,677],{"class":569},[564,5131,4547],{"class":610},[564,5133,5134],{"class":573},"[",[564,5136,2231],{"class":2230},[564,5138,4528],{"class":573},[564,5140,5142,5144,5146,5149,5151,5153,5155,5157],{"class":566,"line":5141},31,[564,5143,5122],{"class":610},[564,5145,1394],{"class":569},[564,5147,5148],{"class":610},"normalMap",[564,5150,677],{"class":569},[564,5152,4547],{"class":610},[564,5154,5134],{"class":573},[564,5156,980],{"class":2230},[564,5158,4528],{"class":573},[564,5160,5162,5164,5166,5169,5171,5173,5175,5177],{"class":566,"line":5161},32,[564,5163,5122],{"class":610},[564,5165,1394],{"class":569},[564,5167,5168],{"class":610},"roughnessMap",[564,5170,677],{"class":569},[564,5172,4547],{"class":610},[564,5174,5134],{"class":573},[564,5176,938],{"class":2230},[564,5178,4528],{"class":573},[564,5180,5182,5184,5186,5189,5191,5193,5195,5198],{"class":566,"line":5181},33,[564,5183,5122],{"class":610},[564,5185,1394],{"class":569},[564,5187,5188],{"class":610},"metalnessMap",[564,5190,677],{"class":569},[564,5192,4547],{"class":610},[564,5194,5134],{"class":573},[564,5196,5197],{"class":2230},"3",[564,5199,4528],{"class":573},[564,5201,5203,5205,5207,5210,5212,5214,5216,5219],{"class":566,"line":5202},34,[564,5204,5122],{"class":610},[564,5206,1394],{"class":569},[564,5208,5209],{"class":610},"displacementMap",[564,5211,677],{"class":569},[564,5213,4547],{"class":610},[564,5215,5134],{"class":573},[564,5217,5218],{"class":2230},"4",[564,5220,4528],{"class":573},[564,5222,5224],{"class":566,"line":5223},35,[564,5225,632],{"emptyLinePlaceholder":516},[564,5227,5229],{"class":566,"line":5228},36,[564,5230,5231],{"class":1379},"    // Set material properties\n",[564,5233,5235,5237,5239,5242,5244],{"class":566,"line":5234},37,[564,5236,5122],{"class":610},[564,5238,1394],{"class":569},[564,5240,5241],{"class":610},"displacementScale",[564,5243,677],{"class":569},[564,5245,5246],{"class":2230}," 0\n",[564,5248,5250,5252,5254,5257,5259],{"class":566,"line":5249},38,[564,5251,5122],{"class":610},[564,5253,1394],{"class":569},[564,5255,5256],{"class":610},"metalness",[564,5258,677],{"class":569},[564,5260,5261],{"class":2230}," 0.8\n",[564,5263,5265,5267,5269,5272,5274],{"class":566,"line":5264},39,[564,5266,5122],{"class":610},[564,5268,1394],{"class":569},[564,5270,5271],{"class":610},"roughness",[564,5273,677],{"class":569},[564,5275,5276],{"class":2230}," 0.2\n",[564,5278,5280],{"class":566,"line":5279},40,[564,5281,5282],{"class":569},"  }\n",[564,5284,5286,5288],{"class":566,"line":5285},41,[564,5287,674],{"class":569},[564,5289,1101],{"class":610},[564,5291,5293],{"class":566,"line":5292},42,[564,5294,632],{"emptyLinePlaceholder":516},[564,5296,5298],{"class":566,"line":5297},43,[564,5299,5300],{"class":1379},"// Handle loading state and errors\n",[564,5302,5304,5306,5309,5311,5313,5316,5318,5320],{"class":566,"line":5303},44,[564,5305,2168],{"class":680},[564,5307,5308],{"class":610},"(isLoading",[564,5310,663],{"class":569},[564,5312,2193],{"class":569},[564,5314,5315],{"class":2196},"_loading",[564,5317,2200],{"class":569},[564,5319,2176],{"class":577},[564,5321,2205],{"class":569},[564,5323,5325],{"class":566,"line":5324},45,[564,5326,5327],{"class":1379},"  // Handle loading state\n",[564,5329,5331,5333],{"class":566,"line":5330},46,[564,5332,674],{"class":569},[564,5334,1101],{"class":610},[564,5336,5338],{"class":566,"line":5337},47,[564,5339,632],{"emptyLinePlaceholder":516},[564,5341,5343,5345,5348,5350,5352,5355,5357,5359],{"class":566,"line":5342},48,[564,5344,2168],{"class":680},[564,5346,5347],{"class":610},"(error",[564,5349,663],{"class":569},[564,5351,2193],{"class":569},[564,5353,5354],{"class":2196},"errs",[564,5356,2200],{"class":569},[564,5358,2176],{"class":577},[564,5360,2205],{"class":569},[564,5362,5364,5366,5368,5370,5372],{"class":566,"line":5363},49,[564,5365,5047],{"class":603},[564,5367,2193],{"class":573},[564,5369,5354],{"class":610},[564,5371,5078],{"class":573},[564,5373,5081],{"class":569},[564,5375,5377,5380,5382,5384,5386,5388,5391,5393,5395,5398],{"class":566,"line":5376},50,[564,5378,5379],{"class":610},"    console",[564,5381,1394],{"class":569},[564,5383,1199],{"class":680},[564,5385,1074],{"class":573},[564,5387,1077],{"class":569},[564,5389,5390],{"class":590},"Error loading textures:",[564,5392,1077],{"class":569},[564,5394,663],{"class":569},[564,5396,5397],{"class":610}," errs",[564,5399,1101],{"class":573},[564,5401,5403],{"class":566,"line":5402},51,[564,5404,5282],{"class":569},[564,5406,5408,5410],{"class":566,"line":5407},52,[564,5409,674],{"class":569},[564,5411,1101],{"class":610},[564,5413,5415,5417,5419],{"class":566,"line":5414},53,[564,5416,689],{"class":569},[564,5418,574],{"class":573},[564,5420,596],{"class":569},[564,5422,5424],{"class":566,"line":5423},54,[564,5425,632],{"emptyLinePlaceholder":516},[564,5427,5429,5431,5433],{"class":566,"line":5428},55,[564,5430,570],{"class":569},[564,5432,706],{"class":573},[564,5434,596],{"class":569},[564,5436,5438,5440,5442,5444,5446,5448,5451,5453],{"class":566,"line":5437},56,[564,5439,714],{"class":569},[564,5441,862],{"class":573},[564,5443,865],{"class":577},[564,5445,584],{"class":569},[564,5447,587],{"class":569},[564,5449,5450],{"class":590},"#4f4f4f",[564,5452,587],{"class":569},[564,5454,596],{"class":569},[564,5456,5458,5460,5463],{"class":566,"line":5457},57,[564,5459,881],{"class":569},[564,5461,5462],{"class":573},"Suspense",[564,5464,596],{"class":569},[564,5466,5468,5470,5472,5475,5477,5479,5482,5484,5487,5490,5492,5494,5496,5498],{"class":566,"line":5467},58,[564,5469,4340],{"class":569},[564,5471,375],{"class":573},[564,5473,5474],{"class":577}," preset",[564,5476,584],{"class":569},[564,5478,587],{"class":569},[564,5480,5481],{"class":590},"studio",[564,5483,587],{"class":569},[564,5485,5486],{"class":577}," background",[564,5488,5489],{"class":577}," :blur",[564,5491,584],{"class":569},[564,5493,587],{"class":569},[564,5495,980],{"class":590},[564,5497,587],{"class":569},[564,5499,744],{"class":569},[564,5501,5503,5505,5507],{"class":566,"line":5502},59,[564,5504,4369],{"class":569},[564,5506,5462],{"class":573},[564,5508,596],{"class":569},[564,5510,5512,5514,5516,5518,5520,5522,5525,5527],{"class":566,"line":5511},60,[564,5513,881],{"class":569},[564,5515,884],{"class":573},[564,5517,887],{"class":577},[564,5519,584],{"class":569},[564,5521,587],{"class":569},[564,5523,5524],{"class":590},"[8, 8, 8]",[564,5526,587],{"class":569},[564,5528,744],{"class":569},[564,5530,5532,5534,5536],{"class":566,"line":5531},61,[564,5533,881],{"class":569},[564,5535,905],{"class":573},[564,5537,744],{"class":569},[564,5539,5541,5543,5546],{"class":566,"line":5540},62,[564,5542,881],{"class":569},[564,5544,5545],{"class":573},"TresGridHelper",[564,5547,744],{"class":569},[564,5549,5551,5553,5555,5557,5559,5561,5563,5565],{"class":566,"line":5550},63,[564,5552,881],{"class":569},[564,5554,970],{"class":573},[564,5556,973],{"class":577},[564,5558,584],{"class":569},[564,5560,587],{"class":569},[564,5562,938],{"class":590},[564,5564,587],{"class":569},[564,5566,744],{"class":569},[564,5568,5570,5572,5575,5578,5580,5582,5584,5587,5589,5591,5593,5595,5598,5600,5603,5605,5607,5610,5612],{"class":566,"line":5569},64,[564,5571,881],{"class":569},[564,5573,5574],{"class":573},"TresDirectionalLight",[564,5576,5577],{"class":577}," v-light-helper",[564,5579,887],{"class":577},[564,5581,584],{"class":569},[564,5583,587],{"class":569},[564,5585,5586],{"class":590},"[5, 5, 5]",[564,5588,587],{"class":569},[564,5590,973],{"class":577},[564,5592,584],{"class":569},[564,5594,587],{"class":569},[564,5596,5597],{"class":590},"0.5",[564,5599,587],{"class":569},[564,5601,5602],{"class":577}," color",[564,5604,584],{"class":569},[564,5606,587],{"class":569},[564,5608,5609],{"class":590},"#ff0000",[564,5611,587],{"class":569},[564,5613,744],{"class":569},[564,5615,5617,5619,5621,5623,5625,5627,5629,5632,5634,5636,5638,5640,5642,5644,5646,5648,5650,5653,5655],{"class":566,"line":5616},65,[564,5618,881],{"class":569},[564,5620,5574],{"class":573},[564,5622,5577],{"class":577},[564,5624,887],{"class":577},[564,5626,584],{"class":569},[564,5628,587],{"class":569},[564,5630,5631],{"class":590},"[-5, 2, 2]",[564,5633,587],{"class":569},[564,5635,973],{"class":577},[564,5637,584],{"class":569},[564,5639,587],{"class":569},[564,5641,5597],{"class":590},[564,5643,587],{"class":569},[564,5645,5602],{"class":577},[564,5647,584],{"class":569},[564,5649,587],{"class":569},[564,5651,5652],{"class":590},"#0000ff",[564,5654,587],{"class":569},[564,5656,744],{"class":569},[564,5658,5660,5662,5665,5668,5670,5672,5674,5676],{"class":566,"line":5659},66,[564,5661,881],{"class":569},[564,5663,5664],{"class":573},"TresGroup",[564,5666,5667],{"class":577}," position-y",[564,5669,584],{"class":569},[564,5671,587],{"class":569},[564,5673,938],{"class":590},[564,5675,587],{"class":569},[564,5677,596],{"class":569},[564,5679,5681,5683,5685,5687,5689,5691,5694,5696,5698,5700,5702,5704,5706],{"class":566,"line":5680},67,[564,5682,4340],{"class":569},[564,5684,717],{"class":573},[564,5686,720],{"class":577},[564,5688,584],{"class":569},[564,5690,587],{"class":569},[564,5692,5693],{"class":590},"cube",[564,5695,587],{"class":569},[564,5697,732],{"class":577},[564,5699,584],{"class":569},[564,5701,587],{"class":569},[564,5703,5693],{"class":590},[564,5705,587],{"class":569},[564,5707,744],{"class":569},[564,5709,5711,5713,5715],{"class":566,"line":5710},68,[564,5712,4369],{"class":569},[564,5714,5664],{"class":573},[564,5716,596],{"class":569},[564,5718,5720,5722,5724],{"class":566,"line":5719},69,[564,5721,990],{"class":569},[564,5723,862],{"class":573},[564,5725,596],{"class":569},[564,5727,5729,5731,5733],{"class":566,"line":5728},70,[564,5730,689],{"class":569},[564,5732,706],{"class":573},[564,5734,596],{"class":569},[545,5736,5738],{"id":5737},"api","API",[5740,5741,5743],"h3",{"id":5742},"parameters","Parameters",[1107,5745,5746,5758],{},[1110,5747,5748],{},[1113,5749,5750,5752,5754,5756],{},[1116,5751,1119],{"align":1118},[1116,5753,1122],{},[1116,5755,1269],{},[1116,5757,1125],{},[1127,5759,5760],{},[1113,5761,5762,5767,5772,5776],{},[1132,5763,5764],{"align":1118},[540,5765,5766],{},"paths",[1132,5768,5769],{},[561,5770,5771],{},"string[]",[1132,5773,5774],{},[561,5775,2352],{},[1132,5777,5778],{},"Array of paths to the textures.",[5740,5780,5782],{"id":5781},"returns","Returns",[1107,5784,5785,5795],{},[1110,5786,5787],{},[1113,5788,5789,5791,5793],{},[1116,5790,1119],{"align":1118},[1116,5792,1122],{},[1116,5794,1125],{},[1127,5796,5797,5812,5825],{},[1113,5798,5799,5804,5809],{},[1132,5800,5801],{"align":1118},[540,5802,5803],{},"textures",[1132,5805,5806],{},[561,5807,5808],{},"Texture[]",[1132,5810,5811],{},"Array of loaded textures.",[1113,5813,5814,5818,5822],{},[1132,5815,5816],{"align":1118},[540,5817,1184],{},[1132,5819,5820],{},[561,5821,1284],{},[1132,5823,5824],{},"Whether any textures are still loading.",[1113,5826,5827,5831,5836],{},[1132,5828,5829],{"align":1118},[540,5830,1199],{},[1132,5832,5833],{},[561,5834,5835],{},"Error[] | null",[1132,5837,5838],{},"Array of errors if any occurred during loading.",[545,5840,5842],{"id":5841},"benefits","Benefits",[5844,5845,5846,5853,5859,5865],"ul",{},[5847,5848,5849,5852],"li",{},[540,5850,5851],{},"Simplified API",": Load multiple textures with a single function call",[5847,5854,5855,5858],{},[540,5856,5857],{},"Consolidated loading state",": Track loading state for all textures at once",[5847,5860,5861,5864],{},[540,5862,5863],{},"Unified error handling",": Collect and report errors from all texture loads",[5847,5866,5867,5870],{},[540,5868,5869],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1682,5872,5873],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":5875},[5876,5877,5878,5882],{"id":547,"depth":510,"text":15},{"id":4675,"depth":510,"text":4676},{"id":5737,"depth":510,"text":5738,"children":5879},[5880,5881],{"id":5742,"depth":629,"text":5743},{"id":5781,"depth":629,"text":5782},{"id":5841,"depth":510,"text":5842},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":153,"description":5883},"SGyfTzTHdLIy26Zf2q6_7GqcLLq8MvwoPurvEYXBwUI",{"id":5888,"title":157,"body":5889,"description":8757,"extension":513,"links":514,"meta":8758,"navigation":516,"path":158,"seo":8759,"stem":159,"__hash__":8760},"docs/2.api/3.loaders/7.use-svg.md",{"type":501,"value":5890,"toc":8732},[5891,5896,5909,5913,5918,5920,6406,6411,6425,6429,6432,6544,6546,6617,6619,6729,6733,6738,6795,6800,7109,7113,7118,7124,7129,7135,7153,7159,7174,7221,7224,7229,7240,7245,7248,7293,7297,7302,7305,7310,7319,7364,7369,7374,7386,7391,7433,7437,7440,7568,7572,7576,7880,7884,8179,8183,8190,8370,8372,8540,8544,8551,8554,8558,8568,8572,8596,8604,8617,8621,8648,8652,8673,8683,8691,8708,8715,8729],[530,5892,5893],{},[5894,5895],"loaders-use-svg",{},[536,5897,5898,5899,5901,5902,5904,5905,5908],{},"Load and display SVG elements in your ",[540,5900,542],{}," scene. This guide covers both the ",[561,5903,157],{}," composable for advanced use cases and the ",[561,5906,5907],{},"SVG"," component for simple declarative rendering.",[545,5910,5912],{"id":5911},"usesvg-composable","useSVG Composable",[536,5914,1706,5915,5917],{},[561,5916,157],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[5740,5919,15],{"id":547},[549,5921,5922,6225],{},[552,5923,5926],{"className":554,"code":5924,"filename":556,"highlights":5925,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n  skipFills: false,\n  fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup v-if=\"!isLoading\">\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"`layer-${index}`\"\n      :geometry=\"layer.geometry\"\n      :render-order=\"index\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[510,558,686,696,701],[561,5927,5928,5948,5968,5972,5988,6024,6037,6066,6073,6081,6085,6093,6112,6119,6133,6147,6161,6175,6180,6201,6209,6217],{"__ignoreMap":508},[564,5929,5930,5932,5934,5936,5938,5940,5942,5944,5946],{"class":566,"line":509},[564,5931,570],{"class":569},[564,5933,574],{"class":573},[564,5935,578],{"class":577},[564,5937,581],{"class":577},[564,5939,584],{"class":569},[564,5941,587],{"class":569},[564,5943,591],{"class":590},[564,5945,587],{"class":569},[564,5947,596],{"class":569},[564,5949,5951,5953,5955,5958,5960,5962,5964,5966],{"class":5950,"line":510},[566,600],[564,5952,604],{"class":603},[564,5954,607],{"class":569},[564,5956,5957],{"class":610}," useSVG",[564,5959,614],{"class":569},[564,5961,617],{"class":603},[564,5963,620],{"class":569},[564,5965,623],{"class":590},[564,5967,626],{"class":569},[564,5969,5970],{"class":566,"line":629},[564,5971,632],{"emptyLinePlaceholder":516},[564,5973,5974,5976,5979,5981,5983,5986],{"class":566,"line":635},[564,5975,638],{"class":577},[564,5977,5978],{"class":610}," svgPath ",[564,5980,584],{"class":569},[564,5982,620],{"class":569},[564,5984,5985],{"class":590},"./logo.svg",[564,5987,626],{"class":569},[564,5989,5991,5993,5995,5997,5999,6002,6004,6006,6008,6011,6013,6015,6017,6020,6022],{"class":5990,"line":558},[566,600],[564,5992,638],{"class":577},[564,5994,607],{"class":569},[564,5996,660],{"class":610},[564,5998,663],{"class":569},[564,6000,6001],{"class":610}," layers",[564,6003,663],{"class":569},[564,6005,3839],{"class":610},[564,6007,663],{"class":569},[564,6009,6010],{"class":610}," dispose ",[564,6012,674],{"class":569},[564,6014,677],{"class":569},[564,6016,5957],{"class":680},[564,6018,6019],{"class":610},"(svgPath",[564,6021,663],{"class":569},[564,6023,2205],{"class":569},[564,6025,6027,6030,6032,6035],{"class":6026,"line":686},[566,600],[564,6028,6029],{"class":573},"  skipFills",[564,6031,1092],{"class":569},[564,6033,6034],{"class":1095}," false",[564,6036,4503],{"class":569},[564,6038,6040,6043,6045,6047,6050,6052,6054,6056,6059,6061,6064],{"class":6039,"line":696},[566,600],[564,6041,6042],{"class":573},"  fillMaterial",[564,6044,1092],{"class":569},[564,6046,607],{"class":569},[564,6048,6049],{"class":573}," transparent",[564,6051,1092],{"class":569},[564,6053,1096],{"class":1095},[564,6055,663],{"class":569},[564,6057,6058],{"class":573}," opacity",[564,6060,1092],{"class":569},[564,6062,6063],{"class":2230}," 0.8",[564,6065,1532],{"class":569},[564,6067,6069,6071],{"class":6068,"line":701},[566,600],[564,6070,674],{"class":569},[564,6072,1101],{"class":610},[564,6074,6075,6077,6079],{"class":566,"line":711},[564,6076,689],{"class":569},[564,6078,574],{"class":573},[564,6080,596],{"class":569},[564,6082,6083],{"class":566,"line":747},[564,6084,632],{"emptyLinePlaceholder":516},[564,6086,6087,6089,6091],{"class":566,"line":910},[564,6088,570],{"class":569},[564,6090,706],{"class":573},[564,6092,596],{"class":569},[564,6094,6095,6097,6099,6101,6103,6105,6108,6110],{"class":566,"line":920},[564,6096,714],{"class":569},[564,6098,5664],{"class":573},[564,6100,720],{"class":577},[564,6102,584],{"class":569},[564,6104,587],{"class":569},[564,6106,6107],{"class":590},"!isLoading",[564,6109,587],{"class":569},[564,6111,596],{"class":569},[564,6113,6114,6116],{"class":566,"line":928},[564,6115,881],{"class":569},[564,6117,6118],{"class":573},"TresMesh\n",[564,6120,6121,6124,6126,6128,6131],{"class":566,"line":944},[564,6122,6123],{"class":577},"      v-for",[564,6125,584],{"class":569},[564,6127,587],{"class":569},[564,6129,6130],{"class":590},"(layer, index) in layers",[564,6132,941],{"class":569},[564,6134,6135,6138,6140,6142,6145],{"class":566,"line":959},[564,6136,6137],{"class":577},"      :key",[564,6139,584],{"class":569},[564,6141,587],{"class":569},[564,6143,6144],{"class":590},"`layer-${index}`",[564,6146,941],{"class":569},[564,6148,6149,6152,6154,6156,6159],{"class":566,"line":965},[564,6150,6151],{"class":577},"      :geometry",[564,6153,584],{"class":569},[564,6155,587],{"class":569},[564,6157,6158],{"class":590},"layer.geometry",[564,6160,941],{"class":569},[564,6162,6163,6166,6168,6170,6173],{"class":566,"line":987},[564,6164,6165],{"class":577},"      :render-order",[564,6167,584],{"class":569},[564,6169,587],{"class":569},[564,6171,6172],{"class":590},"index",[564,6174,941],{"class":569},[564,6176,6177],{"class":566,"line":997},[564,6178,6179],{"class":569},"    >\n",[564,6181,6182,6184,6187,6190,6192,6194,6197,6199],{"class":566,"line":4055},[564,6183,4340],{"class":569},[564,6185,6186],{"class":573},"TresMeshBasicMaterial",[564,6188,6189],{"class":577}," v-bind",[564,6191,584],{"class":569},[564,6193,587],{"class":569},[564,6195,6196],{"class":590},"layer.material",[564,6198,587],{"class":569},[564,6200,744],{"class":569},[564,6202,6203,6205,6207],{"class":566,"line":4056},[564,6204,4369],{"class":569},[564,6206,3879],{"class":573},[564,6208,596],{"class":569},[564,6210,6211,6213,6215],{"class":566,"line":4057},[564,6212,990],{"class":569},[564,6214,5664],{"class":573},[564,6216,596],{"class":569},[564,6218,6219,6221,6223],{"class":566,"line":4328},[564,6220,689],{"class":569},[564,6222,706],{"class":573},[564,6224,596],{"class":569},[552,6226,6228],{"className":554,"code":6227,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,6229,6230,6250,6268,6286,6300,6308,6312,6320,6339,6358,6366,6374,6382,6390,6398],{"__ignoreMap":508},[564,6231,6232,6234,6236,6238,6240,6242,6244,6246,6248],{"class":566,"line":509},[564,6233,570],{"class":569},[564,6235,574],{"class":573},[564,6237,578],{"class":577},[564,6239,581],{"class":577},[564,6241,584],{"class":569},[564,6243,587],{"class":569},[564,6245,591],{"class":590},[564,6247,587],{"class":569},[564,6249,596],{"class":569},[564,6251,6252,6254,6256,6258,6260,6262,6264,6266],{"class":566,"line":510},[564,6253,604],{"class":603},[564,6255,607],{"class":569},[564,6257,788],{"class":610},[564,6259,614],{"class":569},[564,6261,617],{"class":603},[564,6263,620],{"class":569},[564,6265,623],{"class":590},[564,6267,626],{"class":569},[564,6269,6270,6272,6274,6276,6278,6280,6282,6284],{"class":566,"line":629},[564,6271,604],{"class":603},[564,6273,607],{"class":569},[564,6275,807],{"class":610},[564,6277,614],{"class":569},[564,6279,617],{"class":603},[564,6281,620],{"class":569},[564,6283,816],{"class":590},[564,6285,626],{"class":569},[564,6287,6288,6290,6292,6294,6296,6298],{"class":566,"line":635},[564,6289,604],{"class":603},[564,6291,825],{"class":610},[564,6293,828],{"class":603},[564,6295,620],{"class":569},[564,6297,833],{"class":590},[564,6299,626],{"class":569},[564,6301,6302,6304,6306],{"class":566,"line":558},[564,6303,689],{"class":569},[564,6305,574],{"class":573},[564,6307,596],{"class":569},[564,6309,6310],{"class":566,"line":686},[564,6311,632],{"emptyLinePlaceholder":516},[564,6313,6314,6316,6318],{"class":566,"line":696},[564,6315,570],{"class":569},[564,6317,706],{"class":573},[564,6319,596],{"class":569},[564,6321,6322,6324,6326,6328,6330,6332,6335,6337],{"class":566,"line":701},[564,6323,714],{"class":569},[564,6325,862],{"class":573},[564,6327,865],{"class":577},[564,6329,584],{"class":569},[564,6331,587],{"class":569},[564,6333,6334],{"class":590},"#333",[564,6336,587],{"class":569},[564,6338,596],{"class":569},[564,6340,6341,6343,6345,6347,6349,6351,6354,6356],{"class":566,"line":711},[564,6342,881],{"class":569},[564,6344,884],{"class":573},[564,6346,887],{"class":577},[564,6348,584],{"class":569},[564,6350,587],{"class":569},[564,6352,6353],{"class":590},"[0, 2, 10]",[564,6355,587],{"class":569},[564,6357,744],{"class":569},[564,6359,6360,6362,6364],{"class":566,"line":747},[564,6361,881],{"class":569},[564,6363,905],{"class":573},[564,6365,744],{"class":569},[564,6367,6368,6370,6372],{"class":566,"line":910},[564,6369,881],{"class":569},[564,6371,915],{"class":573},[564,6373,744],{"class":569},[564,6375,6376,6378,6380],{"class":566,"line":920},[564,6377,881],{"class":569},[564,6379,970],{"class":573},[564,6381,744],{"class":569},[564,6383,6384,6386,6388],{"class":566,"line":928},[564,6385,881],{"class":569},[564,6387,5574],{"class":573},[564,6389,744],{"class":569},[564,6391,6392,6394,6396],{"class":566,"line":944},[564,6393,990],{"class":569},[564,6395,862],{"class":573},[564,6397,596],{"class":569},[564,6399,6400,6402,6404],{"class":566,"line":959},[564,6401,689],{"class":569},[564,6403,706],{"class":573},[564,6405,596],{"class":569},[536,6407,1706,6408,6410],{},[561,6409,157],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[5844,6412,6413,6416,6419,6422],{},[5847,6414,6415],{},"Manually control layer rendering",[5847,6417,6418],{},"Apply custom animations to individual layers",[5847,6420,6421],{},"Access geometry data programmatically",[5847,6423,6424],{},"Implement complex material logic",[5740,6426,6428],{"id":6427},"svg-data-sources","SVG Data Sources",[536,6430,6431],{},"The composable accepts both file paths and inline SVG strings:",[552,6433,6435],{"className":1024,"code":6434,"language":591,"meta":508,"style":508},"import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[561,6436,6437,6455,6459,6464,6490,6494,6499,6514,6519,6527],{"__ignoreMap":508},[564,6438,6439,6441,6443,6445,6447,6449,6451,6453],{"class":566,"line":509},[564,6440,604],{"class":603},[564,6442,607],{"class":569},[564,6444,5957],{"class":610},[564,6446,614],{"class":569},[564,6448,617],{"class":603},[564,6450,620],{"class":569},[564,6452,623],{"class":590},[564,6454,626],{"class":569},[564,6456,6457],{"class":566,"line":510},[564,6458,632],{"emptyLinePlaceholder":516},[564,6460,6461],{"class":566,"line":629},[564,6462,6463],{"class":1379},"// From file\n",[564,6465,6466,6468,6470,6473,6475,6477,6479,6481,6483,6486,6488],{"class":566,"line":635},[564,6467,638],{"class":577},[564,6469,607],{"class":569},[564,6471,6472],{"class":610}," layers ",[564,6474,674],{"class":569},[564,6476,677],{"class":569},[564,6478,5957],{"class":680},[564,6480,1074],{"class":610},[564,6482,1077],{"class":569},[564,6484,6485],{"class":590},"/path/to/file.svg",[564,6487,1077],{"class":569},[564,6489,1101],{"class":610},[564,6491,6492],{"class":566,"line":558},[564,6493,632],{"emptyLinePlaceholder":516},[564,6495,6496],{"class":566,"line":686},[564,6497,6498],{"class":1379},"// Inline SVG string\n",[564,6500,6501,6503,6506,6508,6511],{"class":566,"line":696},[564,6502,638],{"class":577},[564,6504,6505],{"class":610}," svgString ",[564,6507,584],{"class":569},[564,6509,6510],{"class":569}," `",[564,6512,6513],{"class":590},"\u003Csvg viewBox=\"0 0 100 100\">\n",[564,6515,6516],{"class":566,"line":701},[564,6517,6518],{"class":590},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[564,6520,6521,6524],{"class":566,"line":711},[564,6522,6523],{"class":590},"\u003C/svg>",[564,6525,6526],{"class":569},"`\n",[564,6528,6529,6531,6533,6535,6537,6539,6541],{"class":566,"line":747},[564,6530,638],{"class":577},[564,6532,607],{"class":569},[564,6534,6472],{"class":610},[564,6536,674],{"class":569},[564,6538,677],{"class":569},[564,6540,5957],{"class":680},[564,6542,6543],{"class":610},"(svgString)\n",[5740,6545,1105],{"id":1104},[1107,6547,6548,6558],{},[1110,6549,6550],{},[1113,6551,6552,6554,6556],{},[1116,6553,1119],{"align":1118},[1116,6555,1122],{},[1116,6557,1125],{},[1127,6559,6560,6574,6589,6602],{},[1113,6561,6562,6566,6571],{},[1132,6563,6564],{"align":1118},[540,6565,727],{},[1132,6567,6568],{},[561,6569,6570],{},"SVGResult",[1132,6572,6573],{},"The loaded SVG state from SVGLoader",[1113,6575,6576,6581,6586],{},[1132,6577,6578],{"align":1118},[540,6579,6580],{},"layers",[1132,6582,6583],{},[561,6584,6585],{},"SVGLayer[]",[1132,6587,6588],{},"Computed array of processed geometries and materials",[1113,6590,6591,6595,6599],{},[1132,6592,6593],{"align":1118},[540,6594,1184],{},[1132,6596,6597],{},[561,6598,1284],{},[1132,6600,6601],{},"Whether the SVG is currently loading",[1113,6603,6604,6609,6614],{},[1132,6605,6606],{"align":1118},[540,6607,6608],{},"dispose",[1132,6610,6611],{},[561,6612,6613],{},"() => void",[1132,6615,6616],{},"Function to dispose of all geometries",[5740,6618,1256],{"id":1255},[1107,6620,6621,6633],{},[1110,6622,6623],{},[1113,6624,6625,6627,6629,6631],{},[1116,6626,1119],{"align":1118},[1116,6628,1122],{},[1116,6630,1269],{},[1116,6632,1125],{},[1127,6634,6635,6653,6671,6691,6709],{},[1113,6636,6637,6642,6646,6650],{},[1132,6638,6639],{"align":1118},[540,6640,6641],{},"skipStrokes",[1132,6643,6644],{},[561,6645,1284],{},[1132,6647,6648],{},[561,6649,1289],{},[1132,6651,6652],{},"Whether to skip rendering strokes",[1113,6654,6655,6660,6664,6668],{},[1132,6656,6657],{"align":1118},[540,6658,6659],{},"skipFills",[1132,6661,6662],{},[561,6663,1284],{},[1132,6665,6666],{},[561,6667,1289],{},[1132,6669,6670],{},"Whether to skip rendering fills",[1113,6672,6673,6678,6683,6688],{},[1132,6674,6675],{"align":1118},[540,6676,6677],{},"fillMaterial",[1132,6679,6680],{},[561,6681,6682],{},"MeshBasicMaterialParameters",[1132,6684,6685],{},[561,6686,6687],{},"{}",[1132,6689,6690],{},"Material properties for fill layers",[1113,6692,6693,6698,6702,6706],{},[1132,6694,6695],{"align":1118},[540,6696,6697],{},"strokeMaterial",[1132,6699,6700],{},[561,6701,6682],{},[1132,6703,6704],{},[561,6705,6687],{},[1132,6707,6708],{},"Material properties for stroke layers",[1113,6710,6711,6716,6721,6726],{},[1132,6712,6713],{"align":1118},[540,6714,6715],{},"depth",[1132,6717,6718],{},[561,6719,6720],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[1132,6722,6723],{},[561,6724,6725],{},"'renderOrder'",[1132,6727,6728],{},"How layers should be rendered in 3D space",[5740,6730,6732],{"id":6731},"working-with-layers","Working with Layers",[536,6734,1706,6735,6737],{},[561,6736,6580],{}," computed property returns an array of processed SVG elements, each containing:",[552,6739,6741],{"className":1024,"code":6740,"language":591,"meta":508,"style":508},"interface SVGLayer {\n  geometry: BufferGeometry // Three.js geometry for the layer\n  material: MeshBasicMaterialParameters // Material properties\n  isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[561,6742,6743,6752,6765,6778,6791],{"__ignoreMap":508},[564,6744,6745,6747,6750],{"class":566,"line":509},[564,6746,1516],{"class":577},[564,6748,6749],{"class":1519}," SVGLayer",[564,6751,2205],{"class":569},[564,6753,6754,6757,6759,6762],{"class":566,"line":510},[564,6755,6756],{"class":573},"  geometry",[564,6758,1092],{"class":569},[564,6760,6761],{"class":1519}," BufferGeometry",[564,6763,6764],{"class":1379}," // Three.js geometry for the layer\n",[564,6766,6767,6770,6772,6775],{"class":566,"line":629},[564,6768,6769],{"class":573},"  material",[564,6771,1092],{"class":569},[564,6773,6774],{"class":1519}," MeshBasicMaterialParameters",[564,6776,6777],{"class":1379}," // Material properties\n",[564,6779,6780,6783,6785,6788],{"class":566,"line":635},[564,6781,6782],{"class":573},"  isStroke",[564,6784,1092],{"class":569},[564,6786,6787],{"class":1519}," boolean",[564,6789,6790],{"class":1379}," // Whether this layer is a stroke or fill\n",[564,6792,6793],{"class":566,"line":558},[564,6794,4177],{"class":569},[6796,6797,6799],"h4",{"id":6798},"accessing-individual-layers","Accessing Individual Layers",[552,6801,6804],{"className":554,"code":6802,"highlights":6803,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :color=\"getFillColor(layer, index)\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[510,635],[561,6805,6806,6826,6845,6849,6875,6879,6884,6918,6968,6972,6980,6984,6992,7000,7006,7018,7030,7042,7046,7053,7066,7080,7085,7093,7101],{"__ignoreMap":508},[564,6807,6808,6810,6812,6814,6816,6818,6820,6822,6824],{"class":566,"line":509},[564,6809,570],{"class":569},[564,6811,574],{"class":573},[564,6813,578],{"class":577},[564,6815,581],{"class":577},[564,6817,584],{"class":569},[564,6819,587],{"class":569},[564,6821,591],{"class":590},[564,6823,587],{"class":569},[564,6825,596],{"class":569},[564,6827,6829,6831,6833,6835,6837,6839,6841,6843],{"class":6828,"line":510},[566,600],[564,6830,604],{"class":603},[564,6832,607],{"class":569},[564,6834,5957],{"class":610},[564,6836,614],{"class":569},[564,6838,617],{"class":603},[564,6840,620],{"class":569},[564,6842,623],{"class":590},[564,6844,626],{"class":569},[564,6846,6847],{"class":566,"line":629},[564,6848,632],{"emptyLinePlaceholder":516},[564,6850,6852,6854,6856,6858,6860,6862,6864,6866,6868,6871,6873],{"class":6851,"line":635},[566,600],[564,6853,638],{"class":577},[564,6855,607],{"class":569},[564,6857,6472],{"class":610},[564,6859,674],{"class":569},[564,6861,677],{"class":569},[564,6863,5957],{"class":680},[564,6865,1074],{"class":610},[564,6867,1077],{"class":569},[564,6869,6870],{"class":590},"/complex-icon.svg",[564,6872,1077],{"class":569},[564,6874,1101],{"class":610},[564,6876,6877],{"class":566,"line":558},[564,6878,632],{"emptyLinePlaceholder":516},[564,6880,6881],{"class":566,"line":686},[564,6882,6883],{"class":1379},"// Apply different materials based on layer type\n",[564,6885,6886,6888,6891,6893,6895,6898,6900,6902,6904,6907,6909,6912,6914,6916],{"class":566,"line":696},[564,6887,638],{"class":577},[564,6889,6890],{"class":610}," getFillColor ",[564,6892,584],{"class":569},[564,6894,2193],{"class":569},[564,6896,6897],{"class":2196},"layer",[564,6899,1092],{"class":569},[564,6901,6749],{"class":1519},[564,6903,663],{"class":569},[564,6905,6906],{"class":2196}," index",[564,6908,1092],{"class":569},[564,6910,6911],{"class":1519}," number",[564,6913,2200],{"class":569},[564,6915,2176],{"class":577},[564,6917,2205],{"class":569},[564,6919,6920,6923,6926,6928,6931,6934,6936,6939,6941,6944,6946,6949,6952,6955,6958,6961,6963,6966],{"class":566,"line":701},[564,6921,6922],{"class":603},"  return",[564,6924,6925],{"class":610}," layer",[564,6927,1394],{"class":569},[564,6929,6930],{"class":610},"isStroke",[564,6932,6933],{"class":569}," ?",[564,6935,620],{"class":569},[564,6937,6938],{"class":590},"#000000",[564,6940,1077],{"class":569},[564,6942,6943],{"class":569}," :",[564,6945,6510],{"class":569},[564,6947,6948],{"class":590},"hsl(",[564,6950,6951],{"class":569},"${",[564,6953,6954],{"class":610},"index ",[564,6956,6957],{"class":569},"*",[564,6959,6960],{"class":2230}," 30",[564,6962,674],{"class":569},[564,6964,6965],{"class":590},", 70%, 50%)",[564,6967,6526],{"class":569},[564,6969,6970],{"class":566,"line":711},[564,6971,4177],{"class":569},[564,6973,6974,6976,6978],{"class":566,"line":747},[564,6975,689],{"class":569},[564,6977,574],{"class":573},[564,6979,596],{"class":569},[564,6981,6982],{"class":566,"line":910},[564,6983,632],{"emptyLinePlaceholder":516},[564,6985,6986,6988,6990],{"class":566,"line":920},[564,6987,570],{"class":569},[564,6989,706],{"class":573},[564,6991,596],{"class":569},[564,6993,6994,6996,6998],{"class":566,"line":928},[564,6995,714],{"class":569},[564,6997,5664],{"class":573},[564,6999,596],{"class":569},[564,7001,7002,7004],{"class":566,"line":944},[564,7003,881],{"class":569},[564,7005,6118],{"class":573},[564,7007,7008,7010,7012,7014,7016],{"class":566,"line":959},[564,7009,6123],{"class":577},[564,7011,584],{"class":569},[564,7013,587],{"class":569},[564,7015,6130],{"class":590},[564,7017,941],{"class":569},[564,7019,7020,7022,7024,7026,7028],{"class":566,"line":965},[564,7021,6137],{"class":577},[564,7023,584],{"class":569},[564,7025,587],{"class":569},[564,7027,6172],{"class":590},[564,7029,941],{"class":569},[564,7031,7032,7034,7036,7038,7040],{"class":566,"line":987},[564,7033,6151],{"class":577},[564,7035,584],{"class":569},[564,7037,587],{"class":569},[564,7039,6158],{"class":590},[564,7041,941],{"class":569},[564,7043,7044],{"class":566,"line":997},[564,7045,6179],{"class":569},[564,7047,7048,7050],{"class":566,"line":4055},[564,7049,4340],{"class":569},[564,7051,7052],{"class":573},"TresMeshBasicMaterial\n",[564,7054,7055,7058,7060,7062,7064],{"class":566,"line":4056},[564,7056,7057],{"class":577},"        v-bind",[564,7059,584],{"class":569},[564,7061,587],{"class":569},[564,7063,6196],{"class":590},[564,7065,941],{"class":569},[564,7067,7068,7071,7073,7075,7078],{"class":566,"line":4057},[564,7069,7070],{"class":577},"        :color",[564,7072,584],{"class":569},[564,7074,587],{"class":569},[564,7076,7077],{"class":590},"getFillColor(layer, index)",[564,7079,941],{"class":569},[564,7081,7082],{"class":566,"line":4328},[564,7083,7084],{"class":569},"      />\n",[564,7086,7087,7089,7091],{"class":566,"line":4337},[564,7088,4369],{"class":569},[564,7090,3879],{"class":573},[564,7092,596],{"class":569},[564,7094,7095,7097,7099],{"class":566,"line":4347},[564,7096,990],{"class":569},[564,7098,5664],{"class":573},[564,7100,596],{"class":569},[564,7102,7103,7105,7107],{"class":566,"line":4366},[564,7104,689],{"class":569},[564,7106,706],{"class":573},[564,7108,596],{"class":569},[5740,7110,7112],{"id":7111},"depth-handling","Depth Handling",[536,7114,1706,7115,7117],{},[561,7116,6715],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[6796,7119,7121,7123],{"id":7120},"renderorder-default",[561,7122,6725],{}," (Default)",[536,7125,7126],{},[540,7127,7128],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[536,7130,7131,7132,7134],{},"This is the default ",[561,7133,6715],{}," option.",[536,7136,7137,7138,7141,7142,7144,7145,7152],{},"This value sets the materials' ",[561,7139,7140],{},"depthWrite"," to ",[561,7143,1289],{}," and increments the mesh layers ",[1015,7146,7149],{"href":7147,"rel":7148},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1019],[561,7150,7151],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[536,7154,7155,7158],{},[540,7156,7157],{},"Disadvantage",": Scene objects may render out of order.",[536,7160,7161,7162,7167,7168,7173],{},"SVG layers with higher ",[1015,7163,7165],{"href":7147,"rel":7164},[1019],[561,7166,7151],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1015,7169,7171],{"href":7147,"rel":7170},[1019],[561,7172,7151],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[552,7175,7177],{"className":1024,"code":7176,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[561,7178,7179],{"__ignoreMap":508},[564,7180,7181,7183,7185,7187,7189,7191,7193,7195,7197,7200,7202,7204,7206,7209,7211,7213,7215,7217,7219],{"class":566,"line":509},[564,7182,638],{"class":577},[564,7184,607],{"class":569},[564,7186,6472],{"class":610},[564,7188,674],{"class":569},[564,7190,677],{"class":569},[564,7192,5957],{"class":680},[564,7194,1074],{"class":610},[564,7196,1077],{"class":569},[564,7198,7199],{"class":590},"/icon.svg",[564,7201,1077],{"class":569},[564,7203,663],{"class":569},[564,7205,607],{"class":569},[564,7207,7208],{"class":573}," depth",[564,7210,1092],{"class":569},[564,7212,620],{"class":569},[564,7214,7151],{"class":590},[564,7216,1077],{"class":569},[564,7218,614],{"class":569},[564,7220,1101],{"class":610},[6796,7222,7223],{"id":7223},"flat",[536,7225,7226],{},[540,7227,7228],{},"Use case: simple SVGs",[536,7230,7231,7232,7141,7238,1394],{},"This option sets the materials ",[1015,7233,7236],{"href":7234,"rel":7235},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1019],[561,7237,7140],{},[561,7239,1289],{},[536,7241,7242,7244],{},[540,7243,7157],{},": SVG layers may render out of order.",[536,7246,7247],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[552,7249,7251],{"className":1024,"code":7250,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[561,7252,7253],{"__ignoreMap":508},[564,7254,7255,7257,7259,7261,7263,7265,7267,7269,7271,7273,7275,7277,7279,7281,7283,7285,7287,7289,7291],{"class":566,"line":509},[564,7256,638],{"class":577},[564,7258,607],{"class":569},[564,7260,6472],{"class":610},[564,7262,674],{"class":569},[564,7264,677],{"class":569},[564,7266,5957],{"class":680},[564,7268,1074],{"class":610},[564,7270,1077],{"class":569},[564,7272,7199],{"class":590},[564,7274,1077],{"class":569},[564,7276,663],{"class":569},[564,7278,607],{"class":569},[564,7280,7208],{"class":573},[564,7282,1092],{"class":569},[564,7284,620],{"class":569},[564,7286,7223],{"class":590},[564,7288,1077],{"class":569},[564,7290,614],{"class":569},[564,7292,1101],{"class":610},[6796,7294,7296],{"id":7295},"offsetz","offsetZ",[536,7298,7299],{},[540,7300,7301],{},"Use case: unscaled SVGs seen from the front",[536,7303,7304],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[536,7306,7307,7309],{},[540,7308,7157],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[536,7311,7312,7313,7318],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1015,7314,7317],{"href":7315,"rel":7316},"https://en.wikipedia.org/wiki/Z-fighting",[1019],"z-fight",", particularly if the SVG is scaled down.",[552,7320,7322],{"className":1024,"code":7321,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[561,7323,7324],{"__ignoreMap":508},[564,7325,7326,7328,7330,7332,7334,7336,7338,7340,7342,7344,7346,7348,7350,7352,7354,7356,7358,7360,7362],{"class":566,"line":509},[564,7327,638],{"class":577},[564,7329,607],{"class":569},[564,7331,6472],{"class":610},[564,7333,674],{"class":569},[564,7335,677],{"class":569},[564,7337,5957],{"class":680},[564,7339,1074],{"class":610},[564,7341,1077],{"class":569},[564,7343,7199],{"class":590},[564,7345,1077],{"class":569},[564,7347,663],{"class":569},[564,7349,607],{"class":569},[564,7351,7208],{"class":573},[564,7353,1092],{"class":569},[564,7355,620],{"class":569},[564,7357,7296],{"class":590},[564,7359,1077],{"class":569},[564,7361,614],{"class":569},[564,7363,1101],{"class":610},[6796,7365,7367],{"id":7366},"number",[561,7368,7366],{},[536,7370,7371],{},[540,7372,7373],{},"Use case: SVGs seen from the front",[536,7375,7376,7377,7380,7381,7385],{},"This is the same as ",[561,7378,7379],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1015,7382,7384],{"href":7315,"rel":7383},[1019],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[536,7387,7388,7390],{},[540,7389,7157],{},": \"Bottom\" of the \"stack\" is visible.",[552,7392,7394],{"className":1024,"code":7393,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[561,7395,7396],{"__ignoreMap":508},[564,7397,7398,7400,7402,7404,7406,7408,7410,7412,7414,7416,7418,7420,7422,7424,7426,7429,7431],{"class":566,"line":509},[564,7399,638],{"class":577},[564,7401,607],{"class":569},[564,7403,6472],{"class":610},[564,7405,674],{"class":569},[564,7407,677],{"class":569},[564,7409,5957],{"class":680},[564,7411,1074],{"class":610},[564,7413,1077],{"class":569},[564,7415,7199],{"class":590},[564,7417,1077],{"class":569},[564,7419,663],{"class":569},[564,7421,607],{"class":569},[564,7423,7208],{"class":573},[564,7425,1092],{"class":569},[564,7427,7428],{"class":2230}," 0.1",[564,7430,614],{"class":569},[564,7432,1101],{"class":610},[5740,7434,7436],{"id":7435},"memory-management","Memory Management",[536,7438,7439],{},"Always dispose of geometries when the component unmounts:",[552,7441,7443],{"className":554,"code":7442,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n  dispose()\n})\n\u003C/script>\n",[561,7444,7445,7465,7483,7502,7506,7530,7534,7547,7554,7560],{"__ignoreMap":508},[564,7446,7447,7449,7451,7453,7455,7457,7459,7461,7463],{"class":566,"line":509},[564,7448,570],{"class":569},[564,7450,574],{"class":573},[564,7452,578],{"class":577},[564,7454,581],{"class":577},[564,7456,584],{"class":569},[564,7458,587],{"class":569},[564,7460,591],{"class":590},[564,7462,587],{"class":569},[564,7464,596],{"class":569},[564,7466,7467,7469,7471,7473,7475,7477,7479,7481],{"class":566,"line":510},[564,7468,604],{"class":603},[564,7470,607],{"class":569},[564,7472,5957],{"class":610},[564,7474,614],{"class":569},[564,7476,617],{"class":603},[564,7478,620],{"class":569},[564,7480,623],{"class":590},[564,7482,626],{"class":569},[564,7484,7485,7487,7489,7492,7494,7496,7498,7500],{"class":566,"line":629},[564,7486,604],{"class":603},[564,7488,607],{"class":569},[564,7490,7491],{"class":610}," onUnmounted",[564,7493,614],{"class":569},[564,7495,617],{"class":603},[564,7497,620],{"class":569},[564,7499,559],{"class":590},[564,7501,626],{"class":569},[564,7503,7504],{"class":566,"line":635},[564,7505,632],{"emptyLinePlaceholder":516},[564,7507,7508,7510,7512,7514,7516,7518,7520,7522,7524,7526,7528],{"class":566,"line":558},[564,7509,638],{"class":577},[564,7511,607],{"class":569},[564,7513,6010],{"class":610},[564,7515,674],{"class":569},[564,7517,677],{"class":569},[564,7519,5957],{"class":680},[564,7521,1074],{"class":610},[564,7523,1077],{"class":569},[564,7525,7199],{"class":590},[564,7527,1077],{"class":569},[564,7529,1101],{"class":610},[564,7531,7532],{"class":566,"line":686},[564,7533,632],{"emptyLinePlaceholder":516},[564,7535,7536,7539,7541,7543,7545],{"class":566,"line":696},[564,7537,7538],{"class":680},"onUnmounted",[564,7540,1074],{"class":610},[564,7542,2173],{"class":569},[564,7544,2176],{"class":577},[564,7546,2205],{"class":569},[564,7548,7549,7552],{"class":566,"line":701},[564,7550,7551],{"class":680},"  dispose",[564,7553,2154],{"class":573},[564,7555,7556,7558],{"class":566,"line":711},[564,7557,674],{"class":569},[564,7559,1101],{"class":610},[564,7561,7562,7564,7566],{"class":566,"line":747},[564,7563,689],{"class":569},[564,7565,574],{"class":573},[564,7567,596],{"class":569},[5740,7569,7571],{"id":7570},"advanced-usage","Advanced Usage",[6796,7573,7575],{"id":7574},"conditional-layer-rendering","Conditional Layer Rendering",[552,7577,7579],{"className":554,"code":7578,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n  showDetails.value\n    ? layers.value\n    : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in visibleLayers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[561,7580,7581,7601,7619,7637,7641,7659,7684,7688,7706,7716,7727,7759,7763,7771,7775,7783,7791,7797,7810,7822,7834,7838,7856,7864,7872],{"__ignoreMap":508},[564,7582,7583,7585,7587,7589,7591,7593,7595,7597,7599],{"class":566,"line":509},[564,7584,570],{"class":569},[564,7586,574],{"class":573},[564,7588,578],{"class":577},[564,7590,581],{"class":577},[564,7592,584],{"class":569},[564,7594,587],{"class":569},[564,7596,591],{"class":590},[564,7598,587],{"class":569},[564,7600,596],{"class":569},[564,7602,7603,7605,7607,7609,7611,7613,7615,7617],{"class":566,"line":510},[564,7604,604],{"class":603},[564,7606,607],{"class":569},[564,7608,5957],{"class":610},[564,7610,614],{"class":569},[564,7612,617],{"class":603},[564,7614,620],{"class":569},[564,7616,623],{"class":590},[564,7618,626],{"class":569},[564,7620,7621,7623,7625,7627,7629,7631,7633,7635],{"class":566,"line":629},[564,7622,604],{"class":603},[564,7624,607],{"class":569},[564,7626,4840],{"class":610},[564,7628,614],{"class":569},[564,7630,617],{"class":603},[564,7632,620],{"class":569},[564,7634,559],{"class":590},[564,7636,626],{"class":569},[564,7638,7639],{"class":566,"line":635},[564,7640,632],{"emptyLinePlaceholder":516},[564,7642,7643,7645,7648,7650,7652,7654,7657],{"class":566,"line":558},[564,7644,638],{"class":577},[564,7646,7647],{"class":610}," showDetails ",[564,7649,584],{"class":569},[564,7651,2108],{"class":680},[564,7653,1074],{"class":610},[564,7655,7656],{"class":1095},"true",[564,7658,1101],{"class":610},[564,7660,7661,7663,7665,7667,7669,7671,7673,7675,7677,7680,7682],{"class":566,"line":686},[564,7662,638],{"class":577},[564,7664,607],{"class":569},[564,7666,6472],{"class":610},[564,7668,674],{"class":569},[564,7670,677],{"class":569},[564,7672,5957],{"class":680},[564,7674,1074],{"class":610},[564,7676,1077],{"class":569},[564,7678,7679],{"class":590},"/detailed-icon.svg",[564,7681,1077],{"class":569},[564,7683,1101],{"class":610},[564,7685,7686],{"class":566,"line":696},[564,7687,632],{"emptyLinePlaceholder":516},[564,7689,7690,7692,7695,7697,7699,7701,7703],{"class":566,"line":701},[564,7691,638],{"class":577},[564,7693,7694],{"class":610}," visibleLayers ",[564,7696,584],{"class":569},[564,7698,4840],{"class":680},[564,7700,1074],{"class":610},[564,7702,2173],{"class":569},[564,7704,7705],{"class":577}," =>\n",[564,7707,7708,7711,7713],{"class":566,"line":711},[564,7709,7710],{"class":610},"  showDetails",[564,7712,1394],{"class":569},[564,7714,7715],{"class":610},"value\n",[564,7717,7718,7721,7723,7725],{"class":566,"line":747},[564,7719,7720],{"class":569},"    ?",[564,7722,6001],{"class":610},[564,7724,1394],{"class":569},[564,7726,7715],{"class":610},[564,7728,7729,7732,7734,7736,7738,7740,7743,7745,7747,7749,7752,7754,7756],{"class":566,"line":910},[564,7730,7731],{"class":569},"    :",[564,7733,6001],{"class":610},[564,7735,1394],{"class":569},[564,7737,1397],{"class":610},[564,7739,1394],{"class":569},[564,7741,7742],{"class":680},"filter",[564,7744,1074],{"class":610},[564,7746,6897],{"class":2196},[564,7748,2176],{"class":577},[564,7750,7751],{"class":569}," !",[564,7753,6897],{"class":610},[564,7755,1394],{"class":569},[564,7757,7758],{"class":610},"isStroke)\n",[564,7760,7761],{"class":566,"line":920},[564,7762,1101],{"class":610},[564,7764,7765,7767,7769],{"class":566,"line":928},[564,7766,689],{"class":569},[564,7768,574],{"class":573},[564,7770,596],{"class":569},[564,7772,7773],{"class":566,"line":944},[564,7774,632],{"emptyLinePlaceholder":516},[564,7776,7777,7779,7781],{"class":566,"line":959},[564,7778,570],{"class":569},[564,7780,706],{"class":573},[564,7782,596],{"class":569},[564,7784,7785,7787,7789],{"class":566,"line":965},[564,7786,714],{"class":569},[564,7788,5664],{"class":573},[564,7790,596],{"class":569},[564,7792,7793,7795],{"class":566,"line":987},[564,7794,881],{"class":569},[564,7796,6118],{"class":573},[564,7798,7799,7801,7803,7805,7808],{"class":566,"line":997},[564,7800,6123],{"class":577},[564,7802,584],{"class":569},[564,7804,587],{"class":569},[564,7806,7807],{"class":590},"(layer, index) in visibleLayers",[564,7809,941],{"class":569},[564,7811,7812,7814,7816,7818,7820],{"class":566,"line":4055},[564,7813,6137],{"class":577},[564,7815,584],{"class":569},[564,7817,587],{"class":569},[564,7819,6172],{"class":590},[564,7821,941],{"class":569},[564,7823,7824,7826,7828,7830,7832],{"class":566,"line":4056},[564,7825,6151],{"class":577},[564,7827,584],{"class":569},[564,7829,587],{"class":569},[564,7831,6158],{"class":590},[564,7833,941],{"class":569},[564,7835,7836],{"class":566,"line":4057},[564,7837,6179],{"class":569},[564,7839,7840,7842,7844,7846,7848,7850,7852,7854],{"class":566,"line":4328},[564,7841,4340],{"class":569},[564,7843,6186],{"class":573},[564,7845,6189],{"class":577},[564,7847,584],{"class":569},[564,7849,587],{"class":569},[564,7851,6196],{"class":590},[564,7853,587],{"class":569},[564,7855,744],{"class":569},[564,7857,7858,7860,7862],{"class":566,"line":4337},[564,7859,4369],{"class":569},[564,7861,3879],{"class":573},[564,7863,596],{"class":569},[564,7865,7866,7868,7870],{"class":566,"line":4347},[564,7867,990],{"class":569},[564,7869,5664],{"class":573},[564,7871,596],{"class":569},[564,7873,7874,7876,7878],{"class":566,"line":4366},[564,7875,689],{"class":569},[564,7877,706],{"class":573},[564,7879,596],{"class":569},[6796,7881,7883],{"id":7882},"material-customization-per-layer","Material Customization per Layer",[552,7885,7887],{"className":554,"code":7886,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n  fillMaterial: {\n    transparent: true,\n    opacity: 0.9\n  },\n  strokeMaterial: {\n    transparent: true,\n    opacity: 1.0,\n    color: '#000000'\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :wireframe=\"layer.isStroke\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[561,7888,7889,7909,7927,7931,7958,7966,7977,7987,7992,8001,8011,8022,8035,8039,8045,8053,8057,8065,8073,8079,8091,8103,8115,8119,8125,8137,8151,8155,8163,8171],{"__ignoreMap":508},[564,7890,7891,7893,7895,7897,7899,7901,7903,7905,7907],{"class":566,"line":509},[564,7892,570],{"class":569},[564,7894,574],{"class":573},[564,7896,578],{"class":577},[564,7898,581],{"class":577},[564,7900,584],{"class":569},[564,7902,587],{"class":569},[564,7904,591],{"class":590},[564,7906,587],{"class":569},[564,7908,596],{"class":569},[564,7910,7911,7913,7915,7917,7919,7921,7923,7925],{"class":566,"line":510},[564,7912,604],{"class":603},[564,7914,607],{"class":569},[564,7916,5957],{"class":610},[564,7918,614],{"class":569},[564,7920,617],{"class":603},[564,7922,620],{"class":569},[564,7924,623],{"class":590},[564,7926,626],{"class":569},[564,7928,7929],{"class":566,"line":629},[564,7930,632],{"emptyLinePlaceholder":516},[564,7932,7933,7935,7937,7939,7941,7943,7945,7947,7949,7952,7954,7956],{"class":566,"line":635},[564,7934,638],{"class":577},[564,7936,607],{"class":569},[564,7938,6472],{"class":610},[564,7940,674],{"class":569},[564,7942,677],{"class":569},[564,7944,5957],{"class":680},[564,7946,1074],{"class":610},[564,7948,1077],{"class":569},[564,7950,7951],{"class":590},"/logo.svg",[564,7953,1077],{"class":569},[564,7955,663],{"class":569},[564,7957,2205],{"class":569},[564,7959,7960,7962,7964],{"class":566,"line":558},[564,7961,6042],{"class":573},[564,7963,1092],{"class":569},[564,7965,2205],{"class":569},[564,7967,7968,7971,7973,7975],{"class":566,"line":686},[564,7969,7970],{"class":573},"    transparent",[564,7972,1092],{"class":569},[564,7974,1096],{"class":1095},[564,7976,4503],{"class":569},[564,7978,7979,7982,7984],{"class":566,"line":696},[564,7980,7981],{"class":573},"    opacity",[564,7983,1092],{"class":569},[564,7985,7986],{"class":2230}," 0.9\n",[564,7988,7989],{"class":566,"line":701},[564,7990,7991],{"class":569},"  },\n",[564,7993,7994,7997,7999],{"class":566,"line":711},[564,7995,7996],{"class":573},"  strokeMaterial",[564,7998,1092],{"class":569},[564,8000,2205],{"class":569},[564,8002,8003,8005,8007,8009],{"class":566,"line":747},[564,8004,7970],{"class":573},[564,8006,1092],{"class":569},[564,8008,1096],{"class":1095},[564,8010,4503],{"class":569},[564,8012,8013,8015,8017,8020],{"class":566,"line":910},[564,8014,7981],{"class":573},[564,8016,1092],{"class":569},[564,8018,8019],{"class":2230}," 1.0",[564,8021,4503],{"class":569},[564,8023,8024,8027,8029,8031,8033],{"class":566,"line":920},[564,8025,8026],{"class":573},"    color",[564,8028,1092],{"class":569},[564,8030,620],{"class":569},[564,8032,6938],{"class":590},[564,8034,626],{"class":569},[564,8036,8037],{"class":566,"line":928},[564,8038,5282],{"class":569},[564,8040,8041,8043],{"class":566,"line":944},[564,8042,674],{"class":569},[564,8044,1101],{"class":610},[564,8046,8047,8049,8051],{"class":566,"line":959},[564,8048,689],{"class":569},[564,8050,574],{"class":573},[564,8052,596],{"class":569},[564,8054,8055],{"class":566,"line":965},[564,8056,632],{"emptyLinePlaceholder":516},[564,8058,8059,8061,8063],{"class":566,"line":987},[564,8060,570],{"class":569},[564,8062,706],{"class":573},[564,8064,596],{"class":569},[564,8066,8067,8069,8071],{"class":566,"line":997},[564,8068,714],{"class":569},[564,8070,5664],{"class":573},[564,8072,596],{"class":569},[564,8074,8075,8077],{"class":566,"line":4055},[564,8076,881],{"class":569},[564,8078,6118],{"class":573},[564,8080,8081,8083,8085,8087,8089],{"class":566,"line":4056},[564,8082,6123],{"class":577},[564,8084,584],{"class":569},[564,8086,587],{"class":569},[564,8088,6130],{"class":590},[564,8090,941],{"class":569},[564,8092,8093,8095,8097,8099,8101],{"class":566,"line":4057},[564,8094,6137],{"class":577},[564,8096,584],{"class":569},[564,8098,587],{"class":569},[564,8100,6172],{"class":590},[564,8102,941],{"class":569},[564,8104,8105,8107,8109,8111,8113],{"class":566,"line":4328},[564,8106,6151],{"class":577},[564,8108,584],{"class":569},[564,8110,587],{"class":569},[564,8112,6158],{"class":590},[564,8114,941],{"class":569},[564,8116,8117],{"class":566,"line":4337},[564,8118,6179],{"class":569},[564,8120,8121,8123],{"class":566,"line":4347},[564,8122,4340],{"class":569},[564,8124,7052],{"class":573},[564,8126,8127,8129,8131,8133,8135],{"class":566,"line":4366},[564,8128,7057],{"class":577},[564,8130,584],{"class":569},[564,8132,587],{"class":569},[564,8134,6196],{"class":590},[564,8136,941],{"class":569},[564,8138,8139,8142,8144,8146,8149],{"class":566,"line":4058},[564,8140,8141],{"class":577},"        :wireframe",[564,8143,584],{"class":569},[564,8145,587],{"class":569},[564,8147,8148],{"class":590},"layer.isStroke",[564,8150,941],{"class":569},[564,8152,8153],{"class":566,"line":4385},[564,8154,7084],{"class":569},[564,8156,8157,8159,8161],{"class":566,"line":5108},[564,8158,4369],{"class":569},[564,8160,3879],{"class":573},[564,8162,596],{"class":569},[564,8164,8165,8167,8169],{"class":566,"line":5113},[564,8166,990],{"class":569},[564,8168,5664],{"class":573},[564,8170,596],{"class":569},[564,8172,8173,8175,8177],{"class":566,"line":5119},[564,8174,689],{"class":569},[564,8176,706],{"class":573},[564,8178,596],{"class":569},[545,8180,8182],{"id":8181},"usesvg-component","UseSVG Component",[536,8184,8185,8186,8189],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[561,8187,8188],{},"UseSVG"," component:",[552,8191,8193],{"className":554,"code":8192,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n    \u003CUseSVG\n      src=\"/path/to/logo.svg\"\n      :skip-fills=\"false\"\n      :fill-material=\"{ transparent: true,\n                        opacity: 0.8 }\"\n      depth=\"renderOrder\"\n    />\n  \u003C/TresGroup>\n\u003C/template>\n",[561,8194,8195,8215,8234,8242,8246,8254,8284,8291,8305,8318,8330,8337,8350,8354,8362],{"__ignoreMap":508},[564,8196,8197,8199,8201,8203,8205,8207,8209,8211,8213],{"class":566,"line":509},[564,8198,570],{"class":569},[564,8200,574],{"class":573},[564,8202,578],{"class":577},[564,8204,581],{"class":577},[564,8206,584],{"class":569},[564,8208,587],{"class":569},[564,8210,591],{"class":590},[564,8212,587],{"class":569},[564,8214,596],{"class":569},[564,8216,8217,8219,8221,8224,8226,8228,8230,8232],{"class":566,"line":510},[564,8218,604],{"class":603},[564,8220,607],{"class":569},[564,8222,8223],{"class":610}," UseSVG",[564,8225,614],{"class":569},[564,8227,617],{"class":603},[564,8229,620],{"class":569},[564,8231,623],{"class":590},[564,8233,626],{"class":569},[564,8235,8236,8238,8240],{"class":566,"line":629},[564,8237,689],{"class":569},[564,8239,574],{"class":573},[564,8241,596],{"class":569},[564,8243,8244],{"class":566,"line":635},[564,8245,632],{"emptyLinePlaceholder":516},[564,8247,8248,8250,8252],{"class":566,"line":558},[564,8249,570],{"class":569},[564,8251,706],{"class":573},[564,8253,596],{"class":569},[564,8255,8256,8258,8260,8262,8264,8266,8269,8271,8273,8275,8277,8280,8282],{"class":566,"line":686},[564,8257,714],{"class":569},[564,8259,5664],{"class":573},[564,8261,2656],{"class":577},[564,8263,584],{"class":569},[564,8265,587],{"class":569},[564,8267,8268],{"class":590},"0.01",[564,8270,587],{"class":569},[564,8272,887],{"class":577},[564,8274,584],{"class":569},[564,8276,587],{"class":569},[564,8278,8279],{"class":590},"[-2.1, 1, 0]",[564,8281,587],{"class":569},[564,8283,596],{"class":569},[564,8285,8286,8288],{"class":566,"line":696},[564,8287,881],{"class":569},[564,8289,8290],{"class":573},"UseSVG\n",[564,8292,8293,8296,8298,8300,8303],{"class":566,"line":701},[564,8294,8295],{"class":577},"      src",[564,8297,584],{"class":569},[564,8299,587],{"class":569},[564,8301,8302],{"class":590},"/path/to/logo.svg",[564,8304,941],{"class":569},[564,8306,8307,8310,8312,8314,8316],{"class":566,"line":711},[564,8308,8309],{"class":577},"      :skip-fills",[564,8311,584],{"class":569},[564,8313,587],{"class":569},[564,8315,1289],{"class":590},[564,8317,941],{"class":569},[564,8319,8320,8323,8325,8327],{"class":566,"line":747},[564,8321,8322],{"class":577},"      :fill-material",[564,8324,584],{"class":569},[564,8326,587],{"class":569},[564,8328,8329],{"class":590},"{ transparent: true,\n",[564,8331,8332,8335],{"class":566,"line":910},[564,8333,8334],{"class":590},"                        opacity: 0.8 }",[564,8336,941],{"class":569},[564,8338,8339,8342,8344,8346,8348],{"class":566,"line":920},[564,8340,8341],{"class":577},"      depth",[564,8343,584],{"class":569},[564,8345,587],{"class":569},[564,8347,7151],{"class":590},[564,8349,941],{"class":569},[564,8351,8352],{"class":566,"line":928},[564,8353,962],{"class":569},[564,8355,8356,8358,8360],{"class":566,"line":944},[564,8357,990],{"class":569},[564,8359,5664],{"class":573},[564,8361,596],{"class":569},[564,8363,8364,8366,8368],{"class":566,"line":959},[564,8365,689],{"class":569},[564,8367,706],{"class":573},[564,8369,596],{"class":569},[5740,8371,2320],{"id":2319},[1107,8373,8374,8386],{},[1110,8375,8376],{},[1113,8377,8378,8380,8382,8384],{},[1116,8379,2329],{"align":1118},[1116,8381,1122],{},[1116,8383,1125],{"align":1118},[1116,8385,1269],{},[1127,8387,8388,8409,8429,8448,8465,8482,8501,8519],{},[1113,8389,8390,8395,8399,8407],{},[1132,8391,8392],{"align":1118},[540,8393,8394],{},"src",[1132,8396,8397],{},[561,8398,1304],{},[1132,8400,8401,8402,8406],{"align":1118},"Either a path to an SVG ",[8403,8404,8405],"em",{},"or"," an SVG string",[1132,8408],{},[1113,8410,8411,8415,8419,8425],{},[1132,8412,8413],{"align":1118},[540,8414,6641],{},[1132,8416,8417],{},[561,8418,1284],{},[1132,8420,8421,8422,8424],{"align":1118},"If ",[561,8423,7656],{},", the SVG strokes will not be rendered.",[1132,8426,8427],{},[561,8428,1289],{},[1113,8430,8431,8435,8439,8444],{},[1132,8432,8433],{"align":1118},[540,8434,6659],{},[1132,8436,8437],{},[561,8438,1284],{},[1132,8440,8421,8441,8443],{"align":1118},[561,8442,7656],{},", the SVG fills will not be rendered.",[1132,8445,8446],{},[561,8447,1289],{},[1113,8449,8450,8454,8458,8461],{},[1132,8451,8452],{"align":1118},[540,8453,6697],{},[1132,8455,8456],{},[561,8457,6682],{},[1132,8459,8460],{"align":1118},"Props to assign to the stroke materials of the resulting meshes.",[1132,8462,8463],{},[561,8464,2352],{},[1113,8466,8467,8471,8475,8478],{},[1132,8468,8469],{"align":1118},[540,8470,6677],{},[1132,8472,8473],{},[561,8474,6682],{},[1132,8476,8477],{"align":1118},"Props to assign to the fill materials of the resulting meshes.",[1132,8479,8480],{},[561,8481,2352],{},[1113,8483,8484,8489,8494,8497],{},[1132,8485,8486],{"align":1118},[540,8487,8488],{},"strokeMeshProps",[1132,8490,8491],{},[561,8492,8493],{},"TresOptions",[1132,8495,8496],{"align":1118},"Props to assign to the resulting stroke meshes.",[1132,8498,8499],{},[561,8500,2352],{},[1113,8502,8503,8508,8512,8515],{},[1132,8504,8505],{"align":1118},[540,8506,8507],{},"fillMeshProps",[1132,8509,8510],{},[561,8511,8493],{},[1132,8513,8514],{"align":1118},"Props to assign to the resulting fill meshes.",[1132,8516,8517],{},[561,8518,2352],{},[1113,8520,8521,8525,8529,8536],{},[1132,8522,8523],{"align":1118},[540,8524,6715],{},[1132,8526,8527],{},[561,8528,6720],{},[1132,8530,8531,8532,2200],{"align":1118},"Specify how SVG layers are to be rendered. (",[1015,8533,8535],{"href":8534},"#depth-handling","See \"Depth\"",[1132,8537,8538],{},[561,8539,7151],{},[545,8541,8543],{"id":8542},"troubleshooting","Troubleshooting",[8545,8546,8548],"alert",{"type":8547},"warning",[536,8549,8550],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[536,8552,8553],{},"Here are some things to try if you run into problems:",[5740,8555,8557],{"id":8556},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[5844,8559,8560],{},[5847,8561,8562,8563,7141,8565,1394],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[561,8564,5609],{},[561,8566,8567],{},"rgb(255, 0, 0)",[5740,8569,8571],{"id":8570},"parts-of-the-svg-render-in-the-wrong-order-or-disappear-depending-on-viewing-angle","Parts of the SVG render in the wrong order or disappear, depending on viewing angle",[5844,8573,8574,8586],{},[5847,8575,8576,8577,8579,8580,1394],{},"In your ",[561,8578,157],{}," options, ",[1015,8581,8582,8583,8585],{"href":8534},"change the ",[561,8584,6715],{}," option",[5847,8587,8588,8589,8592,8593,1394],{},"In the SVG source, use ",[561,8590,8591],{},"fill=\"none\""," rather than ",[561,8594,8595],{},"fill-opacity=\"0\"",[5740,8597,8599,8600],{"id":8598},"parts-of-the-svg-z-fight","Parts of the SVG ",[1015,8601,8603],{"href":7315,"rel":8602},[1019],"\"z-fight\"",[5844,8605,8606,8614],{},[5847,8607,8576,8608,8579,8610,1394],{},[561,8609,157],{},[1015,8611,8582,8612,8585],{"href":8534},[561,8613,6715],{},[5847,8615,8616],{},"Increase the distance between the SVG and other on-screen elements.",[5740,8618,8620],{"id":8619},"the-svg-is-not-visible","The SVG is not visible",[5844,8622,8623,8626,8635,8641],{},[5847,8624,8625],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[5847,8627,8628,8629,8631,8632,1394],{},"Try scaling the SVG down, e.g., wrap it in a ",[561,8630,5664],{}," with ",[561,8633,8634],{},":scale=\"0.01\"",[5847,8636,8637,8638,1394],{},"Try moving the SVG up (+y), e.g., ",[561,8639,8640],{},":position=\"[0,2,0]\"",[5847,8642,8643,8644,8647],{},"Check that ",[561,8645,8646],{},"layers.length > 0"," before rendering.",[5740,8649,8651],{"id":8650},"performance-issues-with-many-layers","Performance issues with many layers",[5844,8653,8654,8661,8670],{},[5847,8655,8656,8657,8660],{},"Use the ",[561,8658,8659],{},"dispose()"," function when components unmount to clean up geometries.",[5847,8662,8663,8664,8666,8667,8669],{},"Consider using ",[561,8665,6641],{}," or ",[561,8668,6659],{}," to reduce the number of rendered layers.",[5847,8671,8672],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[545,8674,8676,8677,8679,8680,8682],{"id":8675},"when-to-use-usesvg-vs-svg-component","When to Use ",[561,8678,157],{}," vs ",[561,8681,5907],{}," Component",[536,8684,8685],{},[540,8686,8687,8688,8690],{},"Use ",[561,8689,157],{}," when you need:",[5844,8692,8693,8696,8699,8702,8705],{},[5847,8694,8695],{},"Direct access to individual SVG layers",[5847,8697,8698],{},"Custom rendering logic",[5847,8700,8701],{},"Layer-specific animations",[5847,8703,8704],{},"Programmatic geometry manipulation",[5847,8706,8707],{},"Advanced material customization per layer",[536,8709,8710],{},[540,8711,8656,8712,8714],{},[561,8713,5907],{}," component when you need:",[5844,8716,8717,8720,8723,8726],{},[5847,8718,8719],{},"Simple, declarative SVG rendering",[5847,8721,8722],{},"Quick prototyping",[5847,8724,8725],{},"Standard SVG display without custom logic",[5847,8727,8728],{},"Less code and setup",[1682,8730,8731],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":8733},[8734,8744,8747,8755],{"id":5911,"depth":510,"text":5912,"children":8735},[8736,8737,8738,8739,8740,8741,8742,8743],{"id":547,"depth":629,"text":15},{"id":6427,"depth":629,"text":6428},{"id":1104,"depth":629,"text":1105},{"id":1255,"depth":629,"text":1256},{"id":6731,"depth":629,"text":6732},{"id":7111,"depth":629,"text":7112},{"id":7435,"depth":629,"text":7436},{"id":7570,"depth":629,"text":7571},{"id":8181,"depth":510,"text":8182,"children":8745},[8746],{"id":2319,"depth":629,"text":2320},{"id":8542,"depth":510,"text":8543,"children":8748},[8749,8750,8751,8753,8754],{"id":8556,"depth":629,"text":8557},{"id":8570,"depth":629,"text":8571},{"id":8598,"depth":629,"text":8752},"Parts of the SVG \"z-fight\"",{"id":8619,"depth":629,"text":8620},{"id":8650,"depth":629,"text":8651},{"id":8675,"depth":510,"text":8756},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":157,"description":8757},"t3a1fKjOyasXtDyXY3XrpW0clG4ZuIfM5SpFO_CMPZM",{"id":8762,"title":161,"body":8763,"description":9238,"extension":513,"links":514,"meta":9239,"navigation":516,"path":162,"seo":9240,"stem":163,"__hash__":9241},"docs/2.api/3.loaders/use-progress.md",{"type":501,"value":8764,"toc":9234},[8765,8772,8775,8777,8835,8841,9145,9156,9158,9214,9231],[536,8766,8767,8768,8771],{},"A composable to convenience wrap ",[561,8769,8770],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[536,8773,8774],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[545,8776,15],{"id":547},[552,8778,8780],{"className":1024,"code":8779,"language":591,"meta":508,"style":508},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[561,8781,8782,8801,8805],{"__ignoreMap":508},[564,8783,8784,8786,8788,8791,8793,8795,8797,8799],{"class":566,"line":509},[564,8785,604],{"class":603},[564,8787,607],{"class":569},[564,8789,8790],{"class":610}," useProgress",[564,8792,614],{"class":569},[564,8794,617],{"class":603},[564,8796,620],{"class":569},[564,8798,623],{"class":590},[564,8800,626],{"class":569},[564,8802,8803],{"class":566,"line":510},[564,8804,632],{"emptyLinePlaceholder":516},[564,8806,8807,8809,8811,8814,8816,8819,8821,8824,8826,8828,8831,8833],{"class":566,"line":629},[564,8808,638],{"class":577},[564,8810,607],{"class":569},[564,8812,8813],{"class":610}," hasFinishLoading",[564,8815,663],{"class":569},[564,8817,8818],{"class":610}," progress",[564,8820,663],{"class":569},[564,8822,8823],{"class":610}," items ",[564,8825,674],{"class":569},[564,8827,677],{"class":569},[564,8829,8830],{"class":603}," await",[564,8832,8790],{"class":680},[564,8834,2154],{"class":610},[536,8836,8837,8838,8840],{},"Then you can use the ",[561,8839,1214],{}," value to show a loading bar or a spinner:",[552,8842,8844],{"className":554,"code":8843,"language":559,"meta":508,"style":508},"\u003Ctemplate>\n  \u003CTransition\n    name=\"fade-overlay\"\n    enter-active-class=\"opacity-1 transition-opacity duration-200\"\n    leave-active-class=\"opacity-0 transition-opacity duration-200\"\n  >\n    \u003Cdiv\n      v-show=\"!hasFinishLoading\"\n      class=\"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono\"\n    >\n      \u003Cdiv class=\"w-200px\">\n        Loading... {{ progress }} %\n        \u003Ci class=\"i-ic-twotone-catching-pokemon animate-rotate-in\">\u003C/i>\n      \u003C/div>\n    \u003C/div>\n  \u003C/Transition>\n  \u003CTresCanvas preset=\"realistic\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CEnvironment\n        background\n        :files=\"environmentFiles\"\n        path=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,8845,8846,8854,8861,8875,8889,8903,8907,8914,8928,8942,8946,8967,8972,8998,9007,9015,9024,9043,9061,9069,9077,9084,9089,9103,9117,9121,9129,9137],{"__ignoreMap":508},[564,8847,8848,8850,8852],{"class":566,"line":509},[564,8849,570],{"class":569},[564,8851,706],{"class":573},[564,8853,596],{"class":569},[564,8855,8856,8858],{"class":566,"line":510},[564,8857,714],{"class":569},[564,8859,8860],{"class":573},"Transition\n",[564,8862,8863,8866,8868,8870,8873],{"class":566,"line":629},[564,8864,8865],{"class":577},"    name",[564,8867,584],{"class":569},[564,8869,587],{"class":569},[564,8871,8872],{"class":590},"fade-overlay",[564,8874,941],{"class":569},[564,8876,8877,8880,8882,8884,8887],{"class":566,"line":635},[564,8878,8879],{"class":577},"    enter-active-class",[564,8881,584],{"class":569},[564,8883,587],{"class":569},[564,8885,8886],{"class":590},"opacity-1 transition-opacity duration-200",[564,8888,941],{"class":569},[564,8890,8891,8894,8896,8898,8901],{"class":566,"line":558},[564,8892,8893],{"class":577},"    leave-active-class",[564,8895,584],{"class":569},[564,8897,587],{"class":569},[564,8899,8900],{"class":590},"opacity-0 transition-opacity duration-200",[564,8902,941],{"class":569},[564,8904,8905],{"class":566,"line":686},[564,8906,4325],{"class":569},[564,8908,8909,8911],{"class":566,"line":696},[564,8910,881],{"class":569},[564,8912,8913],{"class":573},"div\n",[564,8915,8916,8919,8921,8923,8926],{"class":566,"line":701},[564,8917,8918],{"class":577},"      v-show",[564,8920,584],{"class":569},[564,8922,587],{"class":569},[564,8924,8925],{"class":590},"!hasFinishLoading",[564,8927,941],{"class":569},[564,8929,8930,8933,8935,8937,8940],{"class":566,"line":711},[564,8931,8932],{"class":577},"      class",[564,8934,584],{"class":569},[564,8936,587],{"class":569},[564,8938,8939],{"class":590},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[564,8941,941],{"class":569},[564,8943,8944],{"class":566,"line":747},[564,8945,6179],{"class":569},[564,8947,8948,8950,8953,8956,8958,8960,8963,8965],{"class":566,"line":910},[564,8949,4340],{"class":569},[564,8951,8952],{"class":573},"div",[564,8954,8955],{"class":577}," class",[564,8957,584],{"class":569},[564,8959,587],{"class":569},[564,8961,8962],{"class":590},"w-200px",[564,8964,587],{"class":569},[564,8966,596],{"class":569},[564,8968,8969],{"class":566,"line":920},[564,8970,8971],{"class":610},"        Loading... {{ progress }} %\n",[564,8973,8974,8977,8980,8982,8984,8986,8989,8991,8994,8996],{"class":566,"line":928},[564,8975,8976],{"class":569},"        \u003C",[564,8978,8979],{"class":573},"i",[564,8981,8955],{"class":577},[564,8983,584],{"class":569},[564,8985,587],{"class":569},[564,8987,8988],{"class":590},"i-ic-twotone-catching-pokemon animate-rotate-in",[564,8990,587],{"class":569},[564,8992,8993],{"class":569},">\u003C/",[564,8995,8979],{"class":573},[564,8997,596],{"class":569},[564,8999,9000,9003,9005],{"class":566,"line":944},[564,9001,9002],{"class":569},"      \u003C/",[564,9004,8952],{"class":573},[564,9006,596],{"class":569},[564,9008,9009,9011,9013],{"class":566,"line":959},[564,9010,4369],{"class":569},[564,9012,8952],{"class":573},[564,9014,596],{"class":569},[564,9016,9017,9019,9022],{"class":566,"line":965},[564,9018,990],{"class":569},[564,9020,9021],{"class":573},"Transition",[564,9023,596],{"class":569},[564,9025,9026,9028,9030,9032,9034,9036,9039,9041],{"class":566,"line":987},[564,9027,714],{"class":569},[564,9029,862],{"class":573},[564,9031,5474],{"class":577},[564,9033,584],{"class":569},[564,9035,587],{"class":569},[564,9037,9038],{"class":590},"realistic",[564,9040,587],{"class":569},[564,9042,596],{"class":569},[564,9044,9045,9047,9049,9051,9053,9055,9057,9059],{"class":566,"line":997},[564,9046,881],{"class":569},[564,9048,884],{"class":573},[564,9050,887],{"class":577},[564,9052,584],{"class":569},[564,9054,587],{"class":569},[564,9056,2804],{"class":590},[564,9058,587],{"class":569},[564,9060,744],{"class":569},[564,9062,9063,9065,9067],{"class":566,"line":4055},[564,9064,881],{"class":569},[564,9066,905],{"class":573},[564,9068,744],{"class":569},[564,9070,9071,9073,9075],{"class":566,"line":4056},[564,9072,881],{"class":569},[564,9074,5462],{"class":573},[564,9076,596],{"class":569},[564,9078,9079,9081],{"class":566,"line":4057},[564,9080,4340],{"class":569},[564,9082,9083],{"class":573},"Environment\n",[564,9085,9086],{"class":566,"line":4328},[564,9087,9088],{"class":577},"        background\n",[564,9090,9091,9094,9096,9098,9101],{"class":566,"line":4337},[564,9092,9093],{"class":577},"        :files",[564,9095,584],{"class":569},[564,9097,587],{"class":569},[564,9099,9100],{"class":590},"environmentFiles",[564,9102,941],{"class":569},[564,9104,9105,9108,9110,9112,9115],{"class":566,"line":4347},[564,9106,9107],{"class":577},"        path",[564,9109,584],{"class":569},[564,9111,587],{"class":569},[564,9113,9114],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[564,9116,941],{"class":569},[564,9118,9119],{"class":566,"line":4366},[564,9120,7084],{"class":569},[564,9122,9123,9125,9127],{"class":566,"line":4058},[564,9124,4369],{"class":569},[564,9126,5462],{"class":573},[564,9128,596],{"class":569},[564,9130,9131,9133,9135],{"class":566,"line":4385},[564,9132,990],{"class":569},[564,9134,862],{"class":573},[564,9136,596],{"class":569},[564,9138,9139,9141,9143],{"class":566,"line":5108},[564,9140,689],{"class":569},[564,9142,706],{"class":573},[564,9144,596],{"class":569},[8545,9146,9147],{"type":8547},[536,9148,9149,9150,9155],{},"This component use top level await. Please check the ",[1015,9151,9154],{"href":9152,"rel":9153},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1019],"Suspense API"," for more info",[545,9157,1105],{"id":1104},[1107,9159,9160,9170],{},[1110,9161,9162],{},[1113,9163,9164,9166,9168],{},[1116,9165,1119],{"align":1118},[1116,9167,1122],{"align":1118},[1116,9169,1125],{"align":1118},[1127,9171,9172,9186,9199],{},[1113,9173,9174,9179,9183],{},[1132,9175,9176],{"align":1118},[561,9177,9178],{},"hasFinishLoading",[1132,9180,9181],{"align":1118},[561,9182,1284],{},[1132,9184,9185],{"align":1118},"Whether all items have finished loading",[1113,9187,9188,9192,9196],{},[1132,9189,9190],{"align":1118},[561,9191,1214],{},[1132,9193,9194],{"align":1118},[561,9195,7366],{},[1132,9197,9198],{"align":1118},"Loading progress as percentage (0-100)",[1113,9200,9201,9206,9211],{},[1132,9202,9203],{"align":1118},[561,9204,9205],{},"items",[1132,9207,9208],{"align":1118},[561,9209,9210],{},"Array",[1132,9212,9213],{"align":1118},"Array of loading items with their status",[9215,9216,9217],"prose-warning",{},[536,9218,9219,9220,9225,9226,9155],{},"This component use top level await it needs to be wrapped on a ",[1015,9221,9223],{"href":9152,"rel":9222},[1019],[561,9224,5462],{},". Please check the ",[1015,9227,9229],{"href":9152,"rel":9228},[1019],[561,9230,9154],{},[1682,9232,9233],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":508,"searchDepth":509,"depth":510,"links":9235},[9236,9237],{"id":547,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":161,"description":9238},"PFf0YjSNRSbqzDb9syMCMnsAwscEEcbNUMD8BOfhg6A",{"id":9243,"title":165,"body":9244,"description":9824,"extension":513,"links":514,"meta":9825,"navigation":516,"path":166,"seo":9826,"stem":167,"__hash__":9827},"docs/2.api/3.loaders/use-video-texture.md",{"type":501,"value":9245,"toc":9820},[9246,9251,9254,9261,9263,9702,9704,9808,9817],[530,9247,9248],{},[9249,9250],"loaders-use-video-texture",{},[536,9252,9253],{},"A composable to easily use videos as textures in your meshes.",[536,9255,9256,9257],{},"This composable is based on the Drei ",[1015,9258,165],{"href":9259,"rel":9260},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1019],[545,9262,15],{"id":547},[549,9264,9265,9480],{},[552,9266,9268],{"className":554,"code":9267,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera\n      :position=\"[0, 5, 9]\"\n      :look-at=\"[0, 1, 0]\"\n    />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CTheModel />\n    \u003C/Suspense>\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,9269,9270,9290,9308,9326,9340,9348,9352,9360,9378,9385,9398,9412,9416,9424,9432,9440,9448,9456,9464,9472],{"__ignoreMap":508},[564,9271,9272,9274,9276,9278,9280,9282,9284,9286,9288],{"class":566,"line":509},[564,9273,570],{"class":569},[564,9275,574],{"class":573},[564,9277,578],{"class":577},[564,9279,581],{"class":577},[564,9281,584],{"class":569},[564,9283,587],{"class":569},[564,9285,591],{"class":590},[564,9287,587],{"class":569},[564,9289,596],{"class":569},[564,9291,9292,9294,9296,9298,9300,9302,9304,9306],{"class":566,"line":510},[564,9293,604],{"class":603},[564,9295,607],{"class":569},[564,9297,788],{"class":610},[564,9299,614],{"class":569},[564,9301,617],{"class":603},[564,9303,620],{"class":569},[564,9305,623],{"class":590},[564,9307,626],{"class":569},[564,9309,9310,9312,9314,9316,9318,9320,9322,9324],{"class":566,"line":629},[564,9311,604],{"class":603},[564,9313,607],{"class":569},[564,9315,807],{"class":610},[564,9317,614],{"class":569},[564,9319,617],{"class":603},[564,9321,620],{"class":569},[564,9323,816],{"class":590},[564,9325,626],{"class":569},[564,9327,9328,9330,9332,9334,9336,9338],{"class":566,"line":635},[564,9329,604],{"class":603},[564,9331,825],{"class":610},[564,9333,828],{"class":603},[564,9335,620],{"class":569},[564,9337,833],{"class":590},[564,9339,626],{"class":569},[564,9341,9342,9344,9346],{"class":566,"line":558},[564,9343,689],{"class":569},[564,9345,574],{"class":573},[564,9347,596],{"class":569},[564,9349,9350],{"class":566,"line":686},[564,9351,632],{"emptyLinePlaceholder":516},[564,9353,9354,9356,9358],{"class":566,"line":696},[564,9355,570],{"class":569},[564,9357,706],{"class":573},[564,9359,596],{"class":569},[564,9361,9362,9364,9366,9368,9370,9372,9374,9376],{"class":566,"line":701},[564,9363,714],{"class":569},[564,9365,862],{"class":573},[564,9367,865],{"class":577},[564,9369,584],{"class":569},[564,9371,587],{"class":569},[564,9373,6334],{"class":590},[564,9375,587],{"class":569},[564,9377,596],{"class":569},[564,9379,9380,9382],{"class":566,"line":711},[564,9381,881],{"class":569},[564,9383,9384],{"class":573},"TresPerspectiveCamera\n",[564,9386,9387,9389,9391,9393,9396],{"class":566,"line":747},[564,9388,947],{"class":577},[564,9390,584],{"class":569},[564,9392,587],{"class":569},[564,9394,9395],{"class":590},"[0, 5, 9]",[564,9397,941],{"class":569},[564,9399,9400,9403,9405,9407,9410],{"class":566,"line":910},[564,9401,9402],{"class":577},"      :look-at",[564,9404,584],{"class":569},[564,9406,587],{"class":569},[564,9408,9409],{"class":590},"[0, 1, 0]",[564,9411,941],{"class":569},[564,9413,9414],{"class":566,"line":920},[564,9415,962],{"class":569},[564,9417,9418,9420,9422],{"class":566,"line":928},[564,9419,881],{"class":569},[564,9421,905],{"class":573},[564,9423,744],{"class":569},[564,9425,9426,9428,9430],{"class":566,"line":944},[564,9427,881],{"class":569},[564,9429,5462],{"class":573},[564,9431,596],{"class":569},[564,9433,9434,9436,9438],{"class":566,"line":959},[564,9435,4340],{"class":569},[564,9437,915],{"class":573},[564,9439,744],{"class":569},[564,9441,9442,9444,9446],{"class":566,"line":965},[564,9443,4369],{"class":569},[564,9445,5462],{"class":573},[564,9447,596],{"class":569},[564,9449,9450,9452,9454],{"class":566,"line":987},[564,9451,881],{"class":569},[564,9453,5545],{"class":573},[564,9455,744],{"class":569},[564,9457,9458,9460,9462],{"class":566,"line":997},[564,9459,881],{"class":569},[564,9461,970],{"class":573},[564,9463,744],{"class":569},[564,9465,9466,9468,9470],{"class":566,"line":4055},[564,9467,990],{"class":569},[564,9469,862],{"class":573},[564,9471,596],{"class":569},[564,9473,9474,9476,9478],{"class":566,"line":4056},[564,9475,689],{"class":569},[564,9477,706],{"class":573},[564,9479,596],{"class":569},[552,9481,9485],{"className":554,"code":9482,"filename":9483,"highlights":9484,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Sphere, useVideoTexture } from '@tresjs/cientos'\n\nconst videoPath = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'\nconst texture = ref()\ntexture.value = await useVideoTexture(videoPath, { loop: false })\n\u003C/script>\n\n\u003Ctemplate>\n   \u003CSphere :position=\"[0, 2, 0]\">\n      \u003CTresMeshBasicMaterial :map=\"texture\" />\n    \u003C/Sphere>\n\u003C/template>\n","TheVideoTexture.vue",[629,701,928],[561,9486,9487,9507,9525,9550,9554,9569,9580,9593,9627,9635,9639,9647,9667,9686,9694],{"__ignoreMap":508},[564,9488,9489,9491,9493,9495,9497,9499,9501,9503,9505],{"class":566,"line":509},[564,9490,570],{"class":569},[564,9492,574],{"class":573},[564,9494,578],{"class":577},[564,9496,581],{"class":577},[564,9498,584],{"class":569},[564,9500,587],{"class":569},[564,9502,591],{"class":590},[564,9504,587],{"class":569},[564,9506,596],{"class":569},[564,9508,9509,9511,9513,9515,9517,9519,9521,9523],{"class":566,"line":510},[564,9510,604],{"class":603},[564,9512,607],{"class":569},[564,9514,2108],{"class":610},[564,9516,614],{"class":569},[564,9518,617],{"class":603},[564,9520,620],{"class":569},[564,9522,559],{"class":590},[564,9524,626],{"class":569},[564,9526,9528,9530,9532,9535,9537,9540,9542,9544,9546,9548],{"class":9527,"line":629},[566,600],[564,9529,604],{"class":603},[564,9531,607],{"class":569},[564,9533,9534],{"class":610}," Sphere",[564,9536,663],{"class":569},[564,9538,9539],{"class":610}," useVideoTexture",[564,9541,614],{"class":569},[564,9543,617],{"class":603},[564,9545,620],{"class":569},[564,9547,623],{"class":590},[564,9549,626],{"class":569},[564,9551,9552],{"class":566,"line":635},[564,9553,632],{"emptyLinePlaceholder":516},[564,9555,9556,9558,9561,9563,9565,9567],{"class":566,"line":558},[564,9557,638],{"class":577},[564,9559,9560],{"class":610}," videoPath ",[564,9562,584],{"class":569},[564,9564,620],{"class":569},[564,9566,2568],{"class":590},[564,9568,626],{"class":569},[564,9570,9571,9573,9575,9578],{"class":566,"line":686},[564,9572,2575],{"class":569},[564,9574,620],{"class":569},[564,9576,9577],{"class":590},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[564,9579,626],{"class":569},[564,9581,9582,9584,9587,9589,9591],{"class":566,"line":696},[564,9583,638],{"class":577},[564,9585,9586],{"class":610}," texture ",[564,9588,584],{"class":569},[564,9590,2108],{"class":680},[564,9592,2154],{"class":610},[564,9594,9596,9598,9600,9603,9605,9607,9609,9612,9614,9616,9619,9621,9623,9625],{"class":9595,"line":701},[566,600],[564,9597,3908],{"class":610},[564,9599,1394],{"class":569},[564,9601,9602],{"class":610},"value ",[564,9604,584],{"class":569},[564,9606,8830],{"class":603},[564,9608,9539],{"class":680},[564,9610,9611],{"class":610},"(videoPath",[564,9613,663],{"class":569},[564,9615,607],{"class":569},[564,9617,9618],{"class":573}," loop",[564,9620,1092],{"class":569},[564,9622,6034],{"class":1095},[564,9624,614],{"class":569},[564,9626,1101],{"class":610},[564,9628,9629,9631,9633],{"class":566,"line":711},[564,9630,689],{"class":569},[564,9632,574],{"class":573},[564,9634,596],{"class":569},[564,9636,9637],{"class":566,"line":747},[564,9638,632],{"emptyLinePlaceholder":516},[564,9640,9641,9643,9645],{"class":566,"line":910},[564,9642,570],{"class":569},[564,9644,706],{"class":573},[564,9646,596],{"class":569},[564,9648,9649,9652,9654,9656,9658,9660,9663,9665],{"class":566,"line":920},[564,9650,9651],{"class":569},"   \u003C",[564,9653,285],{"class":573},[564,9655,887],{"class":577},[564,9657,584],{"class":569},[564,9659,587],{"class":569},[564,9661,9662],{"class":590},"[0, 2, 0]",[564,9664,587],{"class":569},[564,9666,596],{"class":569},[564,9668,9670,9672,9674,9676,9678,9680,9682,9684],{"class":9669,"line":928},[566,600],[564,9671,4340],{"class":569},[564,9673,6186],{"class":573},[564,9675,3901],{"class":577},[564,9677,584],{"class":569},[564,9679,587],{"class":569},[564,9681,3908],{"class":590},[564,9683,587],{"class":569},[564,9685,744],{"class":569},[564,9687,9688,9690,9692],{"class":566,"line":944},[564,9689,4369],{"class":569},[564,9691,285],{"class":573},[564,9693,596],{"class":569},[564,9695,9696,9698,9700],{"class":566,"line":959},[564,9697,689],{"class":569},[564,9699,706],{"class":573},[564,9701,596],{"class":569},[545,9703,2320],{"id":2319},[1107,9705,9706,9716],{},[1110,9707,9708],{},[1113,9709,9710,9712,9714],{},[1116,9711,2329],{"align":1118},[1116,9713,1125],{"align":1118},[1116,9715,1269],{},[1127,9717,9718,9731,9745,9760,9772,9784,9796],{},[1113,9719,9720,9724,9727],{},[1132,9721,9722],{"align":1118},[561,9723,8394],{},[1132,9725,9726],{"align":1118},"Path to the video.",[1132,9728,9729],{},[561,9730,2352],{},[1113,9732,9733,9738,9740],{},[1132,9734,9735],{"align":1118},[561,9736,9737],{},"unsuspend",[1132,9739,3704],{"align":1118},[1132,9741,9742],{},[561,9743,9744],{},"loadedmetadata",[1113,9746,9747,9752,9755],{},[1132,9748,9749],{"align":1118},[561,9750,9751],{},"crossOrigin",[1132,9753,9754],{"align":1118},"Whether to use CORS to fetch the related video.",[1132,9756,9757],{},[561,9758,9759],{},"Anonymous",[1113,9761,9762,9767,9770],{},[1132,9763,9764],{"align":1118},[561,9765,9766],{},"muted",[1132,9768,9769],{"align":1118},"Whether to set the audio silenced.",[1132,9771,7656],{},[1113,9773,9774,9779,9782],{},[1132,9775,9776],{"align":1118},[561,9777,9778],{},"loop",[1132,9780,9781],{"align":1118},"Automatically seek back to the start upon reaching the end of the video.",[1132,9783,7656],{},[1113,9785,9786,9791,9794],{},[1132,9787,9788],{"align":1118},[561,9789,9790],{},"start",[1132,9792,9793],{"align":1118},"To play to the video once loaded or not.",[1132,9795,7656],{},[1113,9797,9798,9803,9806],{},[1132,9799,9800],{"align":1118},[561,9801,9802],{},"playsInline",[1132,9804,9805],{"align":1118},"To be play the video inline or not.",[1132,9807,7656],{},[5844,9809,9810],{},[5847,9811,9812,9813,9816],{},"Any other attribute for a ",[561,9814,9815],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1682,9818,9819],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":508,"searchDepth":509,"depth":510,"links":9821},[9822,9823],{"id":547,"depth":510,"text":15},{"id":2319,"depth":510,"text":2320},"A composable to load video textures in TresJS scenes.",{},{"title":165,"description":9824},"rMFSi2yAMooLExAPvBtE0Q5kUzTXUwdWiqixCh7u4KA",1789116514448]