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