[{"data":1,"prerenderedAt":3717},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Floaders\u002Fuse-svg":498,"\u002Fapi\u002Floaders\u002Fuse-svg-surround":3712},[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":157,"body":500,"description":3706,"extension":3707,"links":3708,"meta":3709,"navigation":630,"path":158,"seo":3710,"stem":159,"__hash__":3711},"docs\u002F2.api\u002F3.loaders\u002F7.use-svg.md",{"type":501,"value":502,"toc":3681},"minimark",[503,509,526,531,537,541,1181,1186,1202,1206,1209,1324,1328,1410,1414,1526,1530,1535,1595,1600,1948,1952,1957,1963,1968,1974,1994,2000,2015,2062,2065,2070,2081,2086,2089,2134,2138,2143,2146,2151,2160,2205,2210,2215,2227,2232,2274,2278,2281,2411,2415,2419,2748,2752,3080,3084,3091,3312,3316,3487,3491,3498,3501,3505,3516,3520,3544,3552,3565,3569,3596,3600,3621,3631,3639,3656,3663,3677],[504,505,506],"scene-wrapper",{},[507,508],"loaders-use-svg",{},[510,511,512,513,517,518,521,522,525],"p",{},"Load and display SVG elements in your ",[514,515,516],"strong",{},"TresJS"," scene. This guide covers both the ",[519,520,157],"code",{}," composable for advanced use cases and the ",[519,523,524],{},"SVG"," component for simple declarative rendering.",[527,528,530],"h2",{"id":529},"usesvg-composable","useSVG Composable",[510,532,533,534,536],{},"The ",[519,535,157],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[538,539,15],"h3",{"id":540},"usage",[542,543,544,966],"code-group",{},[545,546,558],"pre",{"className":547,"code":548,"filename":549,"highlights":550,"language":556,"meta":557,"style":557},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\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","TheModel.vue",[551,552,553,554,555],2,5,6,7,8,"vue","",[519,559,560,595,625,632,650,693,709,741,749,759,764,774,800,809,840,865,886,902,908,936,947,957],{"__ignoreMap":557},[561,562,565,569,573,577,580,583,586,590,592],"span",{"class":563,"line":564},"line",1,[561,566,568],{"class":567},"sMK4o","\u003C",[561,570,572],{"class":571},"swJcz","script",[561,574,576],{"class":575},"spNyl"," setup",[561,578,579],{"class":575}," lang",[561,581,582],{"class":567},"=",[561,584,585],{"class":567},"\"",[561,587,589],{"class":588},"sfazB","ts",[561,591,585],{"class":567},[561,593,594],{"class":567},">\n",[561,596,599,603,606,610,613,616,619,622],{"class":597,"line":551},[563,598],"highlight",[561,600,602],{"class":601},"s7zQu","import",[561,604,605],{"class":567}," {",[561,607,609],{"class":608},"sTEyZ"," useSVG",[561,611,612],{"class":567}," }",[561,614,615],{"class":601}," from",[561,617,618],{"class":567}," '",[561,620,621],{"class":588},"@tresjs\u002Fcientos",[561,623,624],{"class":567},"'\n",[561,626,628],{"class":563,"line":627},3,[561,629,631],{"emptyLinePlaceholder":630},true,"\n",[561,633,635,638,641,643,645,648],{"class":563,"line":634},4,[561,636,637],{"class":575},"const",[561,639,640],{"class":608}," svgPath ",[561,642,582],{"class":567},[561,644,618],{"class":567},[561,646,647],{"class":588},".\u002Flogo.svg",[561,649,624],{"class":567},[561,651,653,655,657,660,663,666,668,671,673,676,679,682,685,688,690],{"class":652,"line":552},[563,598],[561,654,637],{"class":575},[561,656,605],{"class":567},[561,658,659],{"class":608}," state",[561,661,662],{"class":567},",",[561,664,665],{"class":608}," layers",[561,667,662],{"class":567},[561,669,670],{"class":608}," isLoading",[561,672,662],{"class":567},[561,674,675],{"class":608}," dispose ",[561,677,678],{"class":567},"}",[561,680,681],{"class":567}," =",[561,683,609],{"class":684},"s2Zo4",[561,686,687],{"class":608},"(svgPath",[561,689,662],{"class":567},[561,691,692],{"class":567}," {\n",[561,694,696,699,702,706],{"class":695,"line":553},[563,598],[561,697,698],{"class":571},"  skipFills",[561,700,701],{"class":567},":",[561,703,705],{"class":704},"sfNiH"," false",[561,707,708],{"class":567},",\n",[561,710,712,715,717,719,722,724,727,729,732,734,738],{"class":711,"line":554},[563,598],[561,713,714],{"class":571},"  fillMaterial",[561,716,701],{"class":567},[561,718,605],{"class":567},[561,720,721],{"class":571}," transparent",[561,723,701],{"class":567},[561,725,726],{"class":704}," true",[561,728,662],{"class":567},[561,730,731],{"class":571}," opacity",[561,733,701],{"class":567},[561,735,737],{"class":736},"sbssI"," 0.8",[561,739,740],{"class":567}," }\n",[561,742,744,746],{"class":743,"line":555},[563,598],[561,745,678],{"class":567},[561,747,748],{"class":608},")\n",[561,750,752,755,757],{"class":563,"line":751},9,[561,753,754],{"class":567},"\u003C\u002F",[561,756,572],{"class":571},[561,758,594],{"class":567},[561,760,762],{"class":563,"line":761},10,[561,763,631],{"emptyLinePlaceholder":630},[561,765,767,769,772],{"class":563,"line":766},11,[561,768,568],{"class":567},[561,770,771],{"class":571},"template",[561,773,594],{"class":567},[561,775,777,780,783,786,788,790,793,796,798],{"class":563,"line":776},12,[561,778,779],{"class":567},"  \u003C",[561,781,782],{"class":571},"TresGroup",[561,784,785],{"class":601}," v-if",[561,787,582],{"class":567},[561,789,585],{"class":567},[561,791,792],{"class":567},"!",[561,794,795],{"class":608},"isLoading",[561,797,585],{"class":567},[561,799,594],{"class":567},[561,801,803,806],{"class":563,"line":802},13,[561,804,805],{"class":567},"    \u003C",[561,807,808],{"class":571},"TresMesh\n",[561,810,812,815,817,819,822,825,828,831,834,837],{"class":563,"line":811},14,[561,813,814],{"class":601},"      v-for",[561,816,582],{"class":567},[561,818,585],{"class":567},[561,820,821],{"class":567},"(",[561,823,824],{"class":608},"layer",[561,826,827],{"class":567},", ",[561,829,830],{"class":608},"index",[561,832,833],{"class":567},") in ",[561,835,836],{"class":608},"layers",[561,838,839],{"class":567},"\"\n",[561,841,843,846,849,851,854,857,860,862],{"class":563,"line":842},15,[561,844,845],{"class":567},"      :",[561,847,848],{"class":575},"key",[561,850,582],{"class":567},[561,852,853],{"class":567},"\"`",[561,855,856],{"class":588},"layer-",[561,858,859],{"class":567},"${",[561,861,830],{"class":608},[561,863,864],{"class":567},"}`\"\n",[561,866,868,870,873,875,877,879,882,884],{"class":563,"line":867},16,[561,869,845],{"class":567},[561,871,872],{"class":575},"geometry",[561,874,582],{"class":567},[561,876,585],{"class":567},[561,878,824],{"class":608},[561,880,881],{"class":567},".",[561,883,872],{"class":608},[561,885,839],{"class":567},[561,887,889,891,894,896,898,900],{"class":563,"line":888},17,[561,890,845],{"class":567},[561,892,893],{"class":575},"render-order",[561,895,582],{"class":567},[561,897,585],{"class":567},[561,899,830],{"class":608},[561,901,839],{"class":567},[561,903,905],{"class":563,"line":904},18,[561,906,907],{"class":567},"    >\n",[561,909,911,914,917,920,922,924,926,928,931,933],{"class":563,"line":910},19,[561,912,913],{"class":567},"      \u003C",[561,915,916],{"class":571},"TresMeshBasicMaterial",[561,918,919],{"class":575}," v-bind",[561,921,582],{"class":567},[561,923,585],{"class":567},[561,925,824],{"class":608},[561,927,881],{"class":567},[561,929,930],{"class":608},"material",[561,932,585],{"class":567},[561,934,935],{"class":567}," \u002F>\n",[561,937,939,942,945],{"class":563,"line":938},20,[561,940,941],{"class":567},"    \u003C\u002F",[561,943,944],{"class":571},"TresMesh",[561,946,594],{"class":567},[561,948,950,953,955],{"class":563,"line":949},21,[561,951,952],{"class":567},"  \u003C\u002F",[561,954,782],{"class":571},[561,956,594],{"class":567},[561,958,960,962,964],{"class":563,"line":959},22,[561,961,754],{"class":567},[561,963,771],{"class":571},[561,965,594],{"class":567},[545,967,970],{"className":547,"code":968,"filename":969,"language":556,"meta":557,"style":557},"\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","app.vue",[519,971,972,992,1011,1031,1048,1056,1060,1068,1089,1129,1138,1147,1156,1165,1173],{"__ignoreMap":557},[561,973,974,976,978,980,982,984,986,988,990],{"class":563,"line":564},[561,975,568],{"class":567},[561,977,572],{"class":571},[561,979,576],{"class":575},[561,981,579],{"class":575},[561,983,582],{"class":567},[561,985,585],{"class":567},[561,987,589],{"class":588},[561,989,585],{"class":567},[561,991,594],{"class":567},[561,993,994,996,998,1001,1003,1005,1007,1009],{"class":563,"line":551},[561,995,602],{"class":601},[561,997,605],{"class":567},[561,999,1000],{"class":608}," OrbitControls",[561,1002,612],{"class":567},[561,1004,615],{"class":601},[561,1006,618],{"class":567},[561,1008,621],{"class":588},[561,1010,624],{"class":567},[561,1012,1013,1015,1017,1020,1022,1024,1026,1029],{"class":563,"line":627},[561,1014,602],{"class":601},[561,1016,605],{"class":567},[561,1018,1019],{"class":608}," TresCanvas",[561,1021,612],{"class":567},[561,1023,615],{"class":601},[561,1025,618],{"class":567},[561,1027,1028],{"class":588},"@tresjs\u002Fcore",[561,1030,624],{"class":567},[561,1032,1033,1035,1038,1041,1043,1046],{"class":563,"line":634},[561,1034,602],{"class":601},[561,1036,1037],{"class":608}," TheModel ",[561,1039,1040],{"class":601},"from",[561,1042,618],{"class":567},[561,1044,1045],{"class":588},".\u002FTheModel.vue",[561,1047,624],{"class":567},[561,1049,1050,1052,1054],{"class":563,"line":552},[561,1051,754],{"class":567},[561,1053,572],{"class":571},[561,1055,594],{"class":567},[561,1057,1058],{"class":563,"line":553},[561,1059,631],{"emptyLinePlaceholder":630},[561,1061,1062,1064,1066],{"class":563,"line":554},[561,1063,568],{"class":567},[561,1065,771],{"class":571},[561,1067,594],{"class":567},[561,1069,1070,1072,1075,1078,1080,1082,1085,1087],{"class":563,"line":555},[561,1071,779],{"class":567},[561,1073,1074],{"class":571},"TresCanvas",[561,1076,1077],{"class":575}," clear-color",[561,1079,582],{"class":567},[561,1081,585],{"class":567},[561,1083,1084],{"class":588},"#333",[561,1086,585],{"class":567},[561,1088,594],{"class":567},[561,1090,1091,1093,1096,1099,1102,1104,1106,1109,1112,1114,1117,1119,1122,1125,1127],{"class":563,"line":751},[561,1092,805],{"class":567},[561,1094,1095],{"class":571},"TresPerspectiveCamera",[561,1097,1098],{"class":567}," :",[561,1100,1101],{"class":575},"position",[561,1103,582],{"class":567},[561,1105,585],{"class":567},[561,1107,1108],{"class":567},"[",[561,1110,1111],{"class":736},"0",[561,1113,827],{"class":567},[561,1115,1116],{"class":736},"2",[561,1118,827],{"class":567},[561,1120,1121],{"class":736},"10",[561,1123,1124],{"class":567},"]",[561,1126,585],{"class":567},[561,1128,935],{"class":567},[561,1130,1131,1133,1136],{"class":563,"line":761},[561,1132,805],{"class":567},[561,1134,1135],{"class":571},"OrbitControls",[561,1137,935],{"class":567},[561,1139,1140,1142,1145],{"class":563,"line":766},[561,1141,805],{"class":567},[561,1143,1144],{"class":571},"TheModel",[561,1146,935],{"class":567},[561,1148,1149,1151,1154],{"class":563,"line":776},[561,1150,805],{"class":567},[561,1152,1153],{"class":571},"TresAmbientLight",[561,1155,935],{"class":567},[561,1157,1158,1160,1163],{"class":563,"line":802},[561,1159,805],{"class":567},[561,1161,1162],{"class":571},"TresDirectionalLight",[561,1164,935],{"class":567},[561,1166,1167,1169,1171],{"class":563,"line":811},[561,1168,952],{"class":567},[561,1170,1074],{"class":571},[561,1172,594],{"class":567},[561,1174,1175,1177,1179],{"class":563,"line":842},[561,1176,754],{"class":567},[561,1178,771],{"class":571},[561,1180,594],{"class":567},[510,1182,533,1183,1185],{},[519,1184,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:",[1187,1188,1189,1193,1196,1199],"ul",{},[1190,1191,1192],"li",{},"Manually control layer rendering",[1190,1194,1195],{},"Apply custom animations to individual layers",[1190,1197,1198],{},"Access geometry data programmatically",[1190,1200,1201],{},"Implement complex material logic",[538,1203,1205],{"id":1204},"svg-data-sources","SVG Data Sources",[510,1207,1208],{},"The composable accepts both file paths and inline SVG strings:",[545,1210,1213],{"className":1211,"code":1212,"language":589,"meta":557,"style":557},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","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",[519,1214,1215,1233,1237,1243,1270,1274,1279,1294,1299,1307],{"__ignoreMap":557},[561,1216,1217,1219,1221,1223,1225,1227,1229,1231],{"class":563,"line":564},[561,1218,602],{"class":601},[561,1220,605],{"class":567},[561,1222,609],{"class":608},[561,1224,612],{"class":567},[561,1226,615],{"class":601},[561,1228,618],{"class":567},[561,1230,621],{"class":588},[561,1232,624],{"class":567},[561,1234,1235],{"class":563,"line":551},[561,1236,631],{"emptyLinePlaceholder":630},[561,1238,1239],{"class":563,"line":627},[561,1240,1242],{"class":1241},"sHwdD","\u002F\u002F From file\n",[561,1244,1245,1247,1249,1252,1254,1256,1258,1260,1263,1266,1268],{"class":563,"line":634},[561,1246,637],{"class":575},[561,1248,605],{"class":567},[561,1250,1251],{"class":608}," layers ",[561,1253,678],{"class":567},[561,1255,681],{"class":567},[561,1257,609],{"class":684},[561,1259,821],{"class":608},[561,1261,1262],{"class":567},"'",[561,1264,1265],{"class":588},"\u002Fpath\u002Fto\u002Ffile.svg",[561,1267,1262],{"class":567},[561,1269,748],{"class":608},[561,1271,1272],{"class":563,"line":552},[561,1273,631],{"emptyLinePlaceholder":630},[561,1275,1276],{"class":563,"line":553},[561,1277,1278],{"class":1241},"\u002F\u002F Inline SVG string\n",[561,1280,1281,1283,1286,1288,1291],{"class":563,"line":554},[561,1282,637],{"class":575},[561,1284,1285],{"class":608}," svgString ",[561,1287,582],{"class":567},[561,1289,1290],{"class":567}," `",[561,1292,1293],{"class":588},"\u003Csvg viewBox=\"0 0 100 100\">\n",[561,1295,1296],{"class":563,"line":555},[561,1297,1298],{"class":588},"  \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" \u002F>\n",[561,1300,1301,1304],{"class":563,"line":751},[561,1302,1303],{"class":588},"\u003C\u002Fsvg>",[561,1305,1306],{"class":567},"`\n",[561,1308,1309,1311,1313,1315,1317,1319,1321],{"class":563,"line":761},[561,1310,637],{"class":575},[561,1312,605],{"class":567},[561,1314,1251],{"class":608},[561,1316,678],{"class":567},[561,1318,681],{"class":567},[561,1320,609],{"class":684},[561,1322,1323],{"class":608},"(svgString)\n",[538,1325,1327],{"id":1326},"return-values","Return Values",[1329,1330,1331,1348],"table",{},[1332,1333,1334],"thead",{},[1335,1336,1337,1342,1345],"tr",{},[1338,1339,1341],"th",{"align":1340},"left","Name",[1338,1343,1344],{},"Type",[1338,1346,1347],{},"Description",[1349,1350,1351,1367,1381,1395],"tbody",{},[1335,1352,1353,1359,1364],{},[1354,1355,1356],"td",{"align":1340},[514,1357,1358],{},"state",[1354,1360,1361],{},[519,1362,1363],{},"SVGResult",[1354,1365,1366],{},"The loaded SVG state from SVGLoader",[1335,1368,1369,1373,1378],{},[1354,1370,1371],{"align":1340},[514,1372,836],{},[1354,1374,1375],{},[519,1376,1377],{},"SVGLayer[]",[1354,1379,1380],{},"Computed array of processed geometries and materials",[1335,1382,1383,1387,1392],{},[1354,1384,1385],{"align":1340},[514,1386,795],{},[1354,1388,1389],{},[519,1390,1391],{},"boolean",[1354,1393,1394],{},"Whether the SVG is currently loading",[1335,1396,1397,1402,1407],{},[1354,1398,1399],{"align":1340},[514,1400,1401],{},"dispose",[1354,1403,1404],{},[519,1405,1406],{},"() => void",[1354,1408,1409],{},"Function to dispose of all geometries",[538,1411,1413],{"id":1412},"options","Options",[1329,1415,1416,1429],{},[1332,1417,1418],{},[1335,1419,1420,1422,1424,1427],{},[1338,1421,1341],{"align":1340},[1338,1423,1344],{},[1338,1425,1426],{},"Default",[1338,1428,1347],{},[1349,1430,1431,1450,1468,1488,1506],{},[1335,1432,1433,1438,1442,1447],{},[1354,1434,1435],{"align":1340},[514,1436,1437],{},"skipStrokes",[1354,1439,1440],{},[519,1441,1391],{},[1354,1443,1444],{},[519,1445,1446],{},"false",[1354,1448,1449],{},"Whether to skip rendering strokes",[1335,1451,1452,1457,1461,1465],{},[1354,1453,1454],{"align":1340},[514,1455,1456],{},"skipFills",[1354,1458,1459],{},[519,1460,1391],{},[1354,1462,1463],{},[519,1464,1446],{},[1354,1466,1467],{},"Whether to skip rendering fills",[1335,1469,1470,1475,1480,1485],{},[1354,1471,1472],{"align":1340},[514,1473,1474],{},"fillMaterial",[1354,1476,1477],{},[519,1478,1479],{},"MeshBasicMaterialParameters",[1354,1481,1482],{},[519,1483,1484],{},"{}",[1354,1486,1487],{},"Material properties for fill layers",[1335,1489,1490,1495,1499,1503],{},[1354,1491,1492],{"align":1340},[514,1493,1494],{},"strokeMaterial",[1354,1496,1497],{},[519,1498,1479],{},[1354,1500,1501],{},[519,1502,1484],{},[1354,1504,1505],{},"Material properties for stroke layers",[1335,1507,1508,1513,1518,1523],{},[1354,1509,1510],{"align":1340},[514,1511,1512],{},"depth",[1354,1514,1515],{},[519,1516,1517],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[1354,1519,1520],{},[519,1521,1522],{},"'renderOrder'",[1354,1524,1525],{},"How layers should be rendered in 3D space",[538,1527,1529],{"id":1528},"working-with-layers","Working with Layers",[510,1531,533,1532,1534],{},[519,1533,836],{}," computed property returns an array of processed SVG elements, each containing:",[545,1536,1538],{"className":1211,"code":1537,"language":589,"meta":557,"style":557},"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",[519,1539,1540,1551,1564,1577,1590],{"__ignoreMap":557},[561,1541,1542,1545,1549],{"class":563,"line":564},[561,1543,1544],{"class":575},"interface",[561,1546,1548],{"class":1547},"sBMFI"," SVGLayer",[561,1550,692],{"class":567},[561,1552,1553,1556,1558,1561],{"class":563,"line":551},[561,1554,1555],{"class":571},"  geometry",[561,1557,701],{"class":567},[561,1559,1560],{"class":1547}," BufferGeometry",[561,1562,1563],{"class":1241}," \u002F\u002F Three.js geometry for the layer\n",[561,1565,1566,1569,1571,1574],{"class":563,"line":627},[561,1567,1568],{"class":571},"  material",[561,1570,701],{"class":567},[561,1572,1573],{"class":1547}," MeshBasicMaterialParameters",[561,1575,1576],{"class":1241}," \u002F\u002F Material properties\n",[561,1578,1579,1582,1584,1587],{"class":563,"line":634},[561,1580,1581],{"class":571},"  isStroke",[561,1583,701],{"class":567},[561,1585,1586],{"class":1547}," boolean",[561,1588,1589],{"class":1241}," \u002F\u002F Whether this layer is a stroke or fill\n",[561,1591,1592],{"class":563,"line":552},[561,1593,1594],{"class":567},"}\n",[1596,1597,1599],"h4",{"id":1598},"accessing-individual-layers","Accessing Individual Layers",[545,1601,1604],{"className":547,"code":1602,"highlights":1603,"language":556,"meta":557,"style":557},"\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",[551,634],[519,1605,1606,1626,1645,1649,1675,1679,1684,1721,1769,1773,1781,1785,1793,1801,1807,1829,1843,1861,1865,1872,1889,1916,1921,1930,1939],{"__ignoreMap":557},[561,1607,1608,1610,1612,1614,1616,1618,1620,1622,1624],{"class":563,"line":564},[561,1609,568],{"class":567},[561,1611,572],{"class":571},[561,1613,576],{"class":575},[561,1615,579],{"class":575},[561,1617,582],{"class":567},[561,1619,585],{"class":567},[561,1621,589],{"class":588},[561,1623,585],{"class":567},[561,1625,594],{"class":567},[561,1627,1629,1631,1633,1635,1637,1639,1641,1643],{"class":1628,"line":551},[563,598],[561,1630,602],{"class":601},[561,1632,605],{"class":567},[561,1634,609],{"class":608},[561,1636,612],{"class":567},[561,1638,615],{"class":601},[561,1640,618],{"class":567},[561,1642,621],{"class":588},[561,1644,624],{"class":567},[561,1646,1647],{"class":563,"line":627},[561,1648,631],{"emptyLinePlaceholder":630},[561,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1671,1673],{"class":1651,"line":634},[563,598],[561,1653,637],{"class":575},[561,1655,605],{"class":567},[561,1657,1251],{"class":608},[561,1659,678],{"class":567},[561,1661,681],{"class":567},[561,1663,609],{"class":684},[561,1665,821],{"class":608},[561,1667,1262],{"class":567},[561,1669,1670],{"class":588},"\u002Fcomplex-icon.svg",[561,1672,1262],{"class":567},[561,1674,748],{"class":608},[561,1676,1677],{"class":563,"line":552},[561,1678,631],{"emptyLinePlaceholder":630},[561,1680,1681],{"class":563,"line":553},[561,1682,1683],{"class":1241},"\u002F\u002F Apply different materials based on layer type\n",[561,1685,1686,1688,1691,1693,1696,1699,1701,1703,1705,1708,1710,1713,1716,1719],{"class":563,"line":554},[561,1687,637],{"class":575},[561,1689,1690],{"class":608}," getFillColor ",[561,1692,582],{"class":567},[561,1694,1695],{"class":567}," (",[561,1697,824],{"class":1698},"sHdIc",[561,1700,701],{"class":567},[561,1702,1548],{"class":1547},[561,1704,662],{"class":567},[561,1706,1707],{"class":1698}," index",[561,1709,701],{"class":567},[561,1711,1712],{"class":1547}," number",[561,1714,1715],{"class":567},")",[561,1717,1718],{"class":575}," =>",[561,1720,692],{"class":567},[561,1722,1723,1726,1729,1731,1734,1737,1739,1742,1744,1746,1748,1751,1753,1756,1759,1762,1764,1767],{"class":563,"line":555},[561,1724,1725],{"class":601},"  return",[561,1727,1728],{"class":608}," layer",[561,1730,881],{"class":567},[561,1732,1733],{"class":608},"isStroke",[561,1735,1736],{"class":567}," ?",[561,1738,618],{"class":567},[561,1740,1741],{"class":588},"#000000",[561,1743,1262],{"class":567},[561,1745,1098],{"class":567},[561,1747,1290],{"class":567},[561,1749,1750],{"class":588},"hsl(",[561,1752,859],{"class":567},[561,1754,1755],{"class":608},"index ",[561,1757,1758],{"class":567},"*",[561,1760,1761],{"class":736}," 30",[561,1763,678],{"class":567},[561,1765,1766],{"class":588},", 70%, 50%)",[561,1768,1306],{"class":567},[561,1770,1771],{"class":563,"line":751},[561,1772,1594],{"class":567},[561,1774,1775,1777,1779],{"class":563,"line":761},[561,1776,754],{"class":567},[561,1778,572],{"class":571},[561,1780,594],{"class":567},[561,1782,1783],{"class":563,"line":766},[561,1784,631],{"emptyLinePlaceholder":630},[561,1786,1787,1789,1791],{"class":563,"line":776},[561,1788,568],{"class":567},[561,1790,771],{"class":571},[561,1792,594],{"class":567},[561,1794,1795,1797,1799],{"class":563,"line":802},[561,1796,779],{"class":567},[561,1798,782],{"class":571},[561,1800,594],{"class":567},[561,1802,1803,1805],{"class":563,"line":811},[561,1804,805],{"class":567},[561,1806,808],{"class":571},[561,1808,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827],{"class":563,"line":842},[561,1810,814],{"class":601},[561,1812,582],{"class":567},[561,1814,585],{"class":567},[561,1816,821],{"class":567},[561,1818,824],{"class":608},[561,1820,827],{"class":567},[561,1822,830],{"class":608},[561,1824,833],{"class":567},[561,1826,836],{"class":608},[561,1828,839],{"class":567},[561,1830,1831,1833,1835,1837,1839,1841],{"class":563,"line":867},[561,1832,845],{"class":567},[561,1834,848],{"class":575},[561,1836,582],{"class":567},[561,1838,585],{"class":567},[561,1840,830],{"class":608},[561,1842,839],{"class":567},[561,1844,1845,1847,1849,1851,1853,1855,1857,1859],{"class":563,"line":888},[561,1846,845],{"class":567},[561,1848,872],{"class":575},[561,1850,582],{"class":567},[561,1852,585],{"class":567},[561,1854,824],{"class":608},[561,1856,881],{"class":567},[561,1858,872],{"class":608},[561,1860,839],{"class":567},[561,1862,1863],{"class":563,"line":904},[561,1864,907],{"class":567},[561,1866,1867,1869],{"class":563,"line":910},[561,1868,913],{"class":567},[561,1870,1871],{"class":571},"TresMeshBasicMaterial\n",[561,1873,1874,1877,1879,1881,1883,1885,1887],{"class":563,"line":938},[561,1875,1876],{"class":575},"        v-bind",[561,1878,582],{"class":567},[561,1880,585],{"class":567},[561,1882,824],{"class":608},[561,1884,881],{"class":567},[561,1886,930],{"class":608},[561,1888,839],{"class":567},[561,1890,1891,1894,1897,1899,1901,1904,1906,1908,1910,1912,1914],{"class":563,"line":949},[561,1892,1893],{"class":567},"        :",[561,1895,1896],{"class":575},"color",[561,1898,582],{"class":567},[561,1900,585],{"class":567},[561,1902,1903],{"class":684},"getFillColor",[561,1905,821],{"class":567},[561,1907,824],{"class":608},[561,1909,827],{"class":567},[561,1911,830],{"class":608},[561,1913,1715],{"class":567},[561,1915,839],{"class":567},[561,1917,1918],{"class":563,"line":959},[561,1919,1920],{"class":567},"      \u002F>\n",[561,1922,1924,1926,1928],{"class":563,"line":1923},23,[561,1925,941],{"class":567},[561,1927,944],{"class":571},[561,1929,594],{"class":567},[561,1931,1933,1935,1937],{"class":563,"line":1932},24,[561,1934,952],{"class":567},[561,1936,782],{"class":571},[561,1938,594],{"class":567},[561,1940,1942,1944,1946],{"class":563,"line":1941},25,[561,1943,754],{"class":567},[561,1945,771],{"class":571},[561,1947,594],{"class":567},[538,1949,1951],{"id":1950},"depth-handling","Depth Handling",[510,1953,533,1954,1956],{},[519,1955,1512],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[1596,1958,1960,1962],{"id":1959},"renderorder-default",[519,1961,1522],{}," (Default)",[510,1964,1965],{},[514,1966,1967],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[510,1969,1970,1971,1973],{},"This is the default ",[519,1972,1512],{}," option.",[510,1975,1976,1977,1980,1981,1983,1984,1993],{},"This value sets the materials' ",[519,1978,1979],{},"depthWrite"," to ",[519,1982,1446],{}," and increments the mesh layers ",[1985,1986,1990],"a",{"href":1987,"rel":1988},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=mesh#api\u002Fen\u002Fcore\u002FObject3D.renderOrder",[1989],"nofollow",[519,1991,1992],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[510,1995,1996,1999],{},[514,1997,1998],{},"Disadvantage",": Scene objects may render out of order.",[510,2001,2002,2003,2008,2009,2014],{},"SVG layers with higher ",[1985,2004,2006],{"href":1987,"rel":2005},[1989],[519,2007,1992],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1985,2010,2012],{"href":1987,"rel":2011},[1989],[519,2013,1992],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[545,2016,2018],{"className":1211,"code":2017,"language":589,"meta":557,"style":557},"const { layers } = useSVG('\u002Ficon.svg', { depth: 'renderOrder' })\n",[519,2019,2020],{"__ignoreMap":557},[561,2021,2022,2024,2026,2028,2030,2032,2034,2036,2038,2041,2043,2045,2047,2050,2052,2054,2056,2058,2060],{"class":563,"line":564},[561,2023,637],{"class":575},[561,2025,605],{"class":567},[561,2027,1251],{"class":608},[561,2029,678],{"class":567},[561,2031,681],{"class":567},[561,2033,609],{"class":684},[561,2035,821],{"class":608},[561,2037,1262],{"class":567},[561,2039,2040],{"class":588},"\u002Ficon.svg",[561,2042,1262],{"class":567},[561,2044,662],{"class":567},[561,2046,605],{"class":567},[561,2048,2049],{"class":571}," depth",[561,2051,701],{"class":567},[561,2053,618],{"class":567},[561,2055,1992],{"class":588},[561,2057,1262],{"class":567},[561,2059,612],{"class":567},[561,2061,748],{"class":608},[1596,2063,2064],{"id":2064},"flat",[510,2066,2067],{},[514,2068,2069],{},"Use case: simple SVGs",[510,2071,2072,2073,1980,2079,881],{},"This option sets the materials ",[1985,2074,2077],{"href":2075,"rel":2076},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=mesh#api\u002Fen\u002Fmaterials\u002FMaterial.depthWrite",[1989],[519,2078,1979],{},[519,2080,1446],{},[510,2082,2083,2085],{},[514,2084,1998],{},": SVG layers may render out of order.",[510,2087,2088],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[545,2090,2092],{"className":1211,"code":2091,"language":589,"meta":557,"style":557},"const { layers } = useSVG('\u002Ficon.svg', { depth: 'flat' })\n",[519,2093,2094],{"__ignoreMap":557},[561,2095,2096,2098,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124,2126,2128,2130,2132],{"class":563,"line":564},[561,2097,637],{"class":575},[561,2099,605],{"class":567},[561,2101,1251],{"class":608},[561,2103,678],{"class":567},[561,2105,681],{"class":567},[561,2107,609],{"class":684},[561,2109,821],{"class":608},[561,2111,1262],{"class":567},[561,2113,2040],{"class":588},[561,2115,1262],{"class":567},[561,2117,662],{"class":567},[561,2119,605],{"class":567},[561,2121,2049],{"class":571},[561,2123,701],{"class":567},[561,2125,618],{"class":567},[561,2127,2064],{"class":588},[561,2129,1262],{"class":567},[561,2131,612],{"class":567},[561,2133,748],{"class":608},[1596,2135,2137],{"id":2136},"offsetz","offsetZ",[510,2139,2140],{},[514,2141,2142],{},"Use case: unscaled SVGs seen from the front",[510,2144,2145],{},"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\".",[510,2147,2148,2150],{},[514,2149,1998],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[510,2152,2153,2154,2159],{},"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 ",[1985,2155,2158],{"href":2156,"rel":2157},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FZ-fighting",[1989],"z-fight",", particularly if the SVG is scaled down.",[545,2161,2163],{"className":1211,"code":2162,"language":589,"meta":557,"style":557},"const { layers } = useSVG('\u002Ficon.svg', { depth: 'offsetZ' })\n",[519,2164,2165],{"__ignoreMap":557},[561,2166,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203],{"class":563,"line":564},[561,2168,637],{"class":575},[561,2170,605],{"class":567},[561,2172,1251],{"class":608},[561,2174,678],{"class":567},[561,2176,681],{"class":567},[561,2178,609],{"class":684},[561,2180,821],{"class":608},[561,2182,1262],{"class":567},[561,2184,2040],{"class":588},[561,2186,1262],{"class":567},[561,2188,662],{"class":567},[561,2190,605],{"class":567},[561,2192,2049],{"class":571},[561,2194,701],{"class":567},[561,2196,618],{"class":567},[561,2198,2137],{"class":588},[561,2200,1262],{"class":567},[561,2202,612],{"class":567},[561,2204,748],{"class":608},[1596,2206,2208],{"id":2207},"number",[519,2209,2207],{},[510,2211,2212],{},[514,2213,2214],{},"Use case: SVGs seen from the front",[510,2216,2217,2218,2221,2222,2226],{},"This is the same as ",[519,2219,2220],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1985,2223,2225],{"href":2156,"rel":2224},[1989],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[510,2228,2229,2231],{},[514,2230,1998],{},": \"Bottom\" of the \"stack\" is visible.",[545,2233,2235],{"className":1211,"code":2234,"language":589,"meta":557,"style":557},"const { layers } = useSVG('\u002Ficon.svg', { depth: 0.1 })\n",[519,2236,2237],{"__ignoreMap":557},[561,2238,2239,2241,2243,2245,2247,2249,2251,2253,2255,2257,2259,2261,2263,2265,2267,2270,2272],{"class":563,"line":564},[561,2240,637],{"class":575},[561,2242,605],{"class":567},[561,2244,1251],{"class":608},[561,2246,678],{"class":567},[561,2248,681],{"class":567},[561,2250,609],{"class":684},[561,2252,821],{"class":608},[561,2254,1262],{"class":567},[561,2256,2040],{"class":588},[561,2258,1262],{"class":567},[561,2260,662],{"class":567},[561,2262,605],{"class":567},[561,2264,2049],{"class":571},[561,2266,701],{"class":567},[561,2268,2269],{"class":736}," 0.1",[561,2271,612],{"class":567},[561,2273,748],{"class":608},[538,2275,2277],{"id":2276},"memory-management","Memory Management",[510,2279,2280],{},"Always dispose of geometries when the component unmounts:",[545,2282,2284],{"className":547,"code":2283,"language":556,"meta":557,"style":557},"\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",[519,2285,2286,2306,2324,2343,2347,2371,2375,2389,2397,2403],{"__ignoreMap":557},[561,2287,2288,2290,2292,2294,2296,2298,2300,2302,2304],{"class":563,"line":564},[561,2289,568],{"class":567},[561,2291,572],{"class":571},[561,2293,576],{"class":575},[561,2295,579],{"class":575},[561,2297,582],{"class":567},[561,2299,585],{"class":567},[561,2301,589],{"class":588},[561,2303,585],{"class":567},[561,2305,594],{"class":567},[561,2307,2308,2310,2312,2314,2316,2318,2320,2322],{"class":563,"line":551},[561,2309,602],{"class":601},[561,2311,605],{"class":567},[561,2313,609],{"class":608},[561,2315,612],{"class":567},[561,2317,615],{"class":601},[561,2319,618],{"class":567},[561,2321,621],{"class":588},[561,2323,624],{"class":567},[561,2325,2326,2328,2330,2333,2335,2337,2339,2341],{"class":563,"line":627},[561,2327,602],{"class":601},[561,2329,605],{"class":567},[561,2331,2332],{"class":608}," onUnmounted",[561,2334,612],{"class":567},[561,2336,615],{"class":601},[561,2338,618],{"class":567},[561,2340,556],{"class":588},[561,2342,624],{"class":567},[561,2344,2345],{"class":563,"line":634},[561,2346,631],{"emptyLinePlaceholder":630},[561,2348,2349,2351,2353,2355,2357,2359,2361,2363,2365,2367,2369],{"class":563,"line":552},[561,2350,637],{"class":575},[561,2352,605],{"class":567},[561,2354,675],{"class":608},[561,2356,678],{"class":567},[561,2358,681],{"class":567},[561,2360,609],{"class":684},[561,2362,821],{"class":608},[561,2364,1262],{"class":567},[561,2366,2040],{"class":588},[561,2368,1262],{"class":567},[561,2370,748],{"class":608},[561,2372,2373],{"class":563,"line":553},[561,2374,631],{"emptyLinePlaceholder":630},[561,2376,2377,2380,2382,2385,2387],{"class":563,"line":554},[561,2378,2379],{"class":684},"onUnmounted",[561,2381,821],{"class":608},[561,2383,2384],{"class":567},"()",[561,2386,1718],{"class":575},[561,2388,692],{"class":567},[561,2390,2391,2394],{"class":563,"line":555},[561,2392,2393],{"class":684},"  dispose",[561,2395,2396],{"class":571},"()\n",[561,2398,2399,2401],{"class":563,"line":751},[561,2400,678],{"class":567},[561,2402,748],{"class":608},[561,2404,2405,2407,2409],{"class":563,"line":761},[561,2406,754],{"class":567},[561,2408,572],{"class":571},[561,2410,594],{"class":567},[538,2412,2414],{"id":2413},"advanced-usage","Advanced Usage",[1596,2416,2418],{"id":2417},"conditional-layer-rendering","Conditional Layer Rendering",[545,2420,2422],{"className":547,"code":2421,"language":556,"meta":557,"style":557},"\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",[519,2423,2424,2444,2462,2481,2485,2504,2529,2533,2551,2561,2572,2605,2609,2617,2621,2629,2637,2643,2666,2680,2698,2702,2724,2732,2740],{"__ignoreMap":557},[561,2425,2426,2428,2430,2432,2434,2436,2438,2440,2442],{"class":563,"line":564},[561,2427,568],{"class":567},[561,2429,572],{"class":571},[561,2431,576],{"class":575},[561,2433,579],{"class":575},[561,2435,582],{"class":567},[561,2437,585],{"class":567},[561,2439,589],{"class":588},[561,2441,585],{"class":567},[561,2443,594],{"class":567},[561,2445,2446,2448,2450,2452,2454,2456,2458,2460],{"class":563,"line":551},[561,2447,602],{"class":601},[561,2449,605],{"class":567},[561,2451,609],{"class":608},[561,2453,612],{"class":567},[561,2455,615],{"class":601},[561,2457,618],{"class":567},[561,2459,621],{"class":588},[561,2461,624],{"class":567},[561,2463,2464,2466,2468,2471,2473,2475,2477,2479],{"class":563,"line":627},[561,2465,602],{"class":601},[561,2467,605],{"class":567},[561,2469,2470],{"class":608}," computed",[561,2472,612],{"class":567},[561,2474,615],{"class":601},[561,2476,618],{"class":567},[561,2478,556],{"class":588},[561,2480,624],{"class":567},[561,2482,2483],{"class":563,"line":634},[561,2484,631],{"emptyLinePlaceholder":630},[561,2486,2487,2489,2492,2494,2497,2499,2502],{"class":563,"line":552},[561,2488,637],{"class":575},[561,2490,2491],{"class":608}," showDetails ",[561,2493,582],{"class":567},[561,2495,2496],{"class":684}," ref",[561,2498,821],{"class":608},[561,2500,2501],{"class":704},"true",[561,2503,748],{"class":608},[561,2505,2506,2508,2510,2512,2514,2516,2518,2520,2522,2525,2527],{"class":563,"line":553},[561,2507,637],{"class":575},[561,2509,605],{"class":567},[561,2511,1251],{"class":608},[561,2513,678],{"class":567},[561,2515,681],{"class":567},[561,2517,609],{"class":684},[561,2519,821],{"class":608},[561,2521,1262],{"class":567},[561,2523,2524],{"class":588},"\u002Fdetailed-icon.svg",[561,2526,1262],{"class":567},[561,2528,748],{"class":608},[561,2530,2531],{"class":563,"line":554},[561,2532,631],{"emptyLinePlaceholder":630},[561,2534,2535,2537,2540,2542,2544,2546,2548],{"class":563,"line":555},[561,2536,637],{"class":575},[561,2538,2539],{"class":608}," visibleLayers ",[561,2541,582],{"class":567},[561,2543,2470],{"class":684},[561,2545,821],{"class":608},[561,2547,2384],{"class":567},[561,2549,2550],{"class":575}," =>\n",[561,2552,2553,2556,2558],{"class":563,"line":751},[561,2554,2555],{"class":608},"  showDetails",[561,2557,881],{"class":567},[561,2559,2560],{"class":608},"value\n",[561,2562,2563,2566,2568,2570],{"class":563,"line":761},[561,2564,2565],{"class":567},"    ?",[561,2567,665],{"class":608},[561,2569,881],{"class":567},[561,2571,2560],{"class":608},[561,2573,2574,2577,2579,2581,2584,2586,2589,2591,2593,2595,2598,2600,2602],{"class":563,"line":766},[561,2575,2576],{"class":567},"    :",[561,2578,665],{"class":608},[561,2580,881],{"class":567},[561,2582,2583],{"class":608},"value",[561,2585,881],{"class":567},[561,2587,2588],{"class":684},"filter",[561,2590,821],{"class":608},[561,2592,824],{"class":1698},[561,2594,1718],{"class":575},[561,2596,2597],{"class":567}," !",[561,2599,824],{"class":608},[561,2601,881],{"class":567},[561,2603,2604],{"class":608},"isStroke)\n",[561,2606,2607],{"class":563,"line":776},[561,2608,748],{"class":608},[561,2610,2611,2613,2615],{"class":563,"line":802},[561,2612,754],{"class":567},[561,2614,572],{"class":571},[561,2616,594],{"class":567},[561,2618,2619],{"class":563,"line":811},[561,2620,631],{"emptyLinePlaceholder":630},[561,2622,2623,2625,2627],{"class":563,"line":842},[561,2624,568],{"class":567},[561,2626,771],{"class":571},[561,2628,594],{"class":567},[561,2630,2631,2633,2635],{"class":563,"line":867},[561,2632,779],{"class":567},[561,2634,782],{"class":571},[561,2636,594],{"class":567},[561,2638,2639,2641],{"class":563,"line":888},[561,2640,805],{"class":567},[561,2642,808],{"class":571},[561,2644,2645,2647,2649,2651,2653,2655,2657,2659,2661,2664],{"class":563,"line":904},[561,2646,814],{"class":601},[561,2648,582],{"class":567},[561,2650,585],{"class":567},[561,2652,821],{"class":567},[561,2654,824],{"class":608},[561,2656,827],{"class":567},[561,2658,830],{"class":608},[561,2660,833],{"class":567},[561,2662,2663],{"class":608},"visibleLayers",[561,2665,839],{"class":567},[561,2667,2668,2670,2672,2674,2676,2678],{"class":563,"line":910},[561,2669,845],{"class":567},[561,2671,848],{"class":575},[561,2673,582],{"class":567},[561,2675,585],{"class":567},[561,2677,830],{"class":608},[561,2679,839],{"class":567},[561,2681,2682,2684,2686,2688,2690,2692,2694,2696],{"class":563,"line":938},[561,2683,845],{"class":567},[561,2685,872],{"class":575},[561,2687,582],{"class":567},[561,2689,585],{"class":567},[561,2691,824],{"class":608},[561,2693,881],{"class":567},[561,2695,872],{"class":608},[561,2697,839],{"class":567},[561,2699,2700],{"class":563,"line":949},[561,2701,907],{"class":567},[561,2703,2704,2706,2708,2710,2712,2714,2716,2718,2720,2722],{"class":563,"line":959},[561,2705,913],{"class":567},[561,2707,916],{"class":571},[561,2709,919],{"class":575},[561,2711,582],{"class":567},[561,2713,585],{"class":567},[561,2715,824],{"class":608},[561,2717,881],{"class":567},[561,2719,930],{"class":608},[561,2721,585],{"class":567},[561,2723,935],{"class":567},[561,2725,2726,2728,2730],{"class":563,"line":1923},[561,2727,941],{"class":567},[561,2729,944],{"class":571},[561,2731,594],{"class":567},[561,2733,2734,2736,2738],{"class":563,"line":1932},[561,2735,952],{"class":567},[561,2737,782],{"class":571},[561,2739,594],{"class":567},[561,2741,2742,2744,2746],{"class":563,"line":1941},[561,2743,754],{"class":567},[561,2745,771],{"class":571},[561,2747,594],{"class":567},[1596,2749,2751],{"id":2750},"material-customization-per-layer","Material Customization per Layer",[545,2753,2755],{"className":547,"code":2754,"language":556,"meta":557,"style":557},"\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",[519,2756,2757,2777,2795,2799,2826,2834,2845,2855,2860,2869,2879,2890,2903,2908,2914,2922,2926,2934,2942,2948,2970,2984,3002,3006,3012,3028,3048,3053,3062,3071],{"__ignoreMap":557},[561,2758,2759,2761,2763,2765,2767,2769,2771,2773,2775],{"class":563,"line":564},[561,2760,568],{"class":567},[561,2762,572],{"class":571},[561,2764,576],{"class":575},[561,2766,579],{"class":575},[561,2768,582],{"class":567},[561,2770,585],{"class":567},[561,2772,589],{"class":588},[561,2774,585],{"class":567},[561,2776,594],{"class":567},[561,2778,2779,2781,2783,2785,2787,2789,2791,2793],{"class":563,"line":551},[561,2780,602],{"class":601},[561,2782,605],{"class":567},[561,2784,609],{"class":608},[561,2786,612],{"class":567},[561,2788,615],{"class":601},[561,2790,618],{"class":567},[561,2792,621],{"class":588},[561,2794,624],{"class":567},[561,2796,2797],{"class":563,"line":627},[561,2798,631],{"emptyLinePlaceholder":630},[561,2800,2801,2803,2805,2807,2809,2811,2813,2815,2817,2820,2822,2824],{"class":563,"line":634},[561,2802,637],{"class":575},[561,2804,605],{"class":567},[561,2806,1251],{"class":608},[561,2808,678],{"class":567},[561,2810,681],{"class":567},[561,2812,609],{"class":684},[561,2814,821],{"class":608},[561,2816,1262],{"class":567},[561,2818,2819],{"class":588},"\u002Flogo.svg",[561,2821,1262],{"class":567},[561,2823,662],{"class":567},[561,2825,692],{"class":567},[561,2827,2828,2830,2832],{"class":563,"line":552},[561,2829,714],{"class":571},[561,2831,701],{"class":567},[561,2833,692],{"class":567},[561,2835,2836,2839,2841,2843],{"class":563,"line":553},[561,2837,2838],{"class":571},"    transparent",[561,2840,701],{"class":567},[561,2842,726],{"class":704},[561,2844,708],{"class":567},[561,2846,2847,2850,2852],{"class":563,"line":554},[561,2848,2849],{"class":571},"    opacity",[561,2851,701],{"class":567},[561,2853,2854],{"class":736}," 0.9\n",[561,2856,2857],{"class":563,"line":555},[561,2858,2859],{"class":567},"  },\n",[561,2861,2862,2865,2867],{"class":563,"line":751},[561,2863,2864],{"class":571},"  strokeMaterial",[561,2866,701],{"class":567},[561,2868,692],{"class":567},[561,2870,2871,2873,2875,2877],{"class":563,"line":761},[561,2872,2838],{"class":571},[561,2874,701],{"class":567},[561,2876,726],{"class":704},[561,2878,708],{"class":567},[561,2880,2881,2883,2885,2888],{"class":563,"line":766},[561,2882,2849],{"class":571},[561,2884,701],{"class":567},[561,2886,2887],{"class":736}," 1.0",[561,2889,708],{"class":567},[561,2891,2892,2895,2897,2899,2901],{"class":563,"line":776},[561,2893,2894],{"class":571},"    color",[561,2896,701],{"class":567},[561,2898,618],{"class":567},[561,2900,1741],{"class":588},[561,2902,624],{"class":567},[561,2904,2905],{"class":563,"line":802},[561,2906,2907],{"class":567},"  }\n",[561,2909,2910,2912],{"class":563,"line":811},[561,2911,678],{"class":567},[561,2913,748],{"class":608},[561,2915,2916,2918,2920],{"class":563,"line":842},[561,2917,754],{"class":567},[561,2919,572],{"class":571},[561,2921,594],{"class":567},[561,2923,2924],{"class":563,"line":867},[561,2925,631],{"emptyLinePlaceholder":630},[561,2927,2928,2930,2932],{"class":563,"line":888},[561,2929,568],{"class":567},[561,2931,771],{"class":571},[561,2933,594],{"class":567},[561,2935,2936,2938,2940],{"class":563,"line":904},[561,2937,779],{"class":567},[561,2939,782],{"class":571},[561,2941,594],{"class":567},[561,2943,2944,2946],{"class":563,"line":910},[561,2945,805],{"class":567},[561,2947,808],{"class":571},[561,2949,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968],{"class":563,"line":938},[561,2951,814],{"class":601},[561,2953,582],{"class":567},[561,2955,585],{"class":567},[561,2957,821],{"class":567},[561,2959,824],{"class":608},[561,2961,827],{"class":567},[561,2963,830],{"class":608},[561,2965,833],{"class":567},[561,2967,836],{"class":608},[561,2969,839],{"class":567},[561,2971,2972,2974,2976,2978,2980,2982],{"class":563,"line":949},[561,2973,845],{"class":567},[561,2975,848],{"class":575},[561,2977,582],{"class":567},[561,2979,585],{"class":567},[561,2981,830],{"class":608},[561,2983,839],{"class":567},[561,2985,2986,2988,2990,2992,2994,2996,2998,3000],{"class":563,"line":959},[561,2987,845],{"class":567},[561,2989,872],{"class":575},[561,2991,582],{"class":567},[561,2993,585],{"class":567},[561,2995,824],{"class":608},[561,2997,881],{"class":567},[561,2999,872],{"class":608},[561,3001,839],{"class":567},[561,3003,3004],{"class":563,"line":1923},[561,3005,907],{"class":567},[561,3007,3008,3010],{"class":563,"line":1932},[561,3009,913],{"class":567},[561,3011,1871],{"class":571},[561,3013,3014,3016,3018,3020,3022,3024,3026],{"class":563,"line":1941},[561,3015,1876],{"class":575},[561,3017,582],{"class":567},[561,3019,585],{"class":567},[561,3021,824],{"class":608},[561,3023,881],{"class":567},[561,3025,930],{"class":608},[561,3027,839],{"class":567},[561,3029,3031,3033,3036,3038,3040,3042,3044,3046],{"class":563,"line":3030},26,[561,3032,1893],{"class":567},[561,3034,3035],{"class":575},"wireframe",[561,3037,582],{"class":567},[561,3039,585],{"class":567},[561,3041,824],{"class":608},[561,3043,881],{"class":567},[561,3045,1733],{"class":608},[561,3047,839],{"class":567},[561,3049,3051],{"class":563,"line":3050},27,[561,3052,1920],{"class":567},[561,3054,3056,3058,3060],{"class":563,"line":3055},28,[561,3057,941],{"class":567},[561,3059,944],{"class":571},[561,3061,594],{"class":567},[561,3063,3065,3067,3069],{"class":563,"line":3064},29,[561,3066,952],{"class":567},[561,3068,782],{"class":571},[561,3070,594],{"class":567},[561,3072,3074,3076,3078],{"class":563,"line":3073},30,[561,3075,754],{"class":567},[561,3077,771],{"class":571},[561,3079,594],{"class":567},[527,3081,3083],{"id":3082},"usesvg-component","UseSVG Component",[510,3085,3086,3087,3090],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[519,3088,3089],{},"UseSVG"," component:",[545,3092,3094],{"className":547,"code":3093,"language":556,"meta":557,"style":557},"\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",[519,3095,3096,3116,3135,3143,3147,3155,3204,3211,3225,3240,3264,3278,3291,3296,3304],{"__ignoreMap":557},[561,3097,3098,3100,3102,3104,3106,3108,3110,3112,3114],{"class":563,"line":564},[561,3099,568],{"class":567},[561,3101,572],{"class":571},[561,3103,576],{"class":575},[561,3105,579],{"class":575},[561,3107,582],{"class":567},[561,3109,585],{"class":567},[561,3111,589],{"class":588},[561,3113,585],{"class":567},[561,3115,594],{"class":567},[561,3117,3118,3120,3122,3125,3127,3129,3131,3133],{"class":563,"line":551},[561,3119,602],{"class":601},[561,3121,605],{"class":567},[561,3123,3124],{"class":608}," UseSVG",[561,3126,612],{"class":567},[561,3128,615],{"class":601},[561,3130,618],{"class":567},[561,3132,621],{"class":588},[561,3134,624],{"class":567},[561,3136,3137,3139,3141],{"class":563,"line":627},[561,3138,754],{"class":567},[561,3140,572],{"class":571},[561,3142,594],{"class":567},[561,3144,3145],{"class":563,"line":634},[561,3146,631],{"emptyLinePlaceholder":630},[561,3148,3149,3151,3153],{"class":563,"line":552},[561,3150,568],{"class":567},[561,3152,771],{"class":571},[561,3154,594],{"class":567},[561,3156,3157,3159,3161,3163,3166,3168,3170,3173,3175,3177,3179,3181,3183,3186,3189,3191,3194,3196,3198,3200,3202],{"class":563,"line":553},[561,3158,779],{"class":567},[561,3160,782],{"class":571},[561,3162,1098],{"class":567},[561,3164,3165],{"class":575},"scale",[561,3167,582],{"class":567},[561,3169,585],{"class":567},[561,3171,3172],{"class":736},"0.01",[561,3174,585],{"class":567},[561,3176,1098],{"class":567},[561,3178,1101],{"class":575},[561,3180,582],{"class":567},[561,3182,585],{"class":567},[561,3184,3185],{"class":567},"[-",[561,3187,3188],{"class":736},"2.1",[561,3190,827],{"class":567},[561,3192,3193],{"class":736},"1",[561,3195,827],{"class":567},[561,3197,1111],{"class":736},[561,3199,1124],{"class":567},[561,3201,585],{"class":567},[561,3203,594],{"class":567},[561,3205,3206,3208],{"class":563,"line":554},[561,3207,805],{"class":567},[561,3209,3210],{"class":571},"UseSVG\n",[561,3212,3213,3216,3218,3220,3223],{"class":563,"line":555},[561,3214,3215],{"class":575},"      src",[561,3217,582],{"class":567},[561,3219,585],{"class":567},[561,3221,3222],{"class":588},"\u002Fpath\u002Fto\u002Flogo.svg",[561,3224,839],{"class":567},[561,3226,3227,3229,3232,3234,3236,3238],{"class":563,"line":751},[561,3228,845],{"class":567},[561,3230,3231],{"class":575},"skip-fills",[561,3233,582],{"class":567},[561,3235,585],{"class":567},[561,3237,1446],{"class":704},[561,3239,839],{"class":567},[561,3241,3242,3244,3247,3249,3251,3254,3257,3260,3262],{"class":563,"line":761},[561,3243,845],{"class":567},[561,3245,3246],{"class":575},"fill-material",[561,3248,582],{"class":567},[561,3250,585],{"class":567},[561,3252,3253],{"class":567},"{ ",[561,3255,3256],{"class":571},"transparent",[561,3258,3259],{"class":567},": ",[561,3261,2501],{"class":704},[561,3263,708],{"class":567},[561,3265,3266,3269,3271,3274,3276],{"class":563,"line":766},[561,3267,3268],{"class":571},"                        opacity",[561,3270,3259],{"class":567},[561,3272,3273],{"class":736},"0.8",[561,3275,612],{"class":567},[561,3277,839],{"class":567},[561,3279,3280,3283,3285,3287,3289],{"class":563,"line":776},[561,3281,3282],{"class":575},"      depth",[561,3284,582],{"class":567},[561,3286,585],{"class":567},[561,3288,1992],{"class":588},[561,3290,839],{"class":567},[561,3292,3293],{"class":563,"line":802},[561,3294,3295],{"class":567},"    \u002F>\n",[561,3297,3298,3300,3302],{"class":563,"line":811},[561,3299,952],{"class":567},[561,3301,782],{"class":571},[561,3303,594],{"class":567},[561,3305,3306,3308,3310],{"class":563,"line":842},[561,3307,754],{"class":567},[561,3309,771],{"class":571},[561,3311,594],{"class":567},[538,3313,3315],{"id":3314},"props","Props",[1329,3317,3318,3331],{},[1332,3319,3320],{},[1335,3321,3322,3325,3327,3329],{},[1338,3323,3324],{"align":1340},"Prop",[1338,3326,1344],{},[1338,3328,1347],{"align":1340},[1338,3330,1426],{},[1349,3332,3333,3355,3375,3394,3412,3429,3448,3466],{},[1335,3334,3335,3340,3345,3353],{},[1354,3336,3337],{"align":1340},[514,3338,3339],{},"src",[1354,3341,3342],{},[519,3343,3344],{},"string",[1354,3346,3347,3348,3352],{"align":1340},"Either a path to an SVG ",[3349,3350,3351],"em",{},"or"," an SVG string",[1354,3354],{},[1335,3356,3357,3361,3365,3371],{},[1354,3358,3359],{"align":1340},[514,3360,1437],{},[1354,3362,3363],{},[519,3364,1391],{},[1354,3366,3367,3368,3370],{"align":1340},"If ",[519,3369,2501],{},", the SVG strokes will not be rendered.",[1354,3372,3373],{},[519,3374,1446],{},[1335,3376,3377,3381,3385,3390],{},[1354,3378,3379],{"align":1340},[514,3380,1456],{},[1354,3382,3383],{},[519,3384,1391],{},[1354,3386,3367,3387,3389],{"align":1340},[519,3388,2501],{},", the SVG fills will not be rendered.",[1354,3391,3392],{},[519,3393,1446],{},[1335,3395,3396,3400,3404,3407],{},[1354,3397,3398],{"align":1340},[514,3399,1494],{},[1354,3401,3402],{},[519,3403,1479],{},[1354,3405,3406],{"align":1340},"Props to assign to the stroke materials of the resulting meshes.",[1354,3408,3409],{},[519,3410,3411],{},"undefined",[1335,3413,3414,3418,3422,3425],{},[1354,3415,3416],{"align":1340},[514,3417,1474],{},[1354,3419,3420],{},[519,3421,1479],{},[1354,3423,3424],{"align":1340},"Props to assign to the fill materials of the resulting meshes.",[1354,3426,3427],{},[519,3428,3411],{},[1335,3430,3431,3436,3441,3444],{},[1354,3432,3433],{"align":1340},[514,3434,3435],{},"strokeMeshProps",[1354,3437,3438],{},[519,3439,3440],{},"TresOptions",[1354,3442,3443],{"align":1340},"Props to assign to the resulting stroke meshes.",[1354,3445,3446],{},[519,3447,3411],{},[1335,3449,3450,3455,3459,3462],{},[1354,3451,3452],{"align":1340},[514,3453,3454],{},"fillMeshProps",[1354,3456,3457],{},[519,3458,3440],{},[1354,3460,3461],{"align":1340},"Props to assign to the resulting fill meshes.",[1354,3463,3464],{},[519,3465,3411],{},[1335,3467,3468,3472,3476,3483],{},[1354,3469,3470],{"align":1340},[514,3471,1512],{},[1354,3473,3474],{},[519,3475,1517],{},[1354,3477,3478,3479,1715],{"align":1340},"Specify how SVG layers are to be rendered. (",[1985,3480,3482],{"href":3481},"#depth-handling","See \"Depth\"",[1354,3484,3485],{},[519,3486,1992],{},[527,3488,3490],{"id":3489},"troubleshooting","Troubleshooting",[3492,3493,3495],"alert",{"type":3494},"warning",[510,3496,3497],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[510,3499,3500],{},"Here are some things to try if you run into problems:",[538,3502,3504],{"id":3503},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[1187,3506,3507],{},[1190,3508,3509,3510,1980,3513,881],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[519,3511,3512],{},"#ff0000",[519,3514,3515],{},"rgb(255, 0, 0)",[538,3517,3519],{"id":3518},"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",[1187,3521,3522,3534],{},[1190,3523,3524,3525,3527,3528,881],{},"In your ",[519,3526,157],{}," options, ",[1985,3529,3530,3531,3533],{"href":3481},"change the ",[519,3532,1512],{}," option",[1190,3535,3536,3537,3540,3541,881],{},"In the SVG source, use ",[519,3538,3539],{},"fill=\"none\""," rather than ",[519,3542,3543],{},"fill-opacity=\"0\"",[538,3545,3547,3548],{"id":3546},"parts-of-the-svg-z-fight","Parts of the SVG ",[1985,3549,3551],{"href":2156,"rel":3550},[1989],"\"z-fight\"",[1187,3553,3554,3562],{},[1190,3555,3524,3556,3527,3558,881],{},[519,3557,157],{},[1985,3559,3530,3560,3533],{"href":3481},[519,3561,1512],{},[1190,3563,3564],{},"Increase the distance between the SVG and other on-screen elements.",[538,3566,3568],{"id":3567},"the-svg-is-not-visible","The SVG is not visible",[1187,3570,3571,3574,3583,3589],{},[1190,3572,3573],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[1190,3575,3576,3577,3579,3580,881],{},"Try scaling the SVG down, e.g., wrap it in a ",[519,3578,782],{}," with ",[519,3581,3582],{},":scale=\"0.01\"",[1190,3584,3585,3586,881],{},"Try moving the SVG up (+y), e.g., ",[519,3587,3588],{},":position=\"[0,2,0]\"",[1190,3590,3591,3592,3595],{},"Check that ",[519,3593,3594],{},"layers.length > 0"," before rendering.",[538,3597,3599],{"id":3598},"performance-issues-with-many-layers","Performance issues with many layers",[1187,3601,3602,3609,3618],{},[1190,3603,3604,3605,3608],{},"Use the ",[519,3606,3607],{},"dispose()"," function when components unmount to clean up geometries.",[1190,3610,3611,3612,3614,3615,3617],{},"Consider using ",[519,3613,1437],{}," or ",[519,3616,1456],{}," to reduce the number of rendered layers.",[1190,3619,3620],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[527,3622,3624,3625,3627,3628,3630],{"id":3623},"when-to-use-usesvg-vs-svg-component","When to Use ",[519,3626,157],{}," vs ",[519,3629,524],{}," Component",[510,3632,3633],{},[514,3634,3635,3636,3638],{},"Use ",[519,3637,157],{}," when you need:",[1187,3640,3641,3644,3647,3650,3653],{},[1190,3642,3643],{},"Direct access to individual SVG layers",[1190,3645,3646],{},"Custom rendering logic",[1190,3648,3649],{},"Layer-specific animations",[1190,3651,3652],{},"Programmatic geometry manipulation",[1190,3654,3655],{},"Advanced material customization per layer",[510,3657,3658],{},[514,3659,3604,3660,3662],{},[519,3661,524],{}," component when you need:",[1187,3664,3665,3668,3671,3674],{},[1190,3666,3667],{},"Simple, declarative SVG rendering",[1190,3669,3670],{},"Quick prototyping",[1190,3672,3673],{},"Standard SVG display without custom logic",[1190,3675,3676],{},"Less code and setup",[3678,3679,3680],"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 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":557,"searchDepth":564,"depth":551,"links":3682},[3683,3693,3696,3704],{"id":529,"depth":551,"text":530,"children":3684},[3685,3686,3687,3688,3689,3690,3691,3692],{"id":540,"depth":627,"text":15},{"id":1204,"depth":627,"text":1205},{"id":1326,"depth":627,"text":1327},{"id":1412,"depth":627,"text":1413},{"id":1528,"depth":627,"text":1529},{"id":1950,"depth":627,"text":1951},{"id":2276,"depth":627,"text":2277},{"id":2413,"depth":627,"text":2414},{"id":3082,"depth":551,"text":3083,"children":3694},[3695],{"id":3314,"depth":627,"text":3315},{"id":3489,"depth":551,"text":3490,"children":3697},[3698,3699,3700,3702,3703],{"id":3503,"depth":627,"text":3504},{"id":3518,"depth":627,"text":3519},{"id":3546,"depth":627,"text":3701},"Parts of the SVG \"z-fight\"",{"id":3567,"depth":627,"text":3568},{"id":3598,"depth":627,"text":3599},{"id":3623,"depth":551,"text":3705},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.","md",null,{},{"title":157,"description":3706},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",[3713,3715],{"title":153,"path":154,"stem":155,"description":3714,"children":-1},"A composable to load multiple textures efficiently in TresJS scenes.",{"title":161,"path":162,"stem":163,"description":3716,"children":-1},"A composable to track loading progress of assets in TresJS scenes.",1791549573240]