[{"data":1,"prerenderedAt":9893},["ShallowReactive",2],{"navigation":3,"/api/loaders":474,"/api/loaders-surround":495,"loaders-list":500},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"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},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,84,114,156,190,284,310,344,394,440],{"title":28,"path":24,"stem":29},"All","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[35,36,40,44,48,52,56,60,64,68,72,76,80],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":41,"path":42,"stem":43},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":45,"path":46,"stem":47},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":49,"path":50,"stem":51},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":53,"path":54,"stem":55},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":57,"path":58,"stem":59},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":61,"path":62,"stem":63},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":65,"path":66,"stem":67},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":69,"path":70,"stem":71},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":73,"path":74,"stem":75},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":77,"path":78,"stem":79},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":81,"path":82,"stem":83},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":85,"path":86,"stem":87,"children":88},"Controls","/api/controls","2.api/2.controls/index",[89,90,94,98,102,106,110],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":95,"path":96,"stem":97},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":99,"path":100,"stem":101},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":103,"path":104,"stem":105},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":107,"path":108,"stem":109},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":111,"path":112,"stem":113},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":115,"path":116,"stem":117,"children":118},"Loaders","/api/loaders","2.api/3.loaders/index",[119,120,124,128,132,136,140,144,148,152],{"title":115,"path":116,"stem":117},{"title":121,"path":122,"stem":123},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":125,"path":126,"stem":127},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":129,"path":130,"stem":131},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":133,"path":134,"stem":135},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":137,"path":138,"stem":139},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":141,"path":142,"stem":143},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":145,"path":146,"stem":147},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":149,"path":150,"stem":151},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":153,"path":154,"stem":155},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":157,"path":158,"stem":159,"children":160},"Materials","/api/materials","2.api/4.materials/index",[161,162,166,170,174,178,182,186],{"title":157,"path":158,"stem":159},{"title":163,"path":164,"stem":165},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":167,"path":168,"stem":169},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":171,"path":172,"stem":173},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":175,"path":176,"stem":177},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":179,"path":180,"stem":181},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":183,"path":184,"stem":185},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":187,"path":188,"stem":189},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":191,"path":192,"stem":193,"children":194},"Shapes","/api/shapes","2.api/5.shapes/index",[195,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280],{"title":191,"path":192,"stem":193},{"title":197,"path":198,"stem":199},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":201,"path":202,"stem":203},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":205,"path":206,"stem":207},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":209,"path":210,"stem":211},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":213,"path":214,"stem":215},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":217,"path":218,"stem":219},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":221,"path":222,"stem":223},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":225,"path":226,"stem":227},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":229,"path":230,"stem":231},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":233,"path":234,"stem":235},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":237,"path":238,"stem":239},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":241,"path":242,"stem":243},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":245,"path":246,"stem":247},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":249,"path":250,"stem":251},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":253,"path":254,"stem":255},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":257,"path":258,"stem":259},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":261,"path":262,"stem":263},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":265,"path":266,"stem":267},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":269,"path":270,"stem":271},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":273,"path":274,"stem":275},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":277,"path":278,"stem":279},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":281,"path":282,"stem":283},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":285,"path":286,"stem":287,"children":288},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[289,290,294,298,302,306],{"title":285,"path":286,"stem":287},{"title":291,"path":292,"stem":293},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":295,"path":296,"stem":297},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":299,"path":300,"stem":301},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":303,"path":304,"stem":305},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":307,"path":308,"stem":309},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":311,"path":312,"stem":313,"children":314},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[315,316,320,324,328,332,336,340],{"title":311,"path":312,"stem":313},{"title":317,"path":318,"stem":319},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":321,"path":322,"stem":323},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":325,"path":326,"stem":327},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":329,"path":330,"stem":331},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":333,"path":334,"stem":335},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":337,"path":338,"stem":339},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":341,"path":342,"stem":343},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":345,"path":346,"stem":347,"children":348},"Staging","/api/staging","2.api/8.staging/index",[349,350,354,358,362,366,370,374,378,382,386,390],{"title":345,"path":346,"stem":347},{"title":351,"path":352,"stem":353},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":355,"path":356,"stem":357},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":359,"path":360,"stem":361},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":363,"path":364,"stem":365},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":367,"path":368,"stem":369},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":371,"path":372,"stem":373},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":375,"path":376,"stem":377},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":379,"path":380,"stem":381},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":383,"path":384,"stem":385},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":387,"path":388,"stem":389},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":391,"path":392,"stem":393},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":395,"path":396,"stem":397,"children":398},"Objects","/api/objects","2.api/9.objects/index",[399,400,404,408,412,416,420,424,428,432,436],{"title":395,"path":396,"stem":397},{"title":401,"path":402,"stem":403},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":405,"path":406,"stem":407},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":409,"path":410,"stem":411},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":413,"path":414,"stem":415},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":417,"path":418,"stem":419},"HTML","/api/objects/html","2.api/9.objects/html",{"title":421,"path":422,"stem":423},"Image","/api/objects/image","2.api/9.objects/image",{"title":425,"path":426,"stem":427},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":429,"path":430,"stem":431},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":433,"path":434,"stem":435},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":437,"path":438,"stem":439},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":441,"path":442,"stem":443,"children":444},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[445,446,450,454,458,462,466,470],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":451,"path":452,"stem":453},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":455,"path":456,"stem":457},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":459,"path":460,"stem":461},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":463,"path":464,"stem":465},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":467,"path":468,"stem":469},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":471,"path":472,"stem":473},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":475,"title":115,"body":476,"description":488,"extension":489,"links":490,"meta":491,"navigation":492,"path":116,"seo":493,"stem":117,"__hash__":494},"docs/2.api/3.loaders/index.md",{"type":477,"value":478,"toc":483},"minimark",[479],[480,481],"api-list",{"list-name":482},"loaders-list",{"title":484,"searchDepth":485,"depth":486,"links":487},"",1,2,[],"Asset loading composables for TresJS scenes.","md",null,{},true,{"title":115,"description":488},"1deHEv7mVomRvNpTEqtIO8-vwuq08C4YMNS233eCd28",[496,498],{"title":111,"path":112,"stem":113,"description":497,"children":-1},"Set of three gizmos that can be used to translate, rotate and scale objects",{"title":121,"path":122,"stem":123,"description":499,"children":-1},"A composable to load GLTF models in TresJS scenes.",[501,1431,2171,2824,3488,4164,5717,8755,9265],{"id":502,"title":121,"body":503,"description":499,"extension":489,"links":490,"meta":1428,"navigation":492,"path":122,"seo":1429,"stem":123,"__hash__":1430},"docs/2.api/3.loaders/1.use-gltf.md",{"type":477,"value":504,"toc":1422},[505,511,520,524,1023,1041,1121,1125,1236,1240,1312,1316,1319,1415,1418],[506,507,508],"scene-wrapper",{},[509,510],"loaders-gltf",{},[512,513,514,515,519],"p",{},"A composable that allows you to easily load glb/glTF models into your ",[516,517,518],"strong",{},"TresJS"," scene.",[521,522,15],"h2",{"id":523},"usage",[525,526,527,738],"code-group",{},[528,529,536],"pre",{"className":530,"code":531,"filename":532,"highlights":533,"language":535,"meta":484,"style":484},"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",[486,534],5,"vue",[537,538,539,573,603,609,627,660,670,675,685,729],"code",{"__ignoreMap":484},[540,541,543,547,551,555,558,561,564,568,570],"span",{"class":542,"line":485},"line",[540,544,546],{"class":545},"sMK4o","\u003C",[540,548,550],{"class":549},"swJcz","script",[540,552,554],{"class":553},"spNyl"," setup",[540,556,557],{"class":553}," lang",[540,559,560],{"class":545},"=",[540,562,563],{"class":545},"\"",[540,565,567],{"class":566},"sfazB","ts",[540,569,563],{"class":545},[540,571,572],{"class":545},">\n",[540,574,577,581,584,588,591,594,597,600],{"class":575,"line":486},[542,576],"highlight",[540,578,580],{"class":579},"s7zQu","import",[540,582,583],{"class":545}," {",[540,585,587],{"class":586},"sTEyZ"," useGLTF",[540,589,590],{"class":545}," }",[540,592,593],{"class":579}," from",[540,595,596],{"class":545}," '",[540,598,599],{"class":566},"@tresjs/cientos",[540,601,602],{"class":545},"'\n",[540,604,606],{"class":542,"line":605},3,[540,607,608],{"emptyLinePlaceholder":492},"\n",[540,610,612,615,618,620,622,625],{"class":542,"line":611},4,[540,613,614],{"class":553},"const",[540,616,617],{"class":586}," path ",[540,619,560],{"class":545},[540,621,596],{"class":545},[540,623,624],{"class":566},"./blender-cube.glb",[540,626,602],{"class":545},[540,628,630,632,634,637,640,643,645,648,651,654,657],{"class":629,"line":534},[542,576],[540,631,614],{"class":553},[540,633,583],{"class":545},[540,635,636],{"class":586}," state",[540,638,639],{"class":545},",",[540,641,642],{"class":586}," nodes",[540,644,639],{"class":545},[540,646,647],{"class":586}," materials ",[540,649,650],{"class":545},"}",[540,652,653],{"class":545}," =",[540,655,587],{"class":656},"s2Zo4",[540,658,659],{"class":586},"(path)\n",[540,661,663,666,668],{"class":542,"line":662},6,[540,664,665],{"class":545},"\u003C/",[540,667,550],{"class":549},[540,669,572],{"class":545},[540,671,673],{"class":542,"line":672},7,[540,674,608],{"emptyLinePlaceholder":492},[540,676,678,680,683],{"class":542,"line":677},8,[540,679,546],{"class":545},[540,681,682],{"class":549},"template",[540,684,572],{"class":545},[540,686,688,691,694,697,699,701,704,706,709,712,714,716,718,721,724,726],{"class":542,"line":687},9,[540,689,690],{"class":545},"  \u003C",[540,692,693],{"class":549},"primitive",[540,695,696],{"class":579}," v-if",[540,698,560],{"class":545},[540,700,563],{"class":545},[540,702,703],{"class":586},"state",[540,705,563],{"class":545},[540,707,708],{"class":545}," :",[540,710,711],{"class":553},"object",[540,713,560],{"class":545},[540,715,563],{"class":545},[540,717,703],{"class":586},[540,719,720],{"class":545},"?.",[540,722,723],{"class":586},"scene",[540,725,563],{"class":545},[540,727,728],{"class":545}," />\n",[540,730,732,734,736],{"class":542,"line":731},10,[540,733,665],{"class":545},[540,735,682],{"class":549},[540,737,572],{"class":545},[528,739,742],{"className":530,"code":740,"filename":741,"language":535,"meta":484,"style":484},"\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",[537,743,744,764,783,803,820,828,832,840,861,903,912,922,930,948,975,981,1004,1014],{"__ignoreMap":484},[540,745,746,748,750,752,754,756,758,760,762],{"class":542,"line":485},[540,747,546],{"class":545},[540,749,550],{"class":549},[540,751,554],{"class":553},[540,753,557],{"class":553},[540,755,560],{"class":545},[540,757,563],{"class":545},[540,759,567],{"class":566},[540,761,563],{"class":545},[540,763,572],{"class":545},[540,765,766,768,770,773,775,777,779,781],{"class":542,"line":486},[540,767,580],{"class":579},[540,769,583],{"class":545},[540,771,772],{"class":586}," OrbitControls",[540,774,590],{"class":545},[540,776,593],{"class":579},[540,778,596],{"class":545},[540,780,599],{"class":566},[540,782,602],{"class":545},[540,784,785,787,789,792,794,796,798,801],{"class":542,"line":605},[540,786,580],{"class":579},[540,788,583],{"class":545},[540,790,791],{"class":586}," TresCanvas",[540,793,590],{"class":545},[540,795,593],{"class":579},[540,797,596],{"class":545},[540,799,800],{"class":566},"@tresjs/core",[540,802,602],{"class":545},[540,804,805,807,810,813,815,818],{"class":542,"line":611},[540,806,580],{"class":579},[540,808,809],{"class":586}," TheModel ",[540,811,812],{"class":579},"from",[540,814,596],{"class":545},[540,816,817],{"class":566},"./TheModel.vue",[540,819,602],{"class":545},[540,821,822,824,826],{"class":542,"line":534},[540,823,665],{"class":545},[540,825,550],{"class":549},[540,827,572],{"class":545},[540,829,830],{"class":542,"line":662},[540,831,608],{"emptyLinePlaceholder":492},[540,833,834,836,838],{"class":542,"line":672},[540,835,546],{"class":545},[540,837,682],{"class":549},[540,839,572],{"class":545},[540,841,842,844,847,850,852,854,857,859],{"class":542,"line":677},[540,843,690],{"class":545},[540,845,846],{"class":549},"TresCanvas",[540,848,849],{"class":553}," clear-color",[540,851,560],{"class":545},[540,853,563],{"class":545},[540,855,856],{"class":566},"#F78B3D",[540,858,563],{"class":545},[540,860,572],{"class":545},[540,862,863,866,869,871,874,876,878,881,885,888,891,893,896,899,901],{"class":542,"line":687},[540,864,865],{"class":545},"    \u003C",[540,867,868],{"class":549},"TresPerspectiveCamera",[540,870,708],{"class":545},[540,872,873],{"class":553},"position",[540,875,560],{"class":545},[540,877,563],{"class":545},[540,879,880],{"class":545},"[",[540,882,884],{"class":883},"sbssI","3",[540,886,887],{"class":545},", ",[540,889,890],{"class":883},"2",[540,892,887],{"class":545},[540,894,895],{"class":883},"5",[540,897,898],{"class":545},"]",[540,900,563],{"class":545},[540,902,728],{"class":545},[540,904,905,907,910],{"class":542,"line":731},[540,906,865],{"class":545},[540,908,909],{"class":549},"OrbitControls",[540,911,728],{"class":545},[540,913,915,917,920],{"class":542,"line":914},11,[540,916,865],{"class":545},[540,918,919],{"class":549},"TheModel",[540,921,728],{"class":545},[540,923,925,927],{"class":542,"line":924},12,[540,926,865],{"class":545},[540,928,929],{"class":549},"TresDirectionalLight\n",[540,931,933,936,939,941,943,945],{"class":542,"line":932},13,[540,934,935],{"class":545},"      :",[540,937,938],{"class":553},"intensity",[540,940,560],{"class":545},[540,942,563],{"class":545},[540,944,890],{"class":883},[540,946,947],{"class":545},"\"\n",[540,949,951,953,955,957,959,961,963,965,967,969,971,973],{"class":542,"line":950},14,[540,952,935],{"class":545},[540,954,873],{"class":553},[540,956,560],{"class":545},[540,958,563],{"class":545},[540,960,880],{"class":545},[540,962,884],{"class":883},[540,964,887],{"class":545},[540,966,884],{"class":883},[540,968,887],{"class":545},[540,970,884],{"class":883},[540,972,898],{"class":545},[540,974,947],{"class":545},[540,976,978],{"class":542,"line":977},15,[540,979,980],{"class":545},"    />\n",[540,982,984,986,989,991,993,995,997,1000,1002],{"class":542,"line":983},16,[540,985,865],{"class":545},[540,987,988],{"class":549},"TresAmbientLight",[540,990,708],{"class":545},[540,992,938],{"class":553},[540,994,560],{"class":545},[540,996,563],{"class":545},[540,998,999],{"class":883},"1",[540,1001,563],{"class":545},[540,1003,728],{"class":545},[540,1005,1007,1010,1012],{"class":542,"line":1006},17,[540,1008,1009],{"class":545},"  \u003C/",[540,1011,846],{"class":549},[540,1013,572],{"class":545},[540,1015,1017,1019,1021],{"class":542,"line":1016},18,[540,1018,665],{"class":545},[540,1020,682],{"class":549},[540,1022,572],{"class":545},[512,1024,1025,1026,1028,1029,1032,1033,1040],{},"An advantage of using ",[537,1027,121],{}," is that you can pass a ",[537,1030,1031],{},"draco"," prop to enable ",[1034,1035,1039],"a",{"href":1036,"rel":1037},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1038],"nofollow","Draco compression"," for the model. This will reduce the size of the model and improve performance.",[528,1042,1045],{"className":1043,"code":1044,"language":567,"meta":484,"style":484},"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",[537,1046,1047,1065,1069],{"__ignoreMap":484},[540,1048,1049,1051,1053,1055,1057,1059,1061,1063],{"class":542,"line":485},[540,1050,580],{"class":579},[540,1052,583],{"class":545},[540,1054,587],{"class":586},[540,1056,590],{"class":545},[540,1058,593],{"class":579},[540,1060,596],{"class":545},[540,1062,599],{"class":566},[540,1064,602],{"class":545},[540,1066,1067],{"class":542,"line":486},[540,1068,608],{"emptyLinePlaceholder":492},[540,1070,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1094,1097,1100,1102,1104,1106,1109,1112,1116,1118],{"class":542,"line":605},[540,1072,614],{"class":553},[540,1074,583],{"class":545},[540,1076,636],{"class":586},[540,1078,639],{"class":545},[540,1080,642],{"class":586},[540,1082,639],{"class":545},[540,1084,647],{"class":586},[540,1086,650],{"class":545},[540,1088,653],{"class":545},[540,1090,587],{"class":656},[540,1092,1093],{"class":586},"(",[540,1095,1096],{"class":545},"'",[540,1098,1099],{"class":566},"/models/AkuAku.gltf",[540,1101,1096],{"class":545},[540,1103,639],{"class":545},[540,1105,583],{"class":545},[540,1107,1108],{"class":549}," draco",[540,1110,1111],{"class":545},":",[540,1113,1115],{"class":1114},"sfNiH"," true",[540,1117,590],{"class":545},[540,1119,1120],{"class":586},")\n",[521,1122,1124],{"id":1123},"return-values","Return Values",[1126,1127,1128,1145],"table",{},[1129,1130,1131],"thead",{},[1132,1133,1134,1139,1142],"tr",{},[1135,1136,1138],"th",{"align":1137},"left","Name",[1135,1140,1141],{},"Type",[1135,1143,1144],{},"Description",[1146,1147,1148,1163,1177,1191,1206,1221],"tbody",{},[1132,1149,1150,1155,1160],{},[1151,1152,1153],"td",{"align":1137},[516,1154,703],{},[1151,1156,1157],{},[537,1158,1159],{},"GLTF",[1151,1161,1162],{},"The loaded GLTF model state",[1132,1164,1165,1170,1174],{},[1151,1166,1167],{"align":1137},[516,1168,1169],{},"nodes",[1151,1171,1172],{},[537,1173,711],{},[1151,1175,1176],{},"Computed object containing all nodes in the scene",[1132,1178,1179,1184,1188],{},[1151,1180,1181],{"align":1137},[516,1182,1183],{},"materials",[1151,1185,1186],{},[537,1187,711],{},[1151,1189,1190],{},"Computed object containing all materials in the scene",[1132,1192,1193,1198,1203],{},[1151,1194,1195],{"align":1137},[516,1196,1197],{},"isLoading",[1151,1199,1200],{},[537,1201,1202],{},"boolean",[1151,1204,1205],{},"Whether the model is currently loading",[1132,1207,1208,1213,1218],{},[1151,1209,1210],{"align":1137},[516,1211,1212],{},"progress",[1151,1214,1215],{},[537,1216,1217],{},"number",[1151,1219,1220],{},"The progress of the model loading",[1132,1222,1223,1228,1233],{},[1151,1224,1225],{"align":1137},[516,1226,1227],{},"load",[1151,1229,1230],{},[537,1231,1232],{},"() => Promise\u003Cvoid>",[1151,1234,1235],{},"Function to reload the model",[521,1237,1239],{"id":1238},"options","Options",[1126,1241,1242,1255],{},[1129,1243,1244],{},[1132,1245,1246,1248,1250,1253],{},[1135,1247,1138],{"align":1137},[1135,1249,1141],{},[1135,1251,1252],{},"Default",[1135,1254,1144],{},[1146,1256,1257,1275,1295],{},[1132,1258,1259,1263,1267,1272],{},[1151,1260,1261],{"align":1137},[516,1262,1031],{},[1151,1264,1265],{},[537,1266,1202],{},[1151,1268,1269],{},[537,1270,1271],{},"false",[1151,1273,1274],{},"Whether to enable Draco compression.",[1132,1276,1277,1282,1287,1292],{},[1151,1278,1279],{"align":1137},[516,1280,1281],{},"decoderPath",[1151,1283,1284],{},[537,1285,1286],{},"string",[1151,1288,1289],{},[537,1290,1291],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[1151,1293,1294],{},"Path to the Draco decoder.",[1132,1296,1297,1302,1307,1309],{},[1151,1298,1299],{"align":1137},[516,1300,1301],{},"traverse",[1151,1303,1304],{},[537,1305,1306],{},"Function",[1151,1308],{},[1151,1310,1311],{},"A traverse function applied to the scene upon loading the model.",[521,1313,1315],{"id":1314},"accessing-nodes-and-materials","Accessing Nodes and Materials",[512,1317,1318],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[528,1320,1322],{"className":1043,"code":1321,"language":567,"meta":484,"style":484},"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",[537,1323,1324,1353,1357,1363,1385,1389,1394],{"__ignoreMap":484},[540,1325,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1349,1351],{"class":542,"line":485},[540,1327,614],{"class":553},[540,1329,583],{"class":545},[540,1331,642],{"class":586},[540,1333,639],{"class":545},[540,1335,647],{"class":586},[540,1337,650],{"class":545},[540,1339,653],{"class":545},[540,1341,587],{"class":656},[540,1343,1093],{"class":586},[540,1345,1096],{"class":545},[540,1347,1348],{"class":566},"/model.glb",[540,1350,1096],{"class":545},[540,1352,1120],{"class":586},[540,1354,1355],{"class":542,"line":486},[540,1356,608],{"emptyLinePlaceholder":492},[540,1358,1359],{"class":542,"line":605},[540,1360,1362],{"class":1361},"sHwdD","// Access a specific node\n",[540,1364,1365,1367,1370,1372,1374,1377,1380,1382],{"class":542,"line":611},[540,1366,614],{"class":553},[540,1368,1369],{"class":586}," mesh ",[540,1371,560],{"class":545},[540,1373,642],{"class":586},[540,1375,1376],{"class":545},".",[540,1378,1379],{"class":586},"value",[540,1381,1376],{"class":545},[540,1383,1384],{"class":586},"MeshName\n",[540,1386,1387],{"class":542,"line":534},[540,1388,608],{"emptyLinePlaceholder":492},[540,1390,1391],{"class":542,"line":662},[540,1392,1393],{"class":1361},"// Access a specific material\n",[540,1395,1396,1398,1401,1403,1406,1408,1410,1412],{"class":542,"line":672},[540,1397,614],{"class":553},[540,1399,1400],{"class":586}," material ",[540,1402,560],{"class":545},[540,1404,1405],{"class":586}," materials",[540,1407,1376],{"class":545},[540,1409,1379],{"class":586},[540,1411,1376],{"class":545},[540,1413,1414],{"class":586},"MaterialName\n",[512,1416,1417],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[1419,1420,1421],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":484,"searchDepth":485,"depth":486,"links":1423},[1424,1425,1426,1427],{"id":523,"depth":486,"text":15},{"id":1123,"depth":486,"text":1124},{"id":1238,"depth":486,"text":1239},{"id":1314,"depth":486,"text":1315},{},{"title":121,"description":499},"a8ph-37nMzF-TmW17rRFWQHDIwN83OfaztvKYiWzP30",{"id":1432,"title":125,"body":1433,"description":2167,"extension":489,"links":490,"meta":2168,"navigation":492,"path":126,"seo":2169,"stem":127,"__hash__":2170},"docs/2.api/3.loaders/2.gltf-model.md",{"type":477,"value":1434,"toc":2162},[1435,1439,1451,1453,1815,1819,1830,2062,2066,2159],[506,1436,1437],{},[509,1438],{},[512,1440,1441,1442,1444,1445,1450],{},"The ",[537,1443,125],{}," component is a wrapper around ",[1034,1446,1448],{"href":1447},"./use-gltf",[537,1449,121],{}," composable and accepts the same options as props.",[521,1452,15],{"id":523},[525,1454,1455,1569],{},[528,1456,1459],{"className":530,"code":1457,"filename":532,"highlights":1458,"language":535,"meta":484,"style":484},"\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",[486,677],[537,1460,1461,1481,1501,1505,1519,1527,1531,1539,1561],{"__ignoreMap":484},[540,1462,1463,1465,1467,1469,1471,1473,1475,1477,1479],{"class":542,"line":485},[540,1464,546],{"class":545},[540,1466,550],{"class":549},[540,1468,554],{"class":553},[540,1470,557],{"class":553},[540,1472,560],{"class":545},[540,1474,563],{"class":545},[540,1476,567],{"class":566},[540,1478,563],{"class":545},[540,1480,572],{"class":545},[540,1482,1484,1486,1488,1491,1493,1495,1497,1499],{"class":1483,"line":486},[542,576],[540,1485,580],{"class":579},[540,1487,583],{"class":545},[540,1489,1490],{"class":586}," GLTFModel",[540,1492,590],{"class":545},[540,1494,593],{"class":579},[540,1496,596],{"class":545},[540,1498,599],{"class":566},[540,1500,602],{"class":545},[540,1502,1503],{"class":542,"line":605},[540,1504,608],{"emptyLinePlaceholder":492},[540,1506,1507,1509,1511,1513,1515,1517],{"class":542,"line":611},[540,1508,614],{"class":553},[540,1510,617],{"class":586},[540,1512,560],{"class":545},[540,1514,596],{"class":545},[540,1516,624],{"class":566},[540,1518,602],{"class":545},[540,1520,1521,1523,1525],{"class":542,"line":534},[540,1522,665],{"class":545},[540,1524,550],{"class":549},[540,1526,572],{"class":545},[540,1528,1529],{"class":542,"line":662},[540,1530,608],{"emptyLinePlaceholder":492},[540,1532,1533,1535,1537],{"class":542,"line":672},[540,1534,546],{"class":545},[540,1536,682],{"class":549},[540,1538,572],{"class":545},[540,1540,1542,1544,1546,1548,1551,1553,1555,1557,1559],{"class":1541,"line":677},[542,576],[540,1543,690],{"class":545},[540,1545,125],{"class":549},[540,1547,708],{"class":545},[540,1549,1550],{"class":553},"path",[540,1552,560],{"class":545},[540,1554,563],{"class":545},[540,1556,1550],{"class":586},[540,1558,563],{"class":545},[540,1560,728],{"class":545},[540,1562,1563,1565,1567],{"class":542,"line":687},[540,1564,665],{"class":545},[540,1566,682],{"class":549},[540,1568,572],{"class":545},[528,1570,1571],{"className":530,"code":740,"filename":741,"language":535,"meta":484,"style":484},[537,1572,1573,1593,1611,1629,1643,1651,1655,1663,1681,1713,1721,1729,1735,1749,1775,1779,1799,1807],{"__ignoreMap":484},[540,1574,1575,1577,1579,1581,1583,1585,1587,1589,1591],{"class":542,"line":485},[540,1576,546],{"class":545},[540,1578,550],{"class":549},[540,1580,554],{"class":553},[540,1582,557],{"class":553},[540,1584,560],{"class":545},[540,1586,563],{"class":545},[540,1588,567],{"class":566},[540,1590,563],{"class":545},[540,1592,572],{"class":545},[540,1594,1595,1597,1599,1601,1603,1605,1607,1609],{"class":542,"line":486},[540,1596,580],{"class":579},[540,1598,583],{"class":545},[540,1600,772],{"class":586},[540,1602,590],{"class":545},[540,1604,593],{"class":579},[540,1606,596],{"class":545},[540,1608,599],{"class":566},[540,1610,602],{"class":545},[540,1612,1613,1615,1617,1619,1621,1623,1625,1627],{"class":542,"line":605},[540,1614,580],{"class":579},[540,1616,583],{"class":545},[540,1618,791],{"class":586},[540,1620,590],{"class":545},[540,1622,593],{"class":579},[540,1624,596],{"class":545},[540,1626,800],{"class":566},[540,1628,602],{"class":545},[540,1630,1631,1633,1635,1637,1639,1641],{"class":542,"line":611},[540,1632,580],{"class":579},[540,1634,809],{"class":586},[540,1636,812],{"class":579},[540,1638,596],{"class":545},[540,1640,817],{"class":566},[540,1642,602],{"class":545},[540,1644,1645,1647,1649],{"class":542,"line":534},[540,1646,665],{"class":545},[540,1648,550],{"class":549},[540,1650,572],{"class":545},[540,1652,1653],{"class":542,"line":662},[540,1654,608],{"emptyLinePlaceholder":492},[540,1656,1657,1659,1661],{"class":542,"line":672},[540,1658,546],{"class":545},[540,1660,682],{"class":549},[540,1662,572],{"class":545},[540,1664,1665,1667,1669,1671,1673,1675,1677,1679],{"class":542,"line":677},[540,1666,690],{"class":545},[540,1668,846],{"class":549},[540,1670,849],{"class":553},[540,1672,560],{"class":545},[540,1674,563],{"class":545},[540,1676,856],{"class":566},[540,1678,563],{"class":545},[540,1680,572],{"class":545},[540,1682,1683,1685,1687,1689,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711],{"class":542,"line":687},[540,1684,865],{"class":545},[540,1686,868],{"class":549},[540,1688,708],{"class":545},[540,1690,873],{"class":553},[540,1692,560],{"class":545},[540,1694,563],{"class":545},[540,1696,880],{"class":545},[540,1698,884],{"class":883},[540,1700,887],{"class":545},[540,1702,890],{"class":883},[540,1704,887],{"class":545},[540,1706,895],{"class":883},[540,1708,898],{"class":545},[540,1710,563],{"class":545},[540,1712,728],{"class":545},[540,1714,1715,1717,1719],{"class":542,"line":731},[540,1716,865],{"class":545},[540,1718,909],{"class":549},[540,1720,728],{"class":545},[540,1722,1723,1725,1727],{"class":542,"line":914},[540,1724,865],{"class":545},[540,1726,919],{"class":549},[540,1728,728],{"class":545},[540,1730,1731,1733],{"class":542,"line":924},[540,1732,865],{"class":545},[540,1734,929],{"class":549},[540,1736,1737,1739,1741,1743,1745,1747],{"class":542,"line":932},[540,1738,935],{"class":545},[540,1740,938],{"class":553},[540,1742,560],{"class":545},[540,1744,563],{"class":545},[540,1746,890],{"class":883},[540,1748,947],{"class":545},[540,1750,1751,1753,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773],{"class":542,"line":950},[540,1752,935],{"class":545},[540,1754,873],{"class":553},[540,1756,560],{"class":545},[540,1758,563],{"class":545},[540,1760,880],{"class":545},[540,1762,884],{"class":883},[540,1764,887],{"class":545},[540,1766,884],{"class":883},[540,1768,887],{"class":545},[540,1770,884],{"class":883},[540,1772,898],{"class":545},[540,1774,947],{"class":545},[540,1776,1777],{"class":542,"line":977},[540,1778,980],{"class":545},[540,1780,1781,1783,1785,1787,1789,1791,1793,1795,1797],{"class":542,"line":983},[540,1782,865],{"class":545},[540,1784,988],{"class":549},[540,1786,708],{"class":545},[540,1788,938],{"class":553},[540,1790,560],{"class":545},[540,1792,563],{"class":545},[540,1794,999],{"class":883},[540,1796,563],{"class":545},[540,1798,728],{"class":545},[540,1800,1801,1803,1805],{"class":542,"line":1006},[540,1802,1009],{"class":545},[540,1804,846],{"class":549},[540,1806,572],{"class":545},[540,1808,1809,1811,1813],{"class":542,"line":1016},[540,1810,665],{"class":545},[540,1812,682],{"class":549},[540,1814,572],{"class":545},[521,1816,1818],{"id":1817},"model-reference","Model reference",[512,1820,1821,1822,1825,1826,1829],{},"You can access the model reference by passing a ",[537,1823,1824],{},"ref"," to the ",[537,1827,1828],{},"model"," prop and then using to get the object.",[528,1831,1833],{"className":530,"code":1832,"language":535,"meta":484,"style":484},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from 'tresjs'\nimport { GLTFModel } 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  \u003CGLTFModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n  />\n\u003C/template>\n",[537,1834,1835,1855,1878,1896,1900,1924,1928,1953,1958,1988,1994,2002,2006,2014,2021,2035,2049,2054],{"__ignoreMap":484},[540,1836,1837,1839,1841,1843,1845,1847,1849,1851,1853],{"class":542,"line":485},[540,1838,546],{"class":545},[540,1840,550],{"class":549},[540,1842,554],{"class":553},[540,1844,557],{"class":553},[540,1846,560],{"class":545},[540,1848,563],{"class":545},[540,1850,567],{"class":566},[540,1852,563],{"class":545},[540,1854,572],{"class":545},[540,1856,1857,1859,1862,1864,1867,1869,1871,1873,1876],{"class":542,"line":486},[540,1858,580],{"class":579},[540,1860,1861],{"class":579}," type",[540,1863,583],{"class":545},[540,1865,1866],{"class":586}," TresObject",[540,1868,590],{"class":545},[540,1870,593],{"class":579},[540,1872,596],{"class":545},[540,1874,1875],{"class":566},"tresjs",[540,1877,602],{"class":545},[540,1879,1880,1882,1884,1886,1888,1890,1892,1894],{"class":542,"line":605},[540,1881,580],{"class":579},[540,1883,583],{"class":545},[540,1885,1490],{"class":586},[540,1887,590],{"class":545},[540,1889,593],{"class":579},[540,1891,596],{"class":545},[540,1893,599],{"class":566},[540,1895,602],{"class":545},[540,1897,1898],{"class":542,"line":611},[540,1899,608],{"emptyLinePlaceholder":492},[540,1901,1902,1904,1907,1909,1912,1914,1918,1921],{"class":542,"line":534},[540,1903,614],{"class":553},[540,1905,1906],{"class":586}," modelRef ",[540,1908,560],{"class":545},[540,1910,1911],{"class":656}," shallowRef",[540,1913,546],{"class":545},[540,1915,1917],{"class":1916},"sBMFI","TresObject",[540,1919,1920],{"class":545},">",[540,1922,1923],{"class":586},"()\n",[540,1925,1926],{"class":542,"line":662},[540,1927,608],{"emptyLinePlaceholder":492},[540,1929,1930,1933,1936,1938,1941,1944,1947,1950],{"class":542,"line":672},[540,1931,1932],{"class":656},"watch",[540,1934,1935],{"class":586},"(modelRef",[540,1937,639],{"class":545},[540,1939,1940],{"class":545}," (",[540,1942,1828],{"class":1943},"sHdIc",[540,1945,1946],{"class":545},")",[540,1948,1949],{"class":553}," =>",[540,1951,1952],{"class":545}," {\n",[540,1954,1955],{"class":542,"line":677},[540,1956,1957],{"class":1361},"  // Do something with the model\n",[540,1959,1960,1963,1965,1967,1969,1972,1974,1977,1979,1982,1984,1986],{"class":542,"line":687},[540,1961,1962],{"class":586},"  model",[540,1964,1376],{"class":545},[540,1966,873],{"class":586},[540,1968,1376],{"class":545},[540,1970,1971],{"class":656},"set",[540,1973,1093],{"class":549},[540,1975,1976],{"class":883},"0",[540,1978,639],{"class":545},[540,1980,1981],{"class":883}," 0",[540,1983,639],{"class":545},[540,1985,1981],{"class":883},[540,1987,1120],{"class":549},[540,1989,1990,1992],{"class":542,"line":731},[540,1991,650],{"class":545},[540,1993,1120],{"class":586},[540,1995,1996,1998,2000],{"class":542,"line":914},[540,1997,665],{"class":545},[540,1999,550],{"class":549},[540,2001,572],{"class":545},[540,2003,2004],{"class":542,"line":924},[540,2005,608],{"emptyLinePlaceholder":492},[540,2007,2008,2010,2012],{"class":542,"line":932},[540,2009,546],{"class":545},[540,2011,682],{"class":549},[540,2013,572],{"class":545},[540,2015,2016,2018],{"class":542,"line":950},[540,2017,690],{"class":545},[540,2019,2020],{"class":549},"GLTFModel\n",[540,2022,2023,2026,2028,2030,2033],{"class":542,"line":977},[540,2024,2025],{"class":553},"    ref",[540,2027,560],{"class":545},[540,2029,563],{"class":545},[540,2031,2032],{"class":566},"modelRef",[540,2034,947],{"class":545},[540,2036,2037,2040,2042,2044,2047],{"class":542,"line":983},[540,2038,2039],{"class":553},"    path",[540,2041,560],{"class":545},[540,2043,563],{"class":545},[540,2045,2046],{"class":566},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[540,2048,947],{"class":545},[540,2050,2051],{"class":542,"line":1006},[540,2052,2053],{"class":545},"  />\n",[540,2055,2056,2058,2060],{"class":542,"line":1016},[540,2057,665],{"class":545},[540,2059,682],{"class":549},[540,2061,572],{"class":545},[521,2063,2065],{"id":2064},"props","Props",[1126,2067,2068,2079],{},[1129,2069,2070],{},[1132,2071,2072,2075,2077],{},[1135,2073,2074],{"align":1137},"Prop",[1135,2076,1144],{"align":1137},[1135,2078,1252],{},[1146,2080,2081,2095,2112,2125,2143],{},[1132,2082,2083,2087,2090],{},[1151,2084,2085],{"align":1137},[537,2086,1550],{},[1151,2088,2089],{"align":1137},"Path to the model file.",[1151,2091,2092],{},[537,2093,2094],{},"undefined",[1132,2096,2097,2101,2108],{},[1151,2098,2099],{"align":1137},[537,2100,1031],{},[1151,2102,2103,2104,2107],{"align":1137},"Enable ",[1034,2105,1039],{"href":1036,"rel":2106},[1038]," for the model.",[1151,2109,2110],{},[537,2111,1271],{},[1132,2113,2114,2118,2121],{},[1151,2115,2116],{"align":1137},[537,2117,1281],{},[1151,2119,2120],{"align":1137},"Path to a local Draco decoder.",[1151,2122,2123],{},[537,2124,2094],{},[1132,2126,2127,2132,2139],{},[1151,2128,2129],{"align":1137},[537,2130,2131],{},"castShadow",[1151,2133,2134,2135,2138],{"align":1137},"Apply ",[537,2136,2137],{},"cast-shadow"," to all meshes inside your model.",[1151,2140,2141],{},[537,2142,1271],{},[1132,2144,2145,2150,2155],{},[1151,2146,2147],{"align":1137},[537,2148,2149],{},"receiveShadow",[1151,2151,2134,2152,2138],{"align":1137},[537,2153,2154],{},"receive-shadow",[1151,2156,2157],{},[537,2158,1271],{},[1419,2160,2161],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":484,"searchDepth":485,"depth":486,"links":2163},[2164,2165,2166],{"id":523,"depth":486,"text":15},{"id":1817,"depth":486,"text":1818},{"id":2064,"depth":486,"text":2065},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":125,"description":2167},"JWe9EOh88vpjOxxjTHRWWuR-5fc1X6B09G1a16LfXnY",{"id":2172,"title":129,"body":2173,"description":2820,"extension":489,"links":490,"meta":2821,"navigation":492,"path":130,"seo":2822,"stem":131,"__hash__":2823},"docs/2.api/3.loaders/3.use-fbx.md",{"type":477,"value":2174,"toc":2814},[2175,2180,2185,2187,2612,2614,2691,2693,2719,2721,2723,2809,2811],[506,2176,2177],{},[2178,2179],"loaders-fbx",{},[512,2181,2182,2183,519],{},"A composable that allows you to easily load FBX models into your ",[516,2184,518],{},[521,2186,15],{"id":523},[525,2188,2189,2363],{},[528,2190,2193],{"className":530,"code":2191,"filename":532,"highlights":2192,"language":535,"meta":484,"style":484},"\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",[486,662],[537,2194,2195,2215,2235,2239,2254,2266,2291,2299,2303,2311,2355],{"__ignoreMap":484},[540,2196,2197,2199,2201,2203,2205,2207,2209,2211,2213],{"class":542,"line":485},[540,2198,546],{"class":545},[540,2200,550],{"class":549},[540,2202,554],{"class":553},[540,2204,557],{"class":553},[540,2206,560],{"class":545},[540,2208,563],{"class":545},[540,2210,567],{"class":566},[540,2212,563],{"class":545},[540,2214,572],{"class":545},[540,2216,2218,2220,2222,2225,2227,2229,2231,2233],{"class":2217,"line":486},[542,576],[540,2219,580],{"class":579},[540,2221,583],{"class":545},[540,2223,2224],{"class":586}," useFBX",[540,2226,590],{"class":545},[540,2228,593],{"class":579},[540,2230,596],{"class":545},[540,2232,599],{"class":566},[540,2234,602],{"class":545},[540,2236,2237],{"class":542,"line":605},[540,2238,608],{"emptyLinePlaceholder":492},[540,2240,2241,2243,2245,2247,2249,2252],{"class":542,"line":611},[540,2242,614],{"class":553},[540,2244,617],{"class":586},[540,2246,560],{"class":545},[540,2248,596],{"class":545},[540,2250,2251],{"class":566},"https://raw.githubusercontent.com/",[540,2253,602],{"class":545},[540,2255,2256,2259,2261,2264],{"class":542,"line":534},[540,2257,2258],{"class":545},"  +",[540,2260,596],{"class":545},[540,2262,2263],{"class":566},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[540,2265,602],{"class":545},[540,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289],{"class":2268,"line":662},[542,576],[540,2270,614],{"class":553},[540,2272,583],{"class":545},[540,2274,636],{"class":586},[540,2276,639],{"class":545},[540,2278,642],{"class":586},[540,2280,639],{"class":545},[540,2282,647],{"class":586},[540,2284,650],{"class":545},[540,2286,653],{"class":545},[540,2288,2224],{"class":656},[540,2290,659],{"class":586},[540,2292,2293,2295,2297],{"class":542,"line":672},[540,2294,665],{"class":545},[540,2296,550],{"class":549},[540,2298,572],{"class":545},[540,2300,2301],{"class":542,"line":677},[540,2302,608],{"emptyLinePlaceholder":492},[540,2304,2305,2307,2309],{"class":542,"line":687},[540,2306,546],{"class":545},[540,2308,682],{"class":549},[540,2310,572],{"class":545},[540,2312,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341,2344,2346,2348,2351,2353],{"class":542,"line":731},[540,2314,690],{"class":545},[540,2316,693],{"class":549},[540,2318,696],{"class":579},[540,2320,560],{"class":545},[540,2322,563],{"class":545},[540,2324,703],{"class":586},[540,2326,563],{"class":545},[540,2328,708],{"class":545},[540,2330,711],{"class":553},[540,2332,560],{"class":545},[540,2334,563],{"class":545},[540,2336,703],{"class":586},[540,2338,563],{"class":545},[540,2340,708],{"class":545},[540,2342,2343],{"class":553},"scale",[540,2345,560],{"class":545},[540,2347,563],{"class":545},[540,2349,2350],{"class":883},"0.025",[540,2352,563],{"class":545},[540,2354,728],{"class":545},[540,2356,2357,2359,2361],{"class":542,"line":914},[540,2358,665],{"class":545},[540,2360,682],{"class":549},[540,2362,572],{"class":545},[528,2364,2366],{"className":530,"code":2365,"filename":741,"language":535,"meta":484,"style":484},"\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",[537,2367,2368,2388,2406,2424,2438,2446,2450,2458,2477,2510,2518,2526,2532,2546,2572,2576,2596,2604],{"__ignoreMap":484},[540,2369,2370,2372,2374,2376,2378,2380,2382,2384,2386],{"class":542,"line":485},[540,2371,546],{"class":545},[540,2373,550],{"class":549},[540,2375,554],{"class":553},[540,2377,557],{"class":553},[540,2379,560],{"class":545},[540,2381,563],{"class":545},[540,2383,567],{"class":566},[540,2385,563],{"class":545},[540,2387,572],{"class":545},[540,2389,2390,2392,2394,2396,2398,2400,2402,2404],{"class":542,"line":486},[540,2391,580],{"class":579},[540,2393,583],{"class":545},[540,2395,772],{"class":586},[540,2397,590],{"class":545},[540,2399,593],{"class":579},[540,2401,596],{"class":545},[540,2403,599],{"class":566},[540,2405,602],{"class":545},[540,2407,2408,2410,2412,2414,2416,2418,2420,2422],{"class":542,"line":605},[540,2409,580],{"class":579},[540,2411,583],{"class":545},[540,2413,791],{"class":586},[540,2415,590],{"class":545},[540,2417,593],{"class":579},[540,2419,596],{"class":545},[540,2421,800],{"class":566},[540,2423,602],{"class":545},[540,2425,2426,2428,2430,2432,2434,2436],{"class":542,"line":611},[540,2427,580],{"class":579},[540,2429,809],{"class":586},[540,2431,812],{"class":579},[540,2433,596],{"class":545},[540,2435,817],{"class":566},[540,2437,602],{"class":545},[540,2439,2440,2442,2444],{"class":542,"line":534},[540,2441,665],{"class":545},[540,2443,550],{"class":549},[540,2445,572],{"class":545},[540,2447,2448],{"class":542,"line":662},[540,2449,608],{"emptyLinePlaceholder":492},[540,2451,2452,2454,2456],{"class":542,"line":672},[540,2453,546],{"class":545},[540,2455,682],{"class":549},[540,2457,572],{"class":545},[540,2459,2460,2462,2464,2466,2468,2470,2473,2475],{"class":542,"line":677},[540,2461,690],{"class":545},[540,2463,846],{"class":549},[540,2465,849],{"class":553},[540,2467,560],{"class":545},[540,2469,563],{"class":545},[540,2471,2472],{"class":566},"#1F90FF",[540,2474,563],{"class":545},[540,2476,572],{"class":545},[540,2478,2479,2481,2483,2485,2487,2489,2491,2493,2496,2498,2500,2502,2504,2506,2508],{"class":542,"line":687},[540,2480,865],{"class":545},[540,2482,868],{"class":549},[540,2484,708],{"class":545},[540,2486,873],{"class":553},[540,2488,560],{"class":545},[540,2490,563],{"class":545},[540,2492,880],{"class":545},[540,2494,2495],{"class":883},"11",[540,2497,887],{"class":545},[540,2499,2495],{"class":883},[540,2501,887],{"class":545},[540,2503,2495],{"class":883},[540,2505,898],{"class":545},[540,2507,563],{"class":545},[540,2509,728],{"class":545},[540,2511,2512,2514,2516],{"class":542,"line":731},[540,2513,865],{"class":545},[540,2515,909],{"class":549},[540,2517,728],{"class":545},[540,2519,2520,2522,2524],{"class":542,"line":914},[540,2521,865],{"class":545},[540,2523,919],{"class":549},[540,2525,728],{"class":545},[540,2527,2528,2530],{"class":542,"line":924},[540,2529,865],{"class":545},[540,2531,929],{"class":549},[540,2533,2534,2536,2538,2540,2542,2544],{"class":542,"line":932},[540,2535,935],{"class":545},[540,2537,938],{"class":553},[540,2539,560],{"class":545},[540,2541,563],{"class":545},[540,2543,890],{"class":883},[540,2545,947],{"class":545},[540,2547,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570],{"class":542,"line":950},[540,2549,935],{"class":545},[540,2551,873],{"class":553},[540,2553,560],{"class":545},[540,2555,563],{"class":545},[540,2557,880],{"class":545},[540,2559,884],{"class":883},[540,2561,887],{"class":545},[540,2563,884],{"class":883},[540,2565,887],{"class":545},[540,2567,884],{"class":883},[540,2569,898],{"class":545},[540,2571,947],{"class":545},[540,2573,2574],{"class":542,"line":977},[540,2575,980],{"class":545},[540,2577,2578,2580,2582,2584,2586,2588,2590,2592,2594],{"class":542,"line":983},[540,2579,865],{"class":545},[540,2581,988],{"class":549},[540,2583,708],{"class":545},[540,2585,938],{"class":553},[540,2587,560],{"class":545},[540,2589,563],{"class":545},[540,2591,999],{"class":883},[540,2593,563],{"class":545},[540,2595,728],{"class":545},[540,2597,2598,2600,2602],{"class":542,"line":1006},[540,2599,1009],{"class":545},[540,2601,846],{"class":549},[540,2603,572],{"class":545},[540,2605,2606,2608,2610],{"class":542,"line":1016},[540,2607,665],{"class":545},[540,2609,682],{"class":549},[540,2611,572],{"class":545},[521,2613,1124],{"id":1123},[1126,2615,2616,2626],{},[1129,2617,2618],{},[1132,2619,2620,2622,2624],{},[1135,2621,1138],{"align":1137},[1135,2623,1141],{},[1135,2625,1144],{},[1146,2627,2628,2642,2654,2666,2678],{},[1132,2629,2630,2634,2639],{},[1151,2631,2632],{"align":1137},[516,2633,703],{},[1151,2635,2636],{},[537,2637,2638],{},"Group",[1151,2640,2641],{},"The loaded FBX model state",[1132,2643,2644,2648,2652],{},[1151,2645,2646],{"align":1137},[516,2647,1169],{},[1151,2649,2650],{},[537,2651,711],{},[1151,2653,1176],{},[1132,2655,2656,2660,2664],{},[1151,2657,2658],{"align":1137},[516,2659,1183],{},[1151,2661,2662],{},[537,2663,711],{},[1151,2665,1190],{},[1132,2667,2668,2672,2676],{},[1151,2669,2670],{"align":1137},[516,2671,1197],{},[1151,2673,2674],{},[537,2675,1202],{},[1151,2677,1205],{},[1132,2679,2680,2685,2689],{},[1151,2681,2682],{"align":1137},[516,2683,2684],{},"execute",[1151,2686,2687],{},[537,2688,1232],{},[1151,2690,1235],{},[521,2692,1239],{"id":1238},[1126,2694,2695,2705],{},[1129,2696,2697],{},[1132,2698,2699,2701,2703],{},[1135,2700,1138],{"align":1137},[1135,2702,1141],{},[1135,2704,1144],{},[1146,2706,2707],{},[1132,2708,2709,2713,2717],{},[1151,2710,2711],{"align":1137},[516,2712,1301],{},[1151,2714,2715],{},[537,2716,1306],{},[1151,2718,1311],{},[521,2720,1315],{"id":1314},[512,2722,1318],{},[528,2724,2726],{"className":1043,"code":2725,"language":567,"meta":484,"style":484},"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",[537,2727,2728,2757,2761,2765,2783,2787,2791],{"__ignoreMap":484},[540,2729,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750,2753,2755],{"class":542,"line":485},[540,2731,614],{"class":553},[540,2733,583],{"class":545},[540,2735,642],{"class":586},[540,2737,639],{"class":545},[540,2739,647],{"class":586},[540,2741,650],{"class":545},[540,2743,653],{"class":545},[540,2745,2224],{"class":656},[540,2747,1093],{"class":586},[540,2749,1096],{"class":545},[540,2751,2752],{"class":566},"/model.fbx",[540,2754,1096],{"class":545},[540,2756,1120],{"class":586},[540,2758,2759],{"class":542,"line":486},[540,2760,608],{"emptyLinePlaceholder":492},[540,2762,2763],{"class":542,"line":605},[540,2764,1362],{"class":1361},[540,2766,2767,2769,2771,2773,2775,2777,2779,2781],{"class":542,"line":611},[540,2768,614],{"class":553},[540,2770,1369],{"class":586},[540,2772,560],{"class":545},[540,2774,642],{"class":586},[540,2776,1376],{"class":545},[540,2778,1379],{"class":586},[540,2780,1376],{"class":545},[540,2782,1384],{"class":586},[540,2784,2785],{"class":542,"line":534},[540,2786,608],{"emptyLinePlaceholder":492},[540,2788,2789],{"class":542,"line":662},[540,2790,1393],{"class":1361},[540,2792,2793,2795,2797,2799,2801,2803,2805,2807],{"class":542,"line":672},[540,2794,614],{"class":553},[540,2796,1400],{"class":586},[540,2798,560],{"class":545},[540,2800,1405],{"class":586},[540,2802,1376],{"class":545},[540,2804,1379],{"class":586},[540,2806,1376],{"class":545},[540,2808,1414],{"class":586},[512,2810,1417],{},[1419,2812,2813],{},"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 .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}",{"title":484,"searchDepth":485,"depth":486,"links":2815},[2816,2817,2818,2819],{"id":523,"depth":486,"text":15},{"id":1123,"depth":486,"text":1124},{"id":1238,"depth":486,"text":1239},{"id":1314,"depth":486,"text":1315},"A composable to load FBX models in TresJS scenes.",{},{"title":129,"description":2820},"OZNFq_w0y9fXGIViDTr_a5XFwBaMnXwWDQKWFsdULrs",{"id":2825,"title":133,"body":2826,"description":3484,"extension":489,"links":490,"meta":3485,"navigation":492,"path":134,"seo":3486,"stem":135,"__hash__":3487},"docs/2.api/3.loaders/4.fbx-model.md",{"type":477,"value":2827,"toc":3479},[2828,2832,2841,2843,3205,3207,3214,3421,3423,3477],[506,2829,2830],{},[2178,2831],{},[512,2833,1441,2834,1444,2836,1450],{},[537,2835,133],{},[1034,2837,2839],{"href":2838},"./use-fbx",[537,2840,129],{},[521,2842,15],{"id":523},[525,2844,2845,2959],{},[528,2846,2849],{"className":530,"code":2847,"filename":532,"highlights":2848,"language":535,"meta":484,"style":484},"\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",[486,677],[537,2850,2851,2871,2891,2895,2910,2918,2922,2930,2951],{"__ignoreMap":484},[540,2852,2853,2855,2857,2859,2861,2863,2865,2867,2869],{"class":542,"line":485},[540,2854,546],{"class":545},[540,2856,550],{"class":549},[540,2858,554],{"class":553},[540,2860,557],{"class":553},[540,2862,560],{"class":545},[540,2864,563],{"class":545},[540,2866,567],{"class":566},[540,2868,563],{"class":545},[540,2870,572],{"class":545},[540,2872,2874,2876,2878,2881,2883,2885,2887,2889],{"class":2873,"line":486},[542,576],[540,2875,580],{"class":579},[540,2877,583],{"class":545},[540,2879,2880],{"class":586}," FBXModel",[540,2882,590],{"class":545},[540,2884,593],{"class":579},[540,2886,596],{"class":545},[540,2888,599],{"class":566},[540,2890,602],{"class":545},[540,2892,2893],{"class":542,"line":605},[540,2894,608],{"emptyLinePlaceholder":492},[540,2896,2897,2899,2901,2903,2905,2908],{"class":542,"line":611},[540,2898,614],{"class":553},[540,2900,617],{"class":586},[540,2902,560],{"class":545},[540,2904,596],{"class":545},[540,2906,2907],{"class":566},"./Jeep_done.fbx",[540,2909,602],{"class":545},[540,2911,2912,2914,2916],{"class":542,"line":534},[540,2913,665],{"class":545},[540,2915,550],{"class":549},[540,2917,572],{"class":545},[540,2919,2920],{"class":542,"line":662},[540,2921,608],{"emptyLinePlaceholder":492},[540,2923,2924,2926,2928],{"class":542,"line":672},[540,2925,546],{"class":545},[540,2927,682],{"class":549},[540,2929,572],{"class":545},[540,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949],{"class":2932,"line":677},[542,576],[540,2934,690],{"class":545},[540,2936,133],{"class":549},[540,2938,708],{"class":545},[540,2940,1550],{"class":553},[540,2942,560],{"class":545},[540,2944,563],{"class":545},[540,2946,1550],{"class":586},[540,2948,563],{"class":545},[540,2950,728],{"class":545},[540,2952,2953,2955,2957],{"class":542,"line":687},[540,2954,665],{"class":545},[540,2956,682],{"class":549},[540,2958,572],{"class":545},[528,2960,2961],{"className":530,"code":740,"filename":741,"language":535,"meta":484,"style":484},[537,2962,2963,2983,3001,3019,3033,3041,3045,3053,3071,3103,3111,3119,3125,3139,3165,3169,3189,3197],{"__ignoreMap":484},[540,2964,2965,2967,2969,2971,2973,2975,2977,2979,2981],{"class":542,"line":485},[540,2966,546],{"class":545},[540,2968,550],{"class":549},[540,2970,554],{"class":553},[540,2972,557],{"class":553},[540,2974,560],{"class":545},[540,2976,563],{"class":545},[540,2978,567],{"class":566},[540,2980,563],{"class":545},[540,2982,572],{"class":545},[540,2984,2985,2987,2989,2991,2993,2995,2997,2999],{"class":542,"line":486},[540,2986,580],{"class":579},[540,2988,583],{"class":545},[540,2990,772],{"class":586},[540,2992,590],{"class":545},[540,2994,593],{"class":579},[540,2996,596],{"class":545},[540,2998,599],{"class":566},[540,3000,602],{"class":545},[540,3002,3003,3005,3007,3009,3011,3013,3015,3017],{"class":542,"line":605},[540,3004,580],{"class":579},[540,3006,583],{"class":545},[540,3008,791],{"class":586},[540,3010,590],{"class":545},[540,3012,593],{"class":579},[540,3014,596],{"class":545},[540,3016,800],{"class":566},[540,3018,602],{"class":545},[540,3020,3021,3023,3025,3027,3029,3031],{"class":542,"line":611},[540,3022,580],{"class":579},[540,3024,809],{"class":586},[540,3026,812],{"class":579},[540,3028,596],{"class":545},[540,3030,817],{"class":566},[540,3032,602],{"class":545},[540,3034,3035,3037,3039],{"class":542,"line":534},[540,3036,665],{"class":545},[540,3038,550],{"class":549},[540,3040,572],{"class":545},[540,3042,3043],{"class":542,"line":662},[540,3044,608],{"emptyLinePlaceholder":492},[540,3046,3047,3049,3051],{"class":542,"line":672},[540,3048,546],{"class":545},[540,3050,682],{"class":549},[540,3052,572],{"class":545},[540,3054,3055,3057,3059,3061,3063,3065,3067,3069],{"class":542,"line":677},[540,3056,690],{"class":545},[540,3058,846],{"class":549},[540,3060,849],{"class":553},[540,3062,560],{"class":545},[540,3064,563],{"class":545},[540,3066,856],{"class":566},[540,3068,563],{"class":545},[540,3070,572],{"class":545},[540,3072,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101],{"class":542,"line":687},[540,3074,865],{"class":545},[540,3076,868],{"class":549},[540,3078,708],{"class":545},[540,3080,873],{"class":553},[540,3082,560],{"class":545},[540,3084,563],{"class":545},[540,3086,880],{"class":545},[540,3088,884],{"class":883},[540,3090,887],{"class":545},[540,3092,890],{"class":883},[540,3094,887],{"class":545},[540,3096,895],{"class":883},[540,3098,898],{"class":545},[540,3100,563],{"class":545},[540,3102,728],{"class":545},[540,3104,3105,3107,3109],{"class":542,"line":731},[540,3106,865],{"class":545},[540,3108,909],{"class":549},[540,3110,728],{"class":545},[540,3112,3113,3115,3117],{"class":542,"line":914},[540,3114,865],{"class":545},[540,3116,919],{"class":549},[540,3118,728],{"class":545},[540,3120,3121,3123],{"class":542,"line":924},[540,3122,865],{"class":545},[540,3124,929],{"class":549},[540,3126,3127,3129,3131,3133,3135,3137],{"class":542,"line":932},[540,3128,935],{"class":545},[540,3130,938],{"class":553},[540,3132,560],{"class":545},[540,3134,563],{"class":545},[540,3136,890],{"class":883},[540,3138,947],{"class":545},[540,3140,3141,3143,3145,3147,3149,3151,3153,3155,3157,3159,3161,3163],{"class":542,"line":950},[540,3142,935],{"class":545},[540,3144,873],{"class":553},[540,3146,560],{"class":545},[540,3148,563],{"class":545},[540,3150,880],{"class":545},[540,3152,884],{"class":883},[540,3154,887],{"class":545},[540,3156,884],{"class":883},[540,3158,887],{"class":545},[540,3160,884],{"class":883},[540,3162,898],{"class":545},[540,3164,947],{"class":545},[540,3166,3167],{"class":542,"line":977},[540,3168,980],{"class":545},[540,3170,3171,3173,3175,3177,3179,3181,3183,3185,3187],{"class":542,"line":983},[540,3172,865],{"class":545},[540,3174,988],{"class":549},[540,3176,708],{"class":545},[540,3178,938],{"class":553},[540,3180,560],{"class":545},[540,3182,563],{"class":545},[540,3184,999],{"class":883},[540,3186,563],{"class":545},[540,3188,728],{"class":545},[540,3190,3191,3193,3195],{"class":542,"line":1006},[540,3192,1009],{"class":545},[540,3194,846],{"class":549},[540,3196,572],{"class":545},[540,3198,3199,3201,3203],{"class":542,"line":1016},[540,3200,665],{"class":545},[540,3202,682],{"class":549},[540,3204,572],{"class":545},[521,3206,1818],{"id":1817},[512,3208,1821,3209,1825,3211,3213],{},[537,3210,1824],{},[537,3212,133],{}," component and then using it to get the object.",[528,3215,3217],{"className":530,"code":3216,"language":535,"meta":484,"style":484},"\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",[537,3218,3219,3239,3259,3277,3281,3299,3303,3321,3325,3351,3357,3365,3369,3377,3384,3396,3409,3413],{"__ignoreMap":484},[540,3220,3221,3223,3225,3227,3229,3231,3233,3235,3237],{"class":542,"line":485},[540,3222,546],{"class":545},[540,3224,550],{"class":549},[540,3226,554],{"class":553},[540,3228,557],{"class":553},[540,3230,560],{"class":545},[540,3232,563],{"class":545},[540,3234,567],{"class":566},[540,3236,563],{"class":545},[540,3238,572],{"class":545},[540,3240,3241,3243,3245,3247,3249,3251,3253,3255,3257],{"class":542,"line":486},[540,3242,580],{"class":579},[540,3244,1861],{"class":579},[540,3246,583],{"class":545},[540,3248,1866],{"class":586},[540,3250,590],{"class":545},[540,3252,593],{"class":579},[540,3254,596],{"class":545},[540,3256,800],{"class":566},[540,3258,602],{"class":545},[540,3260,3261,3263,3265,3267,3269,3271,3273,3275],{"class":542,"line":605},[540,3262,580],{"class":579},[540,3264,583],{"class":545},[540,3266,2880],{"class":586},[540,3268,590],{"class":545},[540,3270,593],{"class":579},[540,3272,596],{"class":545},[540,3274,599],{"class":566},[540,3276,602],{"class":545},[540,3278,3279],{"class":542,"line":611},[540,3280,608],{"emptyLinePlaceholder":492},[540,3282,3283,3285,3287,3289,3291,3293,3295,3297],{"class":542,"line":534},[540,3284,614],{"class":553},[540,3286,1906],{"class":586},[540,3288,560],{"class":545},[540,3290,1911],{"class":656},[540,3292,546],{"class":545},[540,3294,1917],{"class":1916},[540,3296,1920],{"class":545},[540,3298,1923],{"class":586},[540,3300,3301],{"class":542,"line":662},[540,3302,608],{"emptyLinePlaceholder":492},[540,3304,3305,3307,3309,3311,3313,3315,3317,3319],{"class":542,"line":672},[540,3306,1932],{"class":656},[540,3308,1935],{"class":586},[540,3310,639],{"class":545},[540,3312,1940],{"class":545},[540,3314,1828],{"class":1943},[540,3316,1946],{"class":545},[540,3318,1949],{"class":553},[540,3320,1952],{"class":545},[540,3322,3323],{"class":542,"line":677},[540,3324,1957],{"class":1361},[540,3326,3327,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347,3349],{"class":542,"line":687},[540,3328,1962],{"class":586},[540,3330,1376],{"class":545},[540,3332,873],{"class":586},[540,3334,1376],{"class":545},[540,3336,1971],{"class":656},[540,3338,1093],{"class":549},[540,3340,1976],{"class":883},[540,3342,639],{"class":545},[540,3344,1981],{"class":883},[540,3346,639],{"class":545},[540,3348,1981],{"class":883},[540,3350,1120],{"class":549},[540,3352,3353,3355],{"class":542,"line":731},[540,3354,650],{"class":545},[540,3356,1120],{"class":586},[540,3358,3359,3361,3363],{"class":542,"line":914},[540,3360,665],{"class":545},[540,3362,550],{"class":549},[540,3364,572],{"class":545},[540,3366,3367],{"class":542,"line":924},[540,3368,608],{"emptyLinePlaceholder":492},[540,3370,3371,3373,3375],{"class":542,"line":932},[540,3372,546],{"class":545},[540,3374,682],{"class":549},[540,3376,572],{"class":545},[540,3378,3379,3381],{"class":542,"line":950},[540,3380,690],{"class":545},[540,3382,3383],{"class":549},"FBXModel\n",[540,3385,3386,3388,3390,3392,3394],{"class":542,"line":977},[540,3387,2025],{"class":553},[540,3389,560],{"class":545},[540,3391,563],{"class":545},[540,3393,2032],{"class":566},[540,3395,947],{"class":545},[540,3397,3398,3400,3402,3404,3407],{"class":542,"line":983},[540,3399,2039],{"class":553},[540,3401,560],{"class":545},[540,3403,563],{"class":545},[540,3405,3406],{"class":566},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[540,3408,947],{"class":545},[540,3410,3411],{"class":542,"line":1006},[540,3412,2053],{"class":545},[540,3414,3415,3417,3419],{"class":542,"line":1016},[540,3416,665],{"class":545},[540,3418,682],{"class":549},[540,3420,572],{"class":545},[521,3422,2065],{"id":2064},[1126,3424,3425,3435],{},[1129,3426,3427],{},[1132,3428,3429,3431,3433],{},[1135,3430,2074],{"align":1137},[1135,3432,1144],{"align":1137},[1135,3434,1252],{},[1146,3436,3437,3449,3463],{},[1132,3438,3439,3443,3445],{},[1151,3440,3441],{"align":1137},[537,3442,1550],{},[1151,3444,2089],{"align":1137},[1151,3446,3447],{},[537,3448,2094],{},[1132,3450,3451,3455,3459],{},[1151,3452,3453],{"align":1137},[537,3454,2131],{},[1151,3456,2134,3457,2138],{"align":1137},[537,3458,2137],{},[1151,3460,3461],{},[537,3462,1271],{},[1132,3464,3465,3469,3473],{},[1151,3466,3467],{"align":1137},[537,3468,2149],{},[1151,3470,2134,3471,2138],{"align":1137},[537,3472,2154],{},[1151,3474,3475],{},[537,3476,1271],{},[1419,3478,2161],{},{"title":484,"searchDepth":485,"depth":486,"links":3480},[3481,3482,3483],{"id":523,"depth":486,"text":15},{"id":1817,"depth":486,"text":1818},{"id":2064,"depth":486,"text":2065},"A component based on useFBX to load models in TresJS scenes.",{},{"title":133,"description":3484},"UvFys7XTw8i8N0823KzOVRUmY9Q9yI0fymMbHpSGEfQ",{"id":3489,"title":137,"body":3490,"description":4160,"extension":489,"links":490,"meta":4161,"navigation":492,"path":138,"seo":4162,"stem":139,"__hash__":4163},"docs/2.api/3.loaders/5.use-texture.md",{"type":477,"value":3491,"toc":4154},[3492,3497,3508,3510,3670,3672,3724,3726,3782,3786,3793,4151],[506,3493,3494],{},[3495,3496],"loaders-use-texture",{},[512,3498,3499,3500,3505,3506,519],{},"A composable that allows you to load textures using the ",[1034,3501,3504],{"href":3502,"rel":3503},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1038],"Three.js texture loader"," into your ",[516,3507,518],{},[521,3509,15],{"id":523},[528,3511,3514],{"className":530,"code":3512,"highlights":3513,"language":535,"meta":484,"style":484},"\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",[486,611,731],[537,3515,3516,3536,3556,3560,3592,3600,3604,3612,3621,3630,3654,3662],{"__ignoreMap":484},[540,3517,3518,3520,3522,3524,3526,3528,3530,3532,3534],{"class":542,"line":485},[540,3519,546],{"class":545},[540,3521,550],{"class":549},[540,3523,554],{"class":553},[540,3525,557],{"class":553},[540,3527,560],{"class":545},[540,3529,563],{"class":545},[540,3531,567],{"class":566},[540,3533,563],{"class":545},[540,3535,572],{"class":545},[540,3537,3539,3541,3543,3546,3548,3550,3552,3554],{"class":3538,"line":486},[542,576],[540,3540,580],{"class":579},[540,3542,583],{"class":545},[540,3544,3545],{"class":586}," useTexture",[540,3547,590],{"class":545},[540,3549,593],{"class":579},[540,3551,596],{"class":545},[540,3553,599],{"class":566},[540,3555,602],{"class":545},[540,3557,3558],{"class":542,"line":605},[540,3559,608],{"emptyLinePlaceholder":492},[540,3561,3563,3565,3567,3569,3571,3574,3576,3579,3581,3584,3586,3588,3590],{"class":3562,"line":611},[542,576],[540,3564,614],{"class":553},[540,3566,583],{"class":545},[540,3568,636],{"class":549},[540,3570,1111],{"class":545},[540,3572,3573],{"class":586}," texture",[540,3575,639],{"class":545},[540,3577,3578],{"class":586}," isLoading",[540,3580,639],{"class":545},[540,3582,3583],{"class":586}," error ",[540,3585,650],{"class":545},[540,3587,653],{"class":545},[540,3589,3545],{"class":656},[540,3591,659],{"class":586},[540,3593,3594,3596,3598],{"class":542,"line":534},[540,3595,665],{"class":545},[540,3597,550],{"class":549},[540,3599,572],{"class":545},[540,3601,3602],{"class":542,"line":662},[540,3603,608],{"emptyLinePlaceholder":492},[540,3605,3606,3608,3610],{"class":542,"line":672},[540,3607,546],{"class":545},[540,3609,682],{"class":549},[540,3611,572],{"class":545},[540,3613,3614,3616,3619],{"class":542,"line":677},[540,3615,690],{"class":545},[540,3617,3618],{"class":549},"TresMesh",[540,3620,572],{"class":545},[540,3622,3623,3625,3628],{"class":542,"line":687},[540,3624,865],{"class":545},[540,3626,3627],{"class":549},"TresSphereGeometry",[540,3629,728],{"class":545},[540,3631,3633,3635,3638,3640,3643,3645,3647,3650,3652],{"class":3632,"line":731},[542,576],[540,3634,865],{"class":545},[540,3636,3637],{"class":549},"TresMeshStandardMaterial",[540,3639,708],{"class":545},[540,3641,3642],{"class":553},"map",[540,3644,560],{"class":545},[540,3646,563],{"class":545},[540,3648,3649],{"class":586},"texture",[540,3651,563],{"class":545},[540,3653,728],{"class":545},[540,3655,3656,3658,3660],{"class":542,"line":914},[540,3657,1009],{"class":545},[540,3659,3618],{"class":549},[540,3661,572],{"class":545},[540,3663,3664,3666,3668],{"class":542,"line":924},[540,3665,665],{"class":545},[540,3667,682],{"class":549},[540,3669,572],{"class":545},[521,3671,1239],{"id":1238},[1126,3673,3674,3686],{},[1129,3675,3676],{},[1132,3677,3678,3680,3682,3684],{},[1135,3679,1138],{"align":1137},[1135,3681,1141],{},[1135,3683,1252],{},[1135,3685,1144],{},[1146,3687,3688,3705],{},[1132,3689,3690,3694,3698,3702],{},[1151,3691,3692],{"align":1137},[516,3693,1550],{},[1151,3695,3696],{},[537,3697,1286],{},[1151,3699,3700],{},[537,3701,2094],{},[1151,3703,3704],{},"The path to the texture.",[1132,3706,3707,3712,3717,3721],{},[1151,3708,3709],{"align":1137},[516,3710,3711],{},"manager",[1151,3713,3714],{},[537,3715,3716],{},"THREE.LoadingManager",[1151,3718,3719],{},[537,3720,2094],{},[1151,3722,3723],{},"The loading manager to use for the texture.",[521,3725,1124],{"id":1123},[1126,3727,3728,3738],{},[1129,3729,3730],{},[1132,3731,3732,3734,3736],{},[1135,3733,1138],{"align":1137},[1135,3735,1141],{"align":1137},[1135,3737,1144],{"align":1137},[1146,3739,3740,3754,3767],{},[1132,3741,3742,3746,3751],{},[1151,3743,3744],{"align":1137},[537,3745,703],{},[1151,3747,3748],{"align":1137},[537,3749,3750],{},"Texture | null",[1151,3752,3753],{"align":1137},"The loaded texture",[1132,3755,3756,3760,3764],{},[1151,3757,3758],{"align":1137},[537,3759,1197],{},[1151,3761,3762],{"align":1137},[537,3763,1202],{},[1151,3765,3766],{"align":1137},"Whether the texture is loading",[1132,3768,3769,3774,3779],{},[1151,3770,3771],{"align":1137},[537,3772,3773],{},"error",[1151,3775,3776],{"align":1137},[537,3777,3778],{},"string | null",[1151,3780,3781],{"align":1137},"Error message if loading failed",[521,3783,3785],{"id":3784},"component-usage","Component Usage",[512,3787,3788,3789,3792],{},"You can also use the ",[537,3790,3791],{},"UseTexture"," component directly in your template:",[528,3794,3801],{"className":530,"code":3795,"highlights":3796,"language":535,"meta":484,"style":484},"\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",[486,983,1006,1016,3797,3798,3799,3800],19,20,21,26,[537,3802,3803,3823,3843,3847,3862,3866,3890,3915,3920,3924,3948,3971,3975,3983,3987,3995,4003,4027,4043,4061,4077,4083,4092,4102,4123,4133,4142],{"__ignoreMap":484},[540,3804,3805,3807,3809,3811,3813,3815,3817,3819,3821],{"class":542,"line":485},[540,3806,546],{"class":545},[540,3808,550],{"class":549},[540,3810,554],{"class":553},[540,3812,557],{"class":553},[540,3814,560],{"class":545},[540,3816,563],{"class":545},[540,3818,567],{"class":566},[540,3820,563],{"class":545},[540,3822,572],{"class":545},[540,3824,3826,3828,3830,3833,3835,3837,3839,3841],{"class":3825,"line":486},[542,576],[540,3827,580],{"class":579},[540,3829,583],{"class":545},[540,3831,3832],{"class":586}," UseTexture",[540,3834,590],{"class":545},[540,3836,593],{"class":579},[540,3838,596],{"class":545},[540,3840,599],{"class":566},[540,3842,602],{"class":545},[540,3844,3845],{"class":542,"line":605},[540,3846,608],{"emptyLinePlaceholder":492},[540,3848,3849,3851,3853,3855,3857,3860],{"class":542,"line":611},[540,3850,614],{"class":553},[540,3852,617],{"class":586},[540,3854,560],{"class":545},[540,3856,596],{"class":545},[540,3858,3859],{"class":566},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[540,3861,602],{"class":545},[540,3863,3864],{"class":542,"line":534},[540,3865,608],{"emptyLinePlaceholder":492},[540,3867,3868,3870,3873,3875,3877,3879,3881,3884,3886,3888],{"class":542,"line":662},[540,3869,614],{"class":553},[540,3871,3872],{"class":586}," handleLoaded ",[540,3874,560],{"class":545},[540,3876,1940],{"class":545},[540,3878,3649],{"class":1943},[540,3880,1111],{"class":545},[540,3882,3883],{"class":1916}," Texture",[540,3885,1946],{"class":545},[540,3887,1949],{"class":553},[540,3889,1952],{"class":545},[540,3891,3892,3895,3897,3900,3902,3904,3907,3909,3911,3913],{"class":542,"line":672},[540,3893,3894],{"class":586},"  console",[540,3896,1376],{"class":545},[540,3898,3899],{"class":656},"log",[540,3901,1093],{"class":549},[540,3903,1096],{"class":545},[540,3905,3906],{"class":566},"Loaded texture",[540,3908,1096],{"class":545},[540,3910,639],{"class":545},[540,3912,3573],{"class":586},[540,3914,1120],{"class":549},[540,3916,3917],{"class":542,"line":677},[540,3918,3919],{"class":545},"}\n",[540,3921,3922],{"class":542,"line":687},[540,3923,608],{"emptyLinePlaceholder":492},[540,3925,3926,3928,3931,3933,3935,3937,3939,3942,3944,3946],{"class":542,"line":731},[540,3927,614],{"class":553},[540,3929,3930],{"class":586}," handleError ",[540,3932,560],{"class":545},[540,3934,1940],{"class":545},[540,3936,3773],{"class":1943},[540,3938,1111],{"class":545},[540,3940,3941],{"class":1916}," unknown",[540,3943,1946],{"class":545},[540,3945,1949],{"class":553},[540,3947,1952],{"class":545},[540,3949,3950,3952,3954,3956,3958,3960,3962,3964,3966,3969],{"class":542,"line":914},[540,3951,3894],{"class":586},[540,3953,1376],{"class":545},[540,3955,3773],{"class":656},[540,3957,1093],{"class":549},[540,3959,1096],{"class":545},[540,3961,3773],{"class":566},[540,3963,1096],{"class":545},[540,3965,639],{"class":545},[540,3967,3968],{"class":586}," error",[540,3970,1120],{"class":549},[540,3972,3973],{"class":542,"line":924},[540,3974,3919],{"class":545},[540,3976,3977,3979,3981],{"class":542,"line":932},[540,3978,665],{"class":545},[540,3980,550],{"class":549},[540,3982,572],{"class":545},[540,3984,3985],{"class":542,"line":950},[540,3986,608],{"emptyLinePlaceholder":492},[540,3988,3989,3991,3993],{"class":542,"line":977},[540,3990,546],{"class":545},[540,3992,682],{"class":549},[540,3994,572],{"class":545},[540,3996,3998,4000],{"class":3997,"line":983},[542,576],[540,3999,690],{"class":545},[540,4001,4002],{"class":549},"UseTexture\n",[540,4004,4006,4009,4011,4013,4016,4018,4021,4023,4025],{"class":4005,"line":1006},[542,576],[540,4007,4008],{"class":553},"    v-slot",[540,4010,560],{"class":545},[540,4012,563],{"class":545},[540,4014,4015],{"class":545},"{ ",[540,4017,703],{"class":549},[540,4019,4020],{"class":545},": ",[540,4022,3649],{"class":586},[540,4024,590],{"class":545},[540,4026,947],{"class":545},[540,4028,4030,4033,4035,4037,4039,4041],{"class":4029,"line":1016},[542,576],[540,4031,4032],{"class":545},"    :",[540,4034,1550],{"class":553},[540,4036,560],{"class":545},[540,4038,563],{"class":545},[540,4040,1550],{"class":586},[540,4042,947],{"class":545},[540,4044,4046,4049,4052,4054,4056,4059],{"class":4045,"line":3797},[542,576],[540,4047,4048],{"class":545},"    @",[540,4050,4051],{"class":553},"loaded",[540,4053,560],{"class":545},[540,4055,563],{"class":545},[540,4057,4058],{"class":586},"handleLoaded",[540,4060,947],{"class":545},[540,4062,4064,4066,4068,4070,4072,4075],{"class":4063,"line":3798},[542,576],[540,4065,4048],{"class":545},[540,4067,3773],{"class":553},[540,4069,560],{"class":545},[540,4071,563],{"class":545},[540,4073,4074],{"class":586},"handleError",[540,4076,947],{"class":545},[540,4078,4080],{"class":4079,"line":3799},[542,576],[540,4081,4082],{"class":545},"  >\n",[540,4084,4086,4088,4090],{"class":542,"line":4085},22,[540,4087,865],{"class":545},[540,4089,3618],{"class":549},[540,4091,572],{"class":545},[540,4093,4095,4098,4100],{"class":542,"line":4094},23,[540,4096,4097],{"class":545},"      \u003C",[540,4099,3627],{"class":549},[540,4101,728],{"class":545},[540,4103,4105,4107,4109,4111,4113,4115,4117,4119,4121],{"class":542,"line":4104},24,[540,4106,4097],{"class":545},[540,4108,3637],{"class":549},[540,4110,708],{"class":545},[540,4112,3642],{"class":553},[540,4114,560],{"class":545},[540,4116,563],{"class":545},[540,4118,3649],{"class":586},[540,4120,563],{"class":545},[540,4122,728],{"class":545},[540,4124,4126,4129,4131],{"class":542,"line":4125},25,[540,4127,4128],{"class":545},"    \u003C/",[540,4130,3618],{"class":549},[540,4132,572],{"class":545},[540,4134,4136,4138,4140],{"class":4135,"line":3800},[542,576],[540,4137,1009],{"class":545},[540,4139,3791],{"class":549},[540,4141,572],{"class":545},[540,4143,4145,4147,4149],{"class":542,"line":4144},27,[540,4146,665],{"class":545},[540,4148,682],{"class":549},[540,4150,572],{"class":545},[1419,4152,4153],{},"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":484,"searchDepth":485,"depth":486,"links":4155},[4156,4157,4158,4159],{"id":523,"depth":486,"text":15},{"id":1238,"depth":486,"text":1239},{"id":1123,"depth":486,"text":1124},{"id":3784,"depth":486,"text":3785},"A composable to load textures in TresJS scenes.",{},{"title":137,"description":4160},"eWpsm_0O2uskMZJ3Ht1Sb5JPGHO3WvELbtkQ2LoRQO0",{"id":4165,"title":141,"body":4166,"description":5713,"extension":489,"links":490,"meta":5714,"navigation":492,"path":142,"seo":5715,"stem":143,"__hash__":5716},"docs/2.api/3.loaders/6.use-textures.md",{"type":477,"value":4167,"toc":5704},[4168,4173,4181,4183,4453,4457,4460,5566,5570,5575,5610,5614,5669,5673,5701],[506,4169,4170],{},[4171,4172],"loaders-use-textures",{},[512,4174,4175,4176,3505,4179,519],{},"A composable that allows you to load multiple textures at once using the ",[1034,4177,3504],{"href":3502,"rel":4178},[1038],[516,4180,518],{},[521,4182,15],{"id":523},[528,4184,4187],{"className":530,"code":4185,"highlights":4186,"language":535,"meta":484,"style":484},"\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",[486,924,3797,3798,3799],[537,4188,4189,4209,4229,4233,4238,4250,4263,4274,4283,4288,4292,4297,4324,4332,4336,4344,4352,4360,4367,4389,4411,4433,4437,4445],{"__ignoreMap":484},[540,4190,4191,4193,4195,4197,4199,4201,4203,4205,4207],{"class":542,"line":485},[540,4192,546],{"class":545},[540,4194,550],{"class":549},[540,4196,554],{"class":553},[540,4198,557],{"class":553},[540,4200,560],{"class":545},[540,4202,563],{"class":545},[540,4204,567],{"class":566},[540,4206,563],{"class":545},[540,4208,572],{"class":545},[540,4210,4212,4214,4216,4219,4221,4223,4225,4227],{"class":4211,"line":486},[542,576],[540,4213,580],{"class":579},[540,4215,583],{"class":545},[540,4217,4218],{"class":586}," useTextures",[540,4220,590],{"class":545},[540,4222,593],{"class":579},[540,4224,596],{"class":545},[540,4226,599],{"class":566},[540,4228,602],{"class":545},[540,4230,4231],{"class":542,"line":605},[540,4232,608],{"emptyLinePlaceholder":492},[540,4234,4235],{"class":542,"line":611},[540,4236,4237],{"class":1361},"// Define an array of texture paths\n",[540,4239,4240,4242,4245,4247],{"class":542,"line":534},[540,4241,614],{"class":553},[540,4243,4244],{"class":586}," texturePaths ",[540,4246,560],{"class":545},[540,4248,4249],{"class":586}," [\n",[540,4251,4252,4255,4258,4260],{"class":542,"line":662},[540,4253,4254],{"class":545},"  '",[540,4256,4257],{"class":566},"/textures/color.jpg",[540,4259,1096],{"class":545},[540,4261,4262],{"class":545},",\n",[540,4264,4265,4267,4270,4272],{"class":542,"line":672},[540,4266,4254],{"class":545},[540,4268,4269],{"class":566},"/textures/normal.jpg",[540,4271,1096],{"class":545},[540,4273,4262],{"class":545},[540,4275,4276,4278,4281],{"class":542,"line":677},[540,4277,4254],{"class":545},[540,4279,4280],{"class":566},"/textures/roughness.jpg",[540,4282,602],{"class":545},[540,4284,4285],{"class":542,"line":687},[540,4286,4287],{"class":586},"]\n",[540,4289,4290],{"class":542,"line":731},[540,4291,608],{"emptyLinePlaceholder":492},[540,4293,4294],{"class":542,"line":914},[540,4295,4296],{"class":1361},"// Load all textures at once\n",[540,4298,4300,4302,4304,4307,4309,4311,4313,4315,4317,4319,4321],{"class":4299,"line":924},[542,576],[540,4301,614],{"class":553},[540,4303,583],{"class":545},[540,4305,4306],{"class":586}," textures",[540,4308,639],{"class":545},[540,4310,3578],{"class":586},[540,4312,639],{"class":545},[540,4314,3583],{"class":586},[540,4316,650],{"class":545},[540,4318,653],{"class":545},[540,4320,4218],{"class":656},[540,4322,4323],{"class":586},"(texturePaths)\n",[540,4325,4326,4328,4330],{"class":542,"line":932},[540,4327,665],{"class":545},[540,4329,550],{"class":549},[540,4331,572],{"class":545},[540,4333,4334],{"class":542,"line":950},[540,4335,608],{"emptyLinePlaceholder":492},[540,4337,4338,4340,4342],{"class":542,"line":977},[540,4339,546],{"class":545},[540,4341,682],{"class":549},[540,4343,572],{"class":545},[540,4345,4346,4348,4350],{"class":542,"line":983},[540,4347,690],{"class":545},[540,4349,3618],{"class":549},[540,4351,572],{"class":545},[540,4353,4354,4356,4358],{"class":542,"line":1006},[540,4355,865],{"class":545},[540,4357,3627],{"class":549},[540,4359,728],{"class":545},[540,4361,4362,4364],{"class":542,"line":1016},[540,4363,865],{"class":545},[540,4365,4366],{"class":549},"TresMeshStandardMaterial\n",[540,4368,4370,4372,4374,4376,4378,4381,4383,4385,4387],{"class":4369,"line":3797},[542,576],[540,4371,935],{"class":545},[540,4373,3642],{"class":553},[540,4375,560],{"class":545},[540,4377,563],{"class":545},[540,4379,4380],{"class":586},"textures",[540,4382,880],{"class":545},[540,4384,1976],{"class":883},[540,4386,898],{"class":545},[540,4388,947],{"class":545},[540,4390,4392,4394,4397,4399,4401,4403,4405,4407,4409],{"class":4391,"line":3798},[542,576],[540,4393,935],{"class":545},[540,4395,4396],{"class":553},"normal-map",[540,4398,560],{"class":545},[540,4400,563],{"class":545},[540,4402,4380],{"class":586},[540,4404,880],{"class":545},[540,4406,999],{"class":883},[540,4408,898],{"class":545},[540,4410,947],{"class":545},[540,4412,4414,4416,4419,4421,4423,4425,4427,4429,4431],{"class":4413,"line":3799},[542,576],[540,4415,935],{"class":545},[540,4417,4418],{"class":553},"roughness-map",[540,4420,560],{"class":545},[540,4422,563],{"class":545},[540,4424,4380],{"class":586},[540,4426,880],{"class":545},[540,4428,890],{"class":883},[540,4430,898],{"class":545},[540,4432,947],{"class":545},[540,4434,4435],{"class":542,"line":4085},[540,4436,980],{"class":545},[540,4438,4439,4441,4443],{"class":542,"line":4094},[540,4440,1009],{"class":545},[540,4442,3618],{"class":549},[540,4444,572],{"class":545},[540,4446,4447,4449,4451],{"class":542,"line":4104},[540,4448,665],{"class":545},[540,4450,682],{"class":549},[540,4452,572],{"class":545},[521,4454,4456],{"id":4455},"pbr-textures-example","PBR Textures Example",[512,4458,4459],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[528,4461,4464],{"className":530,"code":4462,"filename":4463,"language":535,"meta":484,"style":484},"\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",[537,4465,4466,4486,4509,4540,4560,4564,4569,4611,4646,4677,4681,4686,4696,4707,4718,4729,4740,4749,4753,4757,4762,4786,4790,4795,4826,4865,4870,4889,4894,4900,4920,4940,4960,4980,5001,5006,5012,5027,5042,5057,5063,5070,5075,5081,5102,5108,5115,5120,5141,5154,5180,5185,5192,5201,5206,5215,5235,5245,5282,5291,5325,5334,5344,5365,5427,5486,5507,5539,5548,5557],{"__ignoreMap":484},[540,4467,4468,4470,4472,4474,4476,4478,4480,4482,4484],{"class":542,"line":485},[540,4469,546],{"class":545},[540,4471,550],{"class":549},[540,4473,554],{"class":553},[540,4475,557],{"class":553},[540,4477,560],{"class":545},[540,4479,563],{"class":545},[540,4481,567],{"class":566},[540,4483,563],{"class":545},[540,4485,572],{"class":545},[540,4487,4488,4490,4492,4494,4496,4499,4501,4503,4505,4507],{"class":542,"line":486},[540,4489,580],{"class":579},[540,4491,583],{"class":545},[540,4493,791],{"class":586},[540,4495,639],{"class":545},[540,4497,4498],{"class":586}," vLightHelper",[540,4500,590],{"class":545},[540,4502,593],{"class":579},[540,4504,596],{"class":545},[540,4506,800],{"class":566},[540,4508,602],{"class":545},[540,4510,4511,4513,4515,4518,4520,4522,4524,4526,4528,4530,4532,4534,4536,4538],{"class":542,"line":605},[540,4512,580],{"class":579},[540,4514,583],{"class":545},[540,4516,4517],{"class":586}," Environment",[540,4519,639],{"class":545},[540,4521,772],{"class":586},[540,4523,639],{"class":545},[540,4525,587],{"class":586},[540,4527,639],{"class":545},[540,4529,4218],{"class":586},[540,4531,590],{"class":545},[540,4533,593],{"class":579},[540,4535,596],{"class":545},[540,4537,599],{"class":566},[540,4539,602],{"class":545},[540,4541,4542,4544,4546,4549,4551,4553,4555,4558],{"class":542,"line":611},[540,4543,580],{"class":579},[540,4545,583],{"class":545},[540,4547,4548],{"class":586}," MeshStandardMaterial",[540,4550,590],{"class":545},[540,4552,593],{"class":579},[540,4554,596],{"class":545},[540,4556,4557],{"class":566},"three",[540,4559,602],{"class":545},[540,4561,4562],{"class":542,"line":534},[540,4563,608],{"emptyLinePlaceholder":492},[540,4565,4566],{"class":542,"line":662},[540,4567,4568],{"class":1361},"// Load the 3D model\n",[540,4570,4571,4573,4575,4577,4579,4582,4584,4586,4588,4590,4592,4595,4597,4599,4601,4603,4605,4607,4609],{"class":542,"line":672},[540,4572,614],{"class":553},[540,4574,583],{"class":545},[540,4576,636],{"class":549},[540,4578,1111],{"class":545},[540,4580,4581],{"class":586}," model ",[540,4583,650],{"class":545},[540,4585,653],{"class":545},[540,4587,587],{"class":656},[540,4589,1093],{"class":586},[540,4591,1096],{"class":545},[540,4593,4594],{"class":566},"/blender-cube-draco.glb",[540,4596,1096],{"class":545},[540,4598,639],{"class":545},[540,4600,583],{"class":545},[540,4602,1108],{"class":549},[540,4604,1111],{"class":545},[540,4606,1115],{"class":1114},[540,4608,590],{"class":545},[540,4610,1120],{"class":586},[540,4612,4613,4615,4618,4620,4623,4625,4628,4630,4633,4635,4637,4639,4641,4643],{"class":542,"line":677},[540,4614,614],{"class":553},[540,4616,4617],{"class":586}," cube ",[540,4619,560],{"class":545},[540,4621,4622],{"class":656}," computed",[540,4624,1093],{"class":586},[540,4626,4627],{"class":545},"()",[540,4629,1949],{"class":553},[540,4631,4632],{"class":586}," model",[540,4634,1376],{"class":545},[540,4636,1379],{"class":586},[540,4638,720],{"class":545},[540,4640,1169],{"class":586},[540,4642,720],{"class":545},[540,4644,4645],{"class":586},"BlenderCube)\n",[540,4647,4648,4650,4652,4654,4656,4658,4660,4662,4664,4666,4668,4670,4672,4674],{"class":542,"line":687},[540,4649,614],{"class":553},[540,4651,1400],{"class":586},[540,4653,560],{"class":545},[540,4655,4622],{"class":656},[540,4657,1093],{"class":586},[540,4659,4627],{"class":545},[540,4661,1949],{"class":553},[540,4663,4632],{"class":586},[540,4665,1376],{"class":545},[540,4667,1379],{"class":586},[540,4669,720],{"class":545},[540,4671,1183],{"class":586},[540,4673,720],{"class":545},[540,4675,4676],{"class":586},"Material)\n",[540,4678,4679],{"class":542,"line":731},[540,4680,608],{"emptyLinePlaceholder":492},[540,4682,4683],{"class":542,"line":914},[540,4684,4685],{"class":1361},"// Define texture paths\n",[540,4687,4688,4690,4692,4694],{"class":542,"line":924},[540,4689,614],{"class":553},[540,4691,4244],{"class":586},[540,4693,560],{"class":545},[540,4695,4249],{"class":586},[540,4697,4698,4700,4703,4705],{"class":542,"line":932},[540,4699,4254],{"class":545},[540,4701,4702],{"class":566},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[540,4704,1096],{"class":545},[540,4706,4262],{"class":545},[540,4708,4709,4711,4714,4716],{"class":542,"line":950},[540,4710,4254],{"class":545},[540,4712,4713],{"class":566},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[540,4715,1096],{"class":545},[540,4717,4262],{"class":545},[540,4719,4720,4722,4725,4727],{"class":542,"line":977},[540,4721,4254],{"class":545},[540,4723,4724],{"class":566},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[540,4726,1096],{"class":545},[540,4728,4262],{"class":545},[540,4730,4731,4733,4736,4738],{"class":542,"line":983},[540,4732,4254],{"class":545},[540,4734,4735],{"class":566},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[540,4737,1096],{"class":545},[540,4739,4262],{"class":545},[540,4741,4742,4744,4747],{"class":542,"line":1006},[540,4743,4254],{"class":545},[540,4745,4746],{"class":566},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[540,4748,602],{"class":545},[540,4750,4751],{"class":542,"line":1016},[540,4752,4287],{"class":586},[540,4754,4755],{"class":542,"line":3797},[540,4756,608],{"emptyLinePlaceholder":492},[540,4758,4759],{"class":542,"line":3798},[540,4760,4761],{"class":1361},"// Load all PBR textures at once\n",[540,4763,4764,4766,4768,4770,4772,4774,4776,4778,4780,4782,4784],{"class":542,"line":3799},[540,4765,614],{"class":553},[540,4767,583],{"class":545},[540,4769,4306],{"class":586},[540,4771,639],{"class":545},[540,4773,3578],{"class":586},[540,4775,639],{"class":545},[540,4777,3583],{"class":586},[540,4779,650],{"class":545},[540,4781,653],{"class":545},[540,4783,4218],{"class":656},[540,4785,4323],{"class":586},[540,4787,4788],{"class":542,"line":4085},[540,4789,608],{"emptyLinePlaceholder":492},[540,4791,4792],{"class":542,"line":4094},[540,4793,4794],{"class":1361},"// Apply textures to material when loaded\n",[540,4796,4797,4799,4802,4804,4807,4809,4812,4815,4817,4819,4822,4824],{"class":542,"line":4104},[540,4798,1932],{"class":656},[540,4800,4801],{"class":586},"([material",[540,4803,639],{"class":545},[540,4805,4806],{"class":586}," textures]",[540,4808,639],{"class":545},[540,4810,4811],{"class":545}," ([",[540,4813,4814],{"class":1943},"modelMaterial",[540,4816,639],{"class":545},[540,4818,4306],{"class":1943},[540,4820,4821],{"class":545},"])",[540,4823,1949],{"class":553},[540,4825,1952],{"class":545},[540,4827,4828,4831,4833,4835,4838,4840,4842,4844,4846,4849,4852,4855,4857,4859,4862],{"class":542,"line":4125},[540,4829,4830],{"class":579},"  if",[540,4832,1940],{"class":549},[540,4834,4814],{"class":586},[540,4836,4837],{"class":545}," &&",[540,4839,4306],{"class":586},[540,4841,4837],{"class":545},[540,4843,4306],{"class":586},[540,4845,1376],{"class":545},[540,4847,4848],{"class":586},"length",[540,4850,4851],{"class":545}," ===",[540,4853,4854],{"class":586}," texturePaths",[540,4856,1376],{"class":545},[540,4858,4848],{"class":586},[540,4860,4861],{"class":549},") ",[540,4863,4864],{"class":545},"{\n",[540,4866,4867],{"class":542,"line":3800},[540,4868,4869],{"class":1361},"    // Cast to MeshStandardMaterial to access PBR properties\n",[540,4871,4872,4875,4878,4880,4883,4886],{"class":542,"line":4144},[540,4873,4874],{"class":553},"    const",[540,4876,4877],{"class":586}," pbrMaterial",[540,4879,653],{"class":545},[540,4881,4882],{"class":586}," modelMaterial",[540,4884,4885],{"class":579}," as",[540,4887,4888],{"class":1916}," MeshStandardMaterial\n",[540,4890,4892],{"class":542,"line":4891},28,[540,4893,608],{"emptyLinePlaceholder":492},[540,4895,4897],{"class":542,"line":4896},29,[540,4898,4899],{"class":1361},"    // Apply textures\n",[540,4901,4903,4906,4908,4910,4912,4914,4916,4918],{"class":542,"line":4902},30,[540,4904,4905],{"class":586},"    pbrMaterial",[540,4907,1376],{"class":545},[540,4909,3642],{"class":586},[540,4911,653],{"class":545},[540,4913,4306],{"class":586},[540,4915,880],{"class":549},[540,4917,1976],{"class":883},[540,4919,4287],{"class":549},[540,4921,4923,4925,4927,4930,4932,4934,4936,4938],{"class":542,"line":4922},31,[540,4924,4905],{"class":586},[540,4926,1376],{"class":545},[540,4928,4929],{"class":586},"normalMap",[540,4931,653],{"class":545},[540,4933,4306],{"class":586},[540,4935,880],{"class":549},[540,4937,999],{"class":883},[540,4939,4287],{"class":549},[540,4941,4943,4945,4947,4950,4952,4954,4956,4958],{"class":542,"line":4942},32,[540,4944,4905],{"class":586},[540,4946,1376],{"class":545},[540,4948,4949],{"class":586},"roughnessMap",[540,4951,653],{"class":545},[540,4953,4306],{"class":586},[540,4955,880],{"class":549},[540,4957,890],{"class":883},[540,4959,4287],{"class":549},[540,4961,4963,4965,4967,4970,4972,4974,4976,4978],{"class":542,"line":4962},33,[540,4964,4905],{"class":586},[540,4966,1376],{"class":545},[540,4968,4969],{"class":586},"metalnessMap",[540,4971,653],{"class":545},[540,4973,4306],{"class":586},[540,4975,880],{"class":549},[540,4977,884],{"class":883},[540,4979,4287],{"class":549},[540,4981,4983,4985,4987,4990,4992,4994,4996,4999],{"class":542,"line":4982},34,[540,4984,4905],{"class":586},[540,4986,1376],{"class":545},[540,4988,4989],{"class":586},"displacementMap",[540,4991,653],{"class":545},[540,4993,4306],{"class":586},[540,4995,880],{"class":549},[540,4997,4998],{"class":883},"4",[540,5000,4287],{"class":549},[540,5002,5004],{"class":542,"line":5003},35,[540,5005,608],{"emptyLinePlaceholder":492},[540,5007,5009],{"class":542,"line":5008},36,[540,5010,5011],{"class":1361},"    // Set material properties\n",[540,5013,5015,5017,5019,5022,5024],{"class":542,"line":5014},37,[540,5016,4905],{"class":586},[540,5018,1376],{"class":545},[540,5020,5021],{"class":586},"displacementScale",[540,5023,653],{"class":545},[540,5025,5026],{"class":883}," 0\n",[540,5028,5030,5032,5034,5037,5039],{"class":542,"line":5029},38,[540,5031,4905],{"class":586},[540,5033,1376],{"class":545},[540,5035,5036],{"class":586},"metalness",[540,5038,653],{"class":545},[540,5040,5041],{"class":883}," 0.8\n",[540,5043,5045,5047,5049,5052,5054],{"class":542,"line":5044},39,[540,5046,4905],{"class":586},[540,5048,1376],{"class":545},[540,5050,5051],{"class":586},"roughness",[540,5053,653],{"class":545},[540,5055,5056],{"class":883}," 0.2\n",[540,5058,5060],{"class":542,"line":5059},40,[540,5061,5062],{"class":545},"  }\n",[540,5064,5066,5068],{"class":542,"line":5065},41,[540,5067,650],{"class":545},[540,5069,1120],{"class":586},[540,5071,5073],{"class":542,"line":5072},42,[540,5074,608],{"emptyLinePlaceholder":492},[540,5076,5078],{"class":542,"line":5077},43,[540,5079,5080],{"class":1361},"// Handle loading state and errors\n",[540,5082,5084,5086,5089,5091,5093,5096,5098,5100],{"class":542,"line":5083},44,[540,5085,1932],{"class":656},[540,5087,5088],{"class":586},"(isLoading",[540,5090,639],{"class":545},[540,5092,1940],{"class":545},[540,5094,5095],{"class":1943},"_loading",[540,5097,1946],{"class":545},[540,5099,1949],{"class":553},[540,5101,1952],{"class":545},[540,5103,5105],{"class":542,"line":5104},45,[540,5106,5107],{"class":1361},"  // Handle loading state\n",[540,5109,5111,5113],{"class":542,"line":5110},46,[540,5112,650],{"class":545},[540,5114,1120],{"class":586},[540,5116,5118],{"class":542,"line":5117},47,[540,5119,608],{"emptyLinePlaceholder":492},[540,5121,5123,5125,5128,5130,5132,5135,5137,5139],{"class":542,"line":5122},48,[540,5124,1932],{"class":656},[540,5126,5127],{"class":586},"(error",[540,5129,639],{"class":545},[540,5131,1940],{"class":545},[540,5133,5134],{"class":1943},"errs",[540,5136,1946],{"class":545},[540,5138,1949],{"class":553},[540,5140,1952],{"class":545},[540,5142,5144,5146,5148,5150,5152],{"class":542,"line":5143},49,[540,5145,4830],{"class":579},[540,5147,1940],{"class":549},[540,5149,5134],{"class":586},[540,5151,4861],{"class":549},[540,5153,4864],{"class":545},[540,5155,5157,5160,5162,5164,5166,5168,5171,5173,5175,5178],{"class":542,"line":5156},50,[540,5158,5159],{"class":586},"    console",[540,5161,1376],{"class":545},[540,5163,3773],{"class":656},[540,5165,1093],{"class":549},[540,5167,1096],{"class":545},[540,5169,5170],{"class":566},"Error loading textures:",[540,5172,1096],{"class":545},[540,5174,639],{"class":545},[540,5176,5177],{"class":586}," errs",[540,5179,1120],{"class":549},[540,5181,5183],{"class":542,"line":5182},51,[540,5184,5062],{"class":545},[540,5186,5188,5190],{"class":542,"line":5187},52,[540,5189,650],{"class":545},[540,5191,1120],{"class":586},[540,5193,5195,5197,5199],{"class":542,"line":5194},53,[540,5196,665],{"class":545},[540,5198,550],{"class":549},[540,5200,572],{"class":545},[540,5202,5204],{"class":542,"line":5203},54,[540,5205,608],{"emptyLinePlaceholder":492},[540,5207,5209,5211,5213],{"class":542,"line":5208},55,[540,5210,546],{"class":545},[540,5212,682],{"class":549},[540,5214,572],{"class":545},[540,5216,5218,5220,5222,5224,5226,5228,5231,5233],{"class":542,"line":5217},56,[540,5219,690],{"class":545},[540,5221,846],{"class":549},[540,5223,849],{"class":553},[540,5225,560],{"class":545},[540,5227,563],{"class":545},[540,5229,5230],{"class":566},"#4f4f4f",[540,5232,563],{"class":545},[540,5234,572],{"class":545},[540,5236,5238,5240,5243],{"class":542,"line":5237},57,[540,5239,865],{"class":545},[540,5241,5242],{"class":549},"Suspense",[540,5244,572],{"class":545},[540,5246,5248,5250,5252,5255,5257,5259,5262,5264,5267,5269,5272,5274,5276,5278,5280],{"class":542,"line":5247},58,[540,5249,4097],{"class":545},[540,5251,351],{"class":549},[540,5253,5254],{"class":553}," preset",[540,5256,560],{"class":545},[540,5258,563],{"class":545},[540,5260,5261],{"class":566},"studio",[540,5263,563],{"class":545},[540,5265,5266],{"class":553}," background",[540,5268,708],{"class":545},[540,5270,5271],{"class":553},"blur",[540,5273,560],{"class":545},[540,5275,563],{"class":545},[540,5277,999],{"class":883},[540,5279,563],{"class":545},[540,5281,728],{"class":545},[540,5283,5285,5287,5289],{"class":542,"line":5284},59,[540,5286,4128],{"class":545},[540,5288,5242],{"class":549},[540,5290,572],{"class":545},[540,5292,5294,5296,5298,5300,5302,5304,5306,5308,5311,5313,5315,5317,5319,5321,5323],{"class":542,"line":5293},60,[540,5295,865],{"class":545},[540,5297,868],{"class":549},[540,5299,708],{"class":545},[540,5301,873],{"class":553},[540,5303,560],{"class":545},[540,5305,563],{"class":545},[540,5307,880],{"class":545},[540,5309,5310],{"class":883},"8",[540,5312,887],{"class":545},[540,5314,5310],{"class":883},[540,5316,887],{"class":545},[540,5318,5310],{"class":883},[540,5320,898],{"class":545},[540,5322,563],{"class":545},[540,5324,728],{"class":545},[540,5326,5328,5330,5332],{"class":542,"line":5327},61,[540,5329,865],{"class":545},[540,5331,909],{"class":549},[540,5333,728],{"class":545},[540,5335,5337,5339,5342],{"class":542,"line":5336},62,[540,5338,865],{"class":545},[540,5340,5341],{"class":549},"TresGridHelper",[540,5343,728],{"class":545},[540,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363],{"class":542,"line":5346},63,[540,5348,865],{"class":545},[540,5350,988],{"class":549},[540,5352,708],{"class":545},[540,5354,938],{"class":553},[540,5356,560],{"class":545},[540,5358,563],{"class":545},[540,5360,890],{"class":883},[540,5362,563],{"class":545},[540,5364,728],{"class":545},[540,5366,5368,5370,5373,5376,5378,5380,5382,5384,5386,5388,5390,5392,5394,5396,5398,5400,5402,5404,5406,5408,5411,5413,5416,5418,5420,5423,5425],{"class":542,"line":5367},64,[540,5369,865],{"class":545},[540,5371,5372],{"class":549},"TresDirectionalLight",[540,5374,5375],{"class":553}," v-light-helper",[540,5377,708],{"class":545},[540,5379,873],{"class":553},[540,5381,560],{"class":545},[540,5383,563],{"class":545},[540,5385,880],{"class":545},[540,5387,895],{"class":883},[540,5389,887],{"class":545},[540,5391,895],{"class":883},[540,5393,887],{"class":545},[540,5395,895],{"class":883},[540,5397,898],{"class":545},[540,5399,563],{"class":545},[540,5401,708],{"class":545},[540,5403,938],{"class":553},[540,5405,560],{"class":545},[540,5407,563],{"class":545},[540,5409,5410],{"class":883},"0.5",[540,5412,563],{"class":545},[540,5414,5415],{"class":553}," color",[540,5417,560],{"class":545},[540,5419,563],{"class":545},[540,5421,5422],{"class":566},"#ff0000",[540,5424,563],{"class":545},[540,5426,728],{"class":545},[540,5428,5430,5432,5434,5436,5438,5440,5442,5444,5447,5449,5451,5453,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473,5475,5477,5479,5482,5484],{"class":542,"line":5429},65,[540,5431,865],{"class":545},[540,5433,5372],{"class":549},[540,5435,5375],{"class":553},[540,5437,708],{"class":545},[540,5439,873],{"class":553},[540,5441,560],{"class":545},[540,5443,563],{"class":545},[540,5445,5446],{"class":545},"[-",[540,5448,895],{"class":883},[540,5450,887],{"class":545},[540,5452,890],{"class":883},[540,5454,887],{"class":545},[540,5456,890],{"class":883},[540,5458,898],{"class":545},[540,5460,563],{"class":545},[540,5462,708],{"class":545},[540,5464,938],{"class":553},[540,5466,560],{"class":545},[540,5468,563],{"class":545},[540,5470,5410],{"class":883},[540,5472,563],{"class":545},[540,5474,5415],{"class":553},[540,5476,560],{"class":545},[540,5478,563],{"class":545},[540,5480,5481],{"class":566},"#0000ff",[540,5483,563],{"class":545},[540,5485,728],{"class":545},[540,5487,5489,5491,5494,5497,5499,5501,5503,5505],{"class":542,"line":5488},66,[540,5490,865],{"class":545},[540,5492,5493],{"class":549},"TresGroup",[540,5495,5496],{"class":553}," position-y",[540,5498,560],{"class":545},[540,5500,563],{"class":545},[540,5502,890],{"class":566},[540,5504,563],{"class":545},[540,5506,572],{"class":545},[540,5508,5510,5512,5514,5516,5518,5520,5523,5525,5527,5529,5531,5533,5535,5537],{"class":542,"line":5509},67,[540,5511,4097],{"class":545},[540,5513,693],{"class":549},[540,5515,696],{"class":579},[540,5517,560],{"class":545},[540,5519,563],{"class":545},[540,5521,5522],{"class":586},"cube",[540,5524,563],{"class":545},[540,5526,708],{"class":545},[540,5528,711],{"class":553},[540,5530,560],{"class":545},[540,5532,563],{"class":545},[540,5534,5522],{"class":586},[540,5536,563],{"class":545},[540,5538,728],{"class":545},[540,5540,5542,5544,5546],{"class":542,"line":5541},68,[540,5543,4128],{"class":545},[540,5545,5493],{"class":549},[540,5547,572],{"class":545},[540,5549,5551,5553,5555],{"class":542,"line":5550},69,[540,5552,1009],{"class":545},[540,5554,846],{"class":549},[540,5556,572],{"class":545},[540,5558,5560,5562,5564],{"class":542,"line":5559},70,[540,5561,665],{"class":545},[540,5563,682],{"class":549},[540,5565,572],{"class":545},[521,5567,5569],{"id":5568},"api","API",[5571,5572,5574],"h3",{"id":5573},"parameters","Parameters",[1126,5576,5577,5589],{},[1129,5578,5579],{},[1132,5580,5581,5583,5585,5587],{},[1135,5582,1138],{"align":1137},[1135,5584,1141],{},[1135,5586,1252],{},[1135,5588,1144],{},[1146,5590,5591],{},[1132,5592,5593,5598,5603,5607],{},[1151,5594,5595],{"align":1137},[516,5596,5597],{},"paths",[1151,5599,5600],{},[537,5601,5602],{},"string[]",[1151,5604,5605],{},[537,5606,2094],{},[1151,5608,5609],{},"Array of paths to the textures.",[5571,5611,5613],{"id":5612},"returns","Returns",[1126,5615,5616,5626],{},[1129,5617,5618],{},[1132,5619,5620,5622,5624],{},[1135,5621,1138],{"align":1137},[1135,5623,1141],{},[1135,5625,1144],{},[1146,5627,5628,5642,5655],{},[1132,5629,5630,5634,5639],{},[1151,5631,5632],{"align":1137},[516,5633,4380],{},[1151,5635,5636],{},[537,5637,5638],{},"Texture[]",[1151,5640,5641],{},"Array of loaded textures.",[1132,5643,5644,5648,5652],{},[1151,5645,5646],{"align":1137},[516,5647,1197],{},[1151,5649,5650],{},[537,5651,1202],{},[1151,5653,5654],{},"Whether any textures are still loading.",[1132,5656,5657,5661,5666],{},[1151,5658,5659],{"align":1137},[516,5660,3773],{},[1151,5662,5663],{},[537,5664,5665],{},"Error[] | null",[1151,5667,5668],{},"Array of errors if any occurred during loading.",[521,5670,5672],{"id":5671},"benefits","Benefits",[5674,5675,5676,5683,5689,5695],"ul",{},[5677,5678,5679,5682],"li",{},[516,5680,5681],{},"Simplified API",": Load multiple textures with a single function call",[5677,5684,5685,5688],{},[516,5686,5687],{},"Consolidated loading state",": Track loading state for all textures at once",[5677,5690,5691,5694],{},[516,5692,5693],{},"Unified error handling",": Collect and report errors from all texture loads",[5677,5696,5697,5700],{},[516,5698,5699],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1419,5702,5703],{},"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 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 .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}",{"title":484,"searchDepth":485,"depth":486,"links":5705},[5706,5707,5708,5712],{"id":523,"depth":486,"text":15},{"id":4455,"depth":486,"text":4456},{"id":5568,"depth":486,"text":5569,"children":5709},[5710,5711],{"id":5573,"depth":605,"text":5574},{"id":5612,"depth":605,"text":5613},{"id":5671,"depth":486,"text":5672},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":141,"description":5713},"9FTfBPclSGZMDwzt-akBsJF1ppNDXZK3MP6nddxg3dg",{"id":5718,"title":145,"body":5719,"description":8751,"extension":489,"links":490,"meta":8752,"navigation":492,"path":146,"seo":8753,"stem":147,"__hash__":8754},"docs/2.api/3.loaders/7.use-svg.md",{"type":477,"value":5720,"toc":8726},[5721,5726,5739,5743,5748,5750,6285,6290,6304,6308,6311,6423,6425,6495,6497,6607,6611,6616,6674,6679,7020,7024,7029,7035,7040,7046,7064,7070,7085,7132,7135,7140,7151,7156,7159,7204,7208,7213,7216,7221,7230,7275,7279,7284,7296,7301,7343,7347,7350,7478,7482,7486,7812,7816,8138,8142,8149,8364,8366,8534,8538,8545,8548,8552,8562,8566,8590,8598,8611,8615,8642,8646,8667,8677,8685,8702,8709,8723],[506,5722,5723],{},[5724,5725],"loaders-use-svg",{},[512,5727,5728,5729,5731,5732,5734,5735,5738],{},"Load and display SVG elements in your ",[516,5730,518],{}," scene. This guide covers both the ",[537,5733,145],{}," composable for advanced use cases and the ",[537,5736,5737],{},"SVG"," component for simple declarative rendering.",[521,5740,5742],{"id":5741},"usesvg-composable","useSVG Composable",[512,5744,1441,5745,5747],{},[537,5746,145],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[5571,5749,15],{"id":523},[525,5751,5752,6090],{},[528,5753,5756],{"className":530,"code":5754,"filename":532,"highlights":5755,"language":535,"meta":484,"style":484},"\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",[486,534,662,672,677],[537,5757,5758,5778,5798,5802,5818,5854,5867,5897,5904,5912,5916,5924,5945,5952,5979,6002,6021,6036,6041,6066,6074,6082],{"__ignoreMap":484},[540,5759,5760,5762,5764,5766,5768,5770,5772,5774,5776],{"class":542,"line":485},[540,5761,546],{"class":545},[540,5763,550],{"class":549},[540,5765,554],{"class":553},[540,5767,557],{"class":553},[540,5769,560],{"class":545},[540,5771,563],{"class":545},[540,5773,567],{"class":566},[540,5775,563],{"class":545},[540,5777,572],{"class":545},[540,5779,5781,5783,5785,5788,5790,5792,5794,5796],{"class":5780,"line":486},[542,576],[540,5782,580],{"class":579},[540,5784,583],{"class":545},[540,5786,5787],{"class":586}," useSVG",[540,5789,590],{"class":545},[540,5791,593],{"class":579},[540,5793,596],{"class":545},[540,5795,599],{"class":566},[540,5797,602],{"class":545},[540,5799,5800],{"class":542,"line":605},[540,5801,608],{"emptyLinePlaceholder":492},[540,5803,5804,5806,5809,5811,5813,5816],{"class":542,"line":611},[540,5805,614],{"class":553},[540,5807,5808],{"class":586}," svgPath ",[540,5810,560],{"class":545},[540,5812,596],{"class":545},[540,5814,5815],{"class":566},"./logo.svg",[540,5817,602],{"class":545},[540,5819,5821,5823,5825,5827,5829,5832,5834,5836,5838,5841,5843,5845,5847,5850,5852],{"class":5820,"line":534},[542,576],[540,5822,614],{"class":553},[540,5824,583],{"class":545},[540,5826,636],{"class":586},[540,5828,639],{"class":545},[540,5830,5831],{"class":586}," layers",[540,5833,639],{"class":545},[540,5835,3578],{"class":586},[540,5837,639],{"class":545},[540,5839,5840],{"class":586}," dispose ",[540,5842,650],{"class":545},[540,5844,653],{"class":545},[540,5846,5787],{"class":656},[540,5848,5849],{"class":586},"(svgPath",[540,5851,639],{"class":545},[540,5853,1952],{"class":545},[540,5855,5857,5860,5862,5865],{"class":5856,"line":662},[542,576],[540,5858,5859],{"class":549},"  skipFills",[540,5861,1111],{"class":545},[540,5863,5864],{"class":1114}," false",[540,5866,4262],{"class":545},[540,5868,5870,5873,5875,5877,5880,5882,5884,5886,5889,5891,5894],{"class":5869,"line":672},[542,576],[540,5871,5872],{"class":549},"  fillMaterial",[540,5874,1111],{"class":545},[540,5876,583],{"class":545},[540,5878,5879],{"class":549}," transparent",[540,5881,1111],{"class":545},[540,5883,1115],{"class":1114},[540,5885,639],{"class":545},[540,5887,5888],{"class":549}," opacity",[540,5890,1111],{"class":545},[540,5892,5893],{"class":883}," 0.8",[540,5895,5896],{"class":545}," }\n",[540,5898,5900,5902],{"class":5899,"line":677},[542,576],[540,5901,650],{"class":545},[540,5903,1120],{"class":586},[540,5905,5906,5908,5910],{"class":542,"line":687},[540,5907,665],{"class":545},[540,5909,550],{"class":549},[540,5911,572],{"class":545},[540,5913,5914],{"class":542,"line":731},[540,5915,608],{"emptyLinePlaceholder":492},[540,5917,5918,5920,5922],{"class":542,"line":914},[540,5919,546],{"class":545},[540,5921,682],{"class":549},[540,5923,572],{"class":545},[540,5925,5926,5928,5930,5932,5934,5936,5939,5941,5943],{"class":542,"line":924},[540,5927,690],{"class":545},[540,5929,5493],{"class":549},[540,5931,696],{"class":579},[540,5933,560],{"class":545},[540,5935,563],{"class":545},[540,5937,5938],{"class":545},"!",[540,5940,1197],{"class":586},[540,5942,563],{"class":545},[540,5944,572],{"class":545},[540,5946,5947,5949],{"class":542,"line":932},[540,5948,865],{"class":545},[540,5950,5951],{"class":549},"TresMesh\n",[540,5953,5954,5957,5959,5961,5963,5966,5968,5971,5974,5977],{"class":542,"line":950},[540,5955,5956],{"class":579},"      v-for",[540,5958,560],{"class":545},[540,5960,563],{"class":545},[540,5962,1093],{"class":545},[540,5964,5965],{"class":586},"layer",[540,5967,887],{"class":545},[540,5969,5970],{"class":586},"index",[540,5972,5973],{"class":545},") in ",[540,5975,5976],{"class":586},"layers",[540,5978,947],{"class":545},[540,5980,5981,5983,5986,5988,5991,5994,5997,5999],{"class":542,"line":977},[540,5982,935],{"class":545},[540,5984,5985],{"class":553},"key",[540,5987,560],{"class":545},[540,5989,5990],{"class":545},"\"`",[540,5992,5993],{"class":566},"layer-",[540,5995,5996],{"class":545},"${",[540,5998,5970],{"class":586},[540,6000,6001],{"class":545},"}`\"\n",[540,6003,6004,6006,6009,6011,6013,6015,6017,6019],{"class":542,"line":983},[540,6005,935],{"class":545},[540,6007,6008],{"class":553},"geometry",[540,6010,560],{"class":545},[540,6012,563],{"class":545},[540,6014,5965],{"class":586},[540,6016,1376],{"class":545},[540,6018,6008],{"class":586},[540,6020,947],{"class":545},[540,6022,6023,6025,6028,6030,6032,6034],{"class":542,"line":1006},[540,6024,935],{"class":545},[540,6026,6027],{"class":553},"render-order",[540,6029,560],{"class":545},[540,6031,563],{"class":545},[540,6033,5970],{"class":586},[540,6035,947],{"class":545},[540,6037,6038],{"class":542,"line":1016},[540,6039,6040],{"class":545},"    >\n",[540,6042,6043,6045,6048,6051,6053,6055,6057,6059,6062,6064],{"class":542,"line":3797},[540,6044,4097],{"class":545},[540,6046,6047],{"class":549},"TresMeshBasicMaterial",[540,6049,6050],{"class":553}," v-bind",[540,6052,560],{"class":545},[540,6054,563],{"class":545},[540,6056,5965],{"class":586},[540,6058,1376],{"class":545},[540,6060,6061],{"class":586},"material",[540,6063,563],{"class":545},[540,6065,728],{"class":545},[540,6067,6068,6070,6072],{"class":542,"line":3798},[540,6069,4128],{"class":545},[540,6071,3618],{"class":549},[540,6073,572],{"class":545},[540,6075,6076,6078,6080],{"class":542,"line":3799},[540,6077,1009],{"class":545},[540,6079,5493],{"class":549},[540,6081,572],{"class":545},[540,6083,6084,6086,6088],{"class":542,"line":4085},[540,6085,665],{"class":545},[540,6087,682],{"class":549},[540,6089,572],{"class":545},[528,6091,6093],{"className":530,"code":6092,"filename":741,"language":535,"meta":484,"style":484},"\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",[537,6094,6095,6115,6133,6151,6165,6173,6177,6185,6204,6237,6245,6253,6261,6269,6277],{"__ignoreMap":484},[540,6096,6097,6099,6101,6103,6105,6107,6109,6111,6113],{"class":542,"line":485},[540,6098,546],{"class":545},[540,6100,550],{"class":549},[540,6102,554],{"class":553},[540,6104,557],{"class":553},[540,6106,560],{"class":545},[540,6108,563],{"class":545},[540,6110,567],{"class":566},[540,6112,563],{"class":545},[540,6114,572],{"class":545},[540,6116,6117,6119,6121,6123,6125,6127,6129,6131],{"class":542,"line":486},[540,6118,580],{"class":579},[540,6120,583],{"class":545},[540,6122,772],{"class":586},[540,6124,590],{"class":545},[540,6126,593],{"class":579},[540,6128,596],{"class":545},[540,6130,599],{"class":566},[540,6132,602],{"class":545},[540,6134,6135,6137,6139,6141,6143,6145,6147,6149],{"class":542,"line":605},[540,6136,580],{"class":579},[540,6138,583],{"class":545},[540,6140,791],{"class":586},[540,6142,590],{"class":545},[540,6144,593],{"class":579},[540,6146,596],{"class":545},[540,6148,800],{"class":566},[540,6150,602],{"class":545},[540,6152,6153,6155,6157,6159,6161,6163],{"class":542,"line":611},[540,6154,580],{"class":579},[540,6156,809],{"class":586},[540,6158,812],{"class":579},[540,6160,596],{"class":545},[540,6162,817],{"class":566},[540,6164,602],{"class":545},[540,6166,6167,6169,6171],{"class":542,"line":534},[540,6168,665],{"class":545},[540,6170,550],{"class":549},[540,6172,572],{"class":545},[540,6174,6175],{"class":542,"line":662},[540,6176,608],{"emptyLinePlaceholder":492},[540,6178,6179,6181,6183],{"class":542,"line":672},[540,6180,546],{"class":545},[540,6182,682],{"class":549},[540,6184,572],{"class":545},[540,6186,6187,6189,6191,6193,6195,6197,6200,6202],{"class":542,"line":677},[540,6188,690],{"class":545},[540,6190,846],{"class":549},[540,6192,849],{"class":553},[540,6194,560],{"class":545},[540,6196,563],{"class":545},[540,6198,6199],{"class":566},"#333",[540,6201,563],{"class":545},[540,6203,572],{"class":545},[540,6205,6206,6208,6210,6212,6214,6216,6218,6220,6222,6224,6226,6228,6231,6233,6235],{"class":542,"line":687},[540,6207,865],{"class":545},[540,6209,868],{"class":549},[540,6211,708],{"class":545},[540,6213,873],{"class":553},[540,6215,560],{"class":545},[540,6217,563],{"class":545},[540,6219,880],{"class":545},[540,6221,1976],{"class":883},[540,6223,887],{"class":545},[540,6225,890],{"class":883},[540,6227,887],{"class":545},[540,6229,6230],{"class":883},"10",[540,6232,898],{"class":545},[540,6234,563],{"class":545},[540,6236,728],{"class":545},[540,6238,6239,6241,6243],{"class":542,"line":731},[540,6240,865],{"class":545},[540,6242,909],{"class":549},[540,6244,728],{"class":545},[540,6246,6247,6249,6251],{"class":542,"line":914},[540,6248,865],{"class":545},[540,6250,919],{"class":549},[540,6252,728],{"class":545},[540,6254,6255,6257,6259],{"class":542,"line":924},[540,6256,865],{"class":545},[540,6258,988],{"class":549},[540,6260,728],{"class":545},[540,6262,6263,6265,6267],{"class":542,"line":932},[540,6264,865],{"class":545},[540,6266,5372],{"class":549},[540,6268,728],{"class":545},[540,6270,6271,6273,6275],{"class":542,"line":950},[540,6272,1009],{"class":545},[540,6274,846],{"class":549},[540,6276,572],{"class":545},[540,6278,6279,6281,6283],{"class":542,"line":977},[540,6280,665],{"class":545},[540,6282,682],{"class":549},[540,6284,572],{"class":545},[512,6286,1441,6287,6289],{},[537,6288,145],{}," 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:",[5674,6291,6292,6295,6298,6301],{},[5677,6293,6294],{},"Manually control layer rendering",[5677,6296,6297],{},"Apply custom animations to individual layers",[5677,6299,6300],{},"Access geometry data programmatically",[5677,6302,6303],{},"Implement complex material logic",[5571,6305,6307],{"id":6306},"svg-data-sources","SVG Data Sources",[512,6309,6310],{},"The composable accepts both file paths and inline SVG strings:",[528,6312,6314],{"className":1043,"code":6313,"language":567,"meta":484,"style":484},"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",[537,6315,6316,6334,6338,6343,6369,6373,6378,6393,6398,6406],{"__ignoreMap":484},[540,6317,6318,6320,6322,6324,6326,6328,6330,6332],{"class":542,"line":485},[540,6319,580],{"class":579},[540,6321,583],{"class":545},[540,6323,5787],{"class":586},[540,6325,590],{"class":545},[540,6327,593],{"class":579},[540,6329,596],{"class":545},[540,6331,599],{"class":566},[540,6333,602],{"class":545},[540,6335,6336],{"class":542,"line":486},[540,6337,608],{"emptyLinePlaceholder":492},[540,6339,6340],{"class":542,"line":605},[540,6341,6342],{"class":1361},"// From file\n",[540,6344,6345,6347,6349,6352,6354,6356,6358,6360,6362,6365,6367],{"class":542,"line":611},[540,6346,614],{"class":553},[540,6348,583],{"class":545},[540,6350,6351],{"class":586}," layers ",[540,6353,650],{"class":545},[540,6355,653],{"class":545},[540,6357,5787],{"class":656},[540,6359,1093],{"class":586},[540,6361,1096],{"class":545},[540,6363,6364],{"class":566},"/path/to/file.svg",[540,6366,1096],{"class":545},[540,6368,1120],{"class":586},[540,6370,6371],{"class":542,"line":534},[540,6372,608],{"emptyLinePlaceholder":492},[540,6374,6375],{"class":542,"line":662},[540,6376,6377],{"class":1361},"// Inline SVG string\n",[540,6379,6380,6382,6385,6387,6390],{"class":542,"line":672},[540,6381,614],{"class":553},[540,6383,6384],{"class":586}," svgString ",[540,6386,560],{"class":545},[540,6388,6389],{"class":545}," `",[540,6391,6392],{"class":566},"\u003Csvg viewBox=\"0 0 100 100\">\n",[540,6394,6395],{"class":542,"line":677},[540,6396,6397],{"class":566},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[540,6399,6400,6403],{"class":542,"line":687},[540,6401,6402],{"class":566},"\u003C/svg>",[540,6404,6405],{"class":545},"`\n",[540,6407,6408,6410,6412,6414,6416,6418,6420],{"class":542,"line":731},[540,6409,614],{"class":553},[540,6411,583],{"class":545},[540,6413,6351],{"class":586},[540,6415,650],{"class":545},[540,6417,653],{"class":545},[540,6419,5787],{"class":656},[540,6421,6422],{"class":586},"(svgString)\n",[5571,6424,1124],{"id":1123},[1126,6426,6427,6437],{},[1129,6428,6429],{},[1132,6430,6431,6433,6435],{},[1135,6432,1138],{"align":1137},[1135,6434,1141],{},[1135,6436,1144],{},[1146,6438,6439,6453,6467,6480],{},[1132,6440,6441,6445,6450],{},[1151,6442,6443],{"align":1137},[516,6444,703],{},[1151,6446,6447],{},[537,6448,6449],{},"SVGResult",[1151,6451,6452],{},"The loaded SVG state from SVGLoader",[1132,6454,6455,6459,6464],{},[1151,6456,6457],{"align":1137},[516,6458,5976],{},[1151,6460,6461],{},[537,6462,6463],{},"SVGLayer[]",[1151,6465,6466],{},"Computed array of processed geometries and materials",[1132,6468,6469,6473,6477],{},[1151,6470,6471],{"align":1137},[516,6472,1197],{},[1151,6474,6475],{},[537,6476,1202],{},[1151,6478,6479],{},"Whether the SVG is currently loading",[1132,6481,6482,6487,6492],{},[1151,6483,6484],{"align":1137},[516,6485,6486],{},"dispose",[1151,6488,6489],{},[537,6490,6491],{},"() => void",[1151,6493,6494],{},"Function to dispose of all geometries",[5571,6496,1239],{"id":1238},[1126,6498,6499,6511],{},[1129,6500,6501],{},[1132,6502,6503,6505,6507,6509],{},[1135,6504,1138],{"align":1137},[1135,6506,1141],{},[1135,6508,1252],{},[1135,6510,1144],{},[1146,6512,6513,6531,6549,6569,6587],{},[1132,6514,6515,6520,6524,6528],{},[1151,6516,6517],{"align":1137},[516,6518,6519],{},"skipStrokes",[1151,6521,6522],{},[537,6523,1202],{},[1151,6525,6526],{},[537,6527,1271],{},[1151,6529,6530],{},"Whether to skip rendering strokes",[1132,6532,6533,6538,6542,6546],{},[1151,6534,6535],{"align":1137},[516,6536,6537],{},"skipFills",[1151,6539,6540],{},[537,6541,1202],{},[1151,6543,6544],{},[537,6545,1271],{},[1151,6547,6548],{},"Whether to skip rendering fills",[1132,6550,6551,6556,6561,6566],{},[1151,6552,6553],{"align":1137},[516,6554,6555],{},"fillMaterial",[1151,6557,6558],{},[537,6559,6560],{},"MeshBasicMaterialParameters",[1151,6562,6563],{},[537,6564,6565],{},"{}",[1151,6567,6568],{},"Material properties for fill layers",[1132,6570,6571,6576,6580,6584],{},[1151,6572,6573],{"align":1137},[516,6574,6575],{},"strokeMaterial",[1151,6577,6578],{},[537,6579,6560],{},[1151,6581,6582],{},[537,6583,6565],{},[1151,6585,6586],{},"Material properties for stroke layers",[1132,6588,6589,6594,6599,6604],{},[1151,6590,6591],{"align":1137},[516,6592,6593],{},"depth",[1151,6595,6596],{},[537,6597,6598],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[1151,6600,6601],{},[537,6602,6603],{},"'renderOrder'",[1151,6605,6606],{},"How layers should be rendered in 3D space",[5571,6608,6610],{"id":6609},"working-with-layers","Working with Layers",[512,6612,1441,6613,6615],{},[537,6614,5976],{}," computed property returns an array of processed SVG elements, each containing:",[528,6617,6619],{"className":1043,"code":6618,"language":567,"meta":484,"style":484},"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",[537,6620,6621,6631,6644,6657,6670],{"__ignoreMap":484},[540,6622,6623,6626,6629],{"class":542,"line":485},[540,6624,6625],{"class":553},"interface",[540,6627,6628],{"class":1916}," SVGLayer",[540,6630,1952],{"class":545},[540,6632,6633,6636,6638,6641],{"class":542,"line":486},[540,6634,6635],{"class":549},"  geometry",[540,6637,1111],{"class":545},[540,6639,6640],{"class":1916}," BufferGeometry",[540,6642,6643],{"class":1361}," // Three.js geometry for the layer\n",[540,6645,6646,6649,6651,6654],{"class":542,"line":605},[540,6647,6648],{"class":549},"  material",[540,6650,1111],{"class":545},[540,6652,6653],{"class":1916}," MeshBasicMaterialParameters",[540,6655,6656],{"class":1361}," // Material properties\n",[540,6658,6659,6662,6664,6667],{"class":542,"line":611},[540,6660,6661],{"class":549},"  isStroke",[540,6663,1111],{"class":545},[540,6665,6666],{"class":1916}," boolean",[540,6668,6669],{"class":1361}," // Whether this layer is a stroke or fill\n",[540,6671,6672],{"class":542,"line":534},[540,6673,3919],{"class":545},[6675,6676,6678],"h4",{"id":6677},"accessing-individual-layers","Accessing Individual Layers",[528,6680,6683],{"className":530,"code":6681,"highlights":6682,"language":535,"meta":484,"style":484},"\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",[486,611],[537,6684,6685,6705,6724,6728,6754,6758,6763,6796,6844,6848,6856,6860,6868,6876,6882,6904,6918,6936,6940,6947,6964,6991,6996,7004,7012],{"__ignoreMap":484},[540,6686,6687,6689,6691,6693,6695,6697,6699,6701,6703],{"class":542,"line":485},[540,6688,546],{"class":545},[540,6690,550],{"class":549},[540,6692,554],{"class":553},[540,6694,557],{"class":553},[540,6696,560],{"class":545},[540,6698,563],{"class":545},[540,6700,567],{"class":566},[540,6702,563],{"class":545},[540,6704,572],{"class":545},[540,6706,6708,6710,6712,6714,6716,6718,6720,6722],{"class":6707,"line":486},[542,576],[540,6709,580],{"class":579},[540,6711,583],{"class":545},[540,6713,5787],{"class":586},[540,6715,590],{"class":545},[540,6717,593],{"class":579},[540,6719,596],{"class":545},[540,6721,599],{"class":566},[540,6723,602],{"class":545},[540,6725,6726],{"class":542,"line":605},[540,6727,608],{"emptyLinePlaceholder":492},[540,6729,6731,6733,6735,6737,6739,6741,6743,6745,6747,6750,6752],{"class":6730,"line":611},[542,576],[540,6732,614],{"class":553},[540,6734,583],{"class":545},[540,6736,6351],{"class":586},[540,6738,650],{"class":545},[540,6740,653],{"class":545},[540,6742,5787],{"class":656},[540,6744,1093],{"class":586},[540,6746,1096],{"class":545},[540,6748,6749],{"class":566},"/complex-icon.svg",[540,6751,1096],{"class":545},[540,6753,1120],{"class":586},[540,6755,6756],{"class":542,"line":534},[540,6757,608],{"emptyLinePlaceholder":492},[540,6759,6760],{"class":542,"line":662},[540,6761,6762],{"class":1361},"// Apply different materials based on layer type\n",[540,6764,6765,6767,6770,6772,6774,6776,6778,6780,6782,6785,6787,6790,6792,6794],{"class":542,"line":672},[540,6766,614],{"class":553},[540,6768,6769],{"class":586}," getFillColor ",[540,6771,560],{"class":545},[540,6773,1940],{"class":545},[540,6775,5965],{"class":1943},[540,6777,1111],{"class":545},[540,6779,6628],{"class":1916},[540,6781,639],{"class":545},[540,6783,6784],{"class":1943}," index",[540,6786,1111],{"class":545},[540,6788,6789],{"class":1916}," number",[540,6791,1946],{"class":545},[540,6793,1949],{"class":553},[540,6795,1952],{"class":545},[540,6797,6798,6801,6804,6806,6809,6812,6814,6817,6819,6821,6823,6826,6828,6831,6834,6837,6839,6842],{"class":542,"line":677},[540,6799,6800],{"class":579},"  return",[540,6802,6803],{"class":586}," layer",[540,6805,1376],{"class":545},[540,6807,6808],{"class":586},"isStroke",[540,6810,6811],{"class":545}," ?",[540,6813,596],{"class":545},[540,6815,6816],{"class":566},"#000000",[540,6818,1096],{"class":545},[540,6820,708],{"class":545},[540,6822,6389],{"class":545},[540,6824,6825],{"class":566},"hsl(",[540,6827,5996],{"class":545},[540,6829,6830],{"class":586},"index ",[540,6832,6833],{"class":545},"*",[540,6835,6836],{"class":883}," 30",[540,6838,650],{"class":545},[540,6840,6841],{"class":566},", 70%, 50%)",[540,6843,6405],{"class":545},[540,6845,6846],{"class":542,"line":687},[540,6847,3919],{"class":545},[540,6849,6850,6852,6854],{"class":542,"line":731},[540,6851,665],{"class":545},[540,6853,550],{"class":549},[540,6855,572],{"class":545},[540,6857,6858],{"class":542,"line":914},[540,6859,608],{"emptyLinePlaceholder":492},[540,6861,6862,6864,6866],{"class":542,"line":924},[540,6863,546],{"class":545},[540,6865,682],{"class":549},[540,6867,572],{"class":545},[540,6869,6870,6872,6874],{"class":542,"line":932},[540,6871,690],{"class":545},[540,6873,5493],{"class":549},[540,6875,572],{"class":545},[540,6877,6878,6880],{"class":542,"line":950},[540,6879,865],{"class":545},[540,6881,5951],{"class":549},[540,6883,6884,6886,6888,6890,6892,6894,6896,6898,6900,6902],{"class":542,"line":977},[540,6885,5956],{"class":579},[540,6887,560],{"class":545},[540,6889,563],{"class":545},[540,6891,1093],{"class":545},[540,6893,5965],{"class":586},[540,6895,887],{"class":545},[540,6897,5970],{"class":586},[540,6899,5973],{"class":545},[540,6901,5976],{"class":586},[540,6903,947],{"class":545},[540,6905,6906,6908,6910,6912,6914,6916],{"class":542,"line":983},[540,6907,935],{"class":545},[540,6909,5985],{"class":553},[540,6911,560],{"class":545},[540,6913,563],{"class":545},[540,6915,5970],{"class":586},[540,6917,947],{"class":545},[540,6919,6920,6922,6924,6926,6928,6930,6932,6934],{"class":542,"line":1006},[540,6921,935],{"class":545},[540,6923,6008],{"class":553},[540,6925,560],{"class":545},[540,6927,563],{"class":545},[540,6929,5965],{"class":586},[540,6931,1376],{"class":545},[540,6933,6008],{"class":586},[540,6935,947],{"class":545},[540,6937,6938],{"class":542,"line":1016},[540,6939,6040],{"class":545},[540,6941,6942,6944],{"class":542,"line":3797},[540,6943,4097],{"class":545},[540,6945,6946],{"class":549},"TresMeshBasicMaterial\n",[540,6948,6949,6952,6954,6956,6958,6960,6962],{"class":542,"line":3798},[540,6950,6951],{"class":553},"        v-bind",[540,6953,560],{"class":545},[540,6955,563],{"class":545},[540,6957,5965],{"class":586},[540,6959,1376],{"class":545},[540,6961,6061],{"class":586},[540,6963,947],{"class":545},[540,6965,6966,6969,6972,6974,6976,6979,6981,6983,6985,6987,6989],{"class":542,"line":3799},[540,6967,6968],{"class":545},"        :",[540,6970,6971],{"class":553},"color",[540,6973,560],{"class":545},[540,6975,563],{"class":545},[540,6977,6978],{"class":656},"getFillColor",[540,6980,1093],{"class":545},[540,6982,5965],{"class":586},[540,6984,887],{"class":545},[540,6986,5970],{"class":586},[540,6988,1946],{"class":545},[540,6990,947],{"class":545},[540,6992,6993],{"class":542,"line":4085},[540,6994,6995],{"class":545},"      />\n",[540,6997,6998,7000,7002],{"class":542,"line":4094},[540,6999,4128],{"class":545},[540,7001,3618],{"class":549},[540,7003,572],{"class":545},[540,7005,7006,7008,7010],{"class":542,"line":4104},[540,7007,1009],{"class":545},[540,7009,5493],{"class":549},[540,7011,572],{"class":545},[540,7013,7014,7016,7018],{"class":542,"line":4125},[540,7015,665],{"class":545},[540,7017,682],{"class":549},[540,7019,572],{"class":545},[5571,7021,7023],{"id":7022},"depth-handling","Depth Handling",[512,7025,1441,7026,7028],{},[537,7027,6593],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[6675,7030,7032,7034],{"id":7031},"renderorder-default",[537,7033,6603],{}," (Default)",[512,7036,7037],{},[516,7038,7039],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[512,7041,7042,7043,7045],{},"This is the default ",[537,7044,6593],{}," option.",[512,7047,7048,7049,7052,7053,7055,7056,7063],{},"This value sets the materials' ",[537,7050,7051],{},"depthWrite"," to ",[537,7054,1271],{}," and increments the mesh layers ",[1034,7057,7060],{"href":7058,"rel":7059},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1038],[537,7061,7062],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[512,7065,7066,7069],{},[516,7067,7068],{},"Disadvantage",": Scene objects may render out of order.",[512,7071,7072,7073,7078,7079,7084],{},"SVG layers with higher ",[1034,7074,7076],{"href":7058,"rel":7075},[1038],[537,7077,7062],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1034,7080,7082],{"href":7058,"rel":7081},[1038],[537,7083,7062],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[528,7086,7088],{"className":1043,"code":7087,"language":567,"meta":484,"style":484},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[537,7089,7090],{"__ignoreMap":484},[540,7091,7092,7094,7096,7098,7100,7102,7104,7106,7108,7111,7113,7115,7117,7120,7122,7124,7126,7128,7130],{"class":542,"line":485},[540,7093,614],{"class":553},[540,7095,583],{"class":545},[540,7097,6351],{"class":586},[540,7099,650],{"class":545},[540,7101,653],{"class":545},[540,7103,5787],{"class":656},[540,7105,1093],{"class":586},[540,7107,1096],{"class":545},[540,7109,7110],{"class":566},"/icon.svg",[540,7112,1096],{"class":545},[540,7114,639],{"class":545},[540,7116,583],{"class":545},[540,7118,7119],{"class":549}," depth",[540,7121,1111],{"class":545},[540,7123,596],{"class":545},[540,7125,7062],{"class":566},[540,7127,1096],{"class":545},[540,7129,590],{"class":545},[540,7131,1120],{"class":586},[6675,7133,7134],{"id":7134},"flat",[512,7136,7137],{},[516,7138,7139],{},"Use case: simple SVGs",[512,7141,7142,7143,7052,7149,1376],{},"This option sets the materials ",[1034,7144,7147],{"href":7145,"rel":7146},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1038],[537,7148,7051],{},[537,7150,1271],{},[512,7152,7153,7155],{},[516,7154,7068],{},": SVG layers may render out of order.",[512,7157,7158],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[528,7160,7162],{"className":1043,"code":7161,"language":567,"meta":484,"style":484},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[537,7163,7164],{"__ignoreMap":484},[540,7165,7166,7168,7170,7172,7174,7176,7178,7180,7182,7184,7186,7188,7190,7192,7194,7196,7198,7200,7202],{"class":542,"line":485},[540,7167,614],{"class":553},[540,7169,583],{"class":545},[540,7171,6351],{"class":586},[540,7173,650],{"class":545},[540,7175,653],{"class":545},[540,7177,5787],{"class":656},[540,7179,1093],{"class":586},[540,7181,1096],{"class":545},[540,7183,7110],{"class":566},[540,7185,1096],{"class":545},[540,7187,639],{"class":545},[540,7189,583],{"class":545},[540,7191,7119],{"class":549},[540,7193,1111],{"class":545},[540,7195,596],{"class":545},[540,7197,7134],{"class":566},[540,7199,1096],{"class":545},[540,7201,590],{"class":545},[540,7203,1120],{"class":586},[6675,7205,7207],{"id":7206},"offsetz","offsetZ",[512,7209,7210],{},[516,7211,7212],{},"Use case: unscaled SVGs seen from the front",[512,7214,7215],{},"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\".",[512,7217,7218,7220],{},[516,7219,7068],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[512,7222,7223,7224,7229],{},"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 ",[1034,7225,7228],{"href":7226,"rel":7227},"https://en.wikipedia.org/wiki/Z-fighting",[1038],"z-fight",", particularly if the SVG is scaled down.",[528,7231,7233],{"className":1043,"code":7232,"language":567,"meta":484,"style":484},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[537,7234,7235],{"__ignoreMap":484},[540,7236,7237,7239,7241,7243,7245,7247,7249,7251,7253,7255,7257,7259,7261,7263,7265,7267,7269,7271,7273],{"class":542,"line":485},[540,7238,614],{"class":553},[540,7240,583],{"class":545},[540,7242,6351],{"class":586},[540,7244,650],{"class":545},[540,7246,653],{"class":545},[540,7248,5787],{"class":656},[540,7250,1093],{"class":586},[540,7252,1096],{"class":545},[540,7254,7110],{"class":566},[540,7256,1096],{"class":545},[540,7258,639],{"class":545},[540,7260,583],{"class":545},[540,7262,7119],{"class":549},[540,7264,1111],{"class":545},[540,7266,596],{"class":545},[540,7268,7207],{"class":566},[540,7270,1096],{"class":545},[540,7272,590],{"class":545},[540,7274,1120],{"class":586},[6675,7276,7277],{"id":1217},[537,7278,1217],{},[512,7280,7281],{},[516,7282,7283],{},"Use case: SVGs seen from the front",[512,7285,7286,7287,7290,7291,7295],{},"This is the same as ",[537,7288,7289],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1034,7292,7294],{"href":7226,"rel":7293},[1038],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[512,7297,7298,7300],{},[516,7299,7068],{},": \"Bottom\" of the \"stack\" is visible.",[528,7302,7304],{"className":1043,"code":7303,"language":567,"meta":484,"style":484},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[537,7305,7306],{"__ignoreMap":484},[540,7307,7308,7310,7312,7314,7316,7318,7320,7322,7324,7326,7328,7330,7332,7334,7336,7339,7341],{"class":542,"line":485},[540,7309,614],{"class":553},[540,7311,583],{"class":545},[540,7313,6351],{"class":586},[540,7315,650],{"class":545},[540,7317,653],{"class":545},[540,7319,5787],{"class":656},[540,7321,1093],{"class":586},[540,7323,1096],{"class":545},[540,7325,7110],{"class":566},[540,7327,1096],{"class":545},[540,7329,639],{"class":545},[540,7331,583],{"class":545},[540,7333,7119],{"class":549},[540,7335,1111],{"class":545},[540,7337,7338],{"class":883}," 0.1",[540,7340,590],{"class":545},[540,7342,1120],{"class":586},[5571,7344,7346],{"id":7345},"memory-management","Memory Management",[512,7348,7349],{},"Always dispose of geometries when the component unmounts:",[528,7351,7353],{"className":530,"code":7352,"language":535,"meta":484,"style":484},"\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",[537,7354,7355,7375,7393,7412,7416,7440,7444,7457,7464,7470],{"__ignoreMap":484},[540,7356,7357,7359,7361,7363,7365,7367,7369,7371,7373],{"class":542,"line":485},[540,7358,546],{"class":545},[540,7360,550],{"class":549},[540,7362,554],{"class":553},[540,7364,557],{"class":553},[540,7366,560],{"class":545},[540,7368,563],{"class":545},[540,7370,567],{"class":566},[540,7372,563],{"class":545},[540,7374,572],{"class":545},[540,7376,7377,7379,7381,7383,7385,7387,7389,7391],{"class":542,"line":486},[540,7378,580],{"class":579},[540,7380,583],{"class":545},[540,7382,5787],{"class":586},[540,7384,590],{"class":545},[540,7386,593],{"class":579},[540,7388,596],{"class":545},[540,7390,599],{"class":566},[540,7392,602],{"class":545},[540,7394,7395,7397,7399,7402,7404,7406,7408,7410],{"class":542,"line":605},[540,7396,580],{"class":579},[540,7398,583],{"class":545},[540,7400,7401],{"class":586}," onUnmounted",[540,7403,590],{"class":545},[540,7405,593],{"class":579},[540,7407,596],{"class":545},[540,7409,535],{"class":566},[540,7411,602],{"class":545},[540,7413,7414],{"class":542,"line":611},[540,7415,608],{"emptyLinePlaceholder":492},[540,7417,7418,7420,7422,7424,7426,7428,7430,7432,7434,7436,7438],{"class":542,"line":534},[540,7419,614],{"class":553},[540,7421,583],{"class":545},[540,7423,5840],{"class":586},[540,7425,650],{"class":545},[540,7427,653],{"class":545},[540,7429,5787],{"class":656},[540,7431,1093],{"class":586},[540,7433,1096],{"class":545},[540,7435,7110],{"class":566},[540,7437,1096],{"class":545},[540,7439,1120],{"class":586},[540,7441,7442],{"class":542,"line":662},[540,7443,608],{"emptyLinePlaceholder":492},[540,7445,7446,7449,7451,7453,7455],{"class":542,"line":672},[540,7447,7448],{"class":656},"onUnmounted",[540,7450,1093],{"class":586},[540,7452,4627],{"class":545},[540,7454,1949],{"class":553},[540,7456,1952],{"class":545},[540,7458,7459,7462],{"class":542,"line":677},[540,7460,7461],{"class":656},"  dispose",[540,7463,1923],{"class":549},[540,7465,7466,7468],{"class":542,"line":687},[540,7467,650],{"class":545},[540,7469,1120],{"class":586},[540,7471,7472,7474,7476],{"class":542,"line":731},[540,7473,665],{"class":545},[540,7475,550],{"class":549},[540,7477,572],{"class":545},[5571,7479,7481],{"id":7480},"advanced-usage","Advanced Usage",[6675,7483,7485],{"id":7484},"conditional-layer-rendering","Conditional Layer Rendering",[528,7487,7489],{"className":530,"code":7488,"language":535,"meta":484,"style":484},"\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",[537,7490,7491,7511,7529,7547,7551,7570,7595,7599,7617,7627,7638,7669,7673,7681,7685,7693,7701,7707,7730,7744,7762,7766,7788,7796,7804],{"__ignoreMap":484},[540,7492,7493,7495,7497,7499,7501,7503,7505,7507,7509],{"class":542,"line":485},[540,7494,546],{"class":545},[540,7496,550],{"class":549},[540,7498,554],{"class":553},[540,7500,557],{"class":553},[540,7502,560],{"class":545},[540,7504,563],{"class":545},[540,7506,567],{"class":566},[540,7508,563],{"class":545},[540,7510,572],{"class":545},[540,7512,7513,7515,7517,7519,7521,7523,7525,7527],{"class":542,"line":486},[540,7514,580],{"class":579},[540,7516,583],{"class":545},[540,7518,5787],{"class":586},[540,7520,590],{"class":545},[540,7522,593],{"class":579},[540,7524,596],{"class":545},[540,7526,599],{"class":566},[540,7528,602],{"class":545},[540,7530,7531,7533,7535,7537,7539,7541,7543,7545],{"class":542,"line":605},[540,7532,580],{"class":579},[540,7534,583],{"class":545},[540,7536,4622],{"class":586},[540,7538,590],{"class":545},[540,7540,593],{"class":579},[540,7542,596],{"class":545},[540,7544,535],{"class":566},[540,7546,602],{"class":545},[540,7548,7549],{"class":542,"line":611},[540,7550,608],{"emptyLinePlaceholder":492},[540,7552,7553,7555,7558,7560,7563,7565,7568],{"class":542,"line":534},[540,7554,614],{"class":553},[540,7556,7557],{"class":586}," showDetails ",[540,7559,560],{"class":545},[540,7561,7562],{"class":656}," ref",[540,7564,1093],{"class":586},[540,7566,7567],{"class":1114},"true",[540,7569,1120],{"class":586},[540,7571,7572,7574,7576,7578,7580,7582,7584,7586,7588,7591,7593],{"class":542,"line":662},[540,7573,614],{"class":553},[540,7575,583],{"class":545},[540,7577,6351],{"class":586},[540,7579,650],{"class":545},[540,7581,653],{"class":545},[540,7583,5787],{"class":656},[540,7585,1093],{"class":586},[540,7587,1096],{"class":545},[540,7589,7590],{"class":566},"/detailed-icon.svg",[540,7592,1096],{"class":545},[540,7594,1120],{"class":586},[540,7596,7597],{"class":542,"line":672},[540,7598,608],{"emptyLinePlaceholder":492},[540,7600,7601,7603,7606,7608,7610,7612,7614],{"class":542,"line":677},[540,7602,614],{"class":553},[540,7604,7605],{"class":586}," visibleLayers ",[540,7607,560],{"class":545},[540,7609,4622],{"class":656},[540,7611,1093],{"class":586},[540,7613,4627],{"class":545},[540,7615,7616],{"class":553}," =>\n",[540,7618,7619,7622,7624],{"class":542,"line":687},[540,7620,7621],{"class":586},"  showDetails",[540,7623,1376],{"class":545},[540,7625,7626],{"class":586},"value\n",[540,7628,7629,7632,7634,7636],{"class":542,"line":731},[540,7630,7631],{"class":545},"    ?",[540,7633,5831],{"class":586},[540,7635,1376],{"class":545},[540,7637,7626],{"class":586},[540,7639,7640,7642,7644,7646,7648,7650,7653,7655,7657,7659,7662,7664,7666],{"class":542,"line":914},[540,7641,4032],{"class":545},[540,7643,5831],{"class":586},[540,7645,1376],{"class":545},[540,7647,1379],{"class":586},[540,7649,1376],{"class":545},[540,7651,7652],{"class":656},"filter",[540,7654,1093],{"class":586},[540,7656,5965],{"class":1943},[540,7658,1949],{"class":553},[540,7660,7661],{"class":545}," !",[540,7663,5965],{"class":586},[540,7665,1376],{"class":545},[540,7667,7668],{"class":586},"isStroke)\n",[540,7670,7671],{"class":542,"line":924},[540,7672,1120],{"class":586},[540,7674,7675,7677,7679],{"class":542,"line":932},[540,7676,665],{"class":545},[540,7678,550],{"class":549},[540,7680,572],{"class":545},[540,7682,7683],{"class":542,"line":950},[540,7684,608],{"emptyLinePlaceholder":492},[540,7686,7687,7689,7691],{"class":542,"line":977},[540,7688,546],{"class":545},[540,7690,682],{"class":549},[540,7692,572],{"class":545},[540,7694,7695,7697,7699],{"class":542,"line":983},[540,7696,690],{"class":545},[540,7698,5493],{"class":549},[540,7700,572],{"class":545},[540,7702,7703,7705],{"class":542,"line":1006},[540,7704,865],{"class":545},[540,7706,5951],{"class":549},[540,7708,7709,7711,7713,7715,7717,7719,7721,7723,7725,7728],{"class":542,"line":1016},[540,7710,5956],{"class":579},[540,7712,560],{"class":545},[540,7714,563],{"class":545},[540,7716,1093],{"class":545},[540,7718,5965],{"class":586},[540,7720,887],{"class":545},[540,7722,5970],{"class":586},[540,7724,5973],{"class":545},[540,7726,7727],{"class":586},"visibleLayers",[540,7729,947],{"class":545},[540,7731,7732,7734,7736,7738,7740,7742],{"class":542,"line":3797},[540,7733,935],{"class":545},[540,7735,5985],{"class":553},[540,7737,560],{"class":545},[540,7739,563],{"class":545},[540,7741,5970],{"class":586},[540,7743,947],{"class":545},[540,7745,7746,7748,7750,7752,7754,7756,7758,7760],{"class":542,"line":3798},[540,7747,935],{"class":545},[540,7749,6008],{"class":553},[540,7751,560],{"class":545},[540,7753,563],{"class":545},[540,7755,5965],{"class":586},[540,7757,1376],{"class":545},[540,7759,6008],{"class":586},[540,7761,947],{"class":545},[540,7763,7764],{"class":542,"line":3799},[540,7765,6040],{"class":545},[540,7767,7768,7770,7772,7774,7776,7778,7780,7782,7784,7786],{"class":542,"line":4085},[540,7769,4097],{"class":545},[540,7771,6047],{"class":549},[540,7773,6050],{"class":553},[540,7775,560],{"class":545},[540,7777,563],{"class":545},[540,7779,5965],{"class":586},[540,7781,1376],{"class":545},[540,7783,6061],{"class":586},[540,7785,563],{"class":545},[540,7787,728],{"class":545},[540,7789,7790,7792,7794],{"class":542,"line":4094},[540,7791,4128],{"class":545},[540,7793,3618],{"class":549},[540,7795,572],{"class":545},[540,7797,7798,7800,7802],{"class":542,"line":4104},[540,7799,1009],{"class":545},[540,7801,5493],{"class":549},[540,7803,572],{"class":545},[540,7805,7806,7808,7810],{"class":542,"line":4125},[540,7807,665],{"class":545},[540,7809,682],{"class":549},[540,7811,572],{"class":545},[6675,7813,7815],{"id":7814},"material-customization-per-layer","Material Customization per Layer",[528,7817,7819],{"className":530,"code":7818,"language":535,"meta":484,"style":484},"\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",[537,7820,7821,7841,7859,7863,7890,7898,7909,7919,7924,7933,7943,7954,7967,7971,7977,7985,7989,7997,8005,8011,8033,8047,8065,8069,8075,8091,8110,8114,8122,8130],{"__ignoreMap":484},[540,7822,7823,7825,7827,7829,7831,7833,7835,7837,7839],{"class":542,"line":485},[540,7824,546],{"class":545},[540,7826,550],{"class":549},[540,7828,554],{"class":553},[540,7830,557],{"class":553},[540,7832,560],{"class":545},[540,7834,563],{"class":545},[540,7836,567],{"class":566},[540,7838,563],{"class":545},[540,7840,572],{"class":545},[540,7842,7843,7845,7847,7849,7851,7853,7855,7857],{"class":542,"line":486},[540,7844,580],{"class":579},[540,7846,583],{"class":545},[540,7848,5787],{"class":586},[540,7850,590],{"class":545},[540,7852,593],{"class":579},[540,7854,596],{"class":545},[540,7856,599],{"class":566},[540,7858,602],{"class":545},[540,7860,7861],{"class":542,"line":605},[540,7862,608],{"emptyLinePlaceholder":492},[540,7864,7865,7867,7869,7871,7873,7875,7877,7879,7881,7884,7886,7888],{"class":542,"line":611},[540,7866,614],{"class":553},[540,7868,583],{"class":545},[540,7870,6351],{"class":586},[540,7872,650],{"class":545},[540,7874,653],{"class":545},[540,7876,5787],{"class":656},[540,7878,1093],{"class":586},[540,7880,1096],{"class":545},[540,7882,7883],{"class":566},"/logo.svg",[540,7885,1096],{"class":545},[540,7887,639],{"class":545},[540,7889,1952],{"class":545},[540,7891,7892,7894,7896],{"class":542,"line":534},[540,7893,5872],{"class":549},[540,7895,1111],{"class":545},[540,7897,1952],{"class":545},[540,7899,7900,7903,7905,7907],{"class":542,"line":662},[540,7901,7902],{"class":549},"    transparent",[540,7904,1111],{"class":545},[540,7906,1115],{"class":1114},[540,7908,4262],{"class":545},[540,7910,7911,7914,7916],{"class":542,"line":672},[540,7912,7913],{"class":549},"    opacity",[540,7915,1111],{"class":545},[540,7917,7918],{"class":883}," 0.9\n",[540,7920,7921],{"class":542,"line":677},[540,7922,7923],{"class":545},"  },\n",[540,7925,7926,7929,7931],{"class":542,"line":687},[540,7927,7928],{"class":549},"  strokeMaterial",[540,7930,1111],{"class":545},[540,7932,1952],{"class":545},[540,7934,7935,7937,7939,7941],{"class":542,"line":731},[540,7936,7902],{"class":549},[540,7938,1111],{"class":545},[540,7940,1115],{"class":1114},[540,7942,4262],{"class":545},[540,7944,7945,7947,7949,7952],{"class":542,"line":914},[540,7946,7913],{"class":549},[540,7948,1111],{"class":545},[540,7950,7951],{"class":883}," 1.0",[540,7953,4262],{"class":545},[540,7955,7956,7959,7961,7963,7965],{"class":542,"line":924},[540,7957,7958],{"class":549},"    color",[540,7960,1111],{"class":545},[540,7962,596],{"class":545},[540,7964,6816],{"class":566},[540,7966,602],{"class":545},[540,7968,7969],{"class":542,"line":932},[540,7970,5062],{"class":545},[540,7972,7973,7975],{"class":542,"line":950},[540,7974,650],{"class":545},[540,7976,1120],{"class":586},[540,7978,7979,7981,7983],{"class":542,"line":977},[540,7980,665],{"class":545},[540,7982,550],{"class":549},[540,7984,572],{"class":545},[540,7986,7987],{"class":542,"line":983},[540,7988,608],{"emptyLinePlaceholder":492},[540,7990,7991,7993,7995],{"class":542,"line":1006},[540,7992,546],{"class":545},[540,7994,682],{"class":549},[540,7996,572],{"class":545},[540,7998,7999,8001,8003],{"class":542,"line":1016},[540,8000,690],{"class":545},[540,8002,5493],{"class":549},[540,8004,572],{"class":545},[540,8006,8007,8009],{"class":542,"line":3797},[540,8008,865],{"class":545},[540,8010,5951],{"class":549},[540,8012,8013,8015,8017,8019,8021,8023,8025,8027,8029,8031],{"class":542,"line":3798},[540,8014,5956],{"class":579},[540,8016,560],{"class":545},[540,8018,563],{"class":545},[540,8020,1093],{"class":545},[540,8022,5965],{"class":586},[540,8024,887],{"class":545},[540,8026,5970],{"class":586},[540,8028,5973],{"class":545},[540,8030,5976],{"class":586},[540,8032,947],{"class":545},[540,8034,8035,8037,8039,8041,8043,8045],{"class":542,"line":3799},[540,8036,935],{"class":545},[540,8038,5985],{"class":553},[540,8040,560],{"class":545},[540,8042,563],{"class":545},[540,8044,5970],{"class":586},[540,8046,947],{"class":545},[540,8048,8049,8051,8053,8055,8057,8059,8061,8063],{"class":542,"line":4085},[540,8050,935],{"class":545},[540,8052,6008],{"class":553},[540,8054,560],{"class":545},[540,8056,563],{"class":545},[540,8058,5965],{"class":586},[540,8060,1376],{"class":545},[540,8062,6008],{"class":586},[540,8064,947],{"class":545},[540,8066,8067],{"class":542,"line":4094},[540,8068,6040],{"class":545},[540,8070,8071,8073],{"class":542,"line":4104},[540,8072,4097],{"class":545},[540,8074,6946],{"class":549},[540,8076,8077,8079,8081,8083,8085,8087,8089],{"class":542,"line":4125},[540,8078,6951],{"class":553},[540,8080,560],{"class":545},[540,8082,563],{"class":545},[540,8084,5965],{"class":586},[540,8086,1376],{"class":545},[540,8088,6061],{"class":586},[540,8090,947],{"class":545},[540,8092,8093,8095,8098,8100,8102,8104,8106,8108],{"class":542,"line":3800},[540,8094,6968],{"class":545},[540,8096,8097],{"class":553},"wireframe",[540,8099,560],{"class":545},[540,8101,563],{"class":545},[540,8103,5965],{"class":586},[540,8105,1376],{"class":545},[540,8107,6808],{"class":586},[540,8109,947],{"class":545},[540,8111,8112],{"class":542,"line":4144},[540,8113,6995],{"class":545},[540,8115,8116,8118,8120],{"class":542,"line":4891},[540,8117,4128],{"class":545},[540,8119,3618],{"class":549},[540,8121,572],{"class":545},[540,8123,8124,8126,8128],{"class":542,"line":4896},[540,8125,1009],{"class":545},[540,8127,5493],{"class":549},[540,8129,572],{"class":545},[540,8131,8132,8134,8136],{"class":542,"line":4902},[540,8133,665],{"class":545},[540,8135,682],{"class":549},[540,8137,572],{"class":545},[521,8139,8141],{"id":8140},"usesvg-component","UseSVG Component",[512,8143,8144,8145,8148],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[537,8146,8147],{},"UseSVG"," component:",[528,8150,8152],{"className":530,"code":8151,"language":535,"meta":484,"style":484},"\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",[537,8153,8154,8174,8193,8201,8205,8213,8259,8266,8280,8295,8317,8331,8344,8348,8356],{"__ignoreMap":484},[540,8155,8156,8158,8160,8162,8164,8166,8168,8170,8172],{"class":542,"line":485},[540,8157,546],{"class":545},[540,8159,550],{"class":549},[540,8161,554],{"class":553},[540,8163,557],{"class":553},[540,8165,560],{"class":545},[540,8167,563],{"class":545},[540,8169,567],{"class":566},[540,8171,563],{"class":545},[540,8173,572],{"class":545},[540,8175,8176,8178,8180,8183,8185,8187,8189,8191],{"class":542,"line":486},[540,8177,580],{"class":579},[540,8179,583],{"class":545},[540,8181,8182],{"class":586}," UseSVG",[540,8184,590],{"class":545},[540,8186,593],{"class":579},[540,8188,596],{"class":545},[540,8190,599],{"class":566},[540,8192,602],{"class":545},[540,8194,8195,8197,8199],{"class":542,"line":605},[540,8196,665],{"class":545},[540,8198,550],{"class":549},[540,8200,572],{"class":545},[540,8202,8203],{"class":542,"line":611},[540,8204,608],{"emptyLinePlaceholder":492},[540,8206,8207,8209,8211],{"class":542,"line":534},[540,8208,546],{"class":545},[540,8210,682],{"class":549},[540,8212,572],{"class":545},[540,8214,8215,8217,8219,8221,8223,8225,8227,8230,8232,8234,8236,8238,8240,8242,8245,8247,8249,8251,8253,8255,8257],{"class":542,"line":662},[540,8216,690],{"class":545},[540,8218,5493],{"class":549},[540,8220,708],{"class":545},[540,8222,2343],{"class":553},[540,8224,560],{"class":545},[540,8226,563],{"class":545},[540,8228,8229],{"class":883},"0.01",[540,8231,563],{"class":545},[540,8233,708],{"class":545},[540,8235,873],{"class":553},[540,8237,560],{"class":545},[540,8239,563],{"class":545},[540,8241,5446],{"class":545},[540,8243,8244],{"class":883},"2.1",[540,8246,887],{"class":545},[540,8248,999],{"class":883},[540,8250,887],{"class":545},[540,8252,1976],{"class":883},[540,8254,898],{"class":545},[540,8256,563],{"class":545},[540,8258,572],{"class":545},[540,8260,8261,8263],{"class":542,"line":672},[540,8262,865],{"class":545},[540,8264,8265],{"class":549},"UseSVG\n",[540,8267,8268,8271,8273,8275,8278],{"class":542,"line":677},[540,8269,8270],{"class":553},"      src",[540,8272,560],{"class":545},[540,8274,563],{"class":545},[540,8276,8277],{"class":566},"/path/to/logo.svg",[540,8279,947],{"class":545},[540,8281,8282,8284,8287,8289,8291,8293],{"class":542,"line":687},[540,8283,935],{"class":545},[540,8285,8286],{"class":553},"skip-fills",[540,8288,560],{"class":545},[540,8290,563],{"class":545},[540,8292,1271],{"class":1114},[540,8294,947],{"class":545},[540,8296,8297,8299,8302,8304,8306,8308,8311,8313,8315],{"class":542,"line":731},[540,8298,935],{"class":545},[540,8300,8301],{"class":553},"fill-material",[540,8303,560],{"class":545},[540,8305,563],{"class":545},[540,8307,4015],{"class":545},[540,8309,8310],{"class":549},"transparent",[540,8312,4020],{"class":545},[540,8314,7567],{"class":1114},[540,8316,4262],{"class":545},[540,8318,8319,8322,8324,8327,8329],{"class":542,"line":914},[540,8320,8321],{"class":549},"                        opacity",[540,8323,4020],{"class":545},[540,8325,8326],{"class":883},"0.8",[540,8328,590],{"class":545},[540,8330,947],{"class":545},[540,8332,8333,8336,8338,8340,8342],{"class":542,"line":924},[540,8334,8335],{"class":553},"      depth",[540,8337,560],{"class":545},[540,8339,563],{"class":545},[540,8341,7062],{"class":566},[540,8343,947],{"class":545},[540,8345,8346],{"class":542,"line":932},[540,8347,980],{"class":545},[540,8349,8350,8352,8354],{"class":542,"line":950},[540,8351,1009],{"class":545},[540,8353,5493],{"class":549},[540,8355,572],{"class":545},[540,8357,8358,8360,8362],{"class":542,"line":977},[540,8359,665],{"class":545},[540,8361,682],{"class":549},[540,8363,572],{"class":545},[5571,8365,2065],{"id":2064},[1126,8367,8368,8380],{},[1129,8369,8370],{},[1132,8371,8372,8374,8376,8378],{},[1135,8373,2074],{"align":1137},[1135,8375,1141],{},[1135,8377,1144],{"align":1137},[1135,8379,1252],{},[1146,8381,8382,8403,8423,8442,8459,8476,8495,8513],{},[1132,8383,8384,8389,8393,8401],{},[1151,8385,8386],{"align":1137},[516,8387,8388],{},"src",[1151,8390,8391],{},[537,8392,1286],{},[1151,8394,8395,8396,8400],{"align":1137},"Either a path to an SVG ",[8397,8398,8399],"em",{},"or"," an SVG string",[1151,8402],{},[1132,8404,8405,8409,8413,8419],{},[1151,8406,8407],{"align":1137},[516,8408,6519],{},[1151,8410,8411],{},[537,8412,1202],{},[1151,8414,8415,8416,8418],{"align":1137},"If ",[537,8417,7567],{},", the SVG strokes will not be rendered.",[1151,8420,8421],{},[537,8422,1271],{},[1132,8424,8425,8429,8433,8438],{},[1151,8426,8427],{"align":1137},[516,8428,6537],{},[1151,8430,8431],{},[537,8432,1202],{},[1151,8434,8415,8435,8437],{"align":1137},[537,8436,7567],{},", the SVG fills will not be rendered.",[1151,8439,8440],{},[537,8441,1271],{},[1132,8443,8444,8448,8452,8455],{},[1151,8445,8446],{"align":1137},[516,8447,6575],{},[1151,8449,8450],{},[537,8451,6560],{},[1151,8453,8454],{"align":1137},"Props to assign to the stroke materials of the resulting meshes.",[1151,8456,8457],{},[537,8458,2094],{},[1132,8460,8461,8465,8469,8472],{},[1151,8462,8463],{"align":1137},[516,8464,6555],{},[1151,8466,8467],{},[537,8468,6560],{},[1151,8470,8471],{"align":1137},"Props to assign to the fill materials of the resulting meshes.",[1151,8473,8474],{},[537,8475,2094],{},[1132,8477,8478,8483,8488,8491],{},[1151,8479,8480],{"align":1137},[516,8481,8482],{},"strokeMeshProps",[1151,8484,8485],{},[537,8486,8487],{},"TresOptions",[1151,8489,8490],{"align":1137},"Props to assign to the resulting stroke meshes.",[1151,8492,8493],{},[537,8494,2094],{},[1132,8496,8497,8502,8506,8509],{},[1151,8498,8499],{"align":1137},[516,8500,8501],{},"fillMeshProps",[1151,8503,8504],{},[537,8505,8487],{},[1151,8507,8508],{"align":1137},"Props to assign to the resulting fill meshes.",[1151,8510,8511],{},[537,8512,2094],{},[1132,8514,8515,8519,8523,8530],{},[1151,8516,8517],{"align":1137},[516,8518,6593],{},[1151,8520,8521],{},[537,8522,6598],{},[1151,8524,8525,8526,1946],{"align":1137},"Specify how SVG layers are to be rendered. (",[1034,8527,8529],{"href":8528},"#depth-handling","See \"Depth\"",[1151,8531,8532],{},[537,8533,7062],{},[521,8535,8537],{"id":8536},"troubleshooting","Troubleshooting",[8539,8540,8542],"alert",{"type":8541},"warning",[512,8543,8544],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[512,8546,8547],{},"Here are some things to try if you run into problems:",[5571,8549,8551],{"id":8550},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[5674,8553,8554],{},[5677,8555,8556,8557,7052,8559,1376],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[537,8558,5422],{},[537,8560,8561],{},"rgb(255, 0, 0)",[5571,8563,8565],{"id":8564},"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",[5674,8567,8568,8580],{},[5677,8569,8570,8571,8573,8574,1376],{},"In your ",[537,8572,145],{}," options, ",[1034,8575,8576,8577,8579],{"href":8528},"change the ",[537,8578,6593],{}," option",[5677,8581,8582,8583,8586,8587,1376],{},"In the SVG source, use ",[537,8584,8585],{},"fill=\"none\""," rather than ",[537,8588,8589],{},"fill-opacity=\"0\"",[5571,8591,8593,8594],{"id":8592},"parts-of-the-svg-z-fight","Parts of the SVG ",[1034,8595,8597],{"href":7226,"rel":8596},[1038],"\"z-fight\"",[5674,8599,8600,8608],{},[5677,8601,8570,8602,8573,8604,1376],{},[537,8603,145],{},[1034,8605,8576,8606,8579],{"href":8528},[537,8607,6593],{},[5677,8609,8610],{},"Increase the distance between the SVG and other on-screen elements.",[5571,8612,8614],{"id":8613},"the-svg-is-not-visible","The SVG is not visible",[5674,8616,8617,8620,8629,8635],{},[5677,8618,8619],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[5677,8621,8622,8623,8625,8626,1376],{},"Try scaling the SVG down, e.g., wrap it in a ",[537,8624,5493],{}," with ",[537,8627,8628],{},":scale=\"0.01\"",[5677,8630,8631,8632,1376],{},"Try moving the SVG up (+y), e.g., ",[537,8633,8634],{},":position=\"[0,2,0]\"",[5677,8636,8637,8638,8641],{},"Check that ",[537,8639,8640],{},"layers.length > 0"," before rendering.",[5571,8643,8645],{"id":8644},"performance-issues-with-many-layers","Performance issues with many layers",[5674,8647,8648,8655,8664],{},[5677,8649,8650,8651,8654],{},"Use the ",[537,8652,8653],{},"dispose()"," function when components unmount to clean up geometries.",[5677,8656,8657,8658,8660,8661,8663],{},"Consider using ",[537,8659,6519],{}," or ",[537,8662,6537],{}," to reduce the number of rendered layers.",[5677,8665,8666],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[521,8668,8670,8671,8673,8674,8676],{"id":8669},"when-to-use-usesvg-vs-svg-component","When to Use ",[537,8672,145],{}," vs ",[537,8675,5737],{}," Component",[512,8678,8679],{},[516,8680,8681,8682,8684],{},"Use ",[537,8683,145],{}," when you need:",[5674,8686,8687,8690,8693,8696,8699],{},[5677,8688,8689],{},"Direct access to individual SVG layers",[5677,8691,8692],{},"Custom rendering logic",[5677,8694,8695],{},"Layer-specific animations",[5677,8697,8698],{},"Programmatic geometry manipulation",[5677,8700,8701],{},"Advanced material customization per layer",[512,8703,8704],{},[516,8705,8650,8706,8708],{},[537,8707,5737],{}," component when you need:",[5674,8710,8711,8714,8717,8720],{},[5677,8712,8713],{},"Simple, declarative SVG rendering",[5677,8715,8716],{},"Quick prototyping",[5677,8718,8719],{},"Standard SVG display without custom logic",[5677,8721,8722],{},"Less code and setup",[1419,8724,8725],{},"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":484,"searchDepth":485,"depth":486,"links":8727},[8728,8738,8741,8749],{"id":5741,"depth":486,"text":5742,"children":8729},[8730,8731,8732,8733,8734,8735,8736,8737],{"id":523,"depth":605,"text":15},{"id":6306,"depth":605,"text":6307},{"id":1123,"depth":605,"text":1124},{"id":1238,"depth":605,"text":1239},{"id":6609,"depth":605,"text":6610},{"id":7022,"depth":605,"text":7023},{"id":7345,"depth":605,"text":7346},{"id":7480,"depth":605,"text":7481},{"id":8140,"depth":486,"text":8141,"children":8739},[8740],{"id":2064,"depth":605,"text":2065},{"id":8536,"depth":486,"text":8537,"children":8742},[8743,8744,8745,8747,8748],{"id":8550,"depth":605,"text":8551},{"id":8564,"depth":605,"text":8565},{"id":8592,"depth":605,"text":8746},"Parts of the SVG \"z-fight\"",{"id":8613,"depth":605,"text":8614},{"id":8644,"depth":605,"text":8645},{"id":8669,"depth":486,"text":8750},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":145,"description":8751},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",{"id":8756,"title":149,"body":8757,"description":9261,"extension":489,"links":490,"meta":9262,"navigation":492,"path":150,"seo":9263,"stem":151,"__hash__":9264},"docs/2.api/3.loaders/use-progress.md",{"type":477,"value":8758,"toc":9257},[8759,8766,8769,8771,8829,8835,9169,9180,9182,9237,9254],[512,8760,8761,8762,8765],{},"A composable to convenience wrap ",[537,8763,8764],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[512,8767,8768],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[521,8770,15],{"id":523},[528,8772,8774],{"className":1043,"code":8773,"language":567,"meta":484,"style":484},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[537,8775,8776,8795,8799],{"__ignoreMap":484},[540,8777,8778,8780,8782,8785,8787,8789,8791,8793],{"class":542,"line":485},[540,8779,580],{"class":579},[540,8781,583],{"class":545},[540,8783,8784],{"class":586}," useProgress",[540,8786,590],{"class":545},[540,8788,593],{"class":579},[540,8790,596],{"class":545},[540,8792,599],{"class":566},[540,8794,602],{"class":545},[540,8796,8797],{"class":542,"line":486},[540,8798,608],{"emptyLinePlaceholder":492},[540,8800,8801,8803,8805,8808,8810,8813,8815,8818,8820,8822,8825,8827],{"class":542,"line":605},[540,8802,614],{"class":553},[540,8804,583],{"class":545},[540,8806,8807],{"class":586}," hasFinishLoading",[540,8809,639],{"class":545},[540,8811,8812],{"class":586}," progress",[540,8814,639],{"class":545},[540,8816,8817],{"class":586}," items ",[540,8819,650],{"class":545},[540,8821,653],{"class":545},[540,8823,8824],{"class":579}," await",[540,8826,8784],{"class":656},[540,8828,1923],{"class":586},[512,8830,8831,8832,8834],{},"Then you can use the ",[537,8833,1212],{}," value to show a loading bar or a spinner:",[528,8836,8838],{"className":530,"code":8837,"language":535,"meta":484,"style":484},"\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",[537,8839,8840,8848,8855,8869,8883,8897,8901,8908,8924,8938,8942,8963,8980,9006,9015,9023,9032,9051,9083,9091,9099,9106,9111,9127,9141,9145,9153,9161],{"__ignoreMap":484},[540,8841,8842,8844,8846],{"class":542,"line":485},[540,8843,546],{"class":545},[540,8845,682],{"class":549},[540,8847,572],{"class":545},[540,8849,8850,8852],{"class":542,"line":486},[540,8851,690],{"class":545},[540,8853,8854],{"class":549},"Transition\n",[540,8856,8857,8860,8862,8864,8867],{"class":542,"line":605},[540,8858,8859],{"class":553},"    name",[540,8861,560],{"class":545},[540,8863,563],{"class":545},[540,8865,8866],{"class":566},"fade-overlay",[540,8868,947],{"class":545},[540,8870,8871,8874,8876,8878,8881],{"class":542,"line":611},[540,8872,8873],{"class":553},"    enter-active-class",[540,8875,560],{"class":545},[540,8877,563],{"class":545},[540,8879,8880],{"class":566},"opacity-1 transition-opacity duration-200",[540,8882,947],{"class":545},[540,8884,8885,8888,8890,8892,8895],{"class":542,"line":534},[540,8886,8887],{"class":553},"    leave-active-class",[540,8889,560],{"class":545},[540,8891,563],{"class":545},[540,8893,8894],{"class":566},"opacity-0 transition-opacity duration-200",[540,8896,947],{"class":545},[540,8898,8899],{"class":542,"line":662},[540,8900,4082],{"class":545},[540,8902,8903,8905],{"class":542,"line":672},[540,8904,865],{"class":545},[540,8906,8907],{"class":549},"div\n",[540,8909,8910,8913,8915,8917,8919,8922],{"class":542,"line":677},[540,8911,8912],{"class":553},"      v-show",[540,8914,560],{"class":545},[540,8916,563],{"class":545},[540,8918,5938],{"class":545},[540,8920,8921],{"class":586},"hasFinishLoading",[540,8923,947],{"class":545},[540,8925,8926,8929,8931,8933,8936],{"class":542,"line":687},[540,8927,8928],{"class":553},"      class",[540,8930,560],{"class":545},[540,8932,563],{"class":545},[540,8934,8935],{"class":566},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[540,8937,947],{"class":545},[540,8939,8940],{"class":542,"line":731},[540,8941,6040],{"class":545},[540,8943,8944,8946,8949,8952,8954,8956,8959,8961],{"class":542,"line":914},[540,8945,4097],{"class":545},[540,8947,8948],{"class":549},"div",[540,8950,8951],{"class":553}," class",[540,8953,560],{"class":545},[540,8955,563],{"class":545},[540,8957,8958],{"class":566},"w-200px",[540,8960,563],{"class":545},[540,8962,572],{"class":545},[540,8964,8965,8968,8971,8974,8977],{"class":542,"line":924},[540,8966,8967],{"class":586},"        Loading... ",[540,8969,8970],{"class":545},"{{",[540,8972,8973],{"class":586}," progress ",[540,8975,8976],{"class":545},"}}",[540,8978,8979],{"class":586}," %\n",[540,8981,8982,8985,8988,8990,8992,8994,8997,8999,9002,9004],{"class":542,"line":932},[540,8983,8984],{"class":545},"        \u003C",[540,8986,8987],{"class":549},"i",[540,8989,8951],{"class":553},[540,8991,560],{"class":545},[540,8993,563],{"class":545},[540,8995,8996],{"class":566},"i-ic-twotone-catching-pokemon animate-rotate-in",[540,8998,563],{"class":545},[540,9000,9001],{"class":545},">\u003C/",[540,9003,8987],{"class":549},[540,9005,572],{"class":545},[540,9007,9008,9011,9013],{"class":542,"line":950},[540,9009,9010],{"class":545},"      \u003C/",[540,9012,8948],{"class":549},[540,9014,572],{"class":545},[540,9016,9017,9019,9021],{"class":542,"line":977},[540,9018,4128],{"class":545},[540,9020,8948],{"class":549},[540,9022,572],{"class":545},[540,9024,9025,9027,9030],{"class":542,"line":983},[540,9026,1009],{"class":545},[540,9028,9029],{"class":549},"Transition",[540,9031,572],{"class":545},[540,9033,9034,9036,9038,9040,9042,9044,9047,9049],{"class":542,"line":1006},[540,9035,690],{"class":545},[540,9037,846],{"class":549},[540,9039,5254],{"class":553},[540,9041,560],{"class":545},[540,9043,563],{"class":545},[540,9045,9046],{"class":566},"realistic",[540,9048,563],{"class":545},[540,9050,572],{"class":545},[540,9052,9053,9055,9057,9059,9061,9063,9065,9067,9069,9071,9073,9075,9077,9079,9081],{"class":542,"line":1016},[540,9054,865],{"class":545},[540,9056,868],{"class":549},[540,9058,708],{"class":545},[540,9060,873],{"class":553},[540,9062,560],{"class":545},[540,9064,563],{"class":545},[540,9066,880],{"class":545},[540,9068,2495],{"class":883},[540,9070,887],{"class":545},[540,9072,2495],{"class":883},[540,9074,887],{"class":545},[540,9076,2495],{"class":883},[540,9078,898],{"class":545},[540,9080,563],{"class":545},[540,9082,728],{"class":545},[540,9084,9085,9087,9089],{"class":542,"line":3797},[540,9086,865],{"class":545},[540,9088,909],{"class":549},[540,9090,728],{"class":545},[540,9092,9093,9095,9097],{"class":542,"line":3798},[540,9094,865],{"class":545},[540,9096,5242],{"class":549},[540,9098,572],{"class":545},[540,9100,9101,9103],{"class":542,"line":3799},[540,9102,4097],{"class":545},[540,9104,9105],{"class":549},"Environment\n",[540,9107,9108],{"class":542,"line":4085},[540,9109,9110],{"class":553},"        background\n",[540,9112,9113,9115,9118,9120,9122,9125],{"class":542,"line":4094},[540,9114,6968],{"class":545},[540,9116,9117],{"class":553},"files",[540,9119,560],{"class":545},[540,9121,563],{"class":545},[540,9123,9124],{"class":586},"environmentFiles",[540,9126,947],{"class":545},[540,9128,9129,9132,9134,9136,9139],{"class":542,"line":4104},[540,9130,9131],{"class":553},"        path",[540,9133,560],{"class":545},[540,9135,563],{"class":545},[540,9137,9138],{"class":566},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[540,9140,947],{"class":545},[540,9142,9143],{"class":542,"line":4125},[540,9144,6995],{"class":545},[540,9146,9147,9149,9151],{"class":542,"line":3800},[540,9148,4128],{"class":545},[540,9150,5242],{"class":549},[540,9152,572],{"class":545},[540,9154,9155,9157,9159],{"class":542,"line":4144},[540,9156,1009],{"class":545},[540,9158,846],{"class":549},[540,9160,572],{"class":545},[540,9162,9163,9165,9167],{"class":542,"line":4891},[540,9164,665],{"class":545},[540,9166,682],{"class":549},[540,9168,572],{"class":545},[8539,9170,9171],{"type":8541},[512,9172,9173,9174,9179],{},"This component use top level await. Please check the ",[1034,9175,9178],{"href":9176,"rel":9177},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1038],"Suspense API"," for more info",[521,9181,1124],{"id":1123},[1126,9183,9184,9194],{},[1129,9185,9186],{},[1132,9187,9188,9190,9192],{},[1135,9189,1138],{"align":1137},[1135,9191,1141],{"align":1137},[1135,9193,1144],{"align":1137},[1146,9195,9196,9209,9222],{},[1132,9197,9198,9202,9206],{},[1151,9199,9200],{"align":1137},[537,9201,8921],{},[1151,9203,9204],{"align":1137},[537,9205,1202],{},[1151,9207,9208],{"align":1137},"Whether all items have finished loading",[1132,9210,9211,9215,9219],{},[1151,9212,9213],{"align":1137},[537,9214,1212],{},[1151,9216,9217],{"align":1137},[537,9218,1217],{},[1151,9220,9221],{"align":1137},"Loading progress as percentage (0-100)",[1132,9223,9224,9229,9234],{},[1151,9225,9226],{"align":1137},[537,9227,9228],{},"items",[1151,9230,9231],{"align":1137},[537,9232,9233],{},"Array",[1151,9235,9236],{"align":1137},"Array of loading items with their status",[9238,9239,9240],"prose-warning",{},[512,9241,9242,9243,9248,9249,9179],{},"This component use top level await it needs to be wrapped on a ",[1034,9244,9246],{"href":9176,"rel":9245},[1038],[537,9247,5242],{},". Please check the ",[1034,9250,9252],{"href":9176,"rel":9251},[1038],[537,9253,9178],{},[1419,9255,9256],{},"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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":484,"searchDepth":485,"depth":486,"links":9258},[9259,9260],{"id":523,"depth":486,"text":15},{"id":1123,"depth":486,"text":1124},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":149,"description":9261},"gZhXorzaJ3dTEQJ4uc1arATdnRGEw61UJXrQQOhhIV4",{"id":9266,"title":153,"body":9267,"description":9889,"extension":489,"links":490,"meta":9890,"navigation":492,"path":154,"seo":9891,"stem":155,"__hash__":9892},"docs/2.api/3.loaders/use-video-texture.md",{"type":477,"value":9268,"toc":9885},[9269,9274,9277,9284,9286,9767,9769,9873,9882],[506,9270,9271],{},[9272,9273],"loaders-use-video-texture",{},[512,9275,9276],{},"A composable to easily use videos as textures in your meshes.",[512,9278,9279,9280],{},"This composable is based on the Drei ",[1034,9281,153],{"href":9282,"rel":9283},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1038],[521,9285,15],{"id":523},[525,9287,9288,9530],{},[528,9289,9291],{"className":530,"code":9290,"filename":741,"language":535,"meta":484,"style":484},"\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",[537,9292,9293,9313,9331,9349,9363,9371,9375,9383,9401,9408,9435,9462,9466,9474,9482,9490,9498,9506,9514,9522],{"__ignoreMap":484},[540,9294,9295,9297,9299,9301,9303,9305,9307,9309,9311],{"class":542,"line":485},[540,9296,546],{"class":545},[540,9298,550],{"class":549},[540,9300,554],{"class":553},[540,9302,557],{"class":553},[540,9304,560],{"class":545},[540,9306,563],{"class":545},[540,9308,567],{"class":566},[540,9310,563],{"class":545},[540,9312,572],{"class":545},[540,9314,9315,9317,9319,9321,9323,9325,9327,9329],{"class":542,"line":486},[540,9316,580],{"class":579},[540,9318,583],{"class":545},[540,9320,772],{"class":586},[540,9322,590],{"class":545},[540,9324,593],{"class":579},[540,9326,596],{"class":545},[540,9328,599],{"class":566},[540,9330,602],{"class":545},[540,9332,9333,9335,9337,9339,9341,9343,9345,9347],{"class":542,"line":605},[540,9334,580],{"class":579},[540,9336,583],{"class":545},[540,9338,791],{"class":586},[540,9340,590],{"class":545},[540,9342,593],{"class":579},[540,9344,596],{"class":545},[540,9346,800],{"class":566},[540,9348,602],{"class":545},[540,9350,9351,9353,9355,9357,9359,9361],{"class":542,"line":611},[540,9352,580],{"class":579},[540,9354,809],{"class":586},[540,9356,812],{"class":579},[540,9358,596],{"class":545},[540,9360,817],{"class":566},[540,9362,602],{"class":545},[540,9364,9365,9367,9369],{"class":542,"line":534},[540,9366,665],{"class":545},[540,9368,550],{"class":549},[540,9370,572],{"class":545},[540,9372,9373],{"class":542,"line":662},[540,9374,608],{"emptyLinePlaceholder":492},[540,9376,9377,9379,9381],{"class":542,"line":672},[540,9378,546],{"class":545},[540,9380,682],{"class":549},[540,9382,572],{"class":545},[540,9384,9385,9387,9389,9391,9393,9395,9397,9399],{"class":542,"line":677},[540,9386,690],{"class":545},[540,9388,846],{"class":549},[540,9390,849],{"class":553},[540,9392,560],{"class":545},[540,9394,563],{"class":545},[540,9396,6199],{"class":566},[540,9398,563],{"class":545},[540,9400,572],{"class":545},[540,9402,9403,9405],{"class":542,"line":687},[540,9404,865],{"class":545},[540,9406,9407],{"class":549},"TresPerspectiveCamera\n",[540,9409,9410,9412,9414,9416,9418,9420,9422,9424,9426,9428,9431,9433],{"class":542,"line":731},[540,9411,935],{"class":545},[540,9413,873],{"class":553},[540,9415,560],{"class":545},[540,9417,563],{"class":545},[540,9419,880],{"class":545},[540,9421,1976],{"class":883},[540,9423,887],{"class":545},[540,9425,895],{"class":883},[540,9427,887],{"class":545},[540,9429,9430],{"class":883},"9",[540,9432,898],{"class":545},[540,9434,947],{"class":545},[540,9436,9437,9439,9442,9444,9446,9448,9450,9452,9454,9456,9458,9460],{"class":542,"line":914},[540,9438,935],{"class":545},[540,9440,9441],{"class":553},"look-at",[540,9443,560],{"class":545},[540,9445,563],{"class":545},[540,9447,880],{"class":545},[540,9449,1976],{"class":883},[540,9451,887],{"class":545},[540,9453,999],{"class":883},[540,9455,887],{"class":545},[540,9457,1976],{"class":883},[540,9459,898],{"class":545},[540,9461,947],{"class":545},[540,9463,9464],{"class":542,"line":924},[540,9465,980],{"class":545},[540,9467,9468,9470,9472],{"class":542,"line":932},[540,9469,865],{"class":545},[540,9471,909],{"class":549},[540,9473,728],{"class":545},[540,9475,9476,9478,9480],{"class":542,"line":950},[540,9477,865],{"class":545},[540,9479,5242],{"class":549},[540,9481,572],{"class":545},[540,9483,9484,9486,9488],{"class":542,"line":977},[540,9485,4097],{"class":545},[540,9487,919],{"class":549},[540,9489,728],{"class":545},[540,9491,9492,9494,9496],{"class":542,"line":983},[540,9493,4128],{"class":545},[540,9495,5242],{"class":549},[540,9497,572],{"class":545},[540,9499,9500,9502,9504],{"class":542,"line":1006},[540,9501,865],{"class":545},[540,9503,5341],{"class":549},[540,9505,728],{"class":545},[540,9507,9508,9510,9512],{"class":542,"line":1016},[540,9509,865],{"class":545},[540,9511,988],{"class":549},[540,9513,728],{"class":545},[540,9515,9516,9518,9520],{"class":542,"line":3797},[540,9517,1009],{"class":545},[540,9519,846],{"class":549},[540,9521,572],{"class":545},[540,9523,9524,9526,9528],{"class":542,"line":3798},[540,9525,665],{"class":545},[540,9527,682],{"class":549},[540,9529,572],{"class":545},[528,9531,9535],{"className":530,"code":9532,"filename":9533,"highlights":9534,"language":535,"meta":484,"style":484},"\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",[605,677,932],[537,9536,9537,9557,9575,9600,9604,9619,9630,9643,9677,9685,9689,9697,9730,9751,9759],{"__ignoreMap":484},[540,9538,9539,9541,9543,9545,9547,9549,9551,9553,9555],{"class":542,"line":485},[540,9540,546],{"class":545},[540,9542,550],{"class":549},[540,9544,554],{"class":553},[540,9546,557],{"class":553},[540,9548,560],{"class":545},[540,9550,563],{"class":545},[540,9552,567],{"class":566},[540,9554,563],{"class":545},[540,9556,572],{"class":545},[540,9558,9559,9561,9563,9565,9567,9569,9571,9573],{"class":542,"line":486},[540,9560,580],{"class":579},[540,9562,583],{"class":545},[540,9564,7562],{"class":586},[540,9566,590],{"class":545},[540,9568,593],{"class":579},[540,9570,596],{"class":545},[540,9572,535],{"class":566},[540,9574,602],{"class":545},[540,9576,9578,9580,9582,9585,9587,9590,9592,9594,9596,9598],{"class":9577,"line":605},[542,576],[540,9579,580],{"class":579},[540,9581,583],{"class":545},[540,9583,9584],{"class":586}," Sphere",[540,9586,639],{"class":545},[540,9588,9589],{"class":586}," useVideoTexture",[540,9591,590],{"class":545},[540,9593,593],{"class":579},[540,9595,596],{"class":545},[540,9597,599],{"class":566},[540,9599,602],{"class":545},[540,9601,9602],{"class":542,"line":611},[540,9603,608],{"emptyLinePlaceholder":492},[540,9605,9606,9608,9611,9613,9615,9617],{"class":542,"line":534},[540,9607,614],{"class":553},[540,9609,9610],{"class":586}," videoPath ",[540,9612,560],{"class":545},[540,9614,596],{"class":545},[540,9616,2251],{"class":566},[540,9618,602],{"class":545},[540,9620,9621,9623,9625,9628],{"class":542,"line":662},[540,9622,2258],{"class":545},[540,9624,596],{"class":545},[540,9626,9627],{"class":566},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[540,9629,602],{"class":545},[540,9631,9632,9634,9637,9639,9641],{"class":542,"line":672},[540,9633,614],{"class":553},[540,9635,9636],{"class":586}," texture ",[540,9638,560],{"class":545},[540,9640,7562],{"class":656},[540,9642,1923],{"class":586},[540,9644,9646,9648,9650,9653,9655,9657,9659,9662,9664,9666,9669,9671,9673,9675],{"class":9645,"line":677},[542,576],[540,9647,3649],{"class":586},[540,9649,1376],{"class":545},[540,9651,9652],{"class":586},"value ",[540,9654,560],{"class":545},[540,9656,8824],{"class":579},[540,9658,9589],{"class":656},[540,9660,9661],{"class":586},"(videoPath",[540,9663,639],{"class":545},[540,9665,583],{"class":545},[540,9667,9668],{"class":549}," loop",[540,9670,1111],{"class":545},[540,9672,5864],{"class":1114},[540,9674,590],{"class":545},[540,9676,1120],{"class":586},[540,9678,9679,9681,9683],{"class":542,"line":687},[540,9680,665],{"class":545},[540,9682,550],{"class":549},[540,9684,572],{"class":545},[540,9686,9687],{"class":542,"line":731},[540,9688,608],{"emptyLinePlaceholder":492},[540,9690,9691,9693,9695],{"class":542,"line":914},[540,9692,546],{"class":545},[540,9694,682],{"class":549},[540,9696,572],{"class":545},[540,9698,9699,9702,9704,9706,9708,9710,9712,9714,9716,9718,9720,9722,9724,9726,9728],{"class":542,"line":924},[540,9700,9701],{"class":545},"   \u003C",[540,9703,261],{"class":549},[540,9705,708],{"class":545},[540,9707,873],{"class":553},[540,9709,560],{"class":545},[540,9711,563],{"class":545},[540,9713,880],{"class":545},[540,9715,1976],{"class":883},[540,9717,887],{"class":545},[540,9719,890],{"class":883},[540,9721,887],{"class":545},[540,9723,1976],{"class":883},[540,9725,898],{"class":545},[540,9727,563],{"class":545},[540,9729,572],{"class":545},[540,9731,9733,9735,9737,9739,9741,9743,9745,9747,9749],{"class":9732,"line":932},[542,576],[540,9734,4097],{"class":545},[540,9736,6047],{"class":549},[540,9738,708],{"class":545},[540,9740,3642],{"class":553},[540,9742,560],{"class":545},[540,9744,563],{"class":545},[540,9746,3649],{"class":586},[540,9748,563],{"class":545},[540,9750,728],{"class":545},[540,9752,9753,9755,9757],{"class":542,"line":950},[540,9754,4128],{"class":545},[540,9756,261],{"class":549},[540,9758,572],{"class":545},[540,9760,9761,9763,9765],{"class":542,"line":977},[540,9762,665],{"class":545},[540,9764,682],{"class":549},[540,9766,572],{"class":545},[521,9768,2065],{"id":2064},[1126,9770,9771,9781],{},[1129,9772,9773],{},[1132,9774,9775,9777,9779],{},[1135,9776,2074],{"align":1137},[1135,9778,1144],{"align":1137},[1135,9780,1252],{},[1146,9782,9783,9796,9810,9825,9837,9849,9861],{},[1132,9784,9785,9789,9792],{},[1151,9786,9787],{"align":1137},[537,9788,8388],{},[1151,9790,9791],{"align":1137},"Path to the video.",[1151,9793,9794],{},[537,9795,2094],{},[1132,9797,9798,9803,9805],{},[1151,9799,9800],{"align":1137},[537,9801,9802],{},"unsuspend",[1151,9804,2089],{"align":1137},[1151,9806,9807],{},[537,9808,9809],{},"loadedmetadata",[1132,9811,9812,9817,9820],{},[1151,9813,9814],{"align":1137},[537,9815,9816],{},"crossOrigin",[1151,9818,9819],{"align":1137},"Whether to use CORS to fetch the related video.",[1151,9821,9822],{},[537,9823,9824],{},"Anonymous",[1132,9826,9827,9832,9835],{},[1151,9828,9829],{"align":1137},[537,9830,9831],{},"muted",[1151,9833,9834],{"align":1137},"Whether to set the audio silenced.",[1151,9836,7567],{},[1132,9838,9839,9844,9847],{},[1151,9840,9841],{"align":1137},[537,9842,9843],{},"loop",[1151,9845,9846],{"align":1137},"Automatically seek back to the start upon reaching the end of the video.",[1151,9848,7567],{},[1132,9850,9851,9856,9859],{},[1151,9852,9853],{"align":1137},[537,9854,9855],{},"start",[1151,9857,9858],{"align":1137},"To play to the video once loaded or not.",[1151,9860,7567],{},[1132,9862,9863,9868,9871],{},[1151,9864,9865],{"align":1137},[537,9866,9867],{},"playsInline",[1151,9869,9870],{"align":1137},"To be play the video inline or not.",[1151,9872,7567],{},[5674,9874,9875],{},[5677,9876,9877,9878,9881],{},"Any other attribute for a ",[537,9879,9880],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1419,9883,9884],{},"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 .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 .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":484,"searchDepth":485,"depth":486,"links":9886},[9887,9888],{"id":523,"depth":486,"text":15},{"id":2064,"depth":486,"text":2065},"A composable to load video textures in TresJS scenes.",{},{"title":153,"description":9889},"B0IudWGxB6H8-Wl16oRdCL8g07LFjZcBL6tZkeTIFLM",1781273441529]