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