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