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