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