[{"data":1,"prerenderedAt":9830},["ShallowReactive",2],{"navigation":3,"/api/loaders":498,"/api/loaders-surround":519,"loaders-list":524},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":127,"body":500,"description":512,"extension":513,"links":514,"meta":515,"navigation":516,"path":128,"seo":517,"stem":129,"__hash__":518},"docs/2.api/3.loaders/index.md",{"type":501,"value":502,"toc":507},"minimark",[503],[504,505],"api-list",{"list-name":506},"loaders-list",{"title":508,"searchDepth":509,"depth":510,"links":511},"",1,2,[],"Asset loading composables for TresJS scenes.","md",null,{},true,{"title":127,"description":512},"1deHEv7mVomRvNpTEqtIO8-vwuq08C4YMNS233eCd28",[520,522],{"title":123,"path":124,"stem":125,"description":521,"children":-1},"Set of three gizmos that can be used to translate, rotate and scale objects",{"title":133,"path":134,"stem":135,"description":523,"children":-1},"A composable to load GLTF models in TresJS scenes.",[525,1696,2489,3110,3751,4407,5889,8763,9244],{"id":526,"title":133,"body":527,"description":523,"extension":513,"links":514,"meta":1693,"navigation":516,"path":134,"seo":1694,"stem":135,"__hash__":1695},"docs/2.api/3.loaders/1.use-gltf.md",{"type":501,"value":528,"toc":1685},[529,535,544,548,1004,1022,1102,1106,1253,1257,1330,1334,1337,1433,1436,1440,1457,1621,1631,1635,1644,1675,1681],[530,531,532],"scene-wrapper",{},[533,534],"loaders-gltf",{},[536,537,538,539,543],"p",{},"A composable that allows you to easily load glb/glTF models into your ",[540,541,542],"strong",{},"TresJS"," scene.",[545,546,15],"h2",{"id":547},"usage",[549,550,551,754],"code-group",{},[552,553,560],"pre",{"className":554,"code":555,"filename":556,"highlights":557,"language":559,"meta":508,"style":508},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\nconst { state, nodes, materials } = useGLTF(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state?.scene\" />\n\u003C/template>\n","TheModel.vue",[510,558],5,"vue",[561,562,563,597,627,633,651,684,694,699,709,745],"code",{"__ignoreMap":508},[564,565,567,571,575,579,582,585,588,592,594],"span",{"class":566,"line":509},"line",[564,568,570],{"class":569},"sMK4o","\u003C",[564,572,574],{"class":573},"swJcz","script",[564,576,578],{"class":577},"spNyl"," setup",[564,580,581],{"class":577}," lang",[564,583,584],{"class":569},"=",[564,586,587],{"class":569},"\"",[564,589,591],{"class":590},"sfazB","ts",[564,593,587],{"class":569},[564,595,596],{"class":569},">\n",[564,598,601,605,608,612,615,618,621,624],{"class":599,"line":510},[566,600],"highlight",[564,602,604],{"class":603},"s7zQu","import",[564,606,607],{"class":569}," {",[564,609,611],{"class":610},"sTEyZ"," useGLTF",[564,613,614],{"class":569}," }",[564,616,617],{"class":603}," from",[564,619,620],{"class":569}," '",[564,622,623],{"class":590},"@tresjs/cientos",[564,625,626],{"class":569},"'\n",[564,628,630],{"class":566,"line":629},3,[564,631,632],{"emptyLinePlaceholder":516},"\n",[564,634,636,639,642,644,646,649],{"class":566,"line":635},4,[564,637,638],{"class":577},"const",[564,640,641],{"class":610}," path ",[564,643,584],{"class":569},[564,645,620],{"class":569},[564,647,648],{"class":590},"./blender-cube.glb",[564,650,626],{"class":569},[564,652,654,656,658,661,664,667,669,672,675,678,681],{"class":653,"line":558},[566,600],[564,655,638],{"class":577},[564,657,607],{"class":569},[564,659,660],{"class":610}," state",[564,662,663],{"class":569},",",[564,665,666],{"class":610}," nodes",[564,668,663],{"class":569},[564,670,671],{"class":610}," materials ",[564,673,674],{"class":569},"}",[564,676,677],{"class":569}," =",[564,679,611],{"class":680},"s2Zo4",[564,682,683],{"class":610},"(path)\n",[564,685,687,690,692],{"class":566,"line":686},6,[564,688,689],{"class":569},"\u003C/",[564,691,574],{"class":573},[564,693,596],{"class":569},[564,695,697],{"class":566,"line":696},7,[564,698,632],{"emptyLinePlaceholder":516},[564,700,702,704,707],{"class":566,"line":701},8,[564,703,570],{"class":569},[564,705,706],{"class":573},"template",[564,708,596],{"class":569},[564,710,712,715,718,721,723,725,728,730,733,735,737,740,742],{"class":566,"line":711},9,[564,713,714],{"class":569},"  \u003C",[564,716,717],{"class":573},"primitive",[564,719,720],{"class":577}," v-if",[564,722,584],{"class":569},[564,724,587],{"class":569},[564,726,727],{"class":590},"state",[564,729,587],{"class":569},[564,731,732],{"class":577}," :object",[564,734,584],{"class":569},[564,736,587],{"class":569},[564,738,739],{"class":590},"state?.scene",[564,741,587],{"class":569},[564,743,744],{"class":569}," />\n",[564,746,748,750,752],{"class":566,"line":747},10,[564,749,689],{"class":569},[564,751,706],{"class":573},[564,753,596],{"class":569},[552,755,758],{"className":554,"code":756,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#F78B3D\">\n    \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue",[561,759,760,780,799,819,836,844,848,856,877,899,908,918,926,942,957,963,985,995],{"__ignoreMap":508},[564,761,762,764,766,768,770,772,774,776,778],{"class":566,"line":509},[564,763,570],{"class":569},[564,765,574],{"class":573},[564,767,578],{"class":577},[564,769,581],{"class":577},[564,771,584],{"class":569},[564,773,587],{"class":569},[564,775,591],{"class":590},[564,777,587],{"class":569},[564,779,596],{"class":569},[564,781,782,784,786,789,791,793,795,797],{"class":566,"line":510},[564,783,604],{"class":603},[564,785,607],{"class":569},[564,787,788],{"class":610}," OrbitControls",[564,790,614],{"class":569},[564,792,617],{"class":603},[564,794,620],{"class":569},[564,796,623],{"class":590},[564,798,626],{"class":569},[564,800,801,803,805,808,810,812,814,817],{"class":566,"line":629},[564,802,604],{"class":603},[564,804,607],{"class":569},[564,806,807],{"class":610}," TresCanvas",[564,809,614],{"class":569},[564,811,617],{"class":603},[564,813,620],{"class":569},[564,815,816],{"class":590},"@tresjs/core",[564,818,626],{"class":569},[564,820,821,823,826,829,831,834],{"class":566,"line":635},[564,822,604],{"class":603},[564,824,825],{"class":610}," TheModel ",[564,827,828],{"class":603},"from",[564,830,620],{"class":569},[564,832,833],{"class":590},"./TheModel.vue",[564,835,626],{"class":569},[564,837,838,840,842],{"class":566,"line":558},[564,839,689],{"class":569},[564,841,574],{"class":573},[564,843,596],{"class":569},[564,845,846],{"class":566,"line":686},[564,847,632],{"emptyLinePlaceholder":516},[564,849,850,852,854],{"class":566,"line":696},[564,851,570],{"class":569},[564,853,706],{"class":573},[564,855,596],{"class":569},[564,857,858,860,863,866,868,870,873,875],{"class":566,"line":701},[564,859,714],{"class":569},[564,861,862],{"class":573},"TresCanvas",[564,864,865],{"class":577}," clear-color",[564,867,584],{"class":569},[564,869,587],{"class":569},[564,871,872],{"class":590},"#F78B3D",[564,874,587],{"class":569},[564,876,596],{"class":569},[564,878,879,882,885,888,890,892,895,897],{"class":566,"line":711},[564,880,881],{"class":569},"    \u003C",[564,883,884],{"class":573},"TresPerspectiveCamera",[564,886,887],{"class":577}," :position",[564,889,584],{"class":569},[564,891,587],{"class":569},[564,893,894],{"class":590},"[3, 2, 5]",[564,896,587],{"class":569},[564,898,744],{"class":569},[564,900,901,903,906],{"class":566,"line":747},[564,902,881],{"class":569},[564,904,905],{"class":573},"OrbitControls",[564,907,744],{"class":569},[564,909,911,913,916],{"class":566,"line":910},11,[564,912,881],{"class":569},[564,914,915],{"class":573},"TheModel",[564,917,744],{"class":569},[564,919,921,923],{"class":566,"line":920},12,[564,922,881],{"class":569},[564,924,925],{"class":573},"TresDirectionalLight\n",[564,927,929,932,934,936,939],{"class":566,"line":928},13,[564,930,931],{"class":577},"      :intensity",[564,933,584],{"class":569},[564,935,587],{"class":569},[564,937,938],{"class":590},"2",[564,940,941],{"class":569},"\"\n",[564,943,945,948,950,952,955],{"class":566,"line":944},14,[564,946,947],{"class":577},"      :position",[564,949,584],{"class":569},[564,951,587],{"class":569},[564,953,954],{"class":590},"[3, 3, 3]",[564,956,941],{"class":569},[564,958,960],{"class":566,"line":959},15,[564,961,962],{"class":569},"    />\n",[564,964,966,968,971,974,976,978,981,983],{"class":566,"line":965},16,[564,967,881],{"class":569},[564,969,970],{"class":573},"TresAmbientLight",[564,972,973],{"class":577}," :intensity",[564,975,584],{"class":569},[564,977,587],{"class":569},[564,979,980],{"class":590},"1",[564,982,587],{"class":569},[564,984,744],{"class":569},[564,986,988,991,993],{"class":566,"line":987},17,[564,989,990],{"class":569},"  \u003C/",[564,992,862],{"class":573},[564,994,596],{"class":569},[564,996,998,1000,1002],{"class":566,"line":997},18,[564,999,689],{"class":569},[564,1001,706],{"class":573},[564,1003,596],{"class":569},[536,1005,1006,1007,1009,1010,1013,1014,1021],{},"An advantage of using ",[561,1008,133],{}," is that you can pass a ",[561,1011,1012],{},"draco"," prop to enable ",[1015,1016,1020],"a",{"href":1017,"rel":1018},"https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader",[1019],"nofollow","Draco compression"," for the model. This will reduce the size of the model and improve performance.",[552,1023,1026],{"className":1024,"code":1025,"language":591,"meta":508,"style":508},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useGLTF } from '@tresjs/cientos'\n\nconst { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })\n",[561,1027,1028,1046,1050],{"__ignoreMap":508},[564,1029,1030,1032,1034,1036,1038,1040,1042,1044],{"class":566,"line":509},[564,1031,604],{"class":603},[564,1033,607],{"class":569},[564,1035,611],{"class":610},[564,1037,614],{"class":569},[564,1039,617],{"class":603},[564,1041,620],{"class":569},[564,1043,623],{"class":590},[564,1045,626],{"class":569},[564,1047,1048],{"class":566,"line":510},[564,1049,632],{"emptyLinePlaceholder":516},[564,1051,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1075,1078,1081,1083,1085,1087,1090,1093,1097,1099],{"class":566,"line":629},[564,1053,638],{"class":577},[564,1055,607],{"class":569},[564,1057,660],{"class":610},[564,1059,663],{"class":569},[564,1061,666],{"class":610},[564,1063,663],{"class":569},[564,1065,671],{"class":610},[564,1067,674],{"class":569},[564,1069,677],{"class":569},[564,1071,611],{"class":680},[564,1073,1074],{"class":610},"(",[564,1076,1077],{"class":569},"'",[564,1079,1080],{"class":590},"/models/AkuAku.gltf",[564,1082,1077],{"class":569},[564,1084,663],{"class":569},[564,1086,607],{"class":569},[564,1088,1089],{"class":573}," draco",[564,1091,1092],{"class":569},":",[564,1094,1096],{"class":1095},"sfNiH"," true",[564,1098,614],{"class":569},[564,1100,1101],{"class":610},")\n",[545,1103,1105],{"id":1104},"return-values","Return Values",[1107,1108,1109,1126],"table",{},[1110,1111,1112],"thead",{},[1113,1114,1115,1120,1123],"tr",{},[1116,1117,1119],"th",{"align":1118},"left","Name",[1116,1121,1122],{},"Type",[1116,1124,1125],{},"Description",[1127,1128,1129,1148,1163,1178,1193,1208,1223,1238],"tbody",{},[1113,1130,1131,1136,1141],{},[1132,1133,1134],"td",{"align":1118},[540,1135,727],{},[1132,1137,1138],{},[561,1139,1140],{},"Ref\u003CGLTF | null>",[1132,1142,1143,1144,1147],{},"The loaded GLTF, or ",[561,1145,1146],{},"null"," until it arrives",[1113,1149,1150,1155,1160],{},[1132,1151,1152],{"align":1118},[540,1153,1154],{},"nodes",[1132,1156,1157],{},[561,1158,1159],{},"ComputedRef\u003CTNodes>",[1132,1161,1162],{},"All nodes in the scene, keyed by name",[1113,1164,1165,1170,1175],{},[1132,1166,1167],{"align":1118},[540,1168,1169],{},"materials",[1132,1171,1172],{},[561,1173,1174],{},"ComputedRef\u003CTMaterials>",[1132,1176,1177],{},"All materials in the scene, keyed by name",[1113,1179,1180,1185,1190],{},[1132,1181,1182],{"align":1118},[540,1183,1184],{},"isLoading",[1132,1186,1187],{},[561,1188,1189],{},"Ref\u003Cboolean>",[1132,1191,1192],{},"Whether the model is currently loading",[1113,1194,1195,1200,1205],{},[1132,1196,1197],{"align":1118},[540,1198,1199],{},"error",[1132,1201,1202],{},[561,1203,1204],{},"Ref\u003Cunknown>",[1132,1206,1207],{},"Whatever the loader threw, if anything",[1113,1209,1210,1215,1220],{},[1132,1211,1212],{"align":1118},[540,1213,1214],{},"progress",[1132,1216,1217],{},[561,1218,1219],{},"{ loaded: number, total: number, percentage: number }",[1132,1221,1222],{},"Progress of the current load",[1113,1224,1225,1230,1235],{},[1132,1226,1227],{"align":1118},[540,1228,1229],{},"load",[1132,1231,1232],{},[561,1233,1234],{},"(path: string) => void",[1132,1236,1237],{},"Load a different model into the same state",[1113,1239,1240,1245,1250],{},[1132,1241,1242],{"align":1118},[540,1243,1244],{},"execute",[1132,1246,1247],{},[561,1248,1249],{},"(delay?: number) => Promise\u003CGLTF>",[1132,1251,1252],{},"Re-run the load",[545,1254,1256],{"id":1255},"options","Options",[1107,1258,1259,1272],{},[1110,1260,1261],{},[1113,1262,1263,1265,1267,1270],{},[1116,1264,1119],{"align":1118},[1116,1266,1122],{},[1116,1268,1269],{},"Default",[1116,1271,1125],{},[1127,1273,1274,1293,1313],{},[1113,1275,1276,1280,1285,1290],{},[1132,1277,1278],{"align":1118},[540,1279,1012],{},[1132,1281,1282],{},[561,1283,1284],{},"boolean",[1132,1286,1287],{},[561,1288,1289],{},"false",[1132,1291,1292],{},"Whether to enable Draco compression.",[1113,1294,1295,1300,1305,1310],{},[1132,1296,1297],{"align":1118},[540,1298,1299],{},"decoderPath",[1132,1301,1302],{},[561,1303,1304],{},"string",[1132,1306,1307],{},[561,1308,1309],{},"'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'",[1132,1311,1312],{},"Path to the Draco decoder.",[1113,1314,1315,1320,1325,1327],{},[1132,1316,1317],{"align":1118},[540,1318,1319],{},"traverse",[1132,1321,1322],{},[561,1323,1324],{},"Function",[1132,1326],{},[1132,1328,1329],{},"A traverse function applied to the scene upon loading the model.",[545,1331,1333],{"id":1332},"accessing-nodes-and-materials","Accessing Nodes and Materials",[536,1335,1336],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[552,1338,1340],{"className":1024,"code":1339,"language":591,"meta":508,"style":508},"const { nodes, materials } = useGLTF('/model.glb')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[561,1341,1342,1371,1375,1381,1403,1407,1412],{"__ignoreMap":508},[564,1343,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1367,1369],{"class":566,"line":509},[564,1345,638],{"class":577},[564,1347,607],{"class":569},[564,1349,666],{"class":610},[564,1351,663],{"class":569},[564,1353,671],{"class":610},[564,1355,674],{"class":569},[564,1357,677],{"class":569},[564,1359,611],{"class":680},[564,1361,1074],{"class":610},[564,1363,1077],{"class":569},[564,1365,1366],{"class":590},"/model.glb",[564,1368,1077],{"class":569},[564,1370,1101],{"class":610},[564,1372,1373],{"class":566,"line":510},[564,1374,632],{"emptyLinePlaceholder":516},[564,1376,1377],{"class":566,"line":629},[564,1378,1380],{"class":1379},"sHwdD","// Access a specific node\n",[564,1382,1383,1385,1388,1390,1392,1395,1398,1400],{"class":566,"line":635},[564,1384,638],{"class":577},[564,1386,1387],{"class":610}," mesh ",[564,1389,584],{"class":569},[564,1391,666],{"class":610},[564,1393,1394],{"class":569},".",[564,1396,1397],{"class":610},"value",[564,1399,1394],{"class":569},[564,1401,1402],{"class":610},"MeshName\n",[564,1404,1405],{"class":566,"line":558},[564,1406,632],{"emptyLinePlaceholder":516},[564,1408,1409],{"class":566,"line":686},[564,1410,1411],{"class":1379},"// Access a specific material\n",[564,1413,1414,1416,1419,1421,1424,1426,1428,1430],{"class":566,"line":696},[564,1415,638],{"class":577},[564,1417,1418],{"class":610}," material ",[564,1420,584],{"class":569},[564,1422,1423],{"class":610}," materials",[564,1425,1394],{"class":569},[564,1427,1397],{"class":610},[564,1429,1394],{"class":569},[564,1431,1432],{"class":610},"MaterialName\n",[536,1434,1435],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[545,1437,1439],{"id":1438},"typing-nodes-and-materials","Typing Nodes and Materials",[536,1441,1442,1443,1445,1446,1448,1449,1452,1453,1456],{},"The keys of ",[561,1444,1154],{}," and ",[561,1447,1169],{}," come from the file, so by default both are a loose record and\n",[561,1450,1451],{},"nodes.value.Body"," is an ",[561,1454,1455],{},"any",". Pass the shape of your model as generics to get them typed:",[552,1458,1460],{"className":1024,"code":1459,"language":591,"meta":508,"style":508},"import type { Mesh, MeshStandardMaterial } from 'three'\nimport { useGLTF } from '@tresjs/cientos'\n\ninterface ModelNodes { Body: Mesh }\ninterface ModelMaterials { Skin: MeshStandardMaterial }\n\nconst { nodes, materials } = useGLTF\u003CModelNodes, ModelMaterials>('/models/robot.glb')\n\nnodes.value.Body.geometry // Mesh, not any\n",[561,1461,1462,1490,1508,1512,1533,1551,1555,1596,1600],{"__ignoreMap":508},[564,1463,1464,1466,1469,1471,1474,1476,1479,1481,1483,1485,1488],{"class":566,"line":509},[564,1465,604],{"class":603},[564,1467,1468],{"class":603}," type",[564,1470,607],{"class":569},[564,1472,1473],{"class":610}," Mesh",[564,1475,663],{"class":569},[564,1477,1478],{"class":610}," MeshStandardMaterial",[564,1480,614],{"class":569},[564,1482,617],{"class":603},[564,1484,620],{"class":569},[564,1486,1487],{"class":590},"three",[564,1489,626],{"class":569},[564,1491,1492,1494,1496,1498,1500,1502,1504,1506],{"class":566,"line":510},[564,1493,604],{"class":603},[564,1495,607],{"class":569},[564,1497,611],{"class":610},[564,1499,614],{"class":569},[564,1501,617],{"class":603},[564,1503,620],{"class":569},[564,1505,623],{"class":590},[564,1507,626],{"class":569},[564,1509,1510],{"class":566,"line":629},[564,1511,632],{"emptyLinePlaceholder":516},[564,1513,1514,1517,1521,1523,1526,1528,1530],{"class":566,"line":635},[564,1515,1516],{"class":577},"interface",[564,1518,1520],{"class":1519},"sBMFI"," ModelNodes",[564,1522,607],{"class":569},[564,1524,1525],{"class":573}," Body",[564,1527,1092],{"class":569},[564,1529,1473],{"class":1519},[564,1531,1532],{"class":569}," }\n",[564,1534,1535,1537,1540,1542,1545,1547,1549],{"class":566,"line":558},[564,1536,1516],{"class":577},[564,1538,1539],{"class":1519}," ModelMaterials",[564,1541,607],{"class":569},[564,1543,1544],{"class":573}," Skin",[564,1546,1092],{"class":569},[564,1548,1478],{"class":1519},[564,1550,1532],{"class":569},[564,1552,1553],{"class":566,"line":686},[564,1554,632],{"emptyLinePlaceholder":516},[564,1556,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1578,1580,1582,1585,1587,1589,1592,1594],{"class":566,"line":696},[564,1558,638],{"class":577},[564,1560,607],{"class":569},[564,1562,666],{"class":610},[564,1564,663],{"class":569},[564,1566,671],{"class":610},[564,1568,674],{"class":569},[564,1570,677],{"class":569},[564,1572,611],{"class":680},[564,1574,570],{"class":569},[564,1576,1577],{"class":1519},"ModelNodes",[564,1579,663],{"class":569},[564,1581,1539],{"class":1519},[564,1583,1584],{"class":569},">",[564,1586,1074],{"class":610},[564,1588,1077],{"class":569},[564,1590,1591],{"class":590},"/models/robot.glb",[564,1593,1077],{"class":569},[564,1595,1101],{"class":610},[564,1597,1598],{"class":566,"line":701},[564,1599,632],{"emptyLinePlaceholder":516},[564,1601,1602,1604,1606,1608,1610,1613,1615,1618],{"class":566,"line":711},[564,1603,1154],{"class":610},[564,1605,1394],{"class":569},[564,1607,1397],{"class":610},[564,1609,1394],{"class":569},[564,1611,1612],{"class":610},"Body",[564,1614,1394],{"class":569},[564,1616,1617],{"class":610},"geometry ",[564,1619,1620],{"class":1379},"// Mesh, not any\n",[1622,1623,1624],"prose-note",{},[536,1625,1626,1627,1630],{},"These interfaces are a claim about the model, not a proof: nothing checks them against the file at\nruntime. ",[561,1628,1629],{},"tres gltf"," reads them off the model and writes them for you, which is the only version\nof this that cannot drift.",[545,1632,1634],{"id":1633},"generating-a-component-instead","Generating a Component Instead",[536,1636,1637,1638,1643],{},"For a whole model, writing an element per node by hand does not scale. The\n",[1015,1639,1642],{"href":1640,"rel":1641},"https://docs.tresjs.org/cli/gltf",[1019],"TresJS CLI"," generates that component from the model itself,\ntyped, with a slot for every node so your overrides survive the next export:",[552,1645,1649],{"className":1646,"code":1647,"language":1648,"meta":508,"style":508},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx @tresjs/cli gltf public/models/robot.glb\n# ✔ src/models/Robot.gen.vue\n#   3 slots: Head, Body, Base\n","bash",[561,1650,1651,1665,1670],{"__ignoreMap":508},[564,1652,1653,1656,1659,1662],{"class":566,"line":509},[564,1654,1655],{"class":1519},"npx",[564,1657,1658],{"class":590}," @tresjs/cli",[564,1660,1661],{"class":590}," gltf",[564,1663,1664],{"class":590}," public/models/robot.glb\n",[564,1666,1667],{"class":566,"line":510},[564,1668,1669],{"class":1379},"# ✔ src/models/Robot.gen.vue\n",[564,1671,1672],{"class":566,"line":629},[564,1673,1674],{"class":1379},"#   3 slots: Head, Body, Base\n",[1676,1677,1678],"read-more",{"to":20},[536,1679,1680],{},"The three ways to load a model, and when to reach for each one.",[1682,1683,1684],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":508,"searchDepth":509,"depth":510,"links":1686},[1687,1688,1689,1690,1691,1692],{"id":547,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{"id":1255,"depth":510,"text":1256},{"id":1332,"depth":510,"text":1333},{"id":1438,"depth":510,"text":1439},{"id":1633,"depth":510,"text":1634},{},{"title":133,"description":523},"mVv2TZo5-pqLqIwJ-gYXHQx7OoCZ9HEO3CnPATpAwMA",{"id":1697,"title":137,"body":1698,"description":2485,"extension":513,"links":514,"meta":2486,"navigation":516,"path":138,"seo":2487,"stem":139,"__hash__":2488},"docs/2.api/3.loaders/2.gltf-model.md",{"type":501,"value":1699,"toc":2479},[1700,1704,1716,1718,2047,2051,2058,2318,2322,2419,2435,2439,2457,2472,2476],[530,1701,1702],{},[533,1703],{},[536,1705,1706,1707,1709,1710,1715],{},"The ",[561,1708,137],{}," component is a wrapper around ",[1015,1711,1713],{"href":1712},"./use-gltf",[561,1714,133],{}," composable and accepts the same options as props.",[545,1717,15],{"id":547},[549,1719,1720,1833],{},[552,1721,1724],{"className":554,"code":1722,"filename":556,"highlights":1723,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\n\nconst path = './blender-cube.glb'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel :path=\"path\" />\n\u003C/template>\n",[510,701],[561,1725,1726,1746,1766,1770,1784,1792,1796,1804,1825],{"__ignoreMap":508},[564,1727,1728,1730,1732,1734,1736,1738,1740,1742,1744],{"class":566,"line":509},[564,1729,570],{"class":569},[564,1731,574],{"class":573},[564,1733,578],{"class":577},[564,1735,581],{"class":577},[564,1737,584],{"class":569},[564,1739,587],{"class":569},[564,1741,591],{"class":590},[564,1743,587],{"class":569},[564,1745,596],{"class":569},[564,1747,1749,1751,1753,1756,1758,1760,1762,1764],{"class":1748,"line":510},[566,600],[564,1750,604],{"class":603},[564,1752,607],{"class":569},[564,1754,1755],{"class":610}," GLTFModel",[564,1757,614],{"class":569},[564,1759,617],{"class":603},[564,1761,620],{"class":569},[564,1763,623],{"class":590},[564,1765,626],{"class":569},[564,1767,1768],{"class":566,"line":629},[564,1769,632],{"emptyLinePlaceholder":516},[564,1771,1772,1774,1776,1778,1780,1782],{"class":566,"line":635},[564,1773,638],{"class":577},[564,1775,641],{"class":610},[564,1777,584],{"class":569},[564,1779,620],{"class":569},[564,1781,648],{"class":590},[564,1783,626],{"class":569},[564,1785,1786,1788,1790],{"class":566,"line":558},[564,1787,689],{"class":569},[564,1789,574],{"class":573},[564,1791,596],{"class":569},[564,1793,1794],{"class":566,"line":686},[564,1795,632],{"emptyLinePlaceholder":516},[564,1797,1798,1800,1802],{"class":566,"line":696},[564,1799,570],{"class":569},[564,1801,706],{"class":573},[564,1803,596],{"class":569},[564,1805,1807,1809,1811,1814,1816,1818,1821,1823],{"class":1806,"line":701},[566,600],[564,1808,714],{"class":569},[564,1810,137],{"class":573},[564,1812,1813],{"class":577}," :path",[564,1815,584],{"class":569},[564,1817,587],{"class":569},[564,1819,1820],{"class":590},"path",[564,1822,587],{"class":569},[564,1824,744],{"class":569},[564,1826,1827,1829,1831],{"class":566,"line":711},[564,1828,689],{"class":569},[564,1830,706],{"class":573},[564,1832,596],{"class":569},[552,1834,1835],{"className":554,"code":756,"filename":757,"language":559,"meta":508,"style":508},[561,1836,1837,1857,1875,1893,1907,1915,1919,1927,1945,1963,1971,1979,1985,1997,2009,2013,2031,2039],{"__ignoreMap":508},[564,1838,1839,1841,1843,1845,1847,1849,1851,1853,1855],{"class":566,"line":509},[564,1840,570],{"class":569},[564,1842,574],{"class":573},[564,1844,578],{"class":577},[564,1846,581],{"class":577},[564,1848,584],{"class":569},[564,1850,587],{"class":569},[564,1852,591],{"class":590},[564,1854,587],{"class":569},[564,1856,596],{"class":569},[564,1858,1859,1861,1863,1865,1867,1869,1871,1873],{"class":566,"line":510},[564,1860,604],{"class":603},[564,1862,607],{"class":569},[564,1864,788],{"class":610},[564,1866,614],{"class":569},[564,1868,617],{"class":603},[564,1870,620],{"class":569},[564,1872,623],{"class":590},[564,1874,626],{"class":569},[564,1876,1877,1879,1881,1883,1885,1887,1889,1891],{"class":566,"line":629},[564,1878,604],{"class":603},[564,1880,607],{"class":569},[564,1882,807],{"class":610},[564,1884,614],{"class":569},[564,1886,617],{"class":603},[564,1888,620],{"class":569},[564,1890,816],{"class":590},[564,1892,626],{"class":569},[564,1894,1895,1897,1899,1901,1903,1905],{"class":566,"line":635},[564,1896,604],{"class":603},[564,1898,825],{"class":610},[564,1900,828],{"class":603},[564,1902,620],{"class":569},[564,1904,833],{"class":590},[564,1906,626],{"class":569},[564,1908,1909,1911,1913],{"class":566,"line":558},[564,1910,689],{"class":569},[564,1912,574],{"class":573},[564,1914,596],{"class":569},[564,1916,1917],{"class":566,"line":686},[564,1918,632],{"emptyLinePlaceholder":516},[564,1920,1921,1923,1925],{"class":566,"line":696},[564,1922,570],{"class":569},[564,1924,706],{"class":573},[564,1926,596],{"class":569},[564,1928,1929,1931,1933,1935,1937,1939,1941,1943],{"class":566,"line":701},[564,1930,714],{"class":569},[564,1932,862],{"class":573},[564,1934,865],{"class":577},[564,1936,584],{"class":569},[564,1938,587],{"class":569},[564,1940,872],{"class":590},[564,1942,587],{"class":569},[564,1944,596],{"class":569},[564,1946,1947,1949,1951,1953,1955,1957,1959,1961],{"class":566,"line":711},[564,1948,881],{"class":569},[564,1950,884],{"class":573},[564,1952,887],{"class":577},[564,1954,584],{"class":569},[564,1956,587],{"class":569},[564,1958,894],{"class":590},[564,1960,587],{"class":569},[564,1962,744],{"class":569},[564,1964,1965,1967,1969],{"class":566,"line":747},[564,1966,881],{"class":569},[564,1968,905],{"class":573},[564,1970,744],{"class":569},[564,1972,1973,1975,1977],{"class":566,"line":910},[564,1974,881],{"class":569},[564,1976,915],{"class":573},[564,1978,744],{"class":569},[564,1980,1981,1983],{"class":566,"line":920},[564,1982,881],{"class":569},[564,1984,925],{"class":573},[564,1986,1987,1989,1991,1993,1995],{"class":566,"line":928},[564,1988,931],{"class":577},[564,1990,584],{"class":569},[564,1992,587],{"class":569},[564,1994,938],{"class":590},[564,1996,941],{"class":569},[564,1998,1999,2001,2003,2005,2007],{"class":566,"line":944},[564,2000,947],{"class":577},[564,2002,584],{"class":569},[564,2004,587],{"class":569},[564,2006,954],{"class":590},[564,2008,941],{"class":569},[564,2010,2011],{"class":566,"line":959},[564,2012,962],{"class":569},[564,2014,2015,2017,2019,2021,2023,2025,2027,2029],{"class":566,"line":965},[564,2016,881],{"class":569},[564,2018,970],{"class":573},[564,2020,973],{"class":577},[564,2022,584],{"class":569},[564,2024,587],{"class":569},[564,2026,980],{"class":590},[564,2028,587],{"class":569},[564,2030,744],{"class":569},[564,2032,2033,2035,2037],{"class":566,"line":987},[564,2034,990],{"class":569},[564,2036,862],{"class":573},[564,2038,596],{"class":569},[564,2040,2041,2043,2045],{"class":566,"line":997},[564,2042,689],{"class":569},[564,2044,706],{"class":573},[564,2046,596],{"class":569},[545,2048,2050],{"id":2049},"model-reference","Model reference",[536,2052,2053,2054,2057],{},"The component exposes the loaded GLTF as ",[561,2055,2056],{},"instance",", so a template ref gets you the parsed model:",[552,2059,2061],{"className":554,"code":2060,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { GLTFModel } from '@tresjs/cientos'\nimport { ref, watch } from 'vue'\n\nconst modelRef = ref\u003CInstanceType\u003Ctypeof GLTFModel>>()\n\n// `instance` is null until the file lands, so watch it rather than the ref\nwatch(() => modelRef.value?.instance, (gltf) => {\n  gltf?.scene.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CGLTFModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb\"\n  />\n\u003C/template>\n",[561,2062,2063,2083,2101,2125,2129,2156,2160,2165,2207,2244,2250,2258,2262,2270,2277,2291,2305,2310],{"__ignoreMap":508},[564,2064,2065,2067,2069,2071,2073,2075,2077,2079,2081],{"class":566,"line":509},[564,2066,570],{"class":569},[564,2068,574],{"class":573},[564,2070,578],{"class":577},[564,2072,581],{"class":577},[564,2074,584],{"class":569},[564,2076,587],{"class":569},[564,2078,591],{"class":590},[564,2080,587],{"class":569},[564,2082,596],{"class":569},[564,2084,2085,2087,2089,2091,2093,2095,2097,2099],{"class":566,"line":510},[564,2086,604],{"class":603},[564,2088,607],{"class":569},[564,2090,1755],{"class":610},[564,2092,614],{"class":569},[564,2094,617],{"class":603},[564,2096,620],{"class":569},[564,2098,623],{"class":590},[564,2100,626],{"class":569},[564,2102,2103,2105,2107,2110,2112,2115,2117,2119,2121,2123],{"class":566,"line":629},[564,2104,604],{"class":603},[564,2106,607],{"class":569},[564,2108,2109],{"class":610}," ref",[564,2111,663],{"class":569},[564,2113,2114],{"class":610}," watch",[564,2116,614],{"class":569},[564,2118,617],{"class":603},[564,2120,620],{"class":569},[564,2122,559],{"class":590},[564,2124,626],{"class":569},[564,2126,2127],{"class":566,"line":635},[564,2128,632],{"emptyLinePlaceholder":516},[564,2130,2131,2133,2136,2138,2140,2142,2145,2148,2150,2153],{"class":566,"line":558},[564,2132,638],{"class":577},[564,2134,2135],{"class":610}," modelRef ",[564,2137,584],{"class":569},[564,2139,2109],{"class":680},[564,2141,570],{"class":569},[564,2143,2144],{"class":1519},"InstanceType",[564,2146,2147],{"class":569},"\u003Ctypeof",[564,2149,1755],{"class":610},[564,2151,2152],{"class":569},">>",[564,2154,2155],{"class":610},"()\n",[564,2157,2158],{"class":566,"line":686},[564,2159,632],{"emptyLinePlaceholder":516},[564,2161,2162],{"class":566,"line":696},[564,2163,2164],{"class":1379},"// `instance` is null until the file lands, so watch it rather than the ref\n",[564,2166,2167,2170,2172,2175,2178,2181,2183,2185,2188,2190,2192,2195,2199,2202,2204],{"class":566,"line":701},[564,2168,2169],{"class":680},"watch",[564,2171,1074],{"class":610},[564,2173,2174],{"class":569},"()",[564,2176,2177],{"class":577}," =>",[564,2179,2180],{"class":610}," modelRef",[564,2182,1394],{"class":569},[564,2184,1397],{"class":610},[564,2186,2187],{"class":569},"?.",[564,2189,2056],{"class":610},[564,2191,663],{"class":569},[564,2193,2194],{"class":569}," (",[564,2196,2198],{"class":2197},"sHdIc","gltf",[564,2200,2201],{"class":569},")",[564,2203,2177],{"class":577},[564,2205,2206],{"class":569}," {\n",[564,2208,2209,2212,2214,2217,2219,2222,2224,2227,2229,2233,2235,2238,2240,2242],{"class":566,"line":711},[564,2210,2211],{"class":610},"  gltf",[564,2213,2187],{"class":569},[564,2215,2216],{"class":610},"scene",[564,2218,1394],{"class":569},[564,2220,2221],{"class":610},"position",[564,2223,1394],{"class":569},[564,2225,2226],{"class":680},"set",[564,2228,1074],{"class":573},[564,2230,2232],{"class":2231},"sbssI","0",[564,2234,663],{"class":569},[564,2236,2237],{"class":2231}," 0",[564,2239,663],{"class":569},[564,2241,2237],{"class":2231},[564,2243,1101],{"class":573},[564,2245,2246,2248],{"class":566,"line":747},[564,2247,674],{"class":569},[564,2249,1101],{"class":610},[564,2251,2252,2254,2256],{"class":566,"line":910},[564,2253,689],{"class":569},[564,2255,574],{"class":573},[564,2257,596],{"class":569},[564,2259,2260],{"class":566,"line":920},[564,2261,632],{"emptyLinePlaceholder":516},[564,2263,2264,2266,2268],{"class":566,"line":928},[564,2265,570],{"class":569},[564,2267,706],{"class":573},[564,2269,596],{"class":569},[564,2271,2272,2274],{"class":566,"line":944},[564,2273,714],{"class":569},[564,2275,2276],{"class":573},"GLTFModel\n",[564,2278,2279,2282,2284,2286,2289],{"class":566,"line":959},[564,2280,2281],{"class":577},"    ref",[564,2283,584],{"class":569},[564,2285,587],{"class":569},[564,2287,2288],{"class":590},"modelRef",[564,2290,941],{"class":569},[564,2292,2293,2296,2298,2300,2303],{"class":566,"line":965},[564,2294,2295],{"class":577},"    path",[564,2297,584],{"class":569},[564,2299,587],{"class":569},[564,2301,2302],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb",[564,2304,941],{"class":569},[564,2306,2307],{"class":566,"line":987},[564,2308,2309],{"class":569},"  />\n",[564,2311,2312,2314,2316],{"class":566,"line":997},[564,2313,689],{"class":569},[564,2315,706],{"class":573},[564,2317,596],{"class":569},[545,2319,2321],{"id":2320},"props","Props",[1107,2323,2324,2335],{},[1110,2325,2326],{},[1113,2327,2328,2331,2333],{},[1116,2329,2330],{"align":1118},"Prop",[1116,2332,1125],{"align":1118},[1116,2334,1269],{},[1127,2336,2337,2354,2371,2385,2403],{},[1113,2338,2339,2343,2349],{},[1132,2340,2341],{"align":1118},[561,2342,1820],{},[1132,2344,2345,2346,1394],{"align":1118},"Path to the model file. ",[540,2347,2348],{},"Required",[1132,2350,2351],{},[561,2352,2353],{},"undefined",[1113,2355,2356,2360,2367],{},[1132,2357,2358],{"align":1118},[561,2359,1012],{},[1132,2361,2362,2363,2366],{"align":1118},"Enable ",[1015,2364,1020],{"href":1017,"rel":2365},[1019]," for the model.",[1132,2368,2369],{},[561,2370,1289],{},[1113,2372,2373,2377,2380],{},[1132,2374,2375],{"align":1118},[561,2376,1299],{},[1132,2378,2379],{"align":1118},"Path to a Draco decoder.",[1132,2381,2382],{},[561,2383,2384],{},"'https://www.gstatic.com/draco/versioned/decoders/1.4.1/'",[1113,2386,2387,2392,2399],{},[1132,2388,2389],{"align":1118},[561,2390,2391],{},"castShadow",[1132,2393,2394,2395,2398],{"align":1118},"Apply ",[561,2396,2397],{},"cast-shadow"," to all meshes inside your model.",[1132,2400,2401],{},[561,2402,1289],{},[1113,2404,2405,2410,2415],{},[1132,2406,2407],{"align":1118},[561,2408,2409],{},"receiveShadow",[1132,2411,2394,2412,2398],{"align":1118},[561,2413,2414],{},"receive-shadow",[1132,2416,2417],{},[561,2418,1289],{},[1622,2420,2421],{},[536,2422,2423,2425,2426,2430,2431,2434],{},[561,2424,1820],{}," is not reactive: the component reads it once on setup. Use\n",[1015,2427,2428],{"href":1712},[561,2429,133],{}," with a ",[561,2432,2433],{},"ref"," path if you need to swap models at runtime.",[545,2436,2438],{"id":2437},"when-to-reach-for-something-else","When to reach for something else",[536,2440,2441,2443,2444,2447,2448,2452,2453,2456],{},[561,2442,137],{}," renders the model's scene graph as-is, which means there is no element to hang a\nmaterial swap, a click handler or a ",[561,2445,2446],{},"v-if"," on. When you need that, use\n",[1015,2449,2450],{"href":1712},[561,2451,133],{}," to compose the parts yourself, or let the\n",[1015,2454,1642],{"href":1640,"rel":2455},[1019]," generate a typed component with a slot per node:",[552,2458,2460],{"className":1646,"code":2459,"language":1648,"meta":508,"style":508},"npx @tresjs/cli gltf public/models/robot.glb\n",[561,2461,2462],{"__ignoreMap":508},[564,2463,2464,2466,2468,2470],{"class":566,"line":509},[564,2465,1655],{"class":1519},[564,2467,1658],{"class":590},[564,2469,1661],{"class":590},[564,2471,1664],{"class":590},[1676,2473,2474],{"to":20},[536,2475,1680],{},[1682,2477,2478],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":2480},[2481,2482,2483,2484],{"id":547,"depth":510,"text":15},{"id":2049,"depth":510,"text":2050},{"id":2320,"depth":510,"text":2321},{"id":2437,"depth":510,"text":2438},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":137,"description":2485},"VQ_YsNV94FVy6HCRAYN67RLxTmb-4Gfn8UDFrpHDFcQ",{"id":2490,"title":141,"body":2491,"description":3106,"extension":513,"links":514,"meta":3107,"navigation":516,"path":142,"seo":3108,"stem":143,"__hash__":3109},"docs/2.api/3.loaders/3.use-fbx.md",{"type":501,"value":2492,"toc":3100},[2493,2498,2503,2505,2894,2896,2977,2979,3005,3007,3009,3095,3097],[530,2494,2495],{},[2496,2497],"loaders-fbx",{},[536,2499,2500,2501,543],{},"A composable that allows you to easily load FBX models into your ",[540,2502,542],{},[545,2504,15],{"id":547},[549,2506,2507,2677],{},[552,2508,2511],{"className":554,"code":2509,"filename":556,"highlights":2510,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useFBX } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'\nconst { state, nodes, materials } = useFBX(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cprimitive v-if=\"state\" :object=\"state\" :scale=\"0.025\" />\n\u003C/template>\n",[510,686],[561,2512,2513,2533,2553,2557,2572,2584,2609,2617,2621,2629,2669],{"__ignoreMap":508},[564,2514,2515,2517,2519,2521,2523,2525,2527,2529,2531],{"class":566,"line":509},[564,2516,570],{"class":569},[564,2518,574],{"class":573},[564,2520,578],{"class":577},[564,2522,581],{"class":577},[564,2524,584],{"class":569},[564,2526,587],{"class":569},[564,2528,591],{"class":590},[564,2530,587],{"class":569},[564,2532,596],{"class":569},[564,2534,2536,2538,2540,2543,2545,2547,2549,2551],{"class":2535,"line":510},[566,600],[564,2537,604],{"class":603},[564,2539,607],{"class":569},[564,2541,2542],{"class":610}," useFBX",[564,2544,614],{"class":569},[564,2546,617],{"class":603},[564,2548,620],{"class":569},[564,2550,623],{"class":590},[564,2552,626],{"class":569},[564,2554,2555],{"class":566,"line":629},[564,2556,632],{"emptyLinePlaceholder":516},[564,2558,2559,2561,2563,2565,2567,2570],{"class":566,"line":635},[564,2560,638],{"class":577},[564,2562,641],{"class":610},[564,2564,584],{"class":569},[564,2566,620],{"class":569},[564,2568,2569],{"class":590},"https://raw.githubusercontent.com/",[564,2571,626],{"class":569},[564,2573,2574,2577,2579,2582],{"class":566,"line":558},[564,2575,2576],{"class":569},"  +",[564,2578,620],{"class":569},[564,2580,2581],{"class":590},"Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[564,2583,626],{"class":569},[564,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607],{"class":2586,"line":686},[566,600],[564,2588,638],{"class":577},[564,2590,607],{"class":569},[564,2592,660],{"class":610},[564,2594,663],{"class":569},[564,2596,666],{"class":610},[564,2598,663],{"class":569},[564,2600,671],{"class":610},[564,2602,674],{"class":569},[564,2604,677],{"class":569},[564,2606,2542],{"class":680},[564,2608,683],{"class":610},[564,2610,2611,2613,2615],{"class":566,"line":696},[564,2612,689],{"class":569},[564,2614,574],{"class":573},[564,2616,596],{"class":569},[564,2618,2619],{"class":566,"line":701},[564,2620,632],{"emptyLinePlaceholder":516},[564,2622,2623,2625,2627],{"class":566,"line":711},[564,2624,570],{"class":569},[564,2626,706],{"class":573},[564,2628,596],{"class":569},[564,2630,2631,2633,2635,2637,2639,2641,2643,2645,2647,2649,2651,2653,2655,2658,2660,2662,2665,2667],{"class":566,"line":747},[564,2632,714],{"class":569},[564,2634,717],{"class":573},[564,2636,720],{"class":577},[564,2638,584],{"class":569},[564,2640,587],{"class":569},[564,2642,727],{"class":590},[564,2644,587],{"class":569},[564,2646,732],{"class":577},[564,2648,584],{"class":569},[564,2650,587],{"class":569},[564,2652,727],{"class":590},[564,2654,587],{"class":569},[564,2656,2657],{"class":577}," :scale",[564,2659,584],{"class":569},[564,2661,587],{"class":569},[564,2663,2664],{"class":590},"0.025",[564,2666,587],{"class":569},[564,2668,744],{"class":569},[564,2670,2671,2673,2675],{"class":566,"line":910},[564,2672,689],{"class":569},[564,2674,706],{"class":573},[564,2676,596],{"class":569},[552,2678,2680],{"className":554,"code":2679,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#1F90FF\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresDirectionalLight\n      :intensity=\"2\"\n      :position=\"[3, 3, 3]\"\n    />\n    \u003CTresAmbientLight :intensity=\"1\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,2681,2682,2702,2720,2738,2752,2760,2764,2772,2791,2810,2818,2826,2832,2844,2856,2860,2878,2886],{"__ignoreMap":508},[564,2683,2684,2686,2688,2690,2692,2694,2696,2698,2700],{"class":566,"line":509},[564,2685,570],{"class":569},[564,2687,574],{"class":573},[564,2689,578],{"class":577},[564,2691,581],{"class":577},[564,2693,584],{"class":569},[564,2695,587],{"class":569},[564,2697,591],{"class":590},[564,2699,587],{"class":569},[564,2701,596],{"class":569},[564,2703,2704,2706,2708,2710,2712,2714,2716,2718],{"class":566,"line":510},[564,2705,604],{"class":603},[564,2707,607],{"class":569},[564,2709,788],{"class":610},[564,2711,614],{"class":569},[564,2713,617],{"class":603},[564,2715,620],{"class":569},[564,2717,623],{"class":590},[564,2719,626],{"class":569},[564,2721,2722,2724,2726,2728,2730,2732,2734,2736],{"class":566,"line":629},[564,2723,604],{"class":603},[564,2725,607],{"class":569},[564,2727,807],{"class":610},[564,2729,614],{"class":569},[564,2731,617],{"class":603},[564,2733,620],{"class":569},[564,2735,816],{"class":590},[564,2737,626],{"class":569},[564,2739,2740,2742,2744,2746,2748,2750],{"class":566,"line":635},[564,2741,604],{"class":603},[564,2743,825],{"class":610},[564,2745,828],{"class":603},[564,2747,620],{"class":569},[564,2749,833],{"class":590},[564,2751,626],{"class":569},[564,2753,2754,2756,2758],{"class":566,"line":558},[564,2755,689],{"class":569},[564,2757,574],{"class":573},[564,2759,596],{"class":569},[564,2761,2762],{"class":566,"line":686},[564,2763,632],{"emptyLinePlaceholder":516},[564,2765,2766,2768,2770],{"class":566,"line":696},[564,2767,570],{"class":569},[564,2769,706],{"class":573},[564,2771,596],{"class":569},[564,2773,2774,2776,2778,2780,2782,2784,2787,2789],{"class":566,"line":701},[564,2775,714],{"class":569},[564,2777,862],{"class":573},[564,2779,865],{"class":577},[564,2781,584],{"class":569},[564,2783,587],{"class":569},[564,2785,2786],{"class":590},"#1F90FF",[564,2788,587],{"class":569},[564,2790,596],{"class":569},[564,2792,2793,2795,2797,2799,2801,2803,2806,2808],{"class":566,"line":711},[564,2794,881],{"class":569},[564,2796,884],{"class":573},[564,2798,887],{"class":577},[564,2800,584],{"class":569},[564,2802,587],{"class":569},[564,2804,2805],{"class":590},"[11, 11, 11]",[564,2807,587],{"class":569},[564,2809,744],{"class":569},[564,2811,2812,2814,2816],{"class":566,"line":747},[564,2813,881],{"class":569},[564,2815,905],{"class":573},[564,2817,744],{"class":569},[564,2819,2820,2822,2824],{"class":566,"line":910},[564,2821,881],{"class":569},[564,2823,915],{"class":573},[564,2825,744],{"class":569},[564,2827,2828,2830],{"class":566,"line":920},[564,2829,881],{"class":569},[564,2831,925],{"class":573},[564,2833,2834,2836,2838,2840,2842],{"class":566,"line":928},[564,2835,931],{"class":577},[564,2837,584],{"class":569},[564,2839,587],{"class":569},[564,2841,938],{"class":590},[564,2843,941],{"class":569},[564,2845,2846,2848,2850,2852,2854],{"class":566,"line":944},[564,2847,947],{"class":577},[564,2849,584],{"class":569},[564,2851,587],{"class":569},[564,2853,954],{"class":590},[564,2855,941],{"class":569},[564,2857,2858],{"class":566,"line":959},[564,2859,962],{"class":569},[564,2861,2862,2864,2866,2868,2870,2872,2874,2876],{"class":566,"line":965},[564,2863,881],{"class":569},[564,2865,970],{"class":573},[564,2867,973],{"class":577},[564,2869,584],{"class":569},[564,2871,587],{"class":569},[564,2873,980],{"class":590},[564,2875,587],{"class":569},[564,2877,744],{"class":569},[564,2879,2880,2882,2884],{"class":566,"line":987},[564,2881,990],{"class":569},[564,2883,862],{"class":573},[564,2885,596],{"class":569},[564,2887,2888,2890,2892],{"class":566,"line":997},[564,2889,689],{"class":569},[564,2891,706],{"class":573},[564,2893,596],{"class":569},[545,2895,1105],{"id":1104},[1107,2897,2898,2908],{},[1110,2899,2900],{},[1113,2901,2902,2904,2906],{},[1116,2903,1119],{"align":1118},[1116,2905,1122],{},[1116,2907,1125],{},[1127,2909,2910,2924,2938,2951,2963],{},[1113,2911,2912,2916,2921],{},[1132,2913,2914],{"align":1118},[540,2915,727],{},[1132,2917,2918],{},[561,2919,2920],{},"Group",[1132,2922,2923],{},"The loaded FBX model state",[1113,2925,2926,2930,2935],{},[1132,2927,2928],{"align":1118},[540,2929,1154],{},[1132,2931,2932],{},[561,2933,2934],{},"object",[1132,2936,2937],{},"Computed object containing all nodes in the scene",[1113,2939,2940,2944,2948],{},[1132,2941,2942],{"align":1118},[540,2943,1169],{},[1132,2945,2946],{},[561,2947,2934],{},[1132,2949,2950],{},"Computed object containing all materials in the scene",[1113,2952,2953,2957,2961],{},[1132,2954,2955],{"align":1118},[540,2956,1184],{},[1132,2958,2959],{},[561,2960,1284],{},[1132,2962,1192],{},[1113,2964,2965,2969,2974],{},[1132,2966,2967],{"align":1118},[540,2968,1244],{},[1132,2970,2971],{},[561,2972,2973],{},"() => Promise\u003Cvoid>",[1132,2975,2976],{},"Function to reload the model",[545,2978,1256],{"id":1255},[1107,2980,2981,2991],{},[1110,2982,2983],{},[1113,2984,2985,2987,2989],{},[1116,2986,1119],{"align":1118},[1116,2988,1122],{},[1116,2990,1125],{},[1127,2992,2993],{},[1113,2994,2995,2999,3003],{},[1132,2996,2997],{"align":1118},[540,2998,1319],{},[1132,3000,3001],{},[561,3002,1324],{},[1132,3004,1329],{},[545,3006,1333],{"id":1332},[536,3008,1336],{},[552,3010,3012],{"className":1024,"code":3011,"language":591,"meta":508,"style":508},"const { nodes, materials } = useFBX('/model.fbx')\n\n// Access a specific node\nconst mesh = nodes.value.MeshName\n\n// Access a specific material\nconst material = materials.value.MaterialName\n",[561,3013,3014,3043,3047,3051,3069,3073,3077],{"__ignoreMap":508},[564,3015,3016,3018,3020,3022,3024,3026,3028,3030,3032,3034,3036,3039,3041],{"class":566,"line":509},[564,3017,638],{"class":577},[564,3019,607],{"class":569},[564,3021,666],{"class":610},[564,3023,663],{"class":569},[564,3025,671],{"class":610},[564,3027,674],{"class":569},[564,3029,677],{"class":569},[564,3031,2542],{"class":680},[564,3033,1074],{"class":610},[564,3035,1077],{"class":569},[564,3037,3038],{"class":590},"/model.fbx",[564,3040,1077],{"class":569},[564,3042,1101],{"class":610},[564,3044,3045],{"class":566,"line":510},[564,3046,632],{"emptyLinePlaceholder":516},[564,3048,3049],{"class":566,"line":629},[564,3050,1380],{"class":1379},[564,3052,3053,3055,3057,3059,3061,3063,3065,3067],{"class":566,"line":635},[564,3054,638],{"class":577},[564,3056,1387],{"class":610},[564,3058,584],{"class":569},[564,3060,666],{"class":610},[564,3062,1394],{"class":569},[564,3064,1397],{"class":610},[564,3066,1394],{"class":569},[564,3068,1402],{"class":610},[564,3070,3071],{"class":566,"line":558},[564,3072,632],{"emptyLinePlaceholder":516},[564,3074,3075],{"class":566,"line":686},[564,3076,1411],{"class":1379},[564,3078,3079,3081,3083,3085,3087,3089,3091,3093],{"class":566,"line":696},[564,3080,638],{"class":577},[564,3082,1418],{"class":610},[564,3084,584],{"class":569},[564,3086,1423],{"class":610},[564,3088,1394],{"class":569},[564,3090,1397],{"class":610},[564,3092,1394],{"class":569},[564,3094,1432],{"class":610},[536,3096,1435],{},[1682,3098,3099],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":3101},[3102,3103,3104,3105],{"id":547,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},{"id":1255,"depth":510,"text":1256},{"id":1332,"depth":510,"text":1333},"A composable to load FBX models in TresJS scenes.",{},{"title":141,"description":3106},"a0FODUjY-1cIilnPPnu0dmaRDyIq0-nUrGnriL5rksc",{"id":3111,"title":145,"body":3112,"description":3747,"extension":513,"links":514,"meta":3748,"navigation":516,"path":146,"seo":3749,"stem":147,"__hash__":3750},"docs/2.api/3.loaders/4.fbx-model.md",{"type":501,"value":3113,"toc":3742},[3114,3118,3127,3129,3457,3459,3468,3682,3684,3739],[530,3115,3116],{},[2496,3117],{},[536,3119,1706,3120,1709,3122,1715],{},[561,3121,145],{},[1015,3123,3125],{"href":3124},"./use-fbx",[561,3126,141],{},[545,3128,15],{"id":547},[549,3130,3131,3243],{},[552,3132,3135],{"className":554,"code":3133,"filename":556,"highlights":3134,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { FBXModel } from '@tresjs/cientos'\n\nconst path = './Jeep_done.fbx'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel :path=\"path\" />\n\u003C/template>\n",[510,701],[561,3136,3137,3157,3177,3181,3196,3204,3208,3216,3235],{"__ignoreMap":508},[564,3138,3139,3141,3143,3145,3147,3149,3151,3153,3155],{"class":566,"line":509},[564,3140,570],{"class":569},[564,3142,574],{"class":573},[564,3144,578],{"class":577},[564,3146,581],{"class":577},[564,3148,584],{"class":569},[564,3150,587],{"class":569},[564,3152,591],{"class":590},[564,3154,587],{"class":569},[564,3156,596],{"class":569},[564,3158,3160,3162,3164,3167,3169,3171,3173,3175],{"class":3159,"line":510},[566,600],[564,3161,604],{"class":603},[564,3163,607],{"class":569},[564,3165,3166],{"class":610}," FBXModel",[564,3168,614],{"class":569},[564,3170,617],{"class":603},[564,3172,620],{"class":569},[564,3174,623],{"class":590},[564,3176,626],{"class":569},[564,3178,3179],{"class":566,"line":629},[564,3180,632],{"emptyLinePlaceholder":516},[564,3182,3183,3185,3187,3189,3191,3194],{"class":566,"line":635},[564,3184,638],{"class":577},[564,3186,641],{"class":610},[564,3188,584],{"class":569},[564,3190,620],{"class":569},[564,3192,3193],{"class":590},"./Jeep_done.fbx",[564,3195,626],{"class":569},[564,3197,3198,3200,3202],{"class":566,"line":558},[564,3199,689],{"class":569},[564,3201,574],{"class":573},[564,3203,596],{"class":569},[564,3205,3206],{"class":566,"line":686},[564,3207,632],{"emptyLinePlaceholder":516},[564,3209,3210,3212,3214],{"class":566,"line":696},[564,3211,570],{"class":569},[564,3213,706],{"class":573},[564,3215,596],{"class":569},[564,3217,3219,3221,3223,3225,3227,3229,3231,3233],{"class":3218,"line":701},[566,600],[564,3220,714],{"class":569},[564,3222,145],{"class":573},[564,3224,1813],{"class":577},[564,3226,584],{"class":569},[564,3228,587],{"class":569},[564,3230,1820],{"class":590},[564,3232,587],{"class":569},[564,3234,744],{"class":569},[564,3236,3237,3239,3241],{"class":566,"line":711},[564,3238,689],{"class":569},[564,3240,706],{"class":573},[564,3242,596],{"class":569},[552,3244,3245],{"className":554,"code":756,"filename":757,"language":559,"meta":508,"style":508},[561,3246,3247,3267,3285,3303,3317,3325,3329,3337,3355,3373,3381,3389,3395,3407,3419,3423,3441,3449],{"__ignoreMap":508},[564,3248,3249,3251,3253,3255,3257,3259,3261,3263,3265],{"class":566,"line":509},[564,3250,570],{"class":569},[564,3252,574],{"class":573},[564,3254,578],{"class":577},[564,3256,581],{"class":577},[564,3258,584],{"class":569},[564,3260,587],{"class":569},[564,3262,591],{"class":590},[564,3264,587],{"class":569},[564,3266,596],{"class":569},[564,3268,3269,3271,3273,3275,3277,3279,3281,3283],{"class":566,"line":510},[564,3270,604],{"class":603},[564,3272,607],{"class":569},[564,3274,788],{"class":610},[564,3276,614],{"class":569},[564,3278,617],{"class":603},[564,3280,620],{"class":569},[564,3282,623],{"class":590},[564,3284,626],{"class":569},[564,3286,3287,3289,3291,3293,3295,3297,3299,3301],{"class":566,"line":629},[564,3288,604],{"class":603},[564,3290,607],{"class":569},[564,3292,807],{"class":610},[564,3294,614],{"class":569},[564,3296,617],{"class":603},[564,3298,620],{"class":569},[564,3300,816],{"class":590},[564,3302,626],{"class":569},[564,3304,3305,3307,3309,3311,3313,3315],{"class":566,"line":635},[564,3306,604],{"class":603},[564,3308,825],{"class":610},[564,3310,828],{"class":603},[564,3312,620],{"class":569},[564,3314,833],{"class":590},[564,3316,626],{"class":569},[564,3318,3319,3321,3323],{"class":566,"line":558},[564,3320,689],{"class":569},[564,3322,574],{"class":573},[564,3324,596],{"class":569},[564,3326,3327],{"class":566,"line":686},[564,3328,632],{"emptyLinePlaceholder":516},[564,3330,3331,3333,3335],{"class":566,"line":696},[564,3332,570],{"class":569},[564,3334,706],{"class":573},[564,3336,596],{"class":569},[564,3338,3339,3341,3343,3345,3347,3349,3351,3353],{"class":566,"line":701},[564,3340,714],{"class":569},[564,3342,862],{"class":573},[564,3344,865],{"class":577},[564,3346,584],{"class":569},[564,3348,587],{"class":569},[564,3350,872],{"class":590},[564,3352,587],{"class":569},[564,3354,596],{"class":569},[564,3356,3357,3359,3361,3363,3365,3367,3369,3371],{"class":566,"line":711},[564,3358,881],{"class":569},[564,3360,884],{"class":573},[564,3362,887],{"class":577},[564,3364,584],{"class":569},[564,3366,587],{"class":569},[564,3368,894],{"class":590},[564,3370,587],{"class":569},[564,3372,744],{"class":569},[564,3374,3375,3377,3379],{"class":566,"line":747},[564,3376,881],{"class":569},[564,3378,905],{"class":573},[564,3380,744],{"class":569},[564,3382,3383,3385,3387],{"class":566,"line":910},[564,3384,881],{"class":569},[564,3386,915],{"class":573},[564,3388,744],{"class":569},[564,3390,3391,3393],{"class":566,"line":920},[564,3392,881],{"class":569},[564,3394,925],{"class":573},[564,3396,3397,3399,3401,3403,3405],{"class":566,"line":928},[564,3398,931],{"class":577},[564,3400,584],{"class":569},[564,3402,587],{"class":569},[564,3404,938],{"class":590},[564,3406,941],{"class":569},[564,3408,3409,3411,3413,3415,3417],{"class":566,"line":944},[564,3410,947],{"class":577},[564,3412,584],{"class":569},[564,3414,587],{"class":569},[564,3416,954],{"class":590},[564,3418,941],{"class":569},[564,3420,3421],{"class":566,"line":959},[564,3422,962],{"class":569},[564,3424,3425,3427,3429,3431,3433,3435,3437,3439],{"class":566,"line":965},[564,3426,881],{"class":569},[564,3428,970],{"class":573},[564,3430,973],{"class":577},[564,3432,584],{"class":569},[564,3434,587],{"class":569},[564,3436,980],{"class":590},[564,3438,587],{"class":569},[564,3440,744],{"class":569},[564,3442,3443,3445,3447],{"class":566,"line":987},[564,3444,990],{"class":569},[564,3446,862],{"class":573},[564,3448,596],{"class":569},[564,3450,3451,3453,3455],{"class":566,"line":997},[564,3452,689],{"class":569},[564,3454,706],{"class":573},[564,3456,596],{"class":569},[545,3458,2050],{"id":2049},[536,3460,3461,3462,3464,3465,3467],{},"You can access the model reference by passing a ",[561,3463,2433],{}," to the ",[561,3466,145],{}," component and then using it to get the object.",[552,3469,3471],{"className":554,"code":3470,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport type { TresObject } from '@tresjs/core'\nimport { FBXModel } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTresObject>()\n\nwatch(modelRef, (model) => {\n  // Do something with the model\n  model.position.set(0, 0, 0)\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CFBXModel\n    ref=\"modelRef\"\n    path=\"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx\"\n  />\n\u003C/template>\n",[561,3472,3473,3493,3514,3532,3536,3556,3560,3580,3585,3612,3618,3626,3630,3638,3645,3657,3670,3674],{"__ignoreMap":508},[564,3474,3475,3477,3479,3481,3483,3485,3487,3489,3491],{"class":566,"line":509},[564,3476,570],{"class":569},[564,3478,574],{"class":573},[564,3480,578],{"class":577},[564,3482,581],{"class":577},[564,3484,584],{"class":569},[564,3486,587],{"class":569},[564,3488,591],{"class":590},[564,3490,587],{"class":569},[564,3492,596],{"class":569},[564,3494,3495,3497,3499,3501,3504,3506,3508,3510,3512],{"class":566,"line":510},[564,3496,604],{"class":603},[564,3498,1468],{"class":603},[564,3500,607],{"class":569},[564,3502,3503],{"class":610}," TresObject",[564,3505,614],{"class":569},[564,3507,617],{"class":603},[564,3509,620],{"class":569},[564,3511,816],{"class":590},[564,3513,626],{"class":569},[564,3515,3516,3518,3520,3522,3524,3526,3528,3530],{"class":566,"line":629},[564,3517,604],{"class":603},[564,3519,607],{"class":569},[564,3521,3166],{"class":610},[564,3523,614],{"class":569},[564,3525,617],{"class":603},[564,3527,620],{"class":569},[564,3529,623],{"class":590},[564,3531,626],{"class":569},[564,3533,3534],{"class":566,"line":635},[564,3535,632],{"emptyLinePlaceholder":516},[564,3537,3538,3540,3542,3544,3547,3549,3552,3554],{"class":566,"line":558},[564,3539,638],{"class":577},[564,3541,2135],{"class":610},[564,3543,584],{"class":569},[564,3545,3546],{"class":680}," shallowRef",[564,3548,570],{"class":569},[564,3550,3551],{"class":1519},"TresObject",[564,3553,1584],{"class":569},[564,3555,2155],{"class":610},[564,3557,3558],{"class":566,"line":686},[564,3559,632],{"emptyLinePlaceholder":516},[564,3561,3562,3564,3567,3569,3571,3574,3576,3578],{"class":566,"line":696},[564,3563,2169],{"class":680},[564,3565,3566],{"class":610},"(modelRef",[564,3568,663],{"class":569},[564,3570,2194],{"class":569},[564,3572,3573],{"class":2197},"model",[564,3575,2201],{"class":569},[564,3577,2177],{"class":577},[564,3579,2206],{"class":569},[564,3581,3582],{"class":566,"line":701},[564,3583,3584],{"class":1379},"  // Do something with the model\n",[564,3586,3587,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608,3610],{"class":566,"line":711},[564,3588,3589],{"class":610},"  model",[564,3591,1394],{"class":569},[564,3593,2221],{"class":610},[564,3595,1394],{"class":569},[564,3597,2226],{"class":680},[564,3599,1074],{"class":573},[564,3601,2232],{"class":2231},[564,3603,663],{"class":569},[564,3605,2237],{"class":2231},[564,3607,663],{"class":569},[564,3609,2237],{"class":2231},[564,3611,1101],{"class":573},[564,3613,3614,3616],{"class":566,"line":747},[564,3615,674],{"class":569},[564,3617,1101],{"class":610},[564,3619,3620,3622,3624],{"class":566,"line":910},[564,3621,689],{"class":569},[564,3623,574],{"class":573},[564,3625,596],{"class":569},[564,3627,3628],{"class":566,"line":920},[564,3629,632],{"emptyLinePlaceholder":516},[564,3631,3632,3634,3636],{"class":566,"line":928},[564,3633,570],{"class":569},[564,3635,706],{"class":573},[564,3637,596],{"class":569},[564,3639,3640,3642],{"class":566,"line":944},[564,3641,714],{"class":569},[564,3643,3644],{"class":573},"FBXModel\n",[564,3646,3647,3649,3651,3653,3655],{"class":566,"line":959},[564,3648,2281],{"class":577},[564,3650,584],{"class":569},[564,3652,587],{"class":569},[564,3654,2288],{"class":590},[564,3656,941],{"class":569},[564,3658,3659,3661,3663,3665,3668],{"class":566,"line":965},[564,3660,2295],{"class":577},[564,3662,584],{"class":569},[564,3664,587],{"class":569},[564,3666,3667],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx",[564,3669,941],{"class":569},[564,3671,3672],{"class":566,"line":987},[564,3673,2309],{"class":569},[564,3675,3676,3678,3680],{"class":566,"line":997},[564,3677,689],{"class":569},[564,3679,706],{"class":573},[564,3681,596],{"class":569},[545,3683,2321],{"id":2320},[1107,3685,3686,3696],{},[1110,3687,3688],{},[1113,3689,3690,3692,3694],{},[1116,3691,2330],{"align":1118},[1116,3693,1125],{"align":1118},[1116,3695,1269],{},[1127,3697,3698,3711,3725],{},[1113,3699,3700,3704,3707],{},[1132,3701,3702],{"align":1118},[561,3703,1820],{},[1132,3705,3706],{"align":1118},"Path to the model file.",[1132,3708,3709],{},[561,3710,2353],{},[1113,3712,3713,3717,3721],{},[1132,3714,3715],{"align":1118},[561,3716,2391],{},[1132,3718,2394,3719,2398],{"align":1118},[561,3720,2397],{},[1132,3722,3723],{},[561,3724,1289],{},[1113,3726,3727,3731,3735],{},[1132,3728,3729],{"align":1118},[561,3730,2409],{},[1132,3732,2394,3733,2398],{"align":1118},[561,3734,2414],{},[1132,3736,3737],{},[561,3738,1289],{},[1682,3740,3741],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":3743},[3744,3745,3746],{"id":547,"depth":510,"text":15},{"id":2049,"depth":510,"text":2050},{"id":2320,"depth":510,"text":2321},"A component based on useFBX to load models in TresJS scenes.",{},{"title":145,"description":3747},"TBLk7umsoiJ37LzeU-f61yMZeJFhhM1KU9F-kfrD_I8",{"id":3752,"title":149,"body":3753,"description":4403,"extension":513,"links":514,"meta":4404,"navigation":516,"path":150,"seo":4405,"stem":151,"__hash__":4406},"docs/2.api/3.loaders/5.use-texture.md",{"type":501,"value":3754,"toc":4397},[3755,3760,3771,3773,3931,3933,3985,3987,4042,4046,4053,4394],[530,3756,3757],{},[3758,3759],"loaders-use-texture",{},[536,3761,3762,3763,3768,3769,543],{},"A composable that allows you to load textures using the ",[1015,3764,3767],{"href":3765,"rel":3766},"https://threejs.org/docs/#api/en/loaders/TextureLoader",[1019],"Three.js texture loader"," into your ",[540,3770,542],{},[545,3772,15],{"id":547},[552,3774,3777],{"className":554,"code":3775,"highlights":3776,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useTexture } from '@tresjs/cientos'\n\nconst { state: texture, isLoading, error } = useTexture(path)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial :map=\"texture\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[510,635,747],[561,3778,3779,3799,3819,3823,3855,3863,3867,3875,3884,3893,3915,3923],{"__ignoreMap":508},[564,3780,3781,3783,3785,3787,3789,3791,3793,3795,3797],{"class":566,"line":509},[564,3782,570],{"class":569},[564,3784,574],{"class":573},[564,3786,578],{"class":577},[564,3788,581],{"class":577},[564,3790,584],{"class":569},[564,3792,587],{"class":569},[564,3794,591],{"class":590},[564,3796,587],{"class":569},[564,3798,596],{"class":569},[564,3800,3802,3804,3806,3809,3811,3813,3815,3817],{"class":3801,"line":510},[566,600],[564,3803,604],{"class":603},[564,3805,607],{"class":569},[564,3807,3808],{"class":610}," useTexture",[564,3810,614],{"class":569},[564,3812,617],{"class":603},[564,3814,620],{"class":569},[564,3816,623],{"class":590},[564,3818,626],{"class":569},[564,3820,3821],{"class":566,"line":629},[564,3822,632],{"emptyLinePlaceholder":516},[564,3824,3826,3828,3830,3832,3834,3837,3839,3842,3844,3847,3849,3851,3853],{"class":3825,"line":635},[566,600],[564,3827,638],{"class":577},[564,3829,607],{"class":569},[564,3831,660],{"class":573},[564,3833,1092],{"class":569},[564,3835,3836],{"class":610}," texture",[564,3838,663],{"class":569},[564,3840,3841],{"class":610}," isLoading",[564,3843,663],{"class":569},[564,3845,3846],{"class":610}," error ",[564,3848,674],{"class":569},[564,3850,677],{"class":569},[564,3852,3808],{"class":680},[564,3854,683],{"class":610},[564,3856,3857,3859,3861],{"class":566,"line":558},[564,3858,689],{"class":569},[564,3860,574],{"class":573},[564,3862,596],{"class":569},[564,3864,3865],{"class":566,"line":686},[564,3866,632],{"emptyLinePlaceholder":516},[564,3868,3869,3871,3873],{"class":566,"line":696},[564,3870,570],{"class":569},[564,3872,706],{"class":573},[564,3874,596],{"class":569},[564,3876,3877,3879,3882],{"class":566,"line":701},[564,3878,714],{"class":569},[564,3880,3881],{"class":573},"TresMesh",[564,3883,596],{"class":569},[564,3885,3886,3888,3891],{"class":566,"line":711},[564,3887,881],{"class":569},[564,3889,3890],{"class":573},"TresSphereGeometry",[564,3892,744],{"class":569},[564,3894,3896,3898,3901,3904,3906,3908,3911,3913],{"class":3895,"line":747},[566,600],[564,3897,881],{"class":569},[564,3899,3900],{"class":573},"TresMeshStandardMaterial",[564,3902,3903],{"class":577}," :map",[564,3905,584],{"class":569},[564,3907,587],{"class":569},[564,3909,3910],{"class":590},"texture",[564,3912,587],{"class":569},[564,3914,744],{"class":569},[564,3916,3917,3919,3921],{"class":566,"line":910},[564,3918,990],{"class":569},[564,3920,3881],{"class":573},[564,3922,596],{"class":569},[564,3924,3925,3927,3929],{"class":566,"line":920},[564,3926,689],{"class":569},[564,3928,706],{"class":573},[564,3930,596],{"class":569},[545,3932,1256],{"id":1255},[1107,3934,3935,3947],{},[1110,3936,3937],{},[1113,3938,3939,3941,3943,3945],{},[1116,3940,1119],{"align":1118},[1116,3942,1122],{},[1116,3944,1269],{},[1116,3946,1125],{},[1127,3948,3949,3966],{},[1113,3950,3951,3955,3959,3963],{},[1132,3952,3953],{"align":1118},[540,3954,1820],{},[1132,3956,3957],{},[561,3958,1304],{},[1132,3960,3961],{},[561,3962,2353],{},[1132,3964,3965],{},"The path to the texture.",[1113,3967,3968,3973,3978,3982],{},[1132,3969,3970],{"align":1118},[540,3971,3972],{},"manager",[1132,3974,3975],{},[561,3976,3977],{},"THREE.LoadingManager",[1132,3979,3980],{},[561,3981,2353],{},[1132,3983,3984],{},"The loading manager to use for the texture.",[545,3986,1105],{"id":1104},[1107,3988,3989,3999],{},[1110,3990,3991],{},[1113,3992,3993,3995,3997],{},[1116,3994,1119],{"align":1118},[1116,3996,1122],{"align":1118},[1116,3998,1125],{"align":1118},[1127,4000,4001,4015,4028],{},[1113,4002,4003,4007,4012],{},[1132,4004,4005],{"align":1118},[561,4006,727],{},[1132,4008,4009],{"align":1118},[561,4010,4011],{},"Texture | null",[1132,4013,4014],{"align":1118},"The loaded texture",[1113,4016,4017,4021,4025],{},[1132,4018,4019],{"align":1118},[561,4020,1184],{},[1132,4022,4023],{"align":1118},[561,4024,1284],{},[1132,4026,4027],{"align":1118},"Whether the texture is loading",[1113,4029,4030,4034,4039],{},[1132,4031,4032],{"align":1118},[561,4033,1199],{},[1132,4035,4036],{"align":1118},[561,4037,4038],{},"string | null",[1132,4040,4041],{"align":1118},"Error message if loading failed",[545,4043,4045],{"id":4044},"component-usage","Component Usage",[536,4047,4048,4049,4052],{},"You can also use the ",[561,4050,4051],{},"UseTexture"," component directly in your template:",[552,4054,4061],{"className":554,"code":4055,"highlights":4056,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { UseTexture } from '@tresjs/cientos'\n\nconst path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'\n\nconst handleLoaded = (texture: Texture) => {\n  console.log('Loaded texture', texture)\n}\n\nconst handleError = (error: unknown) => {\n  console.error('error', error)\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUseTexture\n    v-slot=\"{ state: texture }\"\n    :path=\"path\"\n    @loaded=\"handleLoaded\"\n    @error=\"handleError\"\n  >\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshStandardMaterial :map=\"texture\" />\n    \u003C/TresMesh>\n  \u003C/UseTexture>\n\u003C/template>\n",[510,965,987,997,4057,4058,4059,4060],19,20,21,26,[561,4062,4063,4083,4103,4107,4122,4126,4150,4175,4180,4184,4208,4231,4235,4243,4247,4255,4263,4278,4292,4307,4322,4328,4337,4347,4366,4376,4385],{"__ignoreMap":508},[564,4064,4065,4067,4069,4071,4073,4075,4077,4079,4081],{"class":566,"line":509},[564,4066,570],{"class":569},[564,4068,574],{"class":573},[564,4070,578],{"class":577},[564,4072,581],{"class":577},[564,4074,584],{"class":569},[564,4076,587],{"class":569},[564,4078,591],{"class":590},[564,4080,587],{"class":569},[564,4082,596],{"class":569},[564,4084,4086,4088,4090,4093,4095,4097,4099,4101],{"class":4085,"line":510},[566,600],[564,4087,604],{"class":603},[564,4089,607],{"class":569},[564,4091,4092],{"class":610}," UseTexture",[564,4094,614],{"class":569},[564,4096,617],{"class":603},[564,4098,620],{"class":569},[564,4100,623],{"class":590},[564,4102,626],{"class":569},[564,4104,4105],{"class":566,"line":629},[564,4106,632],{"emptyLinePlaceholder":516},[564,4108,4109,4111,4113,4115,4117,4120],{"class":566,"line":635},[564,4110,638],{"class":577},[564,4112,641],{"class":610},[564,4114,584],{"class":569},[564,4116,620],{"class":569},[564,4118,4119],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg",[564,4121,626],{"class":569},[564,4123,4124],{"class":566,"line":558},[564,4125,632],{"emptyLinePlaceholder":516},[564,4127,4128,4130,4133,4135,4137,4139,4141,4144,4146,4148],{"class":566,"line":686},[564,4129,638],{"class":577},[564,4131,4132],{"class":610}," handleLoaded ",[564,4134,584],{"class":569},[564,4136,2194],{"class":569},[564,4138,3910],{"class":2197},[564,4140,1092],{"class":569},[564,4142,4143],{"class":1519}," Texture",[564,4145,2201],{"class":569},[564,4147,2177],{"class":577},[564,4149,2206],{"class":569},[564,4151,4152,4155,4157,4160,4162,4164,4167,4169,4171,4173],{"class":566,"line":696},[564,4153,4154],{"class":610},"  console",[564,4156,1394],{"class":569},[564,4158,4159],{"class":680},"log",[564,4161,1074],{"class":573},[564,4163,1077],{"class":569},[564,4165,4166],{"class":590},"Loaded texture",[564,4168,1077],{"class":569},[564,4170,663],{"class":569},[564,4172,3836],{"class":610},[564,4174,1101],{"class":573},[564,4176,4177],{"class":566,"line":701},[564,4178,4179],{"class":569},"}\n",[564,4181,4182],{"class":566,"line":711},[564,4183,632],{"emptyLinePlaceholder":516},[564,4185,4186,4188,4191,4193,4195,4197,4199,4202,4204,4206],{"class":566,"line":747},[564,4187,638],{"class":577},[564,4189,4190],{"class":610}," handleError ",[564,4192,584],{"class":569},[564,4194,2194],{"class":569},[564,4196,1199],{"class":2197},[564,4198,1092],{"class":569},[564,4200,4201],{"class":1519}," unknown",[564,4203,2201],{"class":569},[564,4205,2177],{"class":577},[564,4207,2206],{"class":569},[564,4209,4210,4212,4214,4216,4218,4220,4222,4224,4226,4229],{"class":566,"line":910},[564,4211,4154],{"class":610},[564,4213,1394],{"class":569},[564,4215,1199],{"class":680},[564,4217,1074],{"class":573},[564,4219,1077],{"class":569},[564,4221,1199],{"class":590},[564,4223,1077],{"class":569},[564,4225,663],{"class":569},[564,4227,4228],{"class":610}," error",[564,4230,1101],{"class":573},[564,4232,4233],{"class":566,"line":920},[564,4234,4179],{"class":569},[564,4236,4237,4239,4241],{"class":566,"line":928},[564,4238,689],{"class":569},[564,4240,574],{"class":573},[564,4242,596],{"class":569},[564,4244,4245],{"class":566,"line":944},[564,4246,632],{"emptyLinePlaceholder":516},[564,4248,4249,4251,4253],{"class":566,"line":959},[564,4250,570],{"class":569},[564,4252,706],{"class":573},[564,4254,596],{"class":569},[564,4256,4258,4260],{"class":4257,"line":965},[566,600],[564,4259,714],{"class":569},[564,4261,4262],{"class":573},"UseTexture\n",[564,4264,4266,4269,4271,4273,4276],{"class":4265,"line":987},[566,600],[564,4267,4268],{"class":577},"    v-slot",[564,4270,584],{"class":569},[564,4272,587],{"class":569},[564,4274,4275],{"class":590},"{ state: texture }",[564,4277,941],{"class":569},[564,4279,4281,4284,4286,4288,4290],{"class":4280,"line":997},[566,600],[564,4282,4283],{"class":577},"    :path",[564,4285,584],{"class":569},[564,4287,587],{"class":569},[564,4289,1820],{"class":590},[564,4291,941],{"class":569},[564,4293,4295,4298,4300,4302,4305],{"class":4294,"line":4057},[566,600],[564,4296,4297],{"class":577},"    @loaded",[564,4299,584],{"class":569},[564,4301,587],{"class":569},[564,4303,4304],{"class":590},"handleLoaded",[564,4306,941],{"class":569},[564,4308,4310,4313,4315,4317,4320],{"class":4309,"line":4058},[566,600],[564,4311,4312],{"class":577},"    @error",[564,4314,584],{"class":569},[564,4316,587],{"class":569},[564,4318,4319],{"class":590},"handleError",[564,4321,941],{"class":569},[564,4323,4325],{"class":4324,"line":4059},[566,600],[564,4326,4327],{"class":569},"  >\n",[564,4329,4331,4333,4335],{"class":566,"line":4330},22,[564,4332,881],{"class":569},[564,4334,3881],{"class":573},[564,4336,596],{"class":569},[564,4338,4340,4343,4345],{"class":566,"line":4339},23,[564,4341,4342],{"class":569},"      \u003C",[564,4344,3890],{"class":573},[564,4346,744],{"class":569},[564,4348,4350,4352,4354,4356,4358,4360,4362,4364],{"class":566,"line":4349},24,[564,4351,4342],{"class":569},[564,4353,3900],{"class":573},[564,4355,3903],{"class":577},[564,4357,584],{"class":569},[564,4359,587],{"class":569},[564,4361,3910],{"class":590},[564,4363,587],{"class":569},[564,4365,744],{"class":569},[564,4367,4369,4372,4374],{"class":566,"line":4368},25,[564,4370,4371],{"class":569},"    \u003C/",[564,4373,3881],{"class":573},[564,4375,596],{"class":569},[564,4377,4379,4381,4383],{"class":4378,"line":4060},[566,600],[564,4380,990],{"class":569},[564,4382,4051],{"class":573},[564,4384,596],{"class":569},[564,4386,4388,4390,4392],{"class":566,"line":4387},27,[564,4389,689],{"class":569},[564,4391,706],{"class":573},[564,4393,596],{"class":569},[1682,4395,4396],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":508,"searchDepth":509,"depth":510,"links":4398},[4399,4400,4401,4402],{"id":547,"depth":510,"text":15},{"id":1255,"depth":510,"text":1256},{"id":1104,"depth":510,"text":1105},{"id":4044,"depth":510,"text":4045},"A composable to load textures in TresJS scenes.",{},{"title":149,"description":4403},"l_rJPS1esq3wmeHFxC2Nl14B5pGSLe_sPmpKSPgbazk",{"id":4408,"title":153,"body":4409,"description":5885,"extension":513,"links":514,"meta":5886,"navigation":516,"path":154,"seo":5887,"stem":155,"__hash__":5888},"docs/2.api/3.loaders/6.use-textures.md",{"type":501,"value":4410,"toc":5876},[4411,4416,4424,4426,4675,4679,4682,5737,5741,5746,5781,5785,5841,5845,5873],[530,4412,4413],{},[4414,4415],"loaders-use-textures",{},[536,4417,4418,4419,3768,4422,543],{},"A composable that allows you to load multiple textures at once using the ",[1015,4420,3767],{"href":3765,"rel":4421},[1019],[540,4423,542],{},[545,4425,15],{"id":547},[552,4427,4430],{"className":554,"code":4428,"highlights":4429,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useTextures } from '@tresjs/cientos'\n\n// Define an array of texture paths\nconst texturePaths = [\n  '/textures/color.jpg',\n  '/textures/normal.jpg',\n  '/textures/roughness.jpg'\n]\n\n// Load all textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003CTresSphereGeometry />\n    \u003CTresMeshStandardMaterial\n      :map=\"textures[0]\"\n      :normal-map=\"textures[1]\"\n      :roughness-map=\"textures[2]\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n",[510,920,4057,4058,4059],[561,4431,4432,4452,4472,4476,4481,4493,4506,4517,4526,4531,4535,4540,4567,4575,4579,4587,4595,4603,4610,4625,4640,4655,4659,4667],{"__ignoreMap":508},[564,4433,4434,4436,4438,4440,4442,4444,4446,4448,4450],{"class":566,"line":509},[564,4435,570],{"class":569},[564,4437,574],{"class":573},[564,4439,578],{"class":577},[564,4441,581],{"class":577},[564,4443,584],{"class":569},[564,4445,587],{"class":569},[564,4447,591],{"class":590},[564,4449,587],{"class":569},[564,4451,596],{"class":569},[564,4453,4455,4457,4459,4462,4464,4466,4468,4470],{"class":4454,"line":510},[566,600],[564,4456,604],{"class":603},[564,4458,607],{"class":569},[564,4460,4461],{"class":610}," useTextures",[564,4463,614],{"class":569},[564,4465,617],{"class":603},[564,4467,620],{"class":569},[564,4469,623],{"class":590},[564,4471,626],{"class":569},[564,4473,4474],{"class":566,"line":629},[564,4475,632],{"emptyLinePlaceholder":516},[564,4477,4478],{"class":566,"line":635},[564,4479,4480],{"class":1379},"// Define an array of texture paths\n",[564,4482,4483,4485,4488,4490],{"class":566,"line":558},[564,4484,638],{"class":577},[564,4486,4487],{"class":610}," texturePaths ",[564,4489,584],{"class":569},[564,4491,4492],{"class":610}," [\n",[564,4494,4495,4498,4501,4503],{"class":566,"line":686},[564,4496,4497],{"class":569},"  '",[564,4499,4500],{"class":590},"/textures/color.jpg",[564,4502,1077],{"class":569},[564,4504,4505],{"class":569},",\n",[564,4507,4508,4510,4513,4515],{"class":566,"line":696},[564,4509,4497],{"class":569},[564,4511,4512],{"class":590},"/textures/normal.jpg",[564,4514,1077],{"class":569},[564,4516,4505],{"class":569},[564,4518,4519,4521,4524],{"class":566,"line":701},[564,4520,4497],{"class":569},[564,4522,4523],{"class":590},"/textures/roughness.jpg",[564,4525,626],{"class":569},[564,4527,4528],{"class":566,"line":711},[564,4529,4530],{"class":610},"]\n",[564,4532,4533],{"class":566,"line":747},[564,4534,632],{"emptyLinePlaceholder":516},[564,4536,4537],{"class":566,"line":910},[564,4538,4539],{"class":1379},"// Load all textures at once\n",[564,4541,4543,4545,4547,4550,4552,4554,4556,4558,4560,4562,4564],{"class":4542,"line":920},[566,600],[564,4544,638],{"class":577},[564,4546,607],{"class":569},[564,4548,4549],{"class":610}," textures",[564,4551,663],{"class":569},[564,4553,3841],{"class":610},[564,4555,663],{"class":569},[564,4557,3846],{"class":610},[564,4559,674],{"class":569},[564,4561,677],{"class":569},[564,4563,4461],{"class":680},[564,4565,4566],{"class":610},"(texturePaths)\n",[564,4568,4569,4571,4573],{"class":566,"line":928},[564,4570,689],{"class":569},[564,4572,574],{"class":573},[564,4574,596],{"class":569},[564,4576,4577],{"class":566,"line":944},[564,4578,632],{"emptyLinePlaceholder":516},[564,4580,4581,4583,4585],{"class":566,"line":959},[564,4582,570],{"class":569},[564,4584,706],{"class":573},[564,4586,596],{"class":569},[564,4588,4589,4591,4593],{"class":566,"line":965},[564,4590,714],{"class":569},[564,4592,3881],{"class":573},[564,4594,596],{"class":569},[564,4596,4597,4599,4601],{"class":566,"line":987},[564,4598,881],{"class":569},[564,4600,3890],{"class":573},[564,4602,744],{"class":569},[564,4604,4605,4607],{"class":566,"line":997},[564,4606,881],{"class":569},[564,4608,4609],{"class":573},"TresMeshStandardMaterial\n",[564,4611,4613,4616,4618,4620,4623],{"class":4612,"line":4057},[566,600],[564,4614,4615],{"class":577},"      :map",[564,4617,584],{"class":569},[564,4619,587],{"class":569},[564,4621,4622],{"class":590},"textures[0]",[564,4624,941],{"class":569},[564,4626,4628,4631,4633,4635,4638],{"class":4627,"line":4058},[566,600],[564,4629,4630],{"class":577},"      :normal-map",[564,4632,584],{"class":569},[564,4634,587],{"class":569},[564,4636,4637],{"class":590},"textures[1]",[564,4639,941],{"class":569},[564,4641,4643,4646,4648,4650,4653],{"class":4642,"line":4059},[566,600],[564,4644,4645],{"class":577},"      :roughness-map",[564,4647,584],{"class":569},[564,4649,587],{"class":569},[564,4651,4652],{"class":590},"textures[2]",[564,4654,941],{"class":569},[564,4656,4657],{"class":566,"line":4330},[564,4658,962],{"class":569},[564,4660,4661,4663,4665],{"class":566,"line":4339},[564,4662,990],{"class":569},[564,4664,3881],{"class":573},[564,4666,596],{"class":569},[564,4668,4669,4671,4673],{"class":566,"line":4349},[564,4670,689],{"class":569},[564,4672,706],{"class":573},[564,4674,596],{"class":569},[545,4676,4678],{"id":4677},"pbr-textures-example","PBR Textures Example",[536,4680,4681],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[552,4683,4686],{"className":554,"code":4684,"filename":4685,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLightHelper } from '@tresjs/core'\nimport { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'\nimport { MeshStandardMaterial } from 'three'\n\n// Load the 3D model\nconst { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })\nconst cube = computed(() => model.value?.nodes?.BlenderCube)\nconst material = computed(() => model.value?.materials?.Material)\n\n// Define texture paths\nconst texturePaths = [\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',\n  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'\n]\n\n// Load all PBR textures at once\nconst { textures, isLoading, error } = useTextures(texturePaths)\n\n// Apply textures to material when loaded\nwatch([material, textures], ([modelMaterial, textures]) => {\n  if (modelMaterial && textures && textures.length === texturePaths.length) {\n    // Cast to MeshStandardMaterial to access PBR properties\n    const pbrMaterial = modelMaterial as MeshStandardMaterial\n\n    // Apply textures\n    pbrMaterial.map = textures[0]\n    pbrMaterial.normalMap = textures[1]\n    pbrMaterial.roughnessMap = textures[2]\n    pbrMaterial.metalnessMap = textures[3]\n    pbrMaterial.displacementMap = textures[4]\n\n    // Set material properties\n    pbrMaterial.displacementScale = 0\n    pbrMaterial.metalness = 0.8\n    pbrMaterial.roughness = 0.2\n  }\n})\n\n// Handle loading state and errors\nwatch(isLoading, (_loading) => {\n  // Handle loading state\n})\n\nwatch(error, (errs) => {\n  if (errs) {\n    console.error('Error loading textures:', errs)\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#4f4f4f\">\n    \u003CSuspense>\n      \u003CEnvironment preset=\"studio\" background :blur=\"1\" />\n    \u003C/Suspense>\n    \u003CTresPerspectiveCamera :position=\"[8, 8, 8]\" />\n    \u003COrbitControls />\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight :intensity=\"2\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[5, 5, 5]\" :intensity=\"0.5\" color=\"#ff0000\" />\n    \u003CTresDirectionalLight v-light-helper :position=\"[-5, 2, 2]\" :intensity=\"0.5\" color=\"#0000ff\" />\n    \u003CTresGroup position-y=\"2\">\n      \u003Cprimitive v-if=\"cube\" :object=\"cube\" />\n    \u003C/TresGroup>\n  \u003C/TresCanvas>\n\u003C/template>\n","PBRTextures.vue",[561,4687,4688,4708,4731,4762,4780,4784,4789,4831,4865,4896,4900,4905,4915,4926,4937,4948,4959,4968,4972,4976,4981,5005,5009,5014,5045,5084,5089,5108,5113,5119,5141,5161,5181,5202,5223,5228,5234,5249,5264,5279,5285,5292,5297,5303,5324,5330,5337,5342,5363,5376,5402,5407,5414,5423,5428,5437,5457,5467,5502,5511,5531,5540,5550,5569,5616,5659,5680,5710,5719,5728],{"__ignoreMap":508},[564,4689,4690,4692,4694,4696,4698,4700,4702,4704,4706],{"class":566,"line":509},[564,4691,570],{"class":569},[564,4693,574],{"class":573},[564,4695,578],{"class":577},[564,4697,581],{"class":577},[564,4699,584],{"class":569},[564,4701,587],{"class":569},[564,4703,591],{"class":590},[564,4705,587],{"class":569},[564,4707,596],{"class":569},[564,4709,4710,4712,4714,4716,4718,4721,4723,4725,4727,4729],{"class":566,"line":510},[564,4711,604],{"class":603},[564,4713,607],{"class":569},[564,4715,807],{"class":610},[564,4717,663],{"class":569},[564,4719,4720],{"class":610}," vLightHelper",[564,4722,614],{"class":569},[564,4724,617],{"class":603},[564,4726,620],{"class":569},[564,4728,816],{"class":590},[564,4730,626],{"class":569},[564,4732,4733,4735,4737,4740,4742,4744,4746,4748,4750,4752,4754,4756,4758,4760],{"class":566,"line":629},[564,4734,604],{"class":603},[564,4736,607],{"class":569},[564,4738,4739],{"class":610}," Environment",[564,4741,663],{"class":569},[564,4743,788],{"class":610},[564,4745,663],{"class":569},[564,4747,611],{"class":610},[564,4749,663],{"class":569},[564,4751,4461],{"class":610},[564,4753,614],{"class":569},[564,4755,617],{"class":603},[564,4757,620],{"class":569},[564,4759,623],{"class":590},[564,4761,626],{"class":569},[564,4763,4764,4766,4768,4770,4772,4774,4776,4778],{"class":566,"line":635},[564,4765,604],{"class":603},[564,4767,607],{"class":569},[564,4769,1478],{"class":610},[564,4771,614],{"class":569},[564,4773,617],{"class":603},[564,4775,620],{"class":569},[564,4777,1487],{"class":590},[564,4779,626],{"class":569},[564,4781,4782],{"class":566,"line":558},[564,4783,632],{"emptyLinePlaceholder":516},[564,4785,4786],{"class":566,"line":686},[564,4787,4788],{"class":1379},"// Load the 3D model\n",[564,4790,4791,4793,4795,4797,4799,4802,4804,4806,4808,4810,4812,4815,4817,4819,4821,4823,4825,4827,4829],{"class":566,"line":696},[564,4792,638],{"class":577},[564,4794,607],{"class":569},[564,4796,660],{"class":573},[564,4798,1092],{"class":569},[564,4800,4801],{"class":610}," model ",[564,4803,674],{"class":569},[564,4805,677],{"class":569},[564,4807,611],{"class":680},[564,4809,1074],{"class":610},[564,4811,1077],{"class":569},[564,4813,4814],{"class":590},"/blender-cube-draco.glb",[564,4816,1077],{"class":569},[564,4818,663],{"class":569},[564,4820,607],{"class":569},[564,4822,1089],{"class":573},[564,4824,1092],{"class":569},[564,4826,1096],{"class":1095},[564,4828,614],{"class":569},[564,4830,1101],{"class":610},[564,4832,4833,4835,4838,4840,4843,4845,4847,4849,4852,4854,4856,4858,4860,4862],{"class":566,"line":701},[564,4834,638],{"class":577},[564,4836,4837],{"class":610}," cube ",[564,4839,584],{"class":569},[564,4841,4842],{"class":680}," computed",[564,4844,1074],{"class":610},[564,4846,2174],{"class":569},[564,4848,2177],{"class":577},[564,4850,4851],{"class":610}," model",[564,4853,1394],{"class":569},[564,4855,1397],{"class":610},[564,4857,2187],{"class":569},[564,4859,1154],{"class":610},[564,4861,2187],{"class":569},[564,4863,4864],{"class":610},"BlenderCube)\n",[564,4866,4867,4869,4871,4873,4875,4877,4879,4881,4883,4885,4887,4889,4891,4893],{"class":566,"line":711},[564,4868,638],{"class":577},[564,4870,1418],{"class":610},[564,4872,584],{"class":569},[564,4874,4842],{"class":680},[564,4876,1074],{"class":610},[564,4878,2174],{"class":569},[564,4880,2177],{"class":577},[564,4882,4851],{"class":610},[564,4884,1394],{"class":569},[564,4886,1397],{"class":610},[564,4888,2187],{"class":569},[564,4890,1169],{"class":610},[564,4892,2187],{"class":569},[564,4894,4895],{"class":610},"Material)\n",[564,4897,4898],{"class":566,"line":747},[564,4899,632],{"emptyLinePlaceholder":516},[564,4901,4902],{"class":566,"line":910},[564,4903,4904],{"class":1379},"// Define texture paths\n",[564,4906,4907,4909,4911,4913],{"class":566,"line":920},[564,4908,638],{"class":577},[564,4910,4487],{"class":610},[564,4912,584],{"class":569},[564,4914,4492],{"class":610},[564,4916,4917,4919,4922,4924],{"class":566,"line":928},[564,4918,4497],{"class":569},[564,4920,4921],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg",[564,4923,1077],{"class":569},[564,4925,4505],{"class":569},[564,4927,4928,4930,4933,4935],{"class":566,"line":944},[564,4929,4497],{"class":569},[564,4931,4932],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg",[564,4934,1077],{"class":569},[564,4936,4505],{"class":569},[564,4938,4939,4941,4944,4946],{"class":566,"line":959},[564,4940,4497],{"class":569},[564,4942,4943],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg",[564,4945,1077],{"class":569},[564,4947,4505],{"class":569},[564,4949,4950,4952,4955,4957],{"class":566,"line":965},[564,4951,4497],{"class":569},[564,4953,4954],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg",[564,4956,1077],{"class":569},[564,4958,4505],{"class":569},[564,4960,4961,4963,4966],{"class":566,"line":987},[564,4962,4497],{"class":569},[564,4964,4965],{"class":590},"/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg",[564,4967,626],{"class":569},[564,4969,4970],{"class":566,"line":997},[564,4971,4530],{"class":610},[564,4973,4974],{"class":566,"line":4057},[564,4975,632],{"emptyLinePlaceholder":516},[564,4977,4978],{"class":566,"line":4058},[564,4979,4980],{"class":1379},"// Load all PBR textures at once\n",[564,4982,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001,5003],{"class":566,"line":4059},[564,4984,638],{"class":577},[564,4986,607],{"class":569},[564,4988,4549],{"class":610},[564,4990,663],{"class":569},[564,4992,3841],{"class":610},[564,4994,663],{"class":569},[564,4996,3846],{"class":610},[564,4998,674],{"class":569},[564,5000,677],{"class":569},[564,5002,4461],{"class":680},[564,5004,4566],{"class":610},[564,5006,5007],{"class":566,"line":4330},[564,5008,632],{"emptyLinePlaceholder":516},[564,5010,5011],{"class":566,"line":4339},[564,5012,5013],{"class":1379},"// Apply textures to material when loaded\n",[564,5015,5016,5018,5021,5023,5026,5028,5031,5034,5036,5038,5041,5043],{"class":566,"line":4349},[564,5017,2169],{"class":680},[564,5019,5020],{"class":610},"([material",[564,5022,663],{"class":569},[564,5024,5025],{"class":610}," textures]",[564,5027,663],{"class":569},[564,5029,5030],{"class":569}," ([",[564,5032,5033],{"class":2197},"modelMaterial",[564,5035,663],{"class":569},[564,5037,4549],{"class":2197},[564,5039,5040],{"class":569},"])",[564,5042,2177],{"class":577},[564,5044,2206],{"class":569},[564,5046,5047,5050,5052,5054,5057,5059,5061,5063,5065,5068,5071,5074,5076,5078,5081],{"class":566,"line":4368},[564,5048,5049],{"class":603},"  if",[564,5051,2194],{"class":573},[564,5053,5033],{"class":610},[564,5055,5056],{"class":569}," &&",[564,5058,4549],{"class":610},[564,5060,5056],{"class":569},[564,5062,4549],{"class":610},[564,5064,1394],{"class":569},[564,5066,5067],{"class":610},"length",[564,5069,5070],{"class":569}," ===",[564,5072,5073],{"class":610}," texturePaths",[564,5075,1394],{"class":569},[564,5077,5067],{"class":610},[564,5079,5080],{"class":573},") ",[564,5082,5083],{"class":569},"{\n",[564,5085,5086],{"class":566,"line":4060},[564,5087,5088],{"class":1379},"    // Cast to MeshStandardMaterial to access PBR properties\n",[564,5090,5091,5094,5097,5099,5102,5105],{"class":566,"line":4387},[564,5092,5093],{"class":577},"    const",[564,5095,5096],{"class":610}," pbrMaterial",[564,5098,677],{"class":569},[564,5100,5101],{"class":610}," modelMaterial",[564,5103,5104],{"class":603}," as",[564,5106,5107],{"class":1519}," MeshStandardMaterial\n",[564,5109,5111],{"class":566,"line":5110},28,[564,5112,632],{"emptyLinePlaceholder":516},[564,5114,5116],{"class":566,"line":5115},29,[564,5117,5118],{"class":1379},"    // Apply textures\n",[564,5120,5122,5125,5127,5130,5132,5134,5137,5139],{"class":566,"line":5121},30,[564,5123,5124],{"class":610},"    pbrMaterial",[564,5126,1394],{"class":569},[564,5128,5129],{"class":610},"map",[564,5131,677],{"class":569},[564,5133,4549],{"class":610},[564,5135,5136],{"class":573},"[",[564,5138,2232],{"class":2231},[564,5140,4530],{"class":573},[564,5142,5144,5146,5148,5151,5153,5155,5157,5159],{"class":566,"line":5143},31,[564,5145,5124],{"class":610},[564,5147,1394],{"class":569},[564,5149,5150],{"class":610},"normalMap",[564,5152,677],{"class":569},[564,5154,4549],{"class":610},[564,5156,5136],{"class":573},[564,5158,980],{"class":2231},[564,5160,4530],{"class":573},[564,5162,5164,5166,5168,5171,5173,5175,5177,5179],{"class":566,"line":5163},32,[564,5165,5124],{"class":610},[564,5167,1394],{"class":569},[564,5169,5170],{"class":610},"roughnessMap",[564,5172,677],{"class":569},[564,5174,4549],{"class":610},[564,5176,5136],{"class":573},[564,5178,938],{"class":2231},[564,5180,4530],{"class":573},[564,5182,5184,5186,5188,5191,5193,5195,5197,5200],{"class":566,"line":5183},33,[564,5185,5124],{"class":610},[564,5187,1394],{"class":569},[564,5189,5190],{"class":610},"metalnessMap",[564,5192,677],{"class":569},[564,5194,4549],{"class":610},[564,5196,5136],{"class":573},[564,5198,5199],{"class":2231},"3",[564,5201,4530],{"class":573},[564,5203,5205,5207,5209,5212,5214,5216,5218,5221],{"class":566,"line":5204},34,[564,5206,5124],{"class":610},[564,5208,1394],{"class":569},[564,5210,5211],{"class":610},"displacementMap",[564,5213,677],{"class":569},[564,5215,4549],{"class":610},[564,5217,5136],{"class":573},[564,5219,5220],{"class":2231},"4",[564,5222,4530],{"class":573},[564,5224,5226],{"class":566,"line":5225},35,[564,5227,632],{"emptyLinePlaceholder":516},[564,5229,5231],{"class":566,"line":5230},36,[564,5232,5233],{"class":1379},"    // Set material properties\n",[564,5235,5237,5239,5241,5244,5246],{"class":566,"line":5236},37,[564,5238,5124],{"class":610},[564,5240,1394],{"class":569},[564,5242,5243],{"class":610},"displacementScale",[564,5245,677],{"class":569},[564,5247,5248],{"class":2231}," 0\n",[564,5250,5252,5254,5256,5259,5261],{"class":566,"line":5251},38,[564,5253,5124],{"class":610},[564,5255,1394],{"class":569},[564,5257,5258],{"class":610},"metalness",[564,5260,677],{"class":569},[564,5262,5263],{"class":2231}," 0.8\n",[564,5265,5267,5269,5271,5274,5276],{"class":566,"line":5266},39,[564,5268,5124],{"class":610},[564,5270,1394],{"class":569},[564,5272,5273],{"class":610},"roughness",[564,5275,677],{"class":569},[564,5277,5278],{"class":2231}," 0.2\n",[564,5280,5282],{"class":566,"line":5281},40,[564,5283,5284],{"class":569},"  }\n",[564,5286,5288,5290],{"class":566,"line":5287},41,[564,5289,674],{"class":569},[564,5291,1101],{"class":610},[564,5293,5295],{"class":566,"line":5294},42,[564,5296,632],{"emptyLinePlaceholder":516},[564,5298,5300],{"class":566,"line":5299},43,[564,5301,5302],{"class":1379},"// Handle loading state and errors\n",[564,5304,5306,5308,5311,5313,5315,5318,5320,5322],{"class":566,"line":5305},44,[564,5307,2169],{"class":680},[564,5309,5310],{"class":610},"(isLoading",[564,5312,663],{"class":569},[564,5314,2194],{"class":569},[564,5316,5317],{"class":2197},"_loading",[564,5319,2201],{"class":569},[564,5321,2177],{"class":577},[564,5323,2206],{"class":569},[564,5325,5327],{"class":566,"line":5326},45,[564,5328,5329],{"class":1379},"  // Handle loading state\n",[564,5331,5333,5335],{"class":566,"line":5332},46,[564,5334,674],{"class":569},[564,5336,1101],{"class":610},[564,5338,5340],{"class":566,"line":5339},47,[564,5341,632],{"emptyLinePlaceholder":516},[564,5343,5345,5347,5350,5352,5354,5357,5359,5361],{"class":566,"line":5344},48,[564,5346,2169],{"class":680},[564,5348,5349],{"class":610},"(error",[564,5351,663],{"class":569},[564,5353,2194],{"class":569},[564,5355,5356],{"class":2197},"errs",[564,5358,2201],{"class":569},[564,5360,2177],{"class":577},[564,5362,2206],{"class":569},[564,5364,5366,5368,5370,5372,5374],{"class":566,"line":5365},49,[564,5367,5049],{"class":603},[564,5369,2194],{"class":573},[564,5371,5356],{"class":610},[564,5373,5080],{"class":573},[564,5375,5083],{"class":569},[564,5377,5379,5382,5384,5386,5388,5390,5393,5395,5397,5400],{"class":566,"line":5378},50,[564,5380,5381],{"class":610},"    console",[564,5383,1394],{"class":569},[564,5385,1199],{"class":680},[564,5387,1074],{"class":573},[564,5389,1077],{"class":569},[564,5391,5392],{"class":590},"Error loading textures:",[564,5394,1077],{"class":569},[564,5396,663],{"class":569},[564,5398,5399],{"class":610}," errs",[564,5401,1101],{"class":573},[564,5403,5405],{"class":566,"line":5404},51,[564,5406,5284],{"class":569},[564,5408,5410,5412],{"class":566,"line":5409},52,[564,5411,674],{"class":569},[564,5413,1101],{"class":610},[564,5415,5417,5419,5421],{"class":566,"line":5416},53,[564,5418,689],{"class":569},[564,5420,574],{"class":573},[564,5422,596],{"class":569},[564,5424,5426],{"class":566,"line":5425},54,[564,5427,632],{"emptyLinePlaceholder":516},[564,5429,5431,5433,5435],{"class":566,"line":5430},55,[564,5432,570],{"class":569},[564,5434,706],{"class":573},[564,5436,596],{"class":569},[564,5438,5440,5442,5444,5446,5448,5450,5453,5455],{"class":566,"line":5439},56,[564,5441,714],{"class":569},[564,5443,862],{"class":573},[564,5445,865],{"class":577},[564,5447,584],{"class":569},[564,5449,587],{"class":569},[564,5451,5452],{"class":590},"#4f4f4f",[564,5454,587],{"class":569},[564,5456,596],{"class":569},[564,5458,5460,5462,5465],{"class":566,"line":5459},57,[564,5461,881],{"class":569},[564,5463,5464],{"class":573},"Suspense",[564,5466,596],{"class":569},[564,5468,5470,5472,5474,5477,5479,5481,5484,5486,5489,5492,5494,5496,5498,5500],{"class":566,"line":5469},58,[564,5471,4342],{"class":569},[564,5473,375],{"class":573},[564,5475,5476],{"class":577}," preset",[564,5478,584],{"class":569},[564,5480,587],{"class":569},[564,5482,5483],{"class":590},"studio",[564,5485,587],{"class":569},[564,5487,5488],{"class":577}," background",[564,5490,5491],{"class":577}," :blur",[564,5493,584],{"class":569},[564,5495,587],{"class":569},[564,5497,980],{"class":590},[564,5499,587],{"class":569},[564,5501,744],{"class":569},[564,5503,5505,5507,5509],{"class":566,"line":5504},59,[564,5506,4371],{"class":569},[564,5508,5464],{"class":573},[564,5510,596],{"class":569},[564,5512,5514,5516,5518,5520,5522,5524,5527,5529],{"class":566,"line":5513},60,[564,5515,881],{"class":569},[564,5517,884],{"class":573},[564,5519,887],{"class":577},[564,5521,584],{"class":569},[564,5523,587],{"class":569},[564,5525,5526],{"class":590},"[8, 8, 8]",[564,5528,587],{"class":569},[564,5530,744],{"class":569},[564,5532,5534,5536,5538],{"class":566,"line":5533},61,[564,5535,881],{"class":569},[564,5537,905],{"class":573},[564,5539,744],{"class":569},[564,5541,5543,5545,5548],{"class":566,"line":5542},62,[564,5544,881],{"class":569},[564,5546,5547],{"class":573},"TresGridHelper",[564,5549,744],{"class":569},[564,5551,5553,5555,5557,5559,5561,5563,5565,5567],{"class":566,"line":5552},63,[564,5554,881],{"class":569},[564,5556,970],{"class":573},[564,5558,973],{"class":577},[564,5560,584],{"class":569},[564,5562,587],{"class":569},[564,5564,938],{"class":590},[564,5566,587],{"class":569},[564,5568,744],{"class":569},[564,5570,5572,5574,5577,5580,5582,5584,5586,5589,5591,5593,5595,5597,5600,5602,5605,5607,5609,5612,5614],{"class":566,"line":5571},64,[564,5573,881],{"class":569},[564,5575,5576],{"class":573},"TresDirectionalLight",[564,5578,5579],{"class":577}," v-light-helper",[564,5581,887],{"class":577},[564,5583,584],{"class":569},[564,5585,587],{"class":569},[564,5587,5588],{"class":590},"[5, 5, 5]",[564,5590,587],{"class":569},[564,5592,973],{"class":577},[564,5594,584],{"class":569},[564,5596,587],{"class":569},[564,5598,5599],{"class":590},"0.5",[564,5601,587],{"class":569},[564,5603,5604],{"class":577}," color",[564,5606,584],{"class":569},[564,5608,587],{"class":569},[564,5610,5611],{"class":590},"#ff0000",[564,5613,587],{"class":569},[564,5615,744],{"class":569},[564,5617,5619,5621,5623,5625,5627,5629,5631,5634,5636,5638,5640,5642,5644,5646,5648,5650,5652,5655,5657],{"class":566,"line":5618},65,[564,5620,881],{"class":569},[564,5622,5576],{"class":573},[564,5624,5579],{"class":577},[564,5626,887],{"class":577},[564,5628,584],{"class":569},[564,5630,587],{"class":569},[564,5632,5633],{"class":590},"[-5, 2, 2]",[564,5635,587],{"class":569},[564,5637,973],{"class":577},[564,5639,584],{"class":569},[564,5641,587],{"class":569},[564,5643,5599],{"class":590},[564,5645,587],{"class":569},[564,5647,5604],{"class":577},[564,5649,584],{"class":569},[564,5651,587],{"class":569},[564,5653,5654],{"class":590},"#0000ff",[564,5656,587],{"class":569},[564,5658,744],{"class":569},[564,5660,5662,5664,5667,5670,5672,5674,5676,5678],{"class":566,"line":5661},66,[564,5663,881],{"class":569},[564,5665,5666],{"class":573},"TresGroup",[564,5668,5669],{"class":577}," position-y",[564,5671,584],{"class":569},[564,5673,587],{"class":569},[564,5675,938],{"class":590},[564,5677,587],{"class":569},[564,5679,596],{"class":569},[564,5681,5683,5685,5687,5689,5691,5693,5696,5698,5700,5702,5704,5706,5708],{"class":566,"line":5682},67,[564,5684,4342],{"class":569},[564,5686,717],{"class":573},[564,5688,720],{"class":577},[564,5690,584],{"class":569},[564,5692,587],{"class":569},[564,5694,5695],{"class":590},"cube",[564,5697,587],{"class":569},[564,5699,732],{"class":577},[564,5701,584],{"class":569},[564,5703,587],{"class":569},[564,5705,5695],{"class":590},[564,5707,587],{"class":569},[564,5709,744],{"class":569},[564,5711,5713,5715,5717],{"class":566,"line":5712},68,[564,5714,4371],{"class":569},[564,5716,5666],{"class":573},[564,5718,596],{"class":569},[564,5720,5722,5724,5726],{"class":566,"line":5721},69,[564,5723,990],{"class":569},[564,5725,862],{"class":573},[564,5727,596],{"class":569},[564,5729,5731,5733,5735],{"class":566,"line":5730},70,[564,5732,689],{"class":569},[564,5734,706],{"class":573},[564,5736,596],{"class":569},[545,5738,5740],{"id":5739},"api","API",[5742,5743,5745],"h3",{"id":5744},"parameters","Parameters",[1107,5747,5748,5760],{},[1110,5749,5750],{},[1113,5751,5752,5754,5756,5758],{},[1116,5753,1119],{"align":1118},[1116,5755,1122],{},[1116,5757,1269],{},[1116,5759,1125],{},[1127,5761,5762],{},[1113,5763,5764,5769,5774,5778],{},[1132,5765,5766],{"align":1118},[540,5767,5768],{},"paths",[1132,5770,5771],{},[561,5772,5773],{},"string[]",[1132,5775,5776],{},[561,5777,2353],{},[1132,5779,5780],{},"Array of paths to the textures.",[5742,5782,5784],{"id":5783},"returns","Returns",[1107,5786,5787,5797],{},[1110,5788,5789],{},[1113,5790,5791,5793,5795],{},[1116,5792,1119],{"align":1118},[1116,5794,1122],{},[1116,5796,1125],{},[1127,5798,5799,5814,5827],{},[1113,5800,5801,5806,5811],{},[1132,5802,5803],{"align":1118},[540,5804,5805],{},"textures",[1132,5807,5808],{},[561,5809,5810],{},"Texture[]",[1132,5812,5813],{},"Array of loaded textures.",[1113,5815,5816,5820,5824],{},[1132,5817,5818],{"align":1118},[540,5819,1184],{},[1132,5821,5822],{},[561,5823,1284],{},[1132,5825,5826],{},"Whether any textures are still loading.",[1113,5828,5829,5833,5838],{},[1132,5830,5831],{"align":1118},[540,5832,1199],{},[1132,5834,5835],{},[561,5836,5837],{},"Error[] | null",[1132,5839,5840],{},"Array of errors if any occurred during loading.",[545,5842,5844],{"id":5843},"benefits","Benefits",[5846,5847,5848,5855,5861,5867],"ul",{},[5849,5850,5851,5854],"li",{},[540,5852,5853],{},"Simplified API",": Load multiple textures with a single function call",[5849,5856,5857,5860],{},[540,5858,5859],{},"Consolidated loading state",": Track loading state for all textures at once",[5849,5862,5863,5866],{},[540,5864,5865],{},"Unified error handling",": Collect and report errors from all texture loads",[5849,5868,5869,5872],{},[540,5870,5871],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1682,5874,5875],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":508,"searchDepth":509,"depth":510,"links":5877},[5878,5879,5880,5884],{"id":547,"depth":510,"text":15},{"id":4677,"depth":510,"text":4678},{"id":5739,"depth":510,"text":5740,"children":5881},[5882,5883],{"id":5744,"depth":629,"text":5745},{"id":5783,"depth":629,"text":5784},{"id":5843,"depth":510,"text":5844},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":153,"description":5885},"SGyfTzTHdLIy26Zf2q6_7GqcLLq8MvwoPurvEYXBwUI",{"id":5890,"title":157,"body":5891,"description":8759,"extension":513,"links":514,"meta":8760,"navigation":516,"path":158,"seo":8761,"stem":159,"__hash__":8762},"docs/2.api/3.loaders/7.use-svg.md",{"type":501,"value":5892,"toc":8734},[5893,5898,5911,5915,5920,5922,6408,6413,6427,6431,6434,6546,6548,6619,6621,6731,6735,6740,6797,6802,7111,7115,7120,7126,7131,7137,7155,7161,7176,7223,7226,7231,7242,7247,7250,7295,7299,7304,7307,7312,7321,7366,7371,7376,7388,7393,7435,7439,7442,7570,7574,7578,7882,7886,8181,8185,8192,8372,8374,8542,8546,8553,8556,8560,8570,8574,8598,8606,8619,8623,8650,8654,8675,8685,8693,8710,8717,8731],[530,5894,5895],{},[5896,5897],"loaders-use-svg",{},[536,5899,5900,5901,5903,5904,5906,5907,5910],{},"Load and display SVG elements in your ",[540,5902,542],{}," scene. This guide covers both the ",[561,5905,157],{}," composable for advanced use cases and the ",[561,5908,5909],{},"SVG"," component for simple declarative rendering.",[545,5912,5914],{"id":5913},"usesvg-composable","useSVG Composable",[536,5916,1706,5917,5919],{},[561,5918,157],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[5742,5921,15],{"id":547},[549,5923,5924,6227],{},[552,5925,5928],{"className":554,"code":5926,"filename":556,"highlights":5927,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst svgPath = './logo.svg'\nconst { state, layers, isLoading, dispose } = useSVG(svgPath, {\n  skipFills: false,\n  fillMaterial: { transparent: true, opacity: 0.8 }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup v-if=\"!isLoading\">\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"`layer-${index}`\"\n      :geometry=\"layer.geometry\"\n      :render-order=\"index\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[510,558,686,696,701],[561,5929,5930,5950,5970,5974,5990,6026,6039,6068,6075,6083,6087,6095,6114,6121,6135,6149,6163,6177,6182,6203,6211,6219],{"__ignoreMap":508},[564,5931,5932,5934,5936,5938,5940,5942,5944,5946,5948],{"class":566,"line":509},[564,5933,570],{"class":569},[564,5935,574],{"class":573},[564,5937,578],{"class":577},[564,5939,581],{"class":577},[564,5941,584],{"class":569},[564,5943,587],{"class":569},[564,5945,591],{"class":590},[564,5947,587],{"class":569},[564,5949,596],{"class":569},[564,5951,5953,5955,5957,5960,5962,5964,5966,5968],{"class":5952,"line":510},[566,600],[564,5954,604],{"class":603},[564,5956,607],{"class":569},[564,5958,5959],{"class":610}," useSVG",[564,5961,614],{"class":569},[564,5963,617],{"class":603},[564,5965,620],{"class":569},[564,5967,623],{"class":590},[564,5969,626],{"class":569},[564,5971,5972],{"class":566,"line":629},[564,5973,632],{"emptyLinePlaceholder":516},[564,5975,5976,5978,5981,5983,5985,5988],{"class":566,"line":635},[564,5977,638],{"class":577},[564,5979,5980],{"class":610}," svgPath ",[564,5982,584],{"class":569},[564,5984,620],{"class":569},[564,5986,5987],{"class":590},"./logo.svg",[564,5989,626],{"class":569},[564,5991,5993,5995,5997,5999,6001,6004,6006,6008,6010,6013,6015,6017,6019,6022,6024],{"class":5992,"line":558},[566,600],[564,5994,638],{"class":577},[564,5996,607],{"class":569},[564,5998,660],{"class":610},[564,6000,663],{"class":569},[564,6002,6003],{"class":610}," layers",[564,6005,663],{"class":569},[564,6007,3841],{"class":610},[564,6009,663],{"class":569},[564,6011,6012],{"class":610}," dispose ",[564,6014,674],{"class":569},[564,6016,677],{"class":569},[564,6018,5959],{"class":680},[564,6020,6021],{"class":610},"(svgPath",[564,6023,663],{"class":569},[564,6025,2206],{"class":569},[564,6027,6029,6032,6034,6037],{"class":6028,"line":686},[566,600],[564,6030,6031],{"class":573},"  skipFills",[564,6033,1092],{"class":569},[564,6035,6036],{"class":1095}," false",[564,6038,4505],{"class":569},[564,6040,6042,6045,6047,6049,6052,6054,6056,6058,6061,6063,6066],{"class":6041,"line":696},[566,600],[564,6043,6044],{"class":573},"  fillMaterial",[564,6046,1092],{"class":569},[564,6048,607],{"class":569},[564,6050,6051],{"class":573}," transparent",[564,6053,1092],{"class":569},[564,6055,1096],{"class":1095},[564,6057,663],{"class":569},[564,6059,6060],{"class":573}," opacity",[564,6062,1092],{"class":569},[564,6064,6065],{"class":2231}," 0.8",[564,6067,1532],{"class":569},[564,6069,6071,6073],{"class":6070,"line":701},[566,600],[564,6072,674],{"class":569},[564,6074,1101],{"class":610},[564,6076,6077,6079,6081],{"class":566,"line":711},[564,6078,689],{"class":569},[564,6080,574],{"class":573},[564,6082,596],{"class":569},[564,6084,6085],{"class":566,"line":747},[564,6086,632],{"emptyLinePlaceholder":516},[564,6088,6089,6091,6093],{"class":566,"line":910},[564,6090,570],{"class":569},[564,6092,706],{"class":573},[564,6094,596],{"class":569},[564,6096,6097,6099,6101,6103,6105,6107,6110,6112],{"class":566,"line":920},[564,6098,714],{"class":569},[564,6100,5666],{"class":573},[564,6102,720],{"class":577},[564,6104,584],{"class":569},[564,6106,587],{"class":569},[564,6108,6109],{"class":590},"!isLoading",[564,6111,587],{"class":569},[564,6113,596],{"class":569},[564,6115,6116,6118],{"class":566,"line":928},[564,6117,881],{"class":569},[564,6119,6120],{"class":573},"TresMesh\n",[564,6122,6123,6126,6128,6130,6133],{"class":566,"line":944},[564,6124,6125],{"class":577},"      v-for",[564,6127,584],{"class":569},[564,6129,587],{"class":569},[564,6131,6132],{"class":590},"(layer, index) in layers",[564,6134,941],{"class":569},[564,6136,6137,6140,6142,6144,6147],{"class":566,"line":959},[564,6138,6139],{"class":577},"      :key",[564,6141,584],{"class":569},[564,6143,587],{"class":569},[564,6145,6146],{"class":590},"`layer-${index}`",[564,6148,941],{"class":569},[564,6150,6151,6154,6156,6158,6161],{"class":566,"line":965},[564,6152,6153],{"class":577},"      :geometry",[564,6155,584],{"class":569},[564,6157,587],{"class":569},[564,6159,6160],{"class":590},"layer.geometry",[564,6162,941],{"class":569},[564,6164,6165,6168,6170,6172,6175],{"class":566,"line":987},[564,6166,6167],{"class":577},"      :render-order",[564,6169,584],{"class":569},[564,6171,587],{"class":569},[564,6173,6174],{"class":590},"index",[564,6176,941],{"class":569},[564,6178,6179],{"class":566,"line":997},[564,6180,6181],{"class":569},"    >\n",[564,6183,6184,6186,6189,6192,6194,6196,6199,6201],{"class":566,"line":4057},[564,6185,4342],{"class":569},[564,6187,6188],{"class":573},"TresMeshBasicMaterial",[564,6190,6191],{"class":577}," v-bind",[564,6193,584],{"class":569},[564,6195,587],{"class":569},[564,6197,6198],{"class":590},"layer.material",[564,6200,587],{"class":569},[564,6202,744],{"class":569},[564,6204,6205,6207,6209],{"class":566,"line":4058},[564,6206,4371],{"class":569},[564,6208,3881],{"class":573},[564,6210,596],{"class":569},[564,6212,6213,6215,6217],{"class":566,"line":4059},[564,6214,990],{"class":569},[564,6216,5666],{"class":573},[564,6218,596],{"class":569},[564,6220,6221,6223,6225],{"class":566,"line":4330},[564,6222,689],{"class":569},[564,6224,706],{"class":573},[564,6226,596],{"class":569},[552,6228,6230],{"className":554,"code":6229,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 10]\" />\n    \u003COrbitControls />\n    \u003CTheModel />\n    \u003CTresAmbientLight />\n    \u003CTresDirectionalLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,6231,6232,6252,6270,6288,6302,6310,6314,6322,6341,6360,6368,6376,6384,6392,6400],{"__ignoreMap":508},[564,6233,6234,6236,6238,6240,6242,6244,6246,6248,6250],{"class":566,"line":509},[564,6235,570],{"class":569},[564,6237,574],{"class":573},[564,6239,578],{"class":577},[564,6241,581],{"class":577},[564,6243,584],{"class":569},[564,6245,587],{"class":569},[564,6247,591],{"class":590},[564,6249,587],{"class":569},[564,6251,596],{"class":569},[564,6253,6254,6256,6258,6260,6262,6264,6266,6268],{"class":566,"line":510},[564,6255,604],{"class":603},[564,6257,607],{"class":569},[564,6259,788],{"class":610},[564,6261,614],{"class":569},[564,6263,617],{"class":603},[564,6265,620],{"class":569},[564,6267,623],{"class":590},[564,6269,626],{"class":569},[564,6271,6272,6274,6276,6278,6280,6282,6284,6286],{"class":566,"line":629},[564,6273,604],{"class":603},[564,6275,607],{"class":569},[564,6277,807],{"class":610},[564,6279,614],{"class":569},[564,6281,617],{"class":603},[564,6283,620],{"class":569},[564,6285,816],{"class":590},[564,6287,626],{"class":569},[564,6289,6290,6292,6294,6296,6298,6300],{"class":566,"line":635},[564,6291,604],{"class":603},[564,6293,825],{"class":610},[564,6295,828],{"class":603},[564,6297,620],{"class":569},[564,6299,833],{"class":590},[564,6301,626],{"class":569},[564,6303,6304,6306,6308],{"class":566,"line":558},[564,6305,689],{"class":569},[564,6307,574],{"class":573},[564,6309,596],{"class":569},[564,6311,6312],{"class":566,"line":686},[564,6313,632],{"emptyLinePlaceholder":516},[564,6315,6316,6318,6320],{"class":566,"line":696},[564,6317,570],{"class":569},[564,6319,706],{"class":573},[564,6321,596],{"class":569},[564,6323,6324,6326,6328,6330,6332,6334,6337,6339],{"class":566,"line":701},[564,6325,714],{"class":569},[564,6327,862],{"class":573},[564,6329,865],{"class":577},[564,6331,584],{"class":569},[564,6333,587],{"class":569},[564,6335,6336],{"class":590},"#333",[564,6338,587],{"class":569},[564,6340,596],{"class":569},[564,6342,6343,6345,6347,6349,6351,6353,6356,6358],{"class":566,"line":711},[564,6344,881],{"class":569},[564,6346,884],{"class":573},[564,6348,887],{"class":577},[564,6350,584],{"class":569},[564,6352,587],{"class":569},[564,6354,6355],{"class":590},"[0, 2, 10]",[564,6357,587],{"class":569},[564,6359,744],{"class":569},[564,6361,6362,6364,6366],{"class":566,"line":747},[564,6363,881],{"class":569},[564,6365,905],{"class":573},[564,6367,744],{"class":569},[564,6369,6370,6372,6374],{"class":566,"line":910},[564,6371,881],{"class":569},[564,6373,915],{"class":573},[564,6375,744],{"class":569},[564,6377,6378,6380,6382],{"class":566,"line":920},[564,6379,881],{"class":569},[564,6381,970],{"class":573},[564,6383,744],{"class":569},[564,6385,6386,6388,6390],{"class":566,"line":928},[564,6387,881],{"class":569},[564,6389,5576],{"class":573},[564,6391,744],{"class":569},[564,6393,6394,6396,6398],{"class":566,"line":944},[564,6395,990],{"class":569},[564,6397,862],{"class":573},[564,6399,596],{"class":569},[564,6401,6402,6404,6406],{"class":566,"line":959},[564,6403,689],{"class":569},[564,6405,706],{"class":573},[564,6407,596],{"class":569},[536,6409,1706,6410,6412],{},[561,6411,157],{}," composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:",[5846,6414,6415,6418,6421,6424],{},[5849,6416,6417],{},"Manually control layer rendering",[5849,6419,6420],{},"Apply custom animations to individual layers",[5849,6422,6423],{},"Access geometry data programmatically",[5849,6425,6426],{},"Implement complex material logic",[5742,6428,6430],{"id":6429},"svg-data-sources","SVG Data Sources",[536,6432,6433],{},"The composable accepts both file paths and inline SVG strings:",[552,6435,6437],{"className":1024,"code":6436,"language":591,"meta":508,"style":508},"import { useSVG } from '@tresjs/cientos'\n\n// From file\nconst { layers } = useSVG('/path/to/file.svg')\n\n// Inline SVG string\nconst svgString = `\u003Csvg viewBox=\"0 0 100 100\">\n  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n\u003C/svg>`\nconst { layers } = useSVG(svgString)\n",[561,6438,6439,6457,6461,6466,6492,6496,6501,6516,6521,6529],{"__ignoreMap":508},[564,6440,6441,6443,6445,6447,6449,6451,6453,6455],{"class":566,"line":509},[564,6442,604],{"class":603},[564,6444,607],{"class":569},[564,6446,5959],{"class":610},[564,6448,614],{"class":569},[564,6450,617],{"class":603},[564,6452,620],{"class":569},[564,6454,623],{"class":590},[564,6456,626],{"class":569},[564,6458,6459],{"class":566,"line":510},[564,6460,632],{"emptyLinePlaceholder":516},[564,6462,6463],{"class":566,"line":629},[564,6464,6465],{"class":1379},"// From file\n",[564,6467,6468,6470,6472,6475,6477,6479,6481,6483,6485,6488,6490],{"class":566,"line":635},[564,6469,638],{"class":577},[564,6471,607],{"class":569},[564,6473,6474],{"class":610}," layers ",[564,6476,674],{"class":569},[564,6478,677],{"class":569},[564,6480,5959],{"class":680},[564,6482,1074],{"class":610},[564,6484,1077],{"class":569},[564,6486,6487],{"class":590},"/path/to/file.svg",[564,6489,1077],{"class":569},[564,6491,1101],{"class":610},[564,6493,6494],{"class":566,"line":558},[564,6495,632],{"emptyLinePlaceholder":516},[564,6497,6498],{"class":566,"line":686},[564,6499,6500],{"class":1379},"// Inline SVG string\n",[564,6502,6503,6505,6508,6510,6513],{"class":566,"line":696},[564,6504,638],{"class":577},[564,6506,6507],{"class":610}," svgString ",[564,6509,584],{"class":569},[564,6511,6512],{"class":569}," `",[564,6514,6515],{"class":590},"\u003Csvg viewBox=\"0 0 100 100\">\n",[564,6517,6518],{"class":566,"line":701},[564,6519,6520],{"class":590},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" />\n",[564,6522,6523,6526],{"class":566,"line":711},[564,6524,6525],{"class":590},"\u003C/svg>",[564,6527,6528],{"class":569},"`\n",[564,6530,6531,6533,6535,6537,6539,6541,6543],{"class":566,"line":747},[564,6532,638],{"class":577},[564,6534,607],{"class":569},[564,6536,6474],{"class":610},[564,6538,674],{"class":569},[564,6540,677],{"class":569},[564,6542,5959],{"class":680},[564,6544,6545],{"class":610},"(svgString)\n",[5742,6547,1105],{"id":1104},[1107,6549,6550,6560],{},[1110,6551,6552],{},[1113,6553,6554,6556,6558],{},[1116,6555,1119],{"align":1118},[1116,6557,1122],{},[1116,6559,1125],{},[1127,6561,6562,6576,6591,6604],{},[1113,6563,6564,6568,6573],{},[1132,6565,6566],{"align":1118},[540,6567,727],{},[1132,6569,6570],{},[561,6571,6572],{},"SVGResult",[1132,6574,6575],{},"The loaded SVG state from SVGLoader",[1113,6577,6578,6583,6588],{},[1132,6579,6580],{"align":1118},[540,6581,6582],{},"layers",[1132,6584,6585],{},[561,6586,6587],{},"SVGLayer[]",[1132,6589,6590],{},"Computed array of processed geometries and materials",[1113,6592,6593,6597,6601],{},[1132,6594,6595],{"align":1118},[540,6596,1184],{},[1132,6598,6599],{},[561,6600,1284],{},[1132,6602,6603],{},"Whether the SVG is currently loading",[1113,6605,6606,6611,6616],{},[1132,6607,6608],{"align":1118},[540,6609,6610],{},"dispose",[1132,6612,6613],{},[561,6614,6615],{},"() => void",[1132,6617,6618],{},"Function to dispose of all geometries",[5742,6620,1256],{"id":1255},[1107,6622,6623,6635],{},[1110,6624,6625],{},[1113,6626,6627,6629,6631,6633],{},[1116,6628,1119],{"align":1118},[1116,6630,1122],{},[1116,6632,1269],{},[1116,6634,1125],{},[1127,6636,6637,6655,6673,6693,6711],{},[1113,6638,6639,6644,6648,6652],{},[1132,6640,6641],{"align":1118},[540,6642,6643],{},"skipStrokes",[1132,6645,6646],{},[561,6647,1284],{},[1132,6649,6650],{},[561,6651,1289],{},[1132,6653,6654],{},"Whether to skip rendering strokes",[1113,6656,6657,6662,6666,6670],{},[1132,6658,6659],{"align":1118},[540,6660,6661],{},"skipFills",[1132,6663,6664],{},[561,6665,1284],{},[1132,6667,6668],{},[561,6669,1289],{},[1132,6671,6672],{},"Whether to skip rendering fills",[1113,6674,6675,6680,6685,6690],{},[1132,6676,6677],{"align":1118},[540,6678,6679],{},"fillMaterial",[1132,6681,6682],{},[561,6683,6684],{},"MeshBasicMaterialParameters",[1132,6686,6687],{},[561,6688,6689],{},"{}",[1132,6691,6692],{},"Material properties for fill layers",[1113,6694,6695,6700,6704,6708],{},[1132,6696,6697],{"align":1118},[540,6698,6699],{},"strokeMaterial",[1132,6701,6702],{},[561,6703,6684],{},[1132,6705,6706],{},[561,6707,6689],{},[1132,6709,6710],{},"Material properties for stroke layers",[1113,6712,6713,6718,6723,6728],{},[1132,6714,6715],{"align":1118},[540,6716,6717],{},"depth",[1132,6719,6720],{},[561,6721,6722],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[1132,6724,6725],{},[561,6726,6727],{},"'renderOrder'",[1132,6729,6730],{},"How layers should be rendered in 3D space",[5742,6732,6734],{"id":6733},"working-with-layers","Working with Layers",[536,6736,1706,6737,6739],{},[561,6738,6582],{}," computed property returns an array of processed SVG elements, each containing:",[552,6741,6743],{"className":1024,"code":6742,"language":591,"meta":508,"style":508},"interface SVGLayer {\n  geometry: BufferGeometry // Three.js geometry for the layer\n  material: MeshBasicMaterialParameters // Material properties\n  isStroke: boolean // Whether this layer is a stroke or fill\n}\n",[561,6744,6745,6754,6767,6780,6793],{"__ignoreMap":508},[564,6746,6747,6749,6752],{"class":566,"line":509},[564,6748,1516],{"class":577},[564,6750,6751],{"class":1519}," SVGLayer",[564,6753,2206],{"class":569},[564,6755,6756,6759,6761,6764],{"class":566,"line":510},[564,6757,6758],{"class":573},"  geometry",[564,6760,1092],{"class":569},[564,6762,6763],{"class":1519}," BufferGeometry",[564,6765,6766],{"class":1379}," // Three.js geometry for the layer\n",[564,6768,6769,6772,6774,6777],{"class":566,"line":629},[564,6770,6771],{"class":573},"  material",[564,6773,1092],{"class":569},[564,6775,6776],{"class":1519}," MeshBasicMaterialParameters",[564,6778,6779],{"class":1379}," // Material properties\n",[564,6781,6782,6785,6787,6790],{"class":566,"line":635},[564,6783,6784],{"class":573},"  isStroke",[564,6786,1092],{"class":569},[564,6788,6789],{"class":1519}," boolean",[564,6791,6792],{"class":1379}," // Whether this layer is a stroke or fill\n",[564,6794,6795],{"class":566,"line":558},[564,6796,4179],{"class":569},[6798,6799,6801],"h4",{"id":6800},"accessing-individual-layers","Accessing Individual Layers",[552,6803,6806],{"className":554,"code":6804,"highlights":6805,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/complex-icon.svg')\n\n// Apply different materials based on layer type\nconst getFillColor = (layer: SVGLayer, index: number) => {\n  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :color=\"getFillColor(layer, index)\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[510,635],[561,6807,6808,6828,6847,6851,6877,6881,6886,6920,6970,6974,6982,6986,6994,7002,7008,7020,7032,7044,7048,7055,7068,7082,7087,7095,7103],{"__ignoreMap":508},[564,6809,6810,6812,6814,6816,6818,6820,6822,6824,6826],{"class":566,"line":509},[564,6811,570],{"class":569},[564,6813,574],{"class":573},[564,6815,578],{"class":577},[564,6817,581],{"class":577},[564,6819,584],{"class":569},[564,6821,587],{"class":569},[564,6823,591],{"class":590},[564,6825,587],{"class":569},[564,6827,596],{"class":569},[564,6829,6831,6833,6835,6837,6839,6841,6843,6845],{"class":6830,"line":510},[566,600],[564,6832,604],{"class":603},[564,6834,607],{"class":569},[564,6836,5959],{"class":610},[564,6838,614],{"class":569},[564,6840,617],{"class":603},[564,6842,620],{"class":569},[564,6844,623],{"class":590},[564,6846,626],{"class":569},[564,6848,6849],{"class":566,"line":629},[564,6850,632],{"emptyLinePlaceholder":516},[564,6852,6854,6856,6858,6860,6862,6864,6866,6868,6870,6873,6875],{"class":6853,"line":635},[566,600],[564,6855,638],{"class":577},[564,6857,607],{"class":569},[564,6859,6474],{"class":610},[564,6861,674],{"class":569},[564,6863,677],{"class":569},[564,6865,5959],{"class":680},[564,6867,1074],{"class":610},[564,6869,1077],{"class":569},[564,6871,6872],{"class":590},"/complex-icon.svg",[564,6874,1077],{"class":569},[564,6876,1101],{"class":610},[564,6878,6879],{"class":566,"line":558},[564,6880,632],{"emptyLinePlaceholder":516},[564,6882,6883],{"class":566,"line":686},[564,6884,6885],{"class":1379},"// Apply different materials based on layer type\n",[564,6887,6888,6890,6893,6895,6897,6900,6902,6904,6906,6909,6911,6914,6916,6918],{"class":566,"line":696},[564,6889,638],{"class":577},[564,6891,6892],{"class":610}," getFillColor ",[564,6894,584],{"class":569},[564,6896,2194],{"class":569},[564,6898,6899],{"class":2197},"layer",[564,6901,1092],{"class":569},[564,6903,6751],{"class":1519},[564,6905,663],{"class":569},[564,6907,6908],{"class":2197}," index",[564,6910,1092],{"class":569},[564,6912,6913],{"class":1519}," number",[564,6915,2201],{"class":569},[564,6917,2177],{"class":577},[564,6919,2206],{"class":569},[564,6921,6922,6925,6928,6930,6933,6936,6938,6941,6943,6946,6948,6951,6954,6957,6960,6963,6965,6968],{"class":566,"line":701},[564,6923,6924],{"class":603},"  return",[564,6926,6927],{"class":610}," layer",[564,6929,1394],{"class":569},[564,6931,6932],{"class":610},"isStroke",[564,6934,6935],{"class":569}," ?",[564,6937,620],{"class":569},[564,6939,6940],{"class":590},"#000000",[564,6942,1077],{"class":569},[564,6944,6945],{"class":569}," :",[564,6947,6512],{"class":569},[564,6949,6950],{"class":590},"hsl(",[564,6952,6953],{"class":569},"${",[564,6955,6956],{"class":610},"index ",[564,6958,6959],{"class":569},"*",[564,6961,6962],{"class":2231}," 30",[564,6964,674],{"class":569},[564,6966,6967],{"class":590},", 70%, 50%)",[564,6969,6528],{"class":569},[564,6971,6972],{"class":566,"line":711},[564,6973,4179],{"class":569},[564,6975,6976,6978,6980],{"class":566,"line":747},[564,6977,689],{"class":569},[564,6979,574],{"class":573},[564,6981,596],{"class":569},[564,6983,6984],{"class":566,"line":910},[564,6985,632],{"emptyLinePlaceholder":516},[564,6987,6988,6990,6992],{"class":566,"line":920},[564,6989,570],{"class":569},[564,6991,706],{"class":573},[564,6993,596],{"class":569},[564,6995,6996,6998,7000],{"class":566,"line":928},[564,6997,714],{"class":569},[564,6999,5666],{"class":573},[564,7001,596],{"class":569},[564,7003,7004,7006],{"class":566,"line":944},[564,7005,881],{"class":569},[564,7007,6120],{"class":573},[564,7009,7010,7012,7014,7016,7018],{"class":566,"line":959},[564,7011,6125],{"class":577},[564,7013,584],{"class":569},[564,7015,587],{"class":569},[564,7017,6132],{"class":590},[564,7019,941],{"class":569},[564,7021,7022,7024,7026,7028,7030],{"class":566,"line":965},[564,7023,6139],{"class":577},[564,7025,584],{"class":569},[564,7027,587],{"class":569},[564,7029,6174],{"class":590},[564,7031,941],{"class":569},[564,7033,7034,7036,7038,7040,7042],{"class":566,"line":987},[564,7035,6153],{"class":577},[564,7037,584],{"class":569},[564,7039,587],{"class":569},[564,7041,6160],{"class":590},[564,7043,941],{"class":569},[564,7045,7046],{"class":566,"line":997},[564,7047,6181],{"class":569},[564,7049,7050,7052],{"class":566,"line":4057},[564,7051,4342],{"class":569},[564,7053,7054],{"class":573},"TresMeshBasicMaterial\n",[564,7056,7057,7060,7062,7064,7066],{"class":566,"line":4058},[564,7058,7059],{"class":577},"        v-bind",[564,7061,584],{"class":569},[564,7063,587],{"class":569},[564,7065,6198],{"class":590},[564,7067,941],{"class":569},[564,7069,7070,7073,7075,7077,7080],{"class":566,"line":4059},[564,7071,7072],{"class":577},"        :color",[564,7074,584],{"class":569},[564,7076,587],{"class":569},[564,7078,7079],{"class":590},"getFillColor(layer, index)",[564,7081,941],{"class":569},[564,7083,7084],{"class":566,"line":4330},[564,7085,7086],{"class":569},"      />\n",[564,7088,7089,7091,7093],{"class":566,"line":4339},[564,7090,4371],{"class":569},[564,7092,3881],{"class":573},[564,7094,596],{"class":569},[564,7096,7097,7099,7101],{"class":566,"line":4349},[564,7098,990],{"class":569},[564,7100,5666],{"class":573},[564,7102,596],{"class":569},[564,7104,7105,7107,7109],{"class":566,"line":4368},[564,7106,689],{"class":569},[564,7108,706],{"class":573},[564,7110,596],{"class":569},[5742,7112,7114],{"id":7113},"depth-handling","Depth Handling",[536,7116,1706,7117,7119],{},[561,7118,6717],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[6798,7121,7123,7125],{"id":7122},"renderorder-default",[561,7124,6727],{}," (Default)",[536,7127,7128],{},[540,7129,7130],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[536,7132,7133,7134,7136],{},"This is the default ",[561,7135,6717],{}," option.",[536,7138,7139,7140,7143,7144,7146,7147,7154],{},"This value sets the materials' ",[561,7141,7142],{},"depthWrite"," to ",[561,7145,1289],{}," and increments the mesh layers ",[1015,7148,7151],{"href":7149,"rel":7150},"https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder",[1019],[561,7152,7153],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[536,7156,7157,7160],{},[540,7158,7159],{},"Disadvantage",": Scene objects may render out of order.",[536,7162,7163,7164,7169,7170,7175],{},"SVG layers with higher ",[1015,7165,7167],{"href":7149,"rel":7166},[1019],[561,7168,7153],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1015,7171,7173],{"href":7149,"rel":7172},[1019],[561,7174,7153],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[552,7177,7179],{"className":1024,"code":7178,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })\n",[561,7180,7181],{"__ignoreMap":508},[564,7182,7183,7185,7187,7189,7191,7193,7195,7197,7199,7202,7204,7206,7208,7211,7213,7215,7217,7219,7221],{"class":566,"line":509},[564,7184,638],{"class":577},[564,7186,607],{"class":569},[564,7188,6474],{"class":610},[564,7190,674],{"class":569},[564,7192,677],{"class":569},[564,7194,5959],{"class":680},[564,7196,1074],{"class":610},[564,7198,1077],{"class":569},[564,7200,7201],{"class":590},"/icon.svg",[564,7203,1077],{"class":569},[564,7205,663],{"class":569},[564,7207,607],{"class":569},[564,7209,7210],{"class":573}," depth",[564,7212,1092],{"class":569},[564,7214,620],{"class":569},[564,7216,7153],{"class":590},[564,7218,1077],{"class":569},[564,7220,614],{"class":569},[564,7222,1101],{"class":610},[6798,7224,7225],{"id":7225},"flat",[536,7227,7228],{},[540,7229,7230],{},"Use case: simple SVGs",[536,7232,7233,7234,7143,7240,1394],{},"This option sets the materials ",[1015,7235,7238],{"href":7236,"rel":7237},"https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite",[1019],[561,7239,7142],{},[561,7241,1289],{},[536,7243,7244,7246],{},[540,7245,7159],{},": SVG layers may render out of order.",[536,7248,7249],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[552,7251,7253],{"className":1024,"code":7252,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 'flat' })\n",[561,7254,7255],{"__ignoreMap":508},[564,7256,7257,7259,7261,7263,7265,7267,7269,7271,7273,7275,7277,7279,7281,7283,7285,7287,7289,7291,7293],{"class":566,"line":509},[564,7258,638],{"class":577},[564,7260,607],{"class":569},[564,7262,6474],{"class":610},[564,7264,674],{"class":569},[564,7266,677],{"class":569},[564,7268,5959],{"class":680},[564,7270,1074],{"class":610},[564,7272,1077],{"class":569},[564,7274,7201],{"class":590},[564,7276,1077],{"class":569},[564,7278,663],{"class":569},[564,7280,607],{"class":569},[564,7282,7210],{"class":573},[564,7284,1092],{"class":569},[564,7286,620],{"class":569},[564,7288,7225],{"class":590},[564,7290,1077],{"class":569},[564,7292,614],{"class":569},[564,7294,1101],{"class":610},[6798,7296,7298],{"id":7297},"offsetz","offsetZ",[536,7300,7301],{},[540,7302,7303],{},"Use case: unscaled SVGs seen from the front",[536,7305,7306],{},"When this value is passed, the result is a 3D \"stack\" of mesh layers. A small space is added between each mesh layer in the \"stack\".",[536,7308,7309,7311],{},[540,7310,7159],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[536,7313,7314,7315,7320],{},"When seen from behind, the \"bottom\" of the mesh layer \"stack\" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may ",[1015,7316,7319],{"href":7317,"rel":7318},"https://en.wikipedia.org/wiki/Z-fighting",[1019],"z-fight",", particularly if the SVG is scaled down.",[552,7322,7324],{"className":1024,"code":7323,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })\n",[561,7325,7326],{"__ignoreMap":508},[564,7327,7328,7330,7332,7334,7336,7338,7340,7342,7344,7346,7348,7350,7352,7354,7356,7358,7360,7362,7364],{"class":566,"line":509},[564,7329,638],{"class":577},[564,7331,607],{"class":569},[564,7333,6474],{"class":610},[564,7335,674],{"class":569},[564,7337,677],{"class":569},[564,7339,5959],{"class":680},[564,7341,1074],{"class":610},[564,7343,1077],{"class":569},[564,7345,7201],{"class":590},[564,7347,1077],{"class":569},[564,7349,663],{"class":569},[564,7351,607],{"class":569},[564,7353,7210],{"class":573},[564,7355,1092],{"class":569},[564,7357,620],{"class":569},[564,7359,7298],{"class":590},[564,7361,1077],{"class":569},[564,7363,614],{"class":569},[564,7365,1101],{"class":610},[6798,7367,7369],{"id":7368},"number",[561,7370,7368],{},[536,7372,7373],{},[540,7374,7375],{},"Use case: SVGs seen from the front",[536,7377,7378,7379,7382,7383,7387],{},"This is the same as ",[561,7380,7381],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1015,7384,7386],{"href":7317,"rel":7385},[1019],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[536,7389,7390,7392],{},[540,7391,7159],{},": \"Bottom\" of the \"stack\" is visible.",[552,7394,7396],{"className":1024,"code":7395,"language":591,"meta":508,"style":508},"const { layers } = useSVG('/icon.svg', { depth: 0.1 })\n",[561,7397,7398],{"__ignoreMap":508},[564,7399,7400,7402,7404,7406,7408,7410,7412,7414,7416,7418,7420,7422,7424,7426,7428,7431,7433],{"class":566,"line":509},[564,7401,638],{"class":577},[564,7403,607],{"class":569},[564,7405,6474],{"class":610},[564,7407,674],{"class":569},[564,7409,677],{"class":569},[564,7411,5959],{"class":680},[564,7413,1074],{"class":610},[564,7415,1077],{"class":569},[564,7417,7201],{"class":590},[564,7419,1077],{"class":569},[564,7421,663],{"class":569},[564,7423,607],{"class":569},[564,7425,7210],{"class":573},[564,7427,1092],{"class":569},[564,7429,7430],{"class":2231}," 0.1",[564,7432,614],{"class":569},[564,7434,1101],{"class":610},[5742,7436,7438],{"id":7437},"memory-management","Memory Management",[536,7440,7441],{},"Always dispose of geometries when the component unmounts:",[552,7443,7445],{"className":554,"code":7444,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { onUnmounted } from 'vue'\n\nconst { dispose } = useSVG('/icon.svg')\n\nonUnmounted(() => {\n  dispose()\n})\n\u003C/script>\n",[561,7446,7447,7467,7485,7504,7508,7532,7536,7549,7556,7562],{"__ignoreMap":508},[564,7448,7449,7451,7453,7455,7457,7459,7461,7463,7465],{"class":566,"line":509},[564,7450,570],{"class":569},[564,7452,574],{"class":573},[564,7454,578],{"class":577},[564,7456,581],{"class":577},[564,7458,584],{"class":569},[564,7460,587],{"class":569},[564,7462,591],{"class":590},[564,7464,587],{"class":569},[564,7466,596],{"class":569},[564,7468,7469,7471,7473,7475,7477,7479,7481,7483],{"class":566,"line":510},[564,7470,604],{"class":603},[564,7472,607],{"class":569},[564,7474,5959],{"class":610},[564,7476,614],{"class":569},[564,7478,617],{"class":603},[564,7480,620],{"class":569},[564,7482,623],{"class":590},[564,7484,626],{"class":569},[564,7486,7487,7489,7491,7494,7496,7498,7500,7502],{"class":566,"line":629},[564,7488,604],{"class":603},[564,7490,607],{"class":569},[564,7492,7493],{"class":610}," onUnmounted",[564,7495,614],{"class":569},[564,7497,617],{"class":603},[564,7499,620],{"class":569},[564,7501,559],{"class":590},[564,7503,626],{"class":569},[564,7505,7506],{"class":566,"line":635},[564,7507,632],{"emptyLinePlaceholder":516},[564,7509,7510,7512,7514,7516,7518,7520,7522,7524,7526,7528,7530],{"class":566,"line":558},[564,7511,638],{"class":577},[564,7513,607],{"class":569},[564,7515,6012],{"class":610},[564,7517,674],{"class":569},[564,7519,677],{"class":569},[564,7521,5959],{"class":680},[564,7523,1074],{"class":610},[564,7525,1077],{"class":569},[564,7527,7201],{"class":590},[564,7529,1077],{"class":569},[564,7531,1101],{"class":610},[564,7533,7534],{"class":566,"line":686},[564,7535,632],{"emptyLinePlaceholder":516},[564,7537,7538,7541,7543,7545,7547],{"class":566,"line":696},[564,7539,7540],{"class":680},"onUnmounted",[564,7542,1074],{"class":610},[564,7544,2174],{"class":569},[564,7546,2177],{"class":577},[564,7548,2206],{"class":569},[564,7550,7551,7554],{"class":566,"line":701},[564,7552,7553],{"class":680},"  dispose",[564,7555,2155],{"class":573},[564,7557,7558,7560],{"class":566,"line":711},[564,7559,674],{"class":569},[564,7561,1101],{"class":610},[564,7563,7564,7566,7568],{"class":566,"line":747},[564,7565,689],{"class":569},[564,7567,574],{"class":573},[564,7569,596],{"class":569},[5742,7571,7573],{"id":7572},"advanced-usage","Advanced Usage",[6798,7575,7577],{"id":7576},"conditional-layer-rendering","Conditional Layer Rendering",[552,7579,7581],{"className":554,"code":7580,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\nimport { computed } from 'vue'\n\nconst showDetails = ref(true)\nconst { layers } = useSVG('/detailed-icon.svg')\n\nconst visibleLayers = computed(() =>\n  showDetails.value\n    ? layers.value\n    : layers.value.filter(layer => !layer.isStroke)\n)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in visibleLayers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial v-bind=\"layer.material\" />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[561,7582,7583,7603,7621,7639,7643,7661,7686,7690,7708,7718,7729,7761,7765,7773,7777,7785,7793,7799,7812,7824,7836,7840,7858,7866,7874],{"__ignoreMap":508},[564,7584,7585,7587,7589,7591,7593,7595,7597,7599,7601],{"class":566,"line":509},[564,7586,570],{"class":569},[564,7588,574],{"class":573},[564,7590,578],{"class":577},[564,7592,581],{"class":577},[564,7594,584],{"class":569},[564,7596,587],{"class":569},[564,7598,591],{"class":590},[564,7600,587],{"class":569},[564,7602,596],{"class":569},[564,7604,7605,7607,7609,7611,7613,7615,7617,7619],{"class":566,"line":510},[564,7606,604],{"class":603},[564,7608,607],{"class":569},[564,7610,5959],{"class":610},[564,7612,614],{"class":569},[564,7614,617],{"class":603},[564,7616,620],{"class":569},[564,7618,623],{"class":590},[564,7620,626],{"class":569},[564,7622,7623,7625,7627,7629,7631,7633,7635,7637],{"class":566,"line":629},[564,7624,604],{"class":603},[564,7626,607],{"class":569},[564,7628,4842],{"class":610},[564,7630,614],{"class":569},[564,7632,617],{"class":603},[564,7634,620],{"class":569},[564,7636,559],{"class":590},[564,7638,626],{"class":569},[564,7640,7641],{"class":566,"line":635},[564,7642,632],{"emptyLinePlaceholder":516},[564,7644,7645,7647,7650,7652,7654,7656,7659],{"class":566,"line":558},[564,7646,638],{"class":577},[564,7648,7649],{"class":610}," showDetails ",[564,7651,584],{"class":569},[564,7653,2109],{"class":680},[564,7655,1074],{"class":610},[564,7657,7658],{"class":1095},"true",[564,7660,1101],{"class":610},[564,7662,7663,7665,7667,7669,7671,7673,7675,7677,7679,7682,7684],{"class":566,"line":686},[564,7664,638],{"class":577},[564,7666,607],{"class":569},[564,7668,6474],{"class":610},[564,7670,674],{"class":569},[564,7672,677],{"class":569},[564,7674,5959],{"class":680},[564,7676,1074],{"class":610},[564,7678,1077],{"class":569},[564,7680,7681],{"class":590},"/detailed-icon.svg",[564,7683,1077],{"class":569},[564,7685,1101],{"class":610},[564,7687,7688],{"class":566,"line":696},[564,7689,632],{"emptyLinePlaceholder":516},[564,7691,7692,7694,7697,7699,7701,7703,7705],{"class":566,"line":701},[564,7693,638],{"class":577},[564,7695,7696],{"class":610}," visibleLayers ",[564,7698,584],{"class":569},[564,7700,4842],{"class":680},[564,7702,1074],{"class":610},[564,7704,2174],{"class":569},[564,7706,7707],{"class":577}," =>\n",[564,7709,7710,7713,7715],{"class":566,"line":711},[564,7711,7712],{"class":610},"  showDetails",[564,7714,1394],{"class":569},[564,7716,7717],{"class":610},"value\n",[564,7719,7720,7723,7725,7727],{"class":566,"line":747},[564,7721,7722],{"class":569},"    ?",[564,7724,6003],{"class":610},[564,7726,1394],{"class":569},[564,7728,7717],{"class":610},[564,7730,7731,7734,7736,7738,7740,7742,7745,7747,7749,7751,7754,7756,7758],{"class":566,"line":910},[564,7732,7733],{"class":569},"    :",[564,7735,6003],{"class":610},[564,7737,1394],{"class":569},[564,7739,1397],{"class":610},[564,7741,1394],{"class":569},[564,7743,7744],{"class":680},"filter",[564,7746,1074],{"class":610},[564,7748,6899],{"class":2197},[564,7750,2177],{"class":577},[564,7752,7753],{"class":569}," !",[564,7755,6899],{"class":610},[564,7757,1394],{"class":569},[564,7759,7760],{"class":610},"isStroke)\n",[564,7762,7763],{"class":566,"line":920},[564,7764,1101],{"class":610},[564,7766,7767,7769,7771],{"class":566,"line":928},[564,7768,689],{"class":569},[564,7770,574],{"class":573},[564,7772,596],{"class":569},[564,7774,7775],{"class":566,"line":944},[564,7776,632],{"emptyLinePlaceholder":516},[564,7778,7779,7781,7783],{"class":566,"line":959},[564,7780,570],{"class":569},[564,7782,706],{"class":573},[564,7784,596],{"class":569},[564,7786,7787,7789,7791],{"class":566,"line":965},[564,7788,714],{"class":569},[564,7790,5666],{"class":573},[564,7792,596],{"class":569},[564,7794,7795,7797],{"class":566,"line":987},[564,7796,881],{"class":569},[564,7798,6120],{"class":573},[564,7800,7801,7803,7805,7807,7810],{"class":566,"line":997},[564,7802,6125],{"class":577},[564,7804,584],{"class":569},[564,7806,587],{"class":569},[564,7808,7809],{"class":590},"(layer, index) in visibleLayers",[564,7811,941],{"class":569},[564,7813,7814,7816,7818,7820,7822],{"class":566,"line":4057},[564,7815,6139],{"class":577},[564,7817,584],{"class":569},[564,7819,587],{"class":569},[564,7821,6174],{"class":590},[564,7823,941],{"class":569},[564,7825,7826,7828,7830,7832,7834],{"class":566,"line":4058},[564,7827,6153],{"class":577},[564,7829,584],{"class":569},[564,7831,587],{"class":569},[564,7833,6160],{"class":590},[564,7835,941],{"class":569},[564,7837,7838],{"class":566,"line":4059},[564,7839,6181],{"class":569},[564,7841,7842,7844,7846,7848,7850,7852,7854,7856],{"class":566,"line":4330},[564,7843,4342],{"class":569},[564,7845,6188],{"class":573},[564,7847,6191],{"class":577},[564,7849,584],{"class":569},[564,7851,587],{"class":569},[564,7853,6198],{"class":590},[564,7855,587],{"class":569},[564,7857,744],{"class":569},[564,7859,7860,7862,7864],{"class":566,"line":4339},[564,7861,4371],{"class":569},[564,7863,3881],{"class":573},[564,7865,596],{"class":569},[564,7867,7868,7870,7872],{"class":566,"line":4349},[564,7869,990],{"class":569},[564,7871,5666],{"class":573},[564,7873,596],{"class":569},[564,7875,7876,7878,7880],{"class":566,"line":4368},[564,7877,689],{"class":569},[564,7879,706],{"class":573},[564,7881,596],{"class":569},[6798,7883,7885],{"id":7884},"material-customization-per-layer","Material Customization per Layer",[552,7887,7889],{"className":554,"code":7888,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { useSVG } from '@tresjs/cientos'\n\nconst { layers } = useSVG('/logo.svg', {\n  fillMaterial: {\n    transparent: true,\n    opacity: 0.9\n  },\n  strokeMaterial: {\n    transparent: true,\n    opacity: 1.0,\n    color: '#000000'\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup>\n    \u003CTresMesh\n      v-for=\"(layer, index) in layers\"\n      :key=\"index\"\n      :geometry=\"layer.geometry\"\n    >\n      \u003CTresMeshBasicMaterial\n        v-bind=\"layer.material\"\n        :wireframe=\"layer.isStroke\"\n      />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n\u003C/template>\n",[561,7890,7891,7911,7929,7933,7960,7968,7979,7989,7994,8003,8013,8024,8037,8041,8047,8055,8059,8067,8075,8081,8093,8105,8117,8121,8127,8139,8153,8157,8165,8173],{"__ignoreMap":508},[564,7892,7893,7895,7897,7899,7901,7903,7905,7907,7909],{"class":566,"line":509},[564,7894,570],{"class":569},[564,7896,574],{"class":573},[564,7898,578],{"class":577},[564,7900,581],{"class":577},[564,7902,584],{"class":569},[564,7904,587],{"class":569},[564,7906,591],{"class":590},[564,7908,587],{"class":569},[564,7910,596],{"class":569},[564,7912,7913,7915,7917,7919,7921,7923,7925,7927],{"class":566,"line":510},[564,7914,604],{"class":603},[564,7916,607],{"class":569},[564,7918,5959],{"class":610},[564,7920,614],{"class":569},[564,7922,617],{"class":603},[564,7924,620],{"class":569},[564,7926,623],{"class":590},[564,7928,626],{"class":569},[564,7930,7931],{"class":566,"line":629},[564,7932,632],{"emptyLinePlaceholder":516},[564,7934,7935,7937,7939,7941,7943,7945,7947,7949,7951,7954,7956,7958],{"class":566,"line":635},[564,7936,638],{"class":577},[564,7938,607],{"class":569},[564,7940,6474],{"class":610},[564,7942,674],{"class":569},[564,7944,677],{"class":569},[564,7946,5959],{"class":680},[564,7948,1074],{"class":610},[564,7950,1077],{"class":569},[564,7952,7953],{"class":590},"/logo.svg",[564,7955,1077],{"class":569},[564,7957,663],{"class":569},[564,7959,2206],{"class":569},[564,7961,7962,7964,7966],{"class":566,"line":558},[564,7963,6044],{"class":573},[564,7965,1092],{"class":569},[564,7967,2206],{"class":569},[564,7969,7970,7973,7975,7977],{"class":566,"line":686},[564,7971,7972],{"class":573},"    transparent",[564,7974,1092],{"class":569},[564,7976,1096],{"class":1095},[564,7978,4505],{"class":569},[564,7980,7981,7984,7986],{"class":566,"line":696},[564,7982,7983],{"class":573},"    opacity",[564,7985,1092],{"class":569},[564,7987,7988],{"class":2231}," 0.9\n",[564,7990,7991],{"class":566,"line":701},[564,7992,7993],{"class":569},"  },\n",[564,7995,7996,7999,8001],{"class":566,"line":711},[564,7997,7998],{"class":573},"  strokeMaterial",[564,8000,1092],{"class":569},[564,8002,2206],{"class":569},[564,8004,8005,8007,8009,8011],{"class":566,"line":747},[564,8006,7972],{"class":573},[564,8008,1092],{"class":569},[564,8010,1096],{"class":1095},[564,8012,4505],{"class":569},[564,8014,8015,8017,8019,8022],{"class":566,"line":910},[564,8016,7983],{"class":573},[564,8018,1092],{"class":569},[564,8020,8021],{"class":2231}," 1.0",[564,8023,4505],{"class":569},[564,8025,8026,8029,8031,8033,8035],{"class":566,"line":920},[564,8027,8028],{"class":573},"    color",[564,8030,1092],{"class":569},[564,8032,620],{"class":569},[564,8034,6940],{"class":590},[564,8036,626],{"class":569},[564,8038,8039],{"class":566,"line":928},[564,8040,5284],{"class":569},[564,8042,8043,8045],{"class":566,"line":944},[564,8044,674],{"class":569},[564,8046,1101],{"class":610},[564,8048,8049,8051,8053],{"class":566,"line":959},[564,8050,689],{"class":569},[564,8052,574],{"class":573},[564,8054,596],{"class":569},[564,8056,8057],{"class":566,"line":965},[564,8058,632],{"emptyLinePlaceholder":516},[564,8060,8061,8063,8065],{"class":566,"line":987},[564,8062,570],{"class":569},[564,8064,706],{"class":573},[564,8066,596],{"class":569},[564,8068,8069,8071,8073],{"class":566,"line":997},[564,8070,714],{"class":569},[564,8072,5666],{"class":573},[564,8074,596],{"class":569},[564,8076,8077,8079],{"class":566,"line":4057},[564,8078,881],{"class":569},[564,8080,6120],{"class":573},[564,8082,8083,8085,8087,8089,8091],{"class":566,"line":4058},[564,8084,6125],{"class":577},[564,8086,584],{"class":569},[564,8088,587],{"class":569},[564,8090,6132],{"class":590},[564,8092,941],{"class":569},[564,8094,8095,8097,8099,8101,8103],{"class":566,"line":4059},[564,8096,6139],{"class":577},[564,8098,584],{"class":569},[564,8100,587],{"class":569},[564,8102,6174],{"class":590},[564,8104,941],{"class":569},[564,8106,8107,8109,8111,8113,8115],{"class":566,"line":4330},[564,8108,6153],{"class":577},[564,8110,584],{"class":569},[564,8112,587],{"class":569},[564,8114,6160],{"class":590},[564,8116,941],{"class":569},[564,8118,8119],{"class":566,"line":4339},[564,8120,6181],{"class":569},[564,8122,8123,8125],{"class":566,"line":4349},[564,8124,4342],{"class":569},[564,8126,7054],{"class":573},[564,8128,8129,8131,8133,8135,8137],{"class":566,"line":4368},[564,8130,7059],{"class":577},[564,8132,584],{"class":569},[564,8134,587],{"class":569},[564,8136,6198],{"class":590},[564,8138,941],{"class":569},[564,8140,8141,8144,8146,8148,8151],{"class":566,"line":4060},[564,8142,8143],{"class":577},"        :wireframe",[564,8145,584],{"class":569},[564,8147,587],{"class":569},[564,8149,8150],{"class":590},"layer.isStroke",[564,8152,941],{"class":569},[564,8154,8155],{"class":566,"line":4387},[564,8156,7086],{"class":569},[564,8158,8159,8161,8163],{"class":566,"line":5110},[564,8160,4371],{"class":569},[564,8162,3881],{"class":573},[564,8164,596],{"class":569},[564,8166,8167,8169,8171],{"class":566,"line":5115},[564,8168,990],{"class":569},[564,8170,5666],{"class":573},[564,8172,596],{"class":569},[564,8174,8175,8177,8179],{"class":566,"line":5121},[564,8176,689],{"class":569},[564,8178,706],{"class":573},[564,8180,596],{"class":569},[545,8182,8184],{"id":8183},"usesvg-component","UseSVG Component",[536,8186,8187,8188,8191],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[561,8189,8190],{},"UseSVG"," component:",[552,8193,8195],{"className":554,"code":8194,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { UseSVG } from '@tresjs/cientos'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresGroup :scale=\"0.01\" :position=\"[-2.1, 1, 0]\">\n    \u003CUseSVG\n      src=\"/path/to/logo.svg\"\n      :skip-fills=\"false\"\n      :fill-material=\"{ transparent: true,\n                        opacity: 0.8 }\"\n      depth=\"renderOrder\"\n    />\n  \u003C/TresGroup>\n\u003C/template>\n",[561,8196,8197,8217,8236,8244,8248,8256,8286,8293,8307,8320,8332,8339,8352,8356,8364],{"__ignoreMap":508},[564,8198,8199,8201,8203,8205,8207,8209,8211,8213,8215],{"class":566,"line":509},[564,8200,570],{"class":569},[564,8202,574],{"class":573},[564,8204,578],{"class":577},[564,8206,581],{"class":577},[564,8208,584],{"class":569},[564,8210,587],{"class":569},[564,8212,591],{"class":590},[564,8214,587],{"class":569},[564,8216,596],{"class":569},[564,8218,8219,8221,8223,8226,8228,8230,8232,8234],{"class":566,"line":510},[564,8220,604],{"class":603},[564,8222,607],{"class":569},[564,8224,8225],{"class":610}," UseSVG",[564,8227,614],{"class":569},[564,8229,617],{"class":603},[564,8231,620],{"class":569},[564,8233,623],{"class":590},[564,8235,626],{"class":569},[564,8237,8238,8240,8242],{"class":566,"line":629},[564,8239,689],{"class":569},[564,8241,574],{"class":573},[564,8243,596],{"class":569},[564,8245,8246],{"class":566,"line":635},[564,8247,632],{"emptyLinePlaceholder":516},[564,8249,8250,8252,8254],{"class":566,"line":558},[564,8251,570],{"class":569},[564,8253,706],{"class":573},[564,8255,596],{"class":569},[564,8257,8258,8260,8262,8264,8266,8268,8271,8273,8275,8277,8279,8282,8284],{"class":566,"line":686},[564,8259,714],{"class":569},[564,8261,5666],{"class":573},[564,8263,2657],{"class":577},[564,8265,584],{"class":569},[564,8267,587],{"class":569},[564,8269,8270],{"class":590},"0.01",[564,8272,587],{"class":569},[564,8274,887],{"class":577},[564,8276,584],{"class":569},[564,8278,587],{"class":569},[564,8280,8281],{"class":590},"[-2.1, 1, 0]",[564,8283,587],{"class":569},[564,8285,596],{"class":569},[564,8287,8288,8290],{"class":566,"line":696},[564,8289,881],{"class":569},[564,8291,8292],{"class":573},"UseSVG\n",[564,8294,8295,8298,8300,8302,8305],{"class":566,"line":701},[564,8296,8297],{"class":577},"      src",[564,8299,584],{"class":569},[564,8301,587],{"class":569},[564,8303,8304],{"class":590},"/path/to/logo.svg",[564,8306,941],{"class":569},[564,8308,8309,8312,8314,8316,8318],{"class":566,"line":711},[564,8310,8311],{"class":577},"      :skip-fills",[564,8313,584],{"class":569},[564,8315,587],{"class":569},[564,8317,1289],{"class":590},[564,8319,941],{"class":569},[564,8321,8322,8325,8327,8329],{"class":566,"line":747},[564,8323,8324],{"class":577},"      :fill-material",[564,8326,584],{"class":569},[564,8328,587],{"class":569},[564,8330,8331],{"class":590},"{ transparent: true,\n",[564,8333,8334,8337],{"class":566,"line":910},[564,8335,8336],{"class":590},"                        opacity: 0.8 }",[564,8338,941],{"class":569},[564,8340,8341,8344,8346,8348,8350],{"class":566,"line":920},[564,8342,8343],{"class":577},"      depth",[564,8345,584],{"class":569},[564,8347,587],{"class":569},[564,8349,7153],{"class":590},[564,8351,941],{"class":569},[564,8353,8354],{"class":566,"line":928},[564,8355,962],{"class":569},[564,8357,8358,8360,8362],{"class":566,"line":944},[564,8359,990],{"class":569},[564,8361,5666],{"class":573},[564,8363,596],{"class":569},[564,8365,8366,8368,8370],{"class":566,"line":959},[564,8367,689],{"class":569},[564,8369,706],{"class":573},[564,8371,596],{"class":569},[5742,8373,2321],{"id":2320},[1107,8375,8376,8388],{},[1110,8377,8378],{},[1113,8379,8380,8382,8384,8386],{},[1116,8381,2330],{"align":1118},[1116,8383,1122],{},[1116,8385,1125],{"align":1118},[1116,8387,1269],{},[1127,8389,8390,8411,8431,8450,8467,8484,8503,8521],{},[1113,8391,8392,8397,8401,8409],{},[1132,8393,8394],{"align":1118},[540,8395,8396],{},"src",[1132,8398,8399],{},[561,8400,1304],{},[1132,8402,8403,8404,8408],{"align":1118},"Either a path to an SVG ",[8405,8406,8407],"em",{},"or"," an SVG string",[1132,8410],{},[1113,8412,8413,8417,8421,8427],{},[1132,8414,8415],{"align":1118},[540,8416,6643],{},[1132,8418,8419],{},[561,8420,1284],{},[1132,8422,8423,8424,8426],{"align":1118},"If ",[561,8425,7658],{},", the SVG strokes will not be rendered.",[1132,8428,8429],{},[561,8430,1289],{},[1113,8432,8433,8437,8441,8446],{},[1132,8434,8435],{"align":1118},[540,8436,6661],{},[1132,8438,8439],{},[561,8440,1284],{},[1132,8442,8423,8443,8445],{"align":1118},[561,8444,7658],{},", the SVG fills will not be rendered.",[1132,8447,8448],{},[561,8449,1289],{},[1113,8451,8452,8456,8460,8463],{},[1132,8453,8454],{"align":1118},[540,8455,6699],{},[1132,8457,8458],{},[561,8459,6684],{},[1132,8461,8462],{"align":1118},"Props to assign to the stroke materials of the resulting meshes.",[1132,8464,8465],{},[561,8466,2353],{},[1113,8468,8469,8473,8477,8480],{},[1132,8470,8471],{"align":1118},[540,8472,6679],{},[1132,8474,8475],{},[561,8476,6684],{},[1132,8478,8479],{"align":1118},"Props to assign to the fill materials of the resulting meshes.",[1132,8481,8482],{},[561,8483,2353],{},[1113,8485,8486,8491,8496,8499],{},[1132,8487,8488],{"align":1118},[540,8489,8490],{},"strokeMeshProps",[1132,8492,8493],{},[561,8494,8495],{},"TresOptions",[1132,8497,8498],{"align":1118},"Props to assign to the resulting stroke meshes.",[1132,8500,8501],{},[561,8502,2353],{},[1113,8504,8505,8510,8514,8517],{},[1132,8506,8507],{"align":1118},[540,8508,8509],{},"fillMeshProps",[1132,8511,8512],{},[561,8513,8495],{},[1132,8515,8516],{"align":1118},"Props to assign to the resulting fill meshes.",[1132,8518,8519],{},[561,8520,2353],{},[1113,8522,8523,8527,8531,8538],{},[1132,8524,8525],{"align":1118},[540,8526,6717],{},[1132,8528,8529],{},[561,8530,6722],{},[1132,8532,8533,8534,2201],{"align":1118},"Specify how SVG layers are to be rendered. (",[1015,8535,8537],{"href":8536},"#depth-handling","See \"Depth\"",[1132,8539,8540],{},[561,8541,7153],{},[545,8543,8545],{"id":8544},"troubleshooting","Troubleshooting",[8547,8548,8550],"alert",{"type":8549},"warning",[536,8551,8552],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[536,8554,8555],{},"Here are some things to try if you run into problems:",[5742,8557,8559],{"id":8558},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[5846,8561,8562],{},[5849,8563,8564,8565,7143,8567,1394],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[561,8566,5611],{},[561,8568,8569],{},"rgb(255, 0, 0)",[5742,8571,8573],{"id":8572},"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",[5846,8575,8576,8588],{},[5849,8577,8578,8579,8581,8582,1394],{},"In your ",[561,8580,157],{}," options, ",[1015,8583,8584,8585,8587],{"href":8536},"change the ",[561,8586,6717],{}," option",[5849,8589,8590,8591,8594,8595,1394],{},"In the SVG source, use ",[561,8592,8593],{},"fill=\"none\""," rather than ",[561,8596,8597],{},"fill-opacity=\"0\"",[5742,8599,8601,8602],{"id":8600},"parts-of-the-svg-z-fight","Parts of the SVG ",[1015,8603,8605],{"href":7317,"rel":8604},[1019],"\"z-fight\"",[5846,8607,8608,8616],{},[5849,8609,8578,8610,8581,8612,1394],{},[561,8611,157],{},[1015,8613,8584,8614,8587],{"href":8536},[561,8615,6717],{},[5849,8617,8618],{},"Increase the distance between the SVG and other on-screen elements.",[5742,8620,8622],{"id":8621},"the-svg-is-not-visible","The SVG is not visible",[5846,8624,8625,8628,8637,8643],{},[5849,8626,8627],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[5849,8629,8630,8631,8633,8634,1394],{},"Try scaling the SVG down, e.g., wrap it in a ",[561,8632,5666],{}," with ",[561,8635,8636],{},":scale=\"0.01\"",[5849,8638,8639,8640,1394],{},"Try moving the SVG up (+y), e.g., ",[561,8641,8642],{},":position=\"[0,2,0]\"",[5849,8644,8645,8646,8649],{},"Check that ",[561,8647,8648],{},"layers.length > 0"," before rendering.",[5742,8651,8653],{"id":8652},"performance-issues-with-many-layers","Performance issues with many layers",[5846,8655,8656,8663,8672],{},[5849,8657,8658,8659,8662],{},"Use the ",[561,8660,8661],{},"dispose()"," function when components unmount to clean up geometries.",[5849,8664,8665,8666,8668,8669,8671],{},"Consider using ",[561,8667,6643],{}," or ",[561,8670,6661],{}," to reduce the number of rendered layers.",[5849,8673,8674],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[545,8676,8678,8679,8681,8682,8684],{"id":8677},"when-to-use-usesvg-vs-svg-component","When to Use ",[561,8680,157],{}," vs ",[561,8683,5909],{}," Component",[536,8686,8687],{},[540,8688,8689,8690,8692],{},"Use ",[561,8691,157],{}," when you need:",[5846,8694,8695,8698,8701,8704,8707],{},[5849,8696,8697],{},"Direct access to individual SVG layers",[5849,8699,8700],{},"Custom rendering logic",[5849,8702,8703],{},"Layer-specific animations",[5849,8705,8706],{},"Programmatic geometry manipulation",[5849,8708,8709],{},"Advanced material customization per layer",[536,8711,8712],{},[540,8713,8658,8714,8716],{},[561,8715,5909],{}," component when you need:",[5846,8718,8719,8722,8725,8728],{},[5849,8720,8721],{},"Simple, declarative SVG rendering",[5849,8723,8724],{},"Quick prototyping",[5849,8726,8727],{},"Standard SVG display without custom logic",[5849,8729,8730],{},"Less code and setup",[1682,8732,8733],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":508,"searchDepth":509,"depth":510,"links":8735},[8736,8746,8749,8757],{"id":5913,"depth":510,"text":5914,"children":8737},[8738,8739,8740,8741,8742,8743,8744,8745],{"id":547,"depth":629,"text":15},{"id":6429,"depth":629,"text":6430},{"id":1104,"depth":629,"text":1105},{"id":1255,"depth":629,"text":1256},{"id":6733,"depth":629,"text":6734},{"id":7113,"depth":629,"text":7114},{"id":7437,"depth":629,"text":7438},{"id":7572,"depth":629,"text":7573},{"id":8183,"depth":510,"text":8184,"children":8747},[8748],{"id":2320,"depth":629,"text":2321},{"id":8544,"depth":510,"text":8545,"children":8750},[8751,8752,8753,8755,8756],{"id":8558,"depth":629,"text":8559},{"id":8572,"depth":629,"text":8573},{"id":8600,"depth":629,"text":8754},"Parts of the SVG \"z-fight\"",{"id":8621,"depth":629,"text":8622},{"id":8652,"depth":629,"text":8653},{"id":8677,"depth":510,"text":8758},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":157,"description":8759},"t3a1fKjOyasXtDyXY3XrpW0clG4ZuIfM5SpFO_CMPZM",{"id":8764,"title":161,"body":8765,"description":9240,"extension":513,"links":514,"meta":9241,"navigation":516,"path":162,"seo":9242,"stem":163,"__hash__":9243},"docs/2.api/3.loaders/use-progress.md",{"type":501,"value":8766,"toc":9236},[8767,8774,8777,8779,8837,8843,9147,9158,9160,9216,9233],[536,8768,8769,8770,8773],{},"A composable to convenience wrap ",[561,8771,8772],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[536,8775,8776],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[545,8778,15],{"id":547},[552,8780,8782],{"className":1024,"code":8781,"language":591,"meta":508,"style":508},"import { useProgress } from '@tresjs/cientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[561,8783,8784,8803,8807],{"__ignoreMap":508},[564,8785,8786,8788,8790,8793,8795,8797,8799,8801],{"class":566,"line":509},[564,8787,604],{"class":603},[564,8789,607],{"class":569},[564,8791,8792],{"class":610}," useProgress",[564,8794,614],{"class":569},[564,8796,617],{"class":603},[564,8798,620],{"class":569},[564,8800,623],{"class":590},[564,8802,626],{"class":569},[564,8804,8805],{"class":566,"line":510},[564,8806,632],{"emptyLinePlaceholder":516},[564,8808,8809,8811,8813,8816,8818,8821,8823,8826,8828,8830,8833,8835],{"class":566,"line":629},[564,8810,638],{"class":577},[564,8812,607],{"class":569},[564,8814,8815],{"class":610}," hasFinishLoading",[564,8817,663],{"class":569},[564,8819,8820],{"class":610}," progress",[564,8822,663],{"class":569},[564,8824,8825],{"class":610}," items ",[564,8827,674],{"class":569},[564,8829,677],{"class":569},[564,8831,8832],{"class":603}," await",[564,8834,8792],{"class":680},[564,8836,2155],{"class":610},[536,8838,8839,8840,8842],{},"Then you can use the ",[561,8841,1214],{}," value to show a loading bar or a spinner:",[552,8844,8846],{"className":554,"code":8845,"language":559,"meta":508,"style":508},"\u003Ctemplate>\n  \u003CTransition\n    name=\"fade-overlay\"\n    enter-active-class=\"opacity-1 transition-opacity duration-200\"\n    leave-active-class=\"opacity-0 transition-opacity duration-200\"\n  >\n    \u003Cdiv\n      v-show=\"!hasFinishLoading\"\n      class=\"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono\"\n    >\n      \u003Cdiv class=\"w-200px\">\n        Loading... {{ progress }} %\n        \u003Ci class=\"i-ic-twotone-catching-pokemon animate-rotate-in\">\u003C/i>\n      \u003C/div>\n    \u003C/div>\n  \u003C/Transition>\n  \u003CTresCanvas preset=\"realistic\">\n    \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CEnvironment\n        background\n        :files=\"environmentFiles\"\n        path=\"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap\"\n      />\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,8847,8848,8856,8863,8877,8891,8905,8909,8916,8930,8944,8948,8969,8974,9000,9009,9017,9026,9045,9063,9071,9079,9086,9091,9105,9119,9123,9131,9139],{"__ignoreMap":508},[564,8849,8850,8852,8854],{"class":566,"line":509},[564,8851,570],{"class":569},[564,8853,706],{"class":573},[564,8855,596],{"class":569},[564,8857,8858,8860],{"class":566,"line":510},[564,8859,714],{"class":569},[564,8861,8862],{"class":573},"Transition\n",[564,8864,8865,8868,8870,8872,8875],{"class":566,"line":629},[564,8866,8867],{"class":577},"    name",[564,8869,584],{"class":569},[564,8871,587],{"class":569},[564,8873,8874],{"class":590},"fade-overlay",[564,8876,941],{"class":569},[564,8878,8879,8882,8884,8886,8889],{"class":566,"line":635},[564,8880,8881],{"class":577},"    enter-active-class",[564,8883,584],{"class":569},[564,8885,587],{"class":569},[564,8887,8888],{"class":590},"opacity-1 transition-opacity duration-200",[564,8890,941],{"class":569},[564,8892,8893,8896,8898,8900,8903],{"class":566,"line":558},[564,8894,8895],{"class":577},"    leave-active-class",[564,8897,584],{"class":569},[564,8899,587],{"class":569},[564,8901,8902],{"class":590},"opacity-0 transition-opacity duration-200",[564,8904,941],{"class":569},[564,8906,8907],{"class":566,"line":686},[564,8908,4327],{"class":569},[564,8910,8911,8913],{"class":566,"line":696},[564,8912,881],{"class":569},[564,8914,8915],{"class":573},"div\n",[564,8917,8918,8921,8923,8925,8928],{"class":566,"line":701},[564,8919,8920],{"class":577},"      v-show",[564,8922,584],{"class":569},[564,8924,587],{"class":569},[564,8926,8927],{"class":590},"!hasFinishLoading",[564,8929,941],{"class":569},[564,8931,8932,8935,8937,8939,8942],{"class":566,"line":711},[564,8933,8934],{"class":577},"      class",[564,8936,584],{"class":569},[564,8938,587],{"class":569},[564,8940,8941],{"class":590},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[564,8943,941],{"class":569},[564,8945,8946],{"class":566,"line":747},[564,8947,6181],{"class":569},[564,8949,8950,8952,8955,8958,8960,8962,8965,8967],{"class":566,"line":910},[564,8951,4342],{"class":569},[564,8953,8954],{"class":573},"div",[564,8956,8957],{"class":577}," class",[564,8959,584],{"class":569},[564,8961,587],{"class":569},[564,8963,8964],{"class":590},"w-200px",[564,8966,587],{"class":569},[564,8968,596],{"class":569},[564,8970,8971],{"class":566,"line":920},[564,8972,8973],{"class":610},"        Loading... {{ progress }} %\n",[564,8975,8976,8979,8982,8984,8986,8988,8991,8993,8996,8998],{"class":566,"line":928},[564,8977,8978],{"class":569},"        \u003C",[564,8980,8981],{"class":573},"i",[564,8983,8957],{"class":577},[564,8985,584],{"class":569},[564,8987,587],{"class":569},[564,8989,8990],{"class":590},"i-ic-twotone-catching-pokemon animate-rotate-in",[564,8992,587],{"class":569},[564,8994,8995],{"class":569},">\u003C/",[564,8997,8981],{"class":573},[564,8999,596],{"class":569},[564,9001,9002,9005,9007],{"class":566,"line":944},[564,9003,9004],{"class":569},"      \u003C/",[564,9006,8954],{"class":573},[564,9008,596],{"class":569},[564,9010,9011,9013,9015],{"class":566,"line":959},[564,9012,4371],{"class":569},[564,9014,8954],{"class":573},[564,9016,596],{"class":569},[564,9018,9019,9021,9024],{"class":566,"line":965},[564,9020,990],{"class":569},[564,9022,9023],{"class":573},"Transition",[564,9025,596],{"class":569},[564,9027,9028,9030,9032,9034,9036,9038,9041,9043],{"class":566,"line":987},[564,9029,714],{"class":569},[564,9031,862],{"class":573},[564,9033,5476],{"class":577},[564,9035,584],{"class":569},[564,9037,587],{"class":569},[564,9039,9040],{"class":590},"realistic",[564,9042,587],{"class":569},[564,9044,596],{"class":569},[564,9046,9047,9049,9051,9053,9055,9057,9059,9061],{"class":566,"line":997},[564,9048,881],{"class":569},[564,9050,884],{"class":573},[564,9052,887],{"class":577},[564,9054,584],{"class":569},[564,9056,587],{"class":569},[564,9058,2805],{"class":590},[564,9060,587],{"class":569},[564,9062,744],{"class":569},[564,9064,9065,9067,9069],{"class":566,"line":4057},[564,9066,881],{"class":569},[564,9068,905],{"class":573},[564,9070,744],{"class":569},[564,9072,9073,9075,9077],{"class":566,"line":4058},[564,9074,881],{"class":569},[564,9076,5464],{"class":573},[564,9078,596],{"class":569},[564,9080,9081,9083],{"class":566,"line":4059},[564,9082,4342],{"class":569},[564,9084,9085],{"class":573},"Environment\n",[564,9087,9088],{"class":566,"line":4330},[564,9089,9090],{"class":577},"        background\n",[564,9092,9093,9096,9098,9100,9103],{"class":566,"line":4339},[564,9094,9095],{"class":577},"        :files",[564,9097,584],{"class":569},[564,9099,587],{"class":569},[564,9101,9102],{"class":590},"environmentFiles",[564,9104,941],{"class":569},[564,9106,9107,9110,9112,9114,9117],{"class":566,"line":4349},[564,9108,9109],{"class":577},"        path",[564,9111,584],{"class":569},[564,9113,587],{"class":569},[564,9115,9116],{"class":590},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap",[564,9118,941],{"class":569},[564,9120,9121],{"class":566,"line":4368},[564,9122,7086],{"class":569},[564,9124,9125,9127,9129],{"class":566,"line":4060},[564,9126,4371],{"class":569},[564,9128,5464],{"class":573},[564,9130,596],{"class":569},[564,9132,9133,9135,9137],{"class":566,"line":4387},[564,9134,990],{"class":569},[564,9136,862],{"class":573},[564,9138,596],{"class":569},[564,9140,9141,9143,9145],{"class":566,"line":5110},[564,9142,689],{"class":569},[564,9144,706],{"class":573},[564,9146,596],{"class":569},[8547,9148,9149],{"type":8549},[536,9150,9151,9152,9157],{},"This component use top level await. Please check the ",[1015,9153,9156],{"href":9154,"rel":9155},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[1019],"Suspense API"," for more info",[545,9159,1105],{"id":1104},[1107,9161,9162,9172],{},[1110,9163,9164],{},[1113,9165,9166,9168,9170],{},[1116,9167,1119],{"align":1118},[1116,9169,1122],{"align":1118},[1116,9171,1125],{"align":1118},[1127,9173,9174,9188,9201],{},[1113,9175,9176,9181,9185],{},[1132,9177,9178],{"align":1118},[561,9179,9180],{},"hasFinishLoading",[1132,9182,9183],{"align":1118},[561,9184,1284],{},[1132,9186,9187],{"align":1118},"Whether all items have finished loading",[1113,9189,9190,9194,9198],{},[1132,9191,9192],{"align":1118},[561,9193,1214],{},[1132,9195,9196],{"align":1118},[561,9197,7368],{},[1132,9199,9200],{"align":1118},"Loading progress as percentage (0-100)",[1113,9202,9203,9208,9213],{},[1132,9204,9205],{"align":1118},[561,9206,9207],{},"items",[1132,9209,9210],{"align":1118},[561,9211,9212],{},"Array",[1132,9214,9215],{"align":1118},"Array of loading items with their status",[9217,9218,9219],"prose-warning",{},[536,9220,9221,9222,9227,9228,9157],{},"This component use top level await it needs to be wrapped on a ",[1015,9223,9225],{"href":9154,"rel":9224},[1019],[561,9226,5464],{},". Please check the ",[1015,9229,9231],{"href":9154,"rel":9230},[1019],[561,9232,9156],{},[1682,9234,9235],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":508,"searchDepth":509,"depth":510,"links":9237},[9238,9239],{"id":547,"depth":510,"text":15},{"id":1104,"depth":510,"text":1105},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":161,"description":9240},"PFf0YjSNRSbqzDb9syMCMnsAwscEEcbNUMD8BOfhg6A",{"id":9245,"title":165,"body":9246,"description":9826,"extension":513,"links":514,"meta":9827,"navigation":516,"path":166,"seo":9828,"stem":167,"__hash__":9829},"docs/2.api/3.loaders/use-video-texture.md",{"type":501,"value":9247,"toc":9822},[9248,9253,9256,9263,9265,9704,9706,9810,9819],[530,9249,9250],{},[9251,9252],"loaders-use-video-texture",{},[536,9254,9255],{},"A composable to easily use videos as textures in your meshes.",[536,9257,9258,9259],{},"This composable is based on the Drei ",[1015,9260,165],{"href":9261,"rel":9262},"https://github.com/pmndrs/drei/tree/master#usevideotexture",[1019],[545,9264,15],{"id":547},[549,9266,9267,9482],{},[552,9268,9270],{"className":554,"code":9269,"filename":757,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls } from '@tresjs/cientos'\nimport { TresCanvas } from '@tresjs/core'\nimport TheModel from './TheModel.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas clear-color=\"#333\">\n    \u003CTresPerspectiveCamera\n      :position=\"[0, 5, 9]\"\n      :look-at=\"[0, 1, 0]\"\n    />\n    \u003COrbitControls />\n    \u003CSuspense>\n      \u003CTheModel />\n    \u003C/Suspense>\n    \u003CTresGridHelper />\n    \u003CTresAmbientLight />\n  \u003C/TresCanvas>\n\u003C/template>\n",[561,9271,9272,9292,9310,9328,9342,9350,9354,9362,9380,9387,9400,9414,9418,9426,9434,9442,9450,9458,9466,9474],{"__ignoreMap":508},[564,9273,9274,9276,9278,9280,9282,9284,9286,9288,9290],{"class":566,"line":509},[564,9275,570],{"class":569},[564,9277,574],{"class":573},[564,9279,578],{"class":577},[564,9281,581],{"class":577},[564,9283,584],{"class":569},[564,9285,587],{"class":569},[564,9287,591],{"class":590},[564,9289,587],{"class":569},[564,9291,596],{"class":569},[564,9293,9294,9296,9298,9300,9302,9304,9306,9308],{"class":566,"line":510},[564,9295,604],{"class":603},[564,9297,607],{"class":569},[564,9299,788],{"class":610},[564,9301,614],{"class":569},[564,9303,617],{"class":603},[564,9305,620],{"class":569},[564,9307,623],{"class":590},[564,9309,626],{"class":569},[564,9311,9312,9314,9316,9318,9320,9322,9324,9326],{"class":566,"line":629},[564,9313,604],{"class":603},[564,9315,607],{"class":569},[564,9317,807],{"class":610},[564,9319,614],{"class":569},[564,9321,617],{"class":603},[564,9323,620],{"class":569},[564,9325,816],{"class":590},[564,9327,626],{"class":569},[564,9329,9330,9332,9334,9336,9338,9340],{"class":566,"line":635},[564,9331,604],{"class":603},[564,9333,825],{"class":610},[564,9335,828],{"class":603},[564,9337,620],{"class":569},[564,9339,833],{"class":590},[564,9341,626],{"class":569},[564,9343,9344,9346,9348],{"class":566,"line":558},[564,9345,689],{"class":569},[564,9347,574],{"class":573},[564,9349,596],{"class":569},[564,9351,9352],{"class":566,"line":686},[564,9353,632],{"emptyLinePlaceholder":516},[564,9355,9356,9358,9360],{"class":566,"line":696},[564,9357,570],{"class":569},[564,9359,706],{"class":573},[564,9361,596],{"class":569},[564,9363,9364,9366,9368,9370,9372,9374,9376,9378],{"class":566,"line":701},[564,9365,714],{"class":569},[564,9367,862],{"class":573},[564,9369,865],{"class":577},[564,9371,584],{"class":569},[564,9373,587],{"class":569},[564,9375,6336],{"class":590},[564,9377,587],{"class":569},[564,9379,596],{"class":569},[564,9381,9382,9384],{"class":566,"line":711},[564,9383,881],{"class":569},[564,9385,9386],{"class":573},"TresPerspectiveCamera\n",[564,9388,9389,9391,9393,9395,9398],{"class":566,"line":747},[564,9390,947],{"class":577},[564,9392,584],{"class":569},[564,9394,587],{"class":569},[564,9396,9397],{"class":590},"[0, 5, 9]",[564,9399,941],{"class":569},[564,9401,9402,9405,9407,9409,9412],{"class":566,"line":910},[564,9403,9404],{"class":577},"      :look-at",[564,9406,584],{"class":569},[564,9408,587],{"class":569},[564,9410,9411],{"class":590},"[0, 1, 0]",[564,9413,941],{"class":569},[564,9415,9416],{"class":566,"line":920},[564,9417,962],{"class":569},[564,9419,9420,9422,9424],{"class":566,"line":928},[564,9421,881],{"class":569},[564,9423,905],{"class":573},[564,9425,744],{"class":569},[564,9427,9428,9430,9432],{"class":566,"line":944},[564,9429,881],{"class":569},[564,9431,5464],{"class":573},[564,9433,596],{"class":569},[564,9435,9436,9438,9440],{"class":566,"line":959},[564,9437,4342],{"class":569},[564,9439,915],{"class":573},[564,9441,744],{"class":569},[564,9443,9444,9446,9448],{"class":566,"line":965},[564,9445,4371],{"class":569},[564,9447,5464],{"class":573},[564,9449,596],{"class":569},[564,9451,9452,9454,9456],{"class":566,"line":987},[564,9453,881],{"class":569},[564,9455,5547],{"class":573},[564,9457,744],{"class":569},[564,9459,9460,9462,9464],{"class":566,"line":997},[564,9461,881],{"class":569},[564,9463,970],{"class":573},[564,9465,744],{"class":569},[564,9467,9468,9470,9472],{"class":566,"line":4057},[564,9469,990],{"class":569},[564,9471,862],{"class":573},[564,9473,596],{"class":569},[564,9475,9476,9478,9480],{"class":566,"line":4058},[564,9477,689],{"class":569},[564,9479,706],{"class":573},[564,9481,596],{"class":569},[552,9483,9487],{"className":554,"code":9484,"filename":9485,"highlights":9486,"language":559,"meta":508,"style":508},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Sphere, useVideoTexture } from '@tresjs/cientos'\n\nconst videoPath = 'https://raw.githubusercontent.com/'\n  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'\nconst texture = ref()\ntexture.value = await useVideoTexture(videoPath, { loop: false })\n\u003C/script>\n\n\u003Ctemplate>\n   \u003CSphere :position=\"[0, 2, 0]\">\n      \u003CTresMeshBasicMaterial :map=\"texture\" />\n    \u003C/Sphere>\n\u003C/template>\n","TheVideoTexture.vue",[629,701,928],[561,9488,9489,9509,9527,9552,9556,9571,9582,9595,9629,9637,9641,9649,9669,9688,9696],{"__ignoreMap":508},[564,9490,9491,9493,9495,9497,9499,9501,9503,9505,9507],{"class":566,"line":509},[564,9492,570],{"class":569},[564,9494,574],{"class":573},[564,9496,578],{"class":577},[564,9498,581],{"class":577},[564,9500,584],{"class":569},[564,9502,587],{"class":569},[564,9504,591],{"class":590},[564,9506,587],{"class":569},[564,9508,596],{"class":569},[564,9510,9511,9513,9515,9517,9519,9521,9523,9525],{"class":566,"line":510},[564,9512,604],{"class":603},[564,9514,607],{"class":569},[564,9516,2109],{"class":610},[564,9518,614],{"class":569},[564,9520,617],{"class":603},[564,9522,620],{"class":569},[564,9524,559],{"class":590},[564,9526,626],{"class":569},[564,9528,9530,9532,9534,9537,9539,9542,9544,9546,9548,9550],{"class":9529,"line":629},[566,600],[564,9531,604],{"class":603},[564,9533,607],{"class":569},[564,9535,9536],{"class":610}," Sphere",[564,9538,663],{"class":569},[564,9540,9541],{"class":610}," useVideoTexture",[564,9543,614],{"class":569},[564,9545,617],{"class":603},[564,9547,620],{"class":569},[564,9549,623],{"class":590},[564,9551,626],{"class":569},[564,9553,9554],{"class":566,"line":635},[564,9555,632],{"emptyLinePlaceholder":516},[564,9557,9558,9560,9563,9565,9567,9569],{"class":566,"line":558},[564,9559,638],{"class":577},[564,9561,9562],{"class":610}," videoPath ",[564,9564,584],{"class":569},[564,9566,620],{"class":569},[564,9568,2569],{"class":590},[564,9570,626],{"class":569},[564,9572,9573,9575,9577,9580],{"class":566,"line":686},[564,9574,2576],{"class":569},[564,9576,620],{"class":569},[564,9578,9579],{"class":590},"Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4",[564,9581,626],{"class":569},[564,9583,9584,9586,9589,9591,9593],{"class":566,"line":696},[564,9585,638],{"class":577},[564,9587,9588],{"class":610}," texture ",[564,9590,584],{"class":569},[564,9592,2109],{"class":680},[564,9594,2155],{"class":610},[564,9596,9598,9600,9602,9605,9607,9609,9611,9614,9616,9618,9621,9623,9625,9627],{"class":9597,"line":701},[566,600],[564,9599,3910],{"class":610},[564,9601,1394],{"class":569},[564,9603,9604],{"class":610},"value ",[564,9606,584],{"class":569},[564,9608,8832],{"class":603},[564,9610,9541],{"class":680},[564,9612,9613],{"class":610},"(videoPath",[564,9615,663],{"class":569},[564,9617,607],{"class":569},[564,9619,9620],{"class":573}," loop",[564,9622,1092],{"class":569},[564,9624,6036],{"class":1095},[564,9626,614],{"class":569},[564,9628,1101],{"class":610},[564,9630,9631,9633,9635],{"class":566,"line":711},[564,9632,689],{"class":569},[564,9634,574],{"class":573},[564,9636,596],{"class":569},[564,9638,9639],{"class":566,"line":747},[564,9640,632],{"emptyLinePlaceholder":516},[564,9642,9643,9645,9647],{"class":566,"line":910},[564,9644,570],{"class":569},[564,9646,706],{"class":573},[564,9648,596],{"class":569},[564,9650,9651,9654,9656,9658,9660,9662,9665,9667],{"class":566,"line":920},[564,9652,9653],{"class":569},"   \u003C",[564,9655,285],{"class":573},[564,9657,887],{"class":577},[564,9659,584],{"class":569},[564,9661,587],{"class":569},[564,9663,9664],{"class":590},"[0, 2, 0]",[564,9666,587],{"class":569},[564,9668,596],{"class":569},[564,9670,9672,9674,9676,9678,9680,9682,9684,9686],{"class":9671,"line":928},[566,600],[564,9673,4342],{"class":569},[564,9675,6188],{"class":573},[564,9677,3903],{"class":577},[564,9679,584],{"class":569},[564,9681,587],{"class":569},[564,9683,3910],{"class":590},[564,9685,587],{"class":569},[564,9687,744],{"class":569},[564,9689,9690,9692,9694],{"class":566,"line":944},[564,9691,4371],{"class":569},[564,9693,285],{"class":573},[564,9695,596],{"class":569},[564,9697,9698,9700,9702],{"class":566,"line":959},[564,9699,689],{"class":569},[564,9701,706],{"class":573},[564,9703,596],{"class":569},[545,9705,2321],{"id":2320},[1107,9707,9708,9718],{},[1110,9709,9710],{},[1113,9711,9712,9714,9716],{},[1116,9713,2330],{"align":1118},[1116,9715,1125],{"align":1118},[1116,9717,1269],{},[1127,9719,9720,9733,9747,9762,9774,9786,9798],{},[1113,9721,9722,9726,9729],{},[1132,9723,9724],{"align":1118},[561,9725,8396],{},[1132,9727,9728],{"align":1118},"Path to the video.",[1132,9730,9731],{},[561,9732,2353],{},[1113,9734,9735,9740,9742],{},[1132,9736,9737],{"align":1118},[561,9738,9739],{},"unsuspend",[1132,9741,3706],{"align":1118},[1132,9743,9744],{},[561,9745,9746],{},"loadedmetadata",[1113,9748,9749,9754,9757],{},[1132,9750,9751],{"align":1118},[561,9752,9753],{},"crossOrigin",[1132,9755,9756],{"align":1118},"Whether to use CORS to fetch the related video.",[1132,9758,9759],{},[561,9760,9761],{},"Anonymous",[1113,9763,9764,9769,9772],{},[1132,9765,9766],{"align":1118},[561,9767,9768],{},"muted",[1132,9770,9771],{"align":1118},"Whether to set the audio silenced.",[1132,9773,7658],{},[1113,9775,9776,9781,9784],{},[1132,9777,9778],{"align":1118},[561,9779,9780],{},"loop",[1132,9782,9783],{"align":1118},"Automatically seek back to the start upon reaching the end of the video.",[1132,9785,7658],{},[1113,9787,9788,9793,9796],{},[1132,9789,9790],{"align":1118},[561,9791,9792],{},"start",[1132,9794,9795],{"align":1118},"To play to the video once loaded or not.",[1132,9797,7658],{},[1113,9799,9800,9805,9808],{},[1132,9801,9802],{"align":1118},[561,9803,9804],{},"playsInline",[1132,9806,9807],{"align":1118},"To be play the video inline or not.",[1132,9809,7658],{},[5846,9811,9812],{},[5849,9813,9814,9815,9818],{},"Any other attribute for a ",[561,9816,9817],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1682,9820,9821],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":508,"searchDepth":509,"depth":510,"links":9823},[9824,9825],{"id":547,"depth":510,"text":15},{"id":2320,"depth":510,"text":2321},"A composable to load video textures in TresJS scenes.",{},{"title":165,"description":9826},"rMFSi2yAMooLExAPvBtE0Q5kUzTXUwdWiqixCh7u4KA",1786474295797]