[{"data":1,"prerenderedAt":71264},["ShallowReactive",2],{"navigation":3,"\u002Fapi":498,"\u002Fapi-surround":597,"abstraction-list":602,"controls-list":13868,"loaders-list":17785,"materials-list":27267,"shapes-list":32022,"debug-list":38496,"light-list":41252,"staging-list":46007,"objects-list":53810,"misc-list":67325},[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":32,"body":500,"description":590,"extension":591,"links":592,"meta":593,"navigation":594,"path":28,"seo":595,"stem":33,"__hash__":596},"docs\u002F2.api\u002Findex.md",{"type":501,"value":502,"toc":575},"minimark",[503,508,512,516,519,523,526,530,533,537,540,544,547,551,554,558,561,565,568,572],[504,505,507],"h2",{"id":506},"abstraction","📦 Abstraction",[509,510],"api-list",{"list-name":511,"path":36},"abstraction-list",[504,513,515],{"id":514},"controls","🎮 Controls",[509,517],{"list-name":518,"path":98},"controls-list",[504,520,522],{"id":521},"loaders","📂 Loaders",[509,524],{"list-name":525,"path":128},"loaders-list",[504,527,529],{"id":528},"materials","🎨 Materials",[509,531],{"list-name":532,"path":170},"materials-list",[504,534,536],{"id":535},"shapes","🔷 Shapes",[509,538],{"list-name":539,"path":212},"shapes-list",[504,541,543],{"id":542},"debug-performance","📊 Debug & Performance",[509,545],{"list-name":546,"path":310},"debug-list",[504,548,550],{"id":549},"light-shadow","💡 Light & Shadow",[509,552],{"list-name":553,"path":336},"light-list",[504,555,557],{"id":556},"staging","🎭 Staging",[509,559],{"list-name":560,"path":370},"staging-list",[504,562,564],{"id":563},"objects","🎬 Objects",[509,566],{"list-name":567,"path":420},"objects-list",[504,569,571],{"id":570},"️-miscellaneous","🛠️ Miscellaneous",[509,573],{"list-name":574,"path":466},"misc-list",{"title":576,"searchDepth":577,"depth":578,"links":579},"",1,2,[580,581,582,583,584,585,586,587,588,589],{"id":506,"depth":578,"text":507},{"id":514,"depth":578,"text":515},{"id":521,"depth":578,"text":522},{"id":528,"depth":578,"text":529},{"id":535,"depth":578,"text":536},{"id":542,"depth":578,"text":543},{"id":549,"depth":578,"text":550},{"id":556,"depth":578,"text":557},{"id":563,"depth":578,"text":564},{"id":570,"depth":578,"text":571},"Explore the complete API reference","md",null,{},true,{"title":32,"description":590},"sw9kHYPeTK3xIXtV7tt103OdjppzE9OpuYL8etJhS4o",[598,600],{"title":23,"path":24,"stem":25,"description":599,"children":-1},"Migration guide for cientos",{"title":35,"path":36,"stem":37,"description":601,"children":-1},"UI components reference",[603,1343,1689,2274,7513,7821,8494,9748,10201,10891,11735,12242,13130,13480],{"id":604,"title":41,"body":605,"description":1339,"extension":591,"links":592,"meta":1340,"navigation":594,"path":42,"seo":1341,"stem":43,"__hash__":1342},"docs\u002F2.api\u002F1.abstractions\u002Falign.md",{"type":501,"value":606,"toc":1334},[607,613,622,625,923,927,930,1184,1188,1330],[608,609,610],"scene-controls-wrapper",{},[611,612],"abstractions-align",{},[614,615,616,617,621],"p",{},"Calculates a bounding box around its children and aligns them as a group within their parent. The component measures its contents and realigns on every frame unless ",[618,619,620],"code",{},"cacheKey"," is set.",[504,623,15],{"id":624},"usage",[626,627,634],"pre",{"className":628,"code":629,"highlights":630,"language":633,"meta":576,"style":576},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Align, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresAxesHelper :scale=\"2\" \u002F>\n\n \u003CAlign top right back>\n \u003CTresMesh>\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FAlign>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,631,632],13,18,"vue",[618,635,636,670,706,727,737,743,753,776,788,798,803,829,834,852,863,874,884,894,904,914],{"__ignoreMap":576},[637,638,640,644,648,652,655,658,661,665,667],"span",{"class":639,"line":577},"line",[637,641,643],{"class":642},"sMK4o","\u003C",[637,645,647],{"class":646},"swJcz","script",[637,649,651],{"class":650},"spNyl"," setup",[637,653,654],{"class":650}," lang",[637,656,657],{"class":642},"=",[637,659,660],{"class":642},"\"",[637,662,664],{"class":663},"sfazB","ts",[637,666,660],{"class":642},[637,668,669],{"class":642},">\n",[637,671,674,678,681,685,688,691,694,697,700,703],{"class":672,"line":578},[639,673],"highlight",[637,675,677],{"class":676},"s7zQu","import",[637,679,680],{"class":642}," {",[637,682,684],{"class":683},"sTEyZ"," Align",[637,686,687],{"class":642},",",[637,689,690],{"class":683}," OrbitControls",[637,692,693],{"class":642}," }",[637,695,696],{"class":676}," from",[637,698,699],{"class":642}," '",[637,701,702],{"class":663},"@tresjs\u002Fcientos",[637,704,705],{"class":642},"'\n",[637,707,709,711,713,716,718,720,722,725],{"class":639,"line":708},3,[637,710,677],{"class":676},[637,712,680],{"class":642},[637,714,715],{"class":683}," TresCanvas",[637,717,693],{"class":642},[637,719,696],{"class":676},[637,721,699],{"class":642},[637,723,724],{"class":663},"@tresjs\u002Fcore",[637,726,705],{"class":642},[637,728,730,733,735],{"class":639,"line":729},4,[637,731,732],{"class":642},"\u003C\u002F",[637,734,647],{"class":646},[637,736,669],{"class":642},[637,738,740],{"class":639,"line":739},5,[637,741,742],{"emptyLinePlaceholder":594},"\n",[637,744,746,748,751],{"class":639,"line":745},6,[637,747,643],{"class":642},[637,749,750],{"class":646},"template",[637,752,669],{"class":642},[637,754,756,759,762,765,767,769,772,774],{"class":639,"line":755},7,[637,757,758],{"class":642}," \u003C",[637,760,761],{"class":646},"TresCanvas",[637,763,764],{"class":650}," clear-color",[637,766,657],{"class":642},[637,768,660],{"class":642},[637,770,771],{"class":663},"#222",[637,773,660],{"class":642},[637,775,669],{"class":642},[637,777,779,782,785],{"class":639,"line":778},8,[637,780,781],{"class":642}," \u003C",[637,783,784],{"class":646},"TresPerspectiveCamera",[637,786,787],{"class":642}," \u002F>\n",[637,789,791,793,796],{"class":639,"line":790},9,[637,792,781],{"class":642},[637,794,795],{"class":646},"OrbitControls",[637,797,787],{"class":642},[637,799,801],{"class":639,"line":800},10,[637,802,742],{"emptyLinePlaceholder":594},[637,804,806,808,811,814,817,819,821,825,827],{"class":639,"line":805},11,[637,807,781],{"class":642},[637,809,810],{"class":646},"TresAxesHelper",[637,812,813],{"class":642}," :",[637,815,816],{"class":650},"scale",[637,818,657],{"class":642},[637,820,660],{"class":642},[637,822,824],{"class":823},"sbssI","2",[637,826,660],{"class":642},[637,828,787],{"class":642},[637,830,832],{"class":639,"line":831},12,[637,833,742],{"emptyLinePlaceholder":594},[637,835,837,839,841,844,847,850],{"class":836,"line":631},[639,673],[637,838,781],{"class":642},[637,840,41],{"class":646},[637,842,843],{"class":650}," top",[637,845,846],{"class":650}," right",[637,848,849],{"class":650}," back",[637,851,669],{"class":642},[637,853,855,858,861],{"class":639,"line":854},14,[637,856,857],{"class":642}," \u003C",[637,859,860],{"class":646},"TresMesh",[637,862,669],{"class":642},[637,864,866,869,872],{"class":639,"line":865},15,[637,867,868],{"class":642}," \u003C",[637,870,871],{"class":646},"TresBoxGeometry",[637,873,787],{"class":642},[637,875,877,879,882],{"class":639,"line":876},16,[637,878,868],{"class":642},[637,880,881],{"class":646},"TresMeshNormalMaterial",[637,883,787],{"class":642},[637,885,887,890,892],{"class":639,"line":886},17,[637,888,889],{"class":642}," \u003C\u002F",[637,891,860],{"class":646},[637,893,669],{"class":642},[637,895,897,900,902],{"class":896,"line":632},[639,673],[637,898,899],{"class":642}," \u003C\u002F",[637,901,41],{"class":646},[637,903,669],{"class":642},[637,905,907,910,912],{"class":639,"line":906},19,[637,908,909],{"class":642}," \u003C\u002F",[637,911,761],{"class":646},[637,913,669],{"class":642},[637,915,917,919,921],{"class":639,"line":916},20,[637,918,732],{"class":642},[637,920,750],{"class":646},[637,922,669],{"class":642},[504,924,926],{"id":925},"props","Props",[614,928,929],{},"All props are optional.",[931,932,933,949],"table",{},[934,935,936],"thead",{},[937,938,939,943,946],"tr",{},[940,941,942],"th",{},"Prop",[940,944,945],{},"Description",[940,947,948],{},"Default",[950,951,952,976,995,1014,1032,1051,1069,1085,1101,1117,1133,1155,1167],"tbody",{},[937,953,954,960,971],{},[955,956,957],"td",{},[618,958,959],{},"top",[955,961,962,963,966,967,970],{},"If ",[618,964,965],{},"true",", aligns bounding box bottom to ",[618,968,969],{},"0"," on the y-axis",[955,972,973],{},[618,974,975],{},"false",[937,977,978,983,991],{},[955,979,980],{},[618,981,982],{},"bottom",[955,984,962,985,987,988,990],{},[618,986,965],{},", aligns bounding box top to ",[618,989,969],{}," on the y-axis.",[955,992,993],{},[618,994,975],{},[937,996,997,1002,1010],{},[955,998,999],{},[618,1000,1001],{},"left",[955,1003,962,1004,1006,1007,1009],{},[618,1005,965],{},", aligns bounding box right to ",[618,1008,969],{}," on the x-axis.",[955,1011,1012],{},[618,1013,975],{},[937,1015,1016,1021,1028],{},[955,1017,1018],{},[618,1019,1020],{},"right",[955,1022,962,1023,1025,1026,1009],{},[618,1024,965],{},", aligns bounding box left to ",[618,1027,969],{},[955,1029,1030],{},[618,1031,975],{},[937,1033,1034,1039,1047],{},[955,1035,1036],{},[618,1037,1038],{},"front",[955,1040,962,1041,1043,1044,1046],{},[618,1042,965],{},", aligns bounding box back to ",[618,1045,969],{}," on the z-axis.",[955,1048,1049],{},[618,1050,975],{},[937,1052,1053,1058,1065],{},[955,1054,1055],{},[618,1056,1057],{},"back",[955,1059,962,1060,1062,1063,1046],{},[618,1061,965],{},", aligns bounding box front to ",[618,1064,969],{},[955,1066,1067],{},[618,1068,975],{},[937,1070,1071,1076,1081],{},[955,1072,1073],{},[618,1074,1075],{},"disable",[955,1077,962,1078,1080],{},[618,1079,965],{},", disables alignment on all axes.",[955,1082,1083],{},[618,1084,975],{},[937,1086,1087,1092,1097],{},[955,1088,1089],{},[618,1090,1091],{},"disableX",[955,1093,962,1094,1096],{},[618,1095,965],{},", disables alignment on the x-axis.",[955,1098,1099],{},[618,1100,975],{},[937,1102,1103,1108,1113],{},[955,1104,1105],{},[618,1106,1107],{},"disableY",[955,1109,962,1110,1112],{},[618,1111,965],{},", disables alignment on the y-axis.",[955,1114,1115],{},[618,1116,975],{},[937,1118,1119,1124,1129],{},[955,1120,1121],{},[618,1122,1123],{},"disableZ",[955,1125,962,1126,1128],{},[618,1127,965],{},", disables alignment on the z-axis.",[955,1130,1131],{},[618,1132,975],{},[937,1134,1135,1140,1151],{},[955,1136,1137],{},[618,1138,1139],{},"precise",[955,1141,1142,1143,1150],{},"See ",[1144,1145,1149],"a",{"href":1146,"rel":1147},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=box3#api\u002Fen\u002Fmath\u002FBox3.setFromObject",[1148],"nofollow","Box3.setFromObject",".",[955,1152,1153],{},[618,1154,965],{},[937,1156,1157,1162,1165],{},[955,1158,1159],{},[618,1160,1161],{},"onAlign",[955,1163,1164],{},"Callback that fires when updating, after measurement.",[955,1166],{},[937,1168,1169,1173,1179],{},[955,1170,1171],{},[618,1172,620],{},[955,1174,1175,1176,1178],{},"If set, component will only update when ",[618,1177,620],{},"'s value changes. If unset, component will update every frame.",[955,1180,1181],{},[618,1182,1183],{},"undefined",[504,1185,1187],{"id":1186},"aligncallbackoptions","AlignCallbackOptions",[626,1189,1192],{"className":1190,"code":1191,"language":664,"meta":576,"style":576},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export interface AlignCallbackOptions {\n \u002F** The next parent above \u003CAlign \u002F> *\u002F\n parent: Object3D\n \u002F** The outmost container group of the \u003CAlign\u002F> component *\u002F\n container: Object3D\n width: number\n height: number\n depth: number\n boundingBox: Box3\n boundingSphere: Sphere\n center: Vector3\n verticalAlignment: number\n horizontalAlignment: number\n depthAlignment: number\n}\n",[618,1193,1194,1209,1215,1226,1231,1240,1250,1259,1268,1278,1288,1298,1307,1316,1325],{"__ignoreMap":576},[637,1195,1196,1199,1202,1206],{"class":639,"line":577},[637,1197,1198],{"class":676},"export",[637,1200,1201],{"class":650}," interface",[637,1203,1205],{"class":1204},"sBMFI"," AlignCallbackOptions",[637,1207,1208],{"class":642}," {\n",[637,1210,1211],{"class":639,"line":578},[637,1212,1214],{"class":1213},"sHwdD"," \u002F** The next parent above \u003CAlign \u002F> *\u002F\n",[637,1216,1217,1220,1223],{"class":639,"line":708},[637,1218,1219],{"class":646}," parent",[637,1221,1222],{"class":642},":",[637,1224,1225],{"class":1204}," Object3D\n",[637,1227,1228],{"class":639,"line":729},[637,1229,1230],{"class":1213}," \u002F** The outmost container group of the \u003CAlign\u002F> component *\u002F\n",[637,1232,1233,1236,1238],{"class":639,"line":739},[637,1234,1235],{"class":646}," container",[637,1237,1222],{"class":642},[637,1239,1225],{"class":1204},[637,1241,1242,1245,1247],{"class":639,"line":745},[637,1243,1244],{"class":646}," width",[637,1246,1222],{"class":642},[637,1248,1249],{"class":1204}," number\n",[637,1251,1252,1255,1257],{"class":639,"line":755},[637,1253,1254],{"class":646}," height",[637,1256,1222],{"class":642},[637,1258,1249],{"class":1204},[637,1260,1261,1264,1266],{"class":639,"line":778},[637,1262,1263],{"class":646}," depth",[637,1265,1222],{"class":642},[637,1267,1249],{"class":1204},[637,1269,1270,1273,1275],{"class":639,"line":790},[637,1271,1272],{"class":646}," boundingBox",[637,1274,1222],{"class":642},[637,1276,1277],{"class":1204}," Box3\n",[637,1279,1280,1283,1285],{"class":639,"line":800},[637,1281,1282],{"class":646}," boundingSphere",[637,1284,1222],{"class":642},[637,1286,1287],{"class":1204}," Sphere\n",[637,1289,1290,1293,1295],{"class":639,"line":805},[637,1291,1292],{"class":646}," center",[637,1294,1222],{"class":642},[637,1296,1297],{"class":1204}," Vector3\n",[637,1299,1300,1303,1305],{"class":639,"line":831},[637,1301,1302],{"class":646}," verticalAlignment",[637,1304,1222],{"class":642},[637,1306,1249],{"class":1204},[637,1308,1309,1312,1314],{"class":639,"line":631},[637,1310,1311],{"class":646}," horizontalAlignment",[637,1313,1222],{"class":642},[637,1315,1249],{"class":1204},[637,1317,1318,1321,1323],{"class":639,"line":854},[637,1319,1320],{"class":646}," depthAlignment",[637,1322,1222],{"class":642},[637,1324,1249],{"class":1204},[637,1326,1327],{"class":639,"line":865},[637,1328,1329],{"class":642},"}\n",[1331,1332,1333],"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 .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 .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}",{"title":576,"searchDepth":577,"depth":578,"links":1335},[1336,1337,1338],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":1186,"depth":578,"text":1187},"Calculate and align children within their parent using bounding boxes.",{},{"title":41,"description":1339},"xKHSzqW-P7t9zP-D9aaYnfHnsXGeMVyRjLNmM0UU0M8",{"id":1344,"title":45,"body":1345,"description":1685,"extension":591,"links":592,"meta":1686,"navigation":594,"path":46,"seo":1687,"stem":47,"__hash__":1688},"docs\u002F2.api\u002F1.abstractions\u002Fbillboard.md",{"type":501,"value":1346,"toc":1681},[1347,1352,1359,1361,1602,1604,1678],[608,1348,1349],{},[1350,1351],"abstractions-billboard",{},[614,1353,1354,1355,1358],{},"Adds a ",[618,1356,1357],{},"THREE.Group"," that always faces the camera.",[504,1360,15],{"id":624},[626,1362,1365],{"className":628,"code":1363,"highlights":1364,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Billboard, Box, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333333\">\n \u003COrbitControls \u002F>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 10]\" \u002F>\n \u003CBillboard>\n \u003CBox :scale=\"[0.5, 0.5, 0.001]\">\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FBox>\n \u003C\u002FBillboard>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,800,854],[618,1366,1367,1387,1416,1434,1442,1446,1454,1473,1481,1518,1527,1561,1569,1577,1586,1594],{"__ignoreMap":576},[637,1368,1369,1371,1373,1375,1377,1379,1381,1383,1385],{"class":639,"line":577},[637,1370,643],{"class":642},[637,1372,647],{"class":646},[637,1374,651],{"class":650},[637,1376,654],{"class":650},[637,1378,657],{"class":642},[637,1380,660],{"class":642},[637,1382,664],{"class":663},[637,1384,660],{"class":642},[637,1386,669],{"class":642},[637,1388,1390,1392,1394,1397,1399,1402,1404,1406,1408,1410,1412,1414],{"class":1389,"line":578},[639,673],[637,1391,677],{"class":676},[637,1393,680],{"class":642},[637,1395,1396],{"class":683}," Billboard",[637,1398,687],{"class":642},[637,1400,1401],{"class":683}," Box",[637,1403,687],{"class":642},[637,1405,690],{"class":683},[637,1407,693],{"class":642},[637,1409,696],{"class":676},[637,1411,699],{"class":642},[637,1413,702],{"class":663},[637,1415,705],{"class":642},[637,1417,1418,1420,1422,1424,1426,1428,1430,1432],{"class":639,"line":708},[637,1419,677],{"class":676},[637,1421,680],{"class":642},[637,1423,715],{"class":683},[637,1425,693],{"class":642},[637,1427,696],{"class":676},[637,1429,699],{"class":642},[637,1431,724],{"class":663},[637,1433,705],{"class":642},[637,1435,1436,1438,1440],{"class":639,"line":729},[637,1437,732],{"class":642},[637,1439,647],{"class":646},[637,1441,669],{"class":642},[637,1443,1444],{"class":639,"line":739},[637,1445,742],{"emptyLinePlaceholder":594},[637,1447,1448,1450,1452],{"class":639,"line":745},[637,1449,643],{"class":642},[637,1451,750],{"class":646},[637,1453,669],{"class":642},[637,1455,1456,1458,1460,1462,1464,1466,1469,1471],{"class":639,"line":755},[637,1457,758],{"class":642},[637,1459,761],{"class":646},[637,1461,764],{"class":650},[637,1463,657],{"class":642},[637,1465,660],{"class":642},[637,1467,1468],{"class":663},"#333333",[637,1470,660],{"class":642},[637,1472,669],{"class":642},[637,1474,1475,1477,1479],{"class":639,"line":778},[637,1476,781],{"class":642},[637,1478,795],{"class":646},[637,1480,787],{"class":642},[637,1482,1483,1485,1487,1489,1492,1494,1496,1499,1501,1504,1506,1508,1511,1514,1516],{"class":639,"line":790},[637,1484,781],{"class":642},[637,1486,784],{"class":646},[637,1488,813],{"class":642},[637,1490,1491],{"class":650},"position",[637,1493,657],{"class":642},[637,1495,660],{"class":642},[637,1497,1498],{"class":642},"[",[637,1500,969],{"class":823},[637,1502,1503],{"class":642},", ",[637,1505,969],{"class":823},[637,1507,1503],{"class":642},[637,1509,1510],{"class":823},"10",[637,1512,1513],{"class":642},"]",[637,1515,660],{"class":642},[637,1517,787],{"class":642},[637,1519,1521,1523,1525],{"class":1520,"line":800},[639,673],[637,1522,781],{"class":642},[637,1524,45],{"class":646},[637,1526,669],{"class":642},[637,1528,1529,1531,1533,1535,1537,1539,1541,1543,1546,1548,1550,1552,1555,1557,1559],{"class":639,"line":805},[637,1530,857],{"class":642},[637,1532,217],{"class":646},[637,1534,813],{"class":642},[637,1536,816],{"class":650},[637,1538,657],{"class":642},[637,1540,660],{"class":642},[637,1542,1498],{"class":642},[637,1544,1545],{"class":823},"0.5",[637,1547,1503],{"class":642},[637,1549,1545],{"class":823},[637,1551,1503],{"class":642},[637,1553,1554],{"class":823},"0.001",[637,1556,1513],{"class":642},[637,1558,660],{"class":642},[637,1560,669],{"class":642},[637,1562,1563,1565,1567],{"class":639,"line":831},[637,1564,868],{"class":642},[637,1566,881],{"class":646},[637,1568,787],{"class":642},[637,1570,1571,1573,1575],{"class":639,"line":631},[637,1572,889],{"class":642},[637,1574,217],{"class":646},[637,1576,669],{"class":642},[637,1578,1580,1582,1584],{"class":1579,"line":854},[639,673],[637,1581,899],{"class":642},[637,1583,45],{"class":646},[637,1585,669],{"class":642},[637,1587,1588,1590,1592],{"class":639,"line":865},[637,1589,909],{"class":642},[637,1591,761],{"class":646},[637,1593,669],{"class":642},[637,1595,1596,1598,1600],{"class":639,"line":876},[637,1597,732],{"class":642},[637,1599,750],{"class":646},[637,1601,669],{"class":642},[504,1603,926],{"id":925},[931,1605,1606,1616],{},[934,1607,1608],{},[937,1609,1610,1612,1614],{},[940,1611,942],{"align":1001},[940,1613,945],{"align":1001},[940,1615,948],{},[950,1617,1618,1636,1650,1664],{},[937,1619,1620,1625,1632],{},[955,1621,1622],{"align":1001},[618,1623,1624],{},"autoUpdate",[955,1626,1627,1628,1631],{"align":1001},"Whether the ",[618,1629,1630],{},"\u003CBillboard \u002F>"," should face the camera automatically on every frame.",[955,1633,1634],{},[618,1635,965],{},[937,1637,1638,1643,1646],{},[955,1639,1640],{"align":1001},[618,1641,1642],{},"lockX",[955,1644,1645],{"align":1001},"Whether to lock the x-axis.",[955,1647,1648],{},[618,1649,975],{},[937,1651,1652,1657,1660],{},[955,1653,1654],{"align":1001},[618,1655,1656],{},"lockY",[955,1658,1659],{"align":1001},"Whether to lock the y-axis.",[955,1661,1662],{},[618,1663,975],{},[937,1665,1666,1671,1674],{},[955,1667,1668],{"align":1001},[618,1669,1670],{},"lockZ",[955,1672,1673],{"align":1001},"Whether to lock the z-axis.",[955,1675,1676],{},[618,1677,975],{},[1331,1679,1680],{},"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);}",{"title":576,"searchDepth":577,"depth":578,"links":1682},[1683,1684],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Make objects always face the camera automatically.",{},{"title":45,"description":1685},"H0n9HWJ0zpK9LW-fd3nQd2xaa9PwDLLnVK3zImwMAZs",{"id":1690,"title":49,"body":1691,"description":2270,"extension":591,"links":592,"meta":2271,"navigation":594,"path":50,"seo":2272,"stem":51,"__hash__":2273},"docs\u002F2.api\u002F1.abstractions\u002Fcamera-shake.md",{"type":501,"value":1692,"toc":2266},[1693,1698,1751,1753,2077,2116,2118,2264],[608,1694,1695],{},[1696,1697],"abstractions-camera-shake",{},[614,1699,1700,1703,1704,1503,1708,1712,1713,1716,1717,1503,1720,1723,1724,1727,1728,1503,1731,1503,1734,1737,1738,1741,1742,1150],{},[618,1701,1702],{},"\u003CCameraShake \u002F>"," is a component that adds ",[1705,1706,1707],"strong",{},"natural",[1709,1710,1711],"em",{},"noise-driven motion"," to the ",[1705,1714,1715],{},"active camera",".\nIt offers ",[1705,1718,1719],{},"per-axis control",[1705,1721,1722],{},"adjustable intensity",", and ",[1709,1725,1726],{},"optional decay"," — perfect for ",[1709,1729,1730],{},"handheld feel",[1709,1732,1733],{},"footsteps",[1709,1735,1736],{},"impacts",", or ",[1709,1739,1740],{},"engine rumble"," — and is based on the ",[1144,1743,1746,1747,1750],{"href":1744,"rel":1745},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fstaging\u002Fcamera-shake#camerashake",[1148],"Drei ",[618,1748,1749],{},"CameraShake"," component",[504,1752,15],{"id":624},[626,1754,1757],{"className":628,"code":1755,"highlights":1756,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CameraShake, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\">\n \u003CTresPerspectiveCamera :position=\"[0, 2, 6]\" \u002F>\n \u003COrbitControls make-default \u002F>\n\n \u003CCameraShake :intensity=\"1\" :max-yaw=\"0.01\" :max-pitch=\"0.01\" :max-roll=\"0.01\" \u002F>\n \u003CTresAxesHelper :scale=\"2\" \u002F>\n \u003CTresMesh :position-y=\"0.5\">\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,805,876],[618,1758,1759,1779,1803,1821,1829,1833,1841,1859,1892,1903,1907,1970,1990,2011,2044,2052,2061,2069],{"__ignoreMap":576},[637,1760,1761,1763,1765,1767,1769,1771,1773,1775,1777],{"class":639,"line":577},[637,1762,643],{"class":642},[637,1764,647],{"class":646},[637,1766,651],{"class":650},[637,1768,654],{"class":650},[637,1770,657],{"class":642},[637,1772,660],{"class":642},[637,1774,664],{"class":663},[637,1776,660],{"class":642},[637,1778,669],{"class":642},[637,1780,1782,1784,1786,1789,1791,1793,1795,1797,1799,1801],{"class":1781,"line":578},[639,673],[637,1783,677],{"class":676},[637,1785,680],{"class":642},[637,1787,1788],{"class":683}," CameraShake",[637,1790,687],{"class":642},[637,1792,690],{"class":683},[637,1794,693],{"class":642},[637,1796,696],{"class":676},[637,1798,699],{"class":642},[637,1800,702],{"class":663},[637,1802,705],{"class":642},[637,1804,1805,1807,1809,1811,1813,1815,1817,1819],{"class":639,"line":708},[637,1806,677],{"class":676},[637,1808,680],{"class":642},[637,1810,715],{"class":683},[637,1812,693],{"class":642},[637,1814,696],{"class":676},[637,1816,699],{"class":642},[637,1818,724],{"class":663},[637,1820,705],{"class":642},[637,1822,1823,1825,1827],{"class":639,"line":729},[637,1824,732],{"class":642},[637,1826,647],{"class":646},[637,1828,669],{"class":642},[637,1830,1831],{"class":639,"line":739},[637,1832,742],{"emptyLinePlaceholder":594},[637,1834,1835,1837,1839],{"class":639,"line":745},[637,1836,643],{"class":642},[637,1838,750],{"class":646},[637,1840,669],{"class":642},[637,1842,1843,1845,1847,1849,1851,1853,1855,1857],{"class":639,"line":755},[637,1844,758],{"class":642},[637,1846,761],{"class":646},[637,1848,764],{"class":650},[637,1850,657],{"class":642},[637,1852,660],{"class":642},[637,1854,771],{"class":663},[637,1856,660],{"class":642},[637,1858,669],{"class":642},[637,1860,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883,1886,1888,1890],{"class":639,"line":778},[637,1862,781],{"class":642},[637,1864,784],{"class":646},[637,1866,813],{"class":642},[637,1868,1491],{"class":650},[637,1870,657],{"class":642},[637,1872,660],{"class":642},[637,1874,1498],{"class":642},[637,1876,969],{"class":823},[637,1878,1503],{"class":642},[637,1880,824],{"class":823},[637,1882,1503],{"class":642},[637,1884,1885],{"class":823},"6",[637,1887,1513],{"class":642},[637,1889,660],{"class":642},[637,1891,787],{"class":642},[637,1893,1894,1896,1898,1901],{"class":639,"line":790},[637,1895,781],{"class":642},[637,1897,795],{"class":646},[637,1899,1900],{"class":650}," make-default",[637,1902,787],{"class":642},[637,1904,1905],{"class":639,"line":800},[637,1906,742],{"emptyLinePlaceholder":594},[637,1908,1910,1912,1914,1916,1919,1921,1923,1926,1928,1930,1933,1935,1937,1940,1942,1944,1947,1949,1951,1953,1955,1957,1960,1962,1964,1966,1968],{"class":1909,"line":805},[639,673],[637,1911,781],{"class":642},[637,1913,1749],{"class":646},[637,1915,813],{"class":642},[637,1917,1918],{"class":650},"intensity",[637,1920,657],{"class":642},[637,1922,660],{"class":642},[637,1924,1925],{"class":823},"1",[637,1927,660],{"class":642},[637,1929,813],{"class":642},[637,1931,1932],{"class":650},"max-yaw",[637,1934,657],{"class":642},[637,1936,660],{"class":642},[637,1938,1939],{"class":823},"0.01",[637,1941,660],{"class":642},[637,1943,813],{"class":642},[637,1945,1946],{"class":650},"max-pitch",[637,1948,657],{"class":642},[637,1950,660],{"class":642},[637,1952,1939],{"class":823},[637,1954,660],{"class":642},[637,1956,813],{"class":642},[637,1958,1959],{"class":650},"max-roll",[637,1961,657],{"class":642},[637,1963,660],{"class":642},[637,1965,1939],{"class":823},[637,1967,660],{"class":642},[637,1969,787],{"class":642},[637,1971,1972,1974,1976,1978,1980,1982,1984,1986,1988],{"class":639,"line":831},[637,1973,857],{"class":642},[637,1975,810],{"class":646},[637,1977,813],{"class":642},[637,1979,816],{"class":650},[637,1981,657],{"class":642},[637,1983,660],{"class":642},[637,1985,824],{"class":823},[637,1987,660],{"class":642},[637,1989,787],{"class":642},[637,1991,1992,1994,1996,1998,2001,2003,2005,2007,2009],{"class":639,"line":631},[637,1993,857],{"class":642},[637,1995,860],{"class":646},[637,1997,813],{"class":642},[637,1999,2000],{"class":650},"position-y",[637,2002,657],{"class":642},[637,2004,660],{"class":642},[637,2006,1545],{"class":823},[637,2008,660],{"class":642},[637,2010,669],{"class":642},[637,2012,2013,2015,2017,2019,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040,2042],{"class":639,"line":854},[637,2014,868],{"class":642},[637,2016,871],{"class":646},[637,2018,813],{"class":642},[637,2020,2021],{"class":650},"args",[637,2023,657],{"class":642},[637,2025,660],{"class":642},[637,2027,1498],{"class":642},[637,2029,1925],{"class":823},[637,2031,1503],{"class":642},[637,2033,1925],{"class":823},[637,2035,1503],{"class":642},[637,2037,1925],{"class":823},[637,2039,1513],{"class":642},[637,2041,660],{"class":642},[637,2043,787],{"class":642},[637,2045,2046,2048,2050],{"class":639,"line":865},[637,2047,868],{"class":642},[637,2049,881],{"class":646},[637,2051,787],{"class":642},[637,2053,2055,2057,2059],{"class":2054,"line":876},[639,673],[637,2056,889],{"class":642},[637,2058,860],{"class":646},[637,2060,669],{"class":642},[637,2062,2063,2065,2067],{"class":639,"line":886},[637,2064,909],{"class":642},[637,2066,761],{"class":646},[637,2068,669],{"class":642},[637,2070,2071,2073,2075],{"class":639,"line":632},[637,2072,732],{"class":642},[637,2074,750],{"class":646},[637,2076,669],{"class":642},[2078,2079,2080,2101],"prose-note",{},[614,2081,2082,2084,2085,2090,2091,2094,2095,2100],{},[618,2083,1702],{}," is fully compatible with ",[1705,2086,2087],{},[618,2088,2089],{},"\u003COrbitControls \u002F>",".\nTo ensure it works ",[1709,2092,2093],{},"as expected",", make sure to add the ",[1705,2096,2097],{},[618,2098,2099],{},"make-default"," prop:",[626,2102,2104],{"className":628,"code":2103,"language":633,"meta":576,"style":576},"\u003COrbitControls make-default \u002F>\n",[618,2105,2106],{"__ignoreMap":576},[637,2107,2108,2110,2112,2114],{"class":639,"line":577},[637,2109,643],{"class":642},[637,2111,795],{"class":646},[637,2113,1900],{"class":650},[637,2115,787],{"class":642},[504,2117,926],{"id":925},[931,2119,2120,2130],{},[934,2121,2122],{},[937,2123,2124,2126,2128],{},[940,2125,942],{},[940,2127,945],{},[940,2129,948],{},[950,2131,2132,2145,2161,2179,2193,2207,2221,2236,2250],{},[937,2133,2134,2138,2141],{},[955,2135,2136],{},[618,2137,1918],{},[955,2139,2140],{},"The intensity of the shake (0–1).",[955,2142,2143],{},[618,2144,1925],{},[937,2146,2147,2152,2157],{},[955,2148,2149],{},[618,2150,2151],{},"decay",[955,2153,962,2154,2156],{},[618,2155,965],{},", intensity decays over time.",[955,2158,2159],{},[618,2160,975],{},[937,2162,2163,2168,2174],{},[955,2164,2165],{},[618,2166,2167],{},"decayRate",[955,2169,2170,2171,2173],{},"How fast intensity changes when ",[618,2172,2151],{}," is enabled.",[955,2175,2176],{},[618,2177,2178],{},"0.65",[937,2180,2181,2186,2189],{},[955,2182,2183],{},[618,2184,2185],{},"maxYaw",[955,2187,2188],{},"Maximum yaw angle in radians.",[955,2190,2191],{},[618,2192,1939],{},[937,2194,2195,2200,2203],{},[955,2196,2197],{},[618,2198,2199],{},"maxPitch",[955,2201,2202],{},"Maximum pitch angle in radians.",[955,2204,2205],{},[618,2206,1939],{},[937,2208,2209,2214,2217],{},[955,2210,2211],{},[618,2212,2213],{},"maxRoll",[955,2215,2216],{},"Maximum roll angle in radians.",[955,2218,2219],{},[618,2220,1939],{},[937,2222,2223,2228,2231],{},[955,2224,2225],{},[618,2226,2227],{},"yawFrequency",[955,2229,2230],{},"Frequency of yaw oscillation.",[955,2232,2233],{},[618,2234,2235],{},"0.1",[937,2237,2238,2243,2246],{},[955,2239,2240],{},[618,2241,2242],{},"pitchFrequency",[955,2244,2245],{},"Frequency of pitch oscillation.",[955,2247,2248],{},[618,2249,2235],{},[937,2251,2252,2257,2260],{},[955,2253,2254],{},[618,2255,2256],{},"rollFrequency",[955,2258,2259],{},"Frequency of roll oscillation.",[955,2261,2262],{},[618,2263,2235],{},[1331,2265,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":2267},[2268,2269],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Apply smooth camera shake to the active camera.",{},{"title":49,"description":2270},"tbo--_1LLyK1wDUHqKdzu8KZiLMIGya4l_8miKZTrMc",{"id":2275,"title":53,"body":2276,"description":7509,"extension":591,"links":592,"meta":7510,"navigation":594,"path":54,"seo":7511,"stem":55,"__hash__":7512},"docs\u002F2.api\u002F1.abstractions\u002Fdecal.md",{"type":501,"value":2277,"toc":7474},[2278,2284,2366,2372,2374,2389,2863,2879,2883,2894,3063,3079,3082,3096,3148,3173,3177,3190,3195,3261,3268,3274,3291,3379,3384,3398,3473,4214,4219,4259,4272,4334,4337,4347,4433,4440,4460,4470,4473,4680,4692,4700,4715,5045,5049,5073,5464,5478,5498,5502,5518,5755,5761,5954,5960,6095,6104,6111,6167,6268,6273,6419,6424,6465,6469,6525,6529,6600,6604,6682,6689,6704,6745,6794,7471],[614,2279,2280,2283],{},[618,2281,2282],{},"\u003CDecal>"," projects a flat texture onto the surface of a parent mesh,\nconforming to its geometry. Multiple decals can stack on the same mesh\nwith explicit z-layering, the JSON layout round-trips losslessly, and\nthe entry-by-entry shape stays human-readable.",[2285,2286,2287,2299,2312,2326,2333,2344,2356],"ul",{},[2288,2289,2290,2291,2294,2295,2298],"li",{},"🎨 Drop-in ",[1705,2292,2293],{},"editor UI"," via ",[618,2296,2297],{},"\u003CDecalDebugUI>"," — placement, rotate \u002F scale \u002F snap, tint, flip, layers, undo \u002F redo, import \u002F export.",[2288,2300,2301,2302,2294,2305,2311],{},"🛠 ",[1705,2303,2304],{},"Programmatic API",[1144,2306,2308],{"href":2307},"#programmatic-api-usedecaleditor",[618,2309,2310],{},"useDecalEditor()"," for custom panels and automation.",[2288,2313,2314,2315,2318,2319,2322,2323,1150],{},"🖼️ ",[1705,2316,2317],{},"Texture palette"," — pass an array of ",[618,2320,2321],{},"Texture"," to ",[618,2324,2325],{},":map",[2288,2327,2328,2329,2332],{},"🧩 ",[1705,2330,2331],{},"Custom material"," — override the default via the slot.",[2288,2334,2335,2336,2339,2340,2343],{},"💾 ",[1705,2337,2338],{},"Lossless JSON"," — ",[618,2341,2342],{},"v-model:data"," round-trips to plain JSON.",[2288,2345,2346,2347,2350,2351,2355],{},"⚡ ",[1705,2348,2349],{},"BVH-accelerated"," — auto-detected via ",[1144,2352,2353],{"href":332},[618,2354,331],{},"; 10–100× faster on dense meshes.",[2288,2357,2358,2359,2339,2362,2365],{},"📚 ",[1705,2360,2361],{},"Per-mesh stacking",[618,2363,2364],{},"zIndex"," with automatic polygon-offset.",[2367,2368,2369],"scene-wrapper",{},[2370,2371],"abstractions-decal",{},[504,2373,15],{"id":624},[614,2375,2376,2377,2379,2380,2383,2384,2386,2387,1150],{},"The minimal setup is a ",[618,2378,2282],{}," placed as a child of any ",[618,2381,2382],{},"\u003CTresMesh>",",\nwith a JSON list of stamped decals bound via ",[618,2385,2342],{}," and one or\nmore textures via ",[618,2388,2325],{},[626,2390,2392],{"className":628,"code":2391,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, OrbitControls, useTexture } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { reactive } from 'vue'\n\nconst { state: texture } = useTexture('\u002Ftextures\u002Flogo.png')\n\nconst decals = reactive([\n {\n id: 'logo-1',\n position: [0, 0, 0.5],\n orientation: [0, 0, 0],\n size: [0.75, 0.17, 1],\n zIndex: 0,\n map: 'logo.png',\n },\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 3]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CTresMesh>\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"white\" \u002F>\n \u003CDecal v-if=\"texture\" v-model:data=\"decals\" :map=\"texture\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,2393,2394,2414,2442,2460,2479,2483,2521,2525,2539,2544,2561,2587,2610,2636,2647,2663,2668,2673,2681,2685,2693,2702,2736,2745,2754,2763,2785,2836,2845,2854],{"__ignoreMap":576},[637,2395,2396,2398,2400,2402,2404,2406,2408,2410,2412],{"class":639,"line":577},[637,2397,643],{"class":642},[637,2399,647],{"class":646},[637,2401,651],{"class":650},[637,2403,654],{"class":650},[637,2405,657],{"class":642},[637,2407,660],{"class":642},[637,2409,664],{"class":663},[637,2411,660],{"class":642},[637,2413,669],{"class":642},[637,2415,2416,2418,2420,2423,2425,2427,2429,2432,2434,2436,2438,2440],{"class":639,"line":578},[637,2417,677],{"class":676},[637,2419,680],{"class":642},[637,2421,2422],{"class":683}," Decal",[637,2424,687],{"class":642},[637,2426,690],{"class":683},[637,2428,687],{"class":642},[637,2430,2431],{"class":683}," useTexture",[637,2433,693],{"class":642},[637,2435,696],{"class":676},[637,2437,699],{"class":642},[637,2439,702],{"class":663},[637,2441,705],{"class":642},[637,2443,2444,2446,2448,2450,2452,2454,2456,2458],{"class":639,"line":708},[637,2445,677],{"class":676},[637,2447,680],{"class":642},[637,2449,715],{"class":683},[637,2451,693],{"class":642},[637,2453,696],{"class":676},[637,2455,699],{"class":642},[637,2457,724],{"class":663},[637,2459,705],{"class":642},[637,2461,2462,2464,2466,2469,2471,2473,2475,2477],{"class":639,"line":729},[637,2463,677],{"class":676},[637,2465,680],{"class":642},[637,2467,2468],{"class":683}," reactive",[637,2470,693],{"class":642},[637,2472,696],{"class":676},[637,2474,699],{"class":642},[637,2476,633],{"class":663},[637,2478,705],{"class":642},[637,2480,2481],{"class":639,"line":739},[637,2482,742],{"emptyLinePlaceholder":594},[637,2484,2485,2488,2490,2493,2495,2498,2501,2504,2507,2510,2513,2516,2518],{"class":639,"line":745},[637,2486,2487],{"class":650},"const",[637,2489,680],{"class":642},[637,2491,2492],{"class":646}," state",[637,2494,1222],{"class":642},[637,2496,2497],{"class":683}," texture ",[637,2499,2500],{"class":642},"}",[637,2502,2503],{"class":642}," =",[637,2505,2431],{"class":2506},"s2Zo4",[637,2508,2509],{"class":683},"(",[637,2511,2512],{"class":642},"'",[637,2514,2515],{"class":663},"\u002Ftextures\u002Flogo.png",[637,2517,2512],{"class":642},[637,2519,2520],{"class":683},")\n",[637,2522,2523],{"class":639,"line":755},[637,2524,742],{"emptyLinePlaceholder":594},[637,2526,2527,2529,2532,2534,2536],{"class":639,"line":778},[637,2528,2487],{"class":650},[637,2530,2531],{"class":683}," decals ",[637,2533,657],{"class":642},[637,2535,2468],{"class":2506},[637,2537,2538],{"class":683},"([\n",[637,2540,2541],{"class":639,"line":790},[637,2542,2543],{"class":642}," {\n",[637,2545,2546,2549,2551,2553,2556,2558],{"class":639,"line":800},[637,2547,2548],{"class":646}," id",[637,2550,1222],{"class":642},[637,2552,699],{"class":642},[637,2554,2555],{"class":663},"logo-1",[637,2557,2512],{"class":642},[637,2559,2560],{"class":642},",\n",[637,2562,2563,2566,2568,2571,2573,2575,2578,2580,2583,2585],{"class":639,"line":805},[637,2564,2565],{"class":646}," position",[637,2567,1222],{"class":642},[637,2569,2570],{"class":683}," [",[637,2572,969],{"class":823},[637,2574,687],{"class":642},[637,2576,2577],{"class":823}," 0",[637,2579,687],{"class":642},[637,2581,2582],{"class":823}," 0.5",[637,2584,1513],{"class":683},[637,2586,2560],{"class":642},[637,2588,2589,2592,2594,2596,2598,2600,2602,2604,2606,2608],{"class":639,"line":831},[637,2590,2591],{"class":646}," orientation",[637,2593,1222],{"class":642},[637,2595,2570],{"class":683},[637,2597,969],{"class":823},[637,2599,687],{"class":642},[637,2601,2577],{"class":823},[637,2603,687],{"class":642},[637,2605,2577],{"class":823},[637,2607,1513],{"class":683},[637,2609,2560],{"class":642},[637,2611,2612,2615,2617,2619,2622,2624,2627,2629,2632,2634],{"class":639,"line":631},[637,2613,2614],{"class":646}," size",[637,2616,1222],{"class":642},[637,2618,2570],{"class":683},[637,2620,2621],{"class":823},"0.75",[637,2623,687],{"class":642},[637,2625,2626],{"class":823}," 0.17",[637,2628,687],{"class":642},[637,2630,2631],{"class":823}," 1",[637,2633,1513],{"class":683},[637,2635,2560],{"class":642},[637,2637,2638,2641,2643,2645],{"class":639,"line":854},[637,2639,2640],{"class":646}," zIndex",[637,2642,1222],{"class":642},[637,2644,2577],{"class":823},[637,2646,2560],{"class":642},[637,2648,2649,2652,2654,2656,2659,2661],{"class":639,"line":865},[637,2650,2651],{"class":646}," map",[637,2653,1222],{"class":642},[637,2655,699],{"class":642},[637,2657,2658],{"class":663},"logo.png",[637,2660,2512],{"class":642},[637,2662,2560],{"class":642},[637,2664,2665],{"class":639,"line":876},[637,2666,2667],{"class":642}," },\n",[637,2669,2670],{"class":639,"line":886},[637,2671,2672],{"class":683},"])\n",[637,2674,2675,2677,2679],{"class":639,"line":632},[637,2676,732],{"class":642},[637,2678,647],{"class":646},[637,2680,669],{"class":642},[637,2682,2683],{"class":639,"line":906},[637,2684,742],{"emptyLinePlaceholder":594},[637,2686,2687,2689,2691],{"class":639,"line":916},[637,2688,643],{"class":642},[637,2690,750],{"class":646},[637,2692,669],{"class":642},[637,2694,2696,2698,2700],{"class":639,"line":2695},21,[637,2697,758],{"class":642},[637,2699,761],{"class":646},[637,2701,669],{"class":642},[637,2703,2705,2707,2709,2711,2713,2715,2717,2719,2721,2723,2725,2727,2730,2732,2734],{"class":639,"line":2704},22,[637,2706,781],{"class":642},[637,2708,784],{"class":646},[637,2710,813],{"class":642},[637,2712,1491],{"class":650},[637,2714,657],{"class":642},[637,2716,660],{"class":642},[637,2718,1498],{"class":642},[637,2720,824],{"class":823},[637,2722,1503],{"class":642},[637,2724,824],{"class":823},[637,2726,1503],{"class":642},[637,2728,2729],{"class":823},"3",[637,2731,1513],{"class":642},[637,2733,660],{"class":642},[637,2735,787],{"class":642},[637,2737,2739,2741,2743],{"class":639,"line":2738},23,[637,2740,781],{"class":642},[637,2742,795],{"class":646},[637,2744,787],{"class":642},[637,2746,2748,2750,2752],{"class":639,"line":2747},24,[637,2749,781],{"class":642},[637,2751,860],{"class":646},[637,2753,669],{"class":642},[637,2755,2757,2759,2761],{"class":639,"line":2756},25,[637,2758,857],{"class":642},[637,2760,871],{"class":646},[637,2762,787],{"class":642},[637,2764,2766,2768,2771,2774,2776,2778,2781,2783],{"class":639,"line":2765},26,[637,2767,857],{"class":642},[637,2769,2770],{"class":646},"TresMeshStandardMaterial",[637,2772,2773],{"class":650}," color",[637,2775,657],{"class":642},[637,2777,660],{"class":642},[637,2779,2780],{"class":663},"white",[637,2782,660],{"class":642},[637,2784,787],{"class":642},[637,2786,2788,2790,2792,2795,2797,2799,2802,2804,2807,2809,2812,2814,2816,2819,2821,2823,2826,2828,2830,2832,2834],{"class":639,"line":2787},27,[637,2789,857],{"class":642},[637,2791,53],{"class":646},[637,2793,2794],{"class":676}," v-if",[637,2796,657],{"class":642},[637,2798,660],{"class":642},[637,2800,2801],{"class":683},"texture",[637,2803,660],{"class":642},[637,2805,2806],{"class":650}," v-model",[637,2808,1222],{"class":642},[637,2810,2811],{"class":650},"data",[637,2813,657],{"class":642},[637,2815,660],{"class":642},[637,2817,2818],{"class":683},"decals",[637,2820,660],{"class":642},[637,2822,813],{"class":642},[637,2824,2825],{"class":650},"map",[637,2827,657],{"class":642},[637,2829,660],{"class":642},[637,2831,2801],{"class":683},[637,2833,660],{"class":642},[637,2835,787],{"class":642},[637,2837,2839,2841,2843],{"class":639,"line":2838},28,[637,2840,899],{"class":642},[637,2842,860],{"class":646},[637,2844,669],{"class":642},[637,2846,2848,2850,2852],{"class":639,"line":2847},29,[637,2849,909],{"class":642},[637,2851,761],{"class":646},[637,2853,669],{"class":642},[637,2855,2857,2859,2861],{"class":639,"line":2856},30,[637,2858,732],{"class":642},[637,2860,750],{"class":646},[637,2862,669],{"class":642},[2078,2864,2865],{},[614,2866,2867,2868,2870,2871,2874,2875,2878],{},"The ",[618,2869,2342],{}," array is the ",[1705,2872,2873],{},"single source of truth"," — every\ndecal you can see lives in it. It serializes to plain JSON so you can\nsave \u002F load it from a backend, localStorage, or a ",[618,2876,2877],{},".json"," file.",[504,2880,2882],{"id":2881},"multiple-textures-palette","Multiple textures (palette)",[614,2884,2885,2886,2888,2889,2893],{},"Pass an array to ",[618,2887,2325],{}," to give users a palette of textures to pick\nfrom. The array returned by ",[1144,2890,2891],{"href":154},[618,2892,153],{},"\nplugs in directly:",[626,2895,2897],{"className":628,"code":2896,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useTextures } from '@tresjs\u002Fcientos'\n\nconst { textures } = useTextures([\n '\u002Ftextures\u002Flogo.png',\n '\u002Ftextures\u002Fbadge.png',\n '\u002Ftextures\u002Fsticker.png',\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CDecal v-model:data=\"decals\" :map=\"textures\" \u002F>\n\u003C\u002Ftemplate>\n",[618,2898,2899,2919,2942,2946,2963,2974,2985,2996,3000,3008,3012,3020,3055],{"__ignoreMap":576},[637,2900,2901,2903,2905,2907,2909,2911,2913,2915,2917],{"class":639,"line":577},[637,2902,643],{"class":642},[637,2904,647],{"class":646},[637,2906,651],{"class":650},[637,2908,654],{"class":650},[637,2910,657],{"class":642},[637,2912,660],{"class":642},[637,2914,664],{"class":663},[637,2916,660],{"class":642},[637,2918,669],{"class":642},[637,2920,2921,2923,2925,2927,2929,2932,2934,2936,2938,2940],{"class":639,"line":578},[637,2922,677],{"class":676},[637,2924,680],{"class":642},[637,2926,2422],{"class":683},[637,2928,687],{"class":642},[637,2930,2931],{"class":683}," useTextures",[637,2933,693],{"class":642},[637,2935,696],{"class":676},[637,2937,699],{"class":642},[637,2939,702],{"class":663},[637,2941,705],{"class":642},[637,2943,2944],{"class":639,"line":708},[637,2945,742],{"emptyLinePlaceholder":594},[637,2947,2948,2950,2952,2955,2957,2959,2961],{"class":639,"line":729},[637,2949,2487],{"class":650},[637,2951,680],{"class":642},[637,2953,2954],{"class":683}," textures ",[637,2956,2500],{"class":642},[637,2958,2503],{"class":642},[637,2960,2931],{"class":2506},[637,2962,2538],{"class":683},[637,2964,2965,2968,2970,2972],{"class":639,"line":739},[637,2966,2967],{"class":642}," '",[637,2969,2515],{"class":663},[637,2971,2512],{"class":642},[637,2973,2560],{"class":642},[637,2975,2976,2978,2981,2983],{"class":639,"line":745},[637,2977,2967],{"class":642},[637,2979,2980],{"class":663},"\u002Ftextures\u002Fbadge.png",[637,2982,2512],{"class":642},[637,2984,2560],{"class":642},[637,2986,2987,2989,2992,2994],{"class":639,"line":755},[637,2988,2967],{"class":642},[637,2990,2991],{"class":663},"\u002Ftextures\u002Fsticker.png",[637,2993,2512],{"class":642},[637,2995,2560],{"class":642},[637,2997,2998],{"class":639,"line":778},[637,2999,2672],{"class":683},[637,3001,3002,3004,3006],{"class":639,"line":790},[637,3003,732],{"class":642},[637,3005,647],{"class":646},[637,3007,669],{"class":642},[637,3009,3010],{"class":639,"line":800},[637,3011,742],{"emptyLinePlaceholder":594},[637,3013,3014,3016,3018],{"class":639,"line":805},[637,3015,643],{"class":642},[637,3017,750],{"class":646},[637,3019,669],{"class":642},[637,3021,3022,3024,3026,3028,3030,3032,3034,3036,3038,3040,3042,3044,3046,3048,3051,3053],{"class":639,"line":831},[637,3023,758],{"class":642},[637,3025,53],{"class":646},[637,3027,2806],{"class":650},[637,3029,1222],{"class":642},[637,3031,2811],{"class":650},[637,3033,657],{"class":642},[637,3035,660],{"class":642},[637,3037,2818],{"class":683},[637,3039,660],{"class":642},[637,3041,813],{"class":642},[637,3043,2825],{"class":650},[637,3045,657],{"class":642},[637,3047,660],{"class":642},[637,3049,3050],{"class":683},"textures",[637,3052,660],{"class":642},[637,3054,787],{"class":642},[637,3056,3057,3059,3061],{"class":639,"line":631},[637,3058,732],{"class":642},[637,3060,750],{"class":646},[637,3062,669],{"class":642},[614,3064,3065,3066,2339,3069,3071,3072,3075,3076,3078],{},"Each entry references its texture by ",[618,3067,3068],{},"name",[618,3070,2282],{}," auto-fills\n",[618,3073,3074],{},"texture.name"," from the URL filename when missing, so JSON ",[618,3077,2825],{},"\nfields round-trip cleanly.",[504,3080,2331],{"id":3081},"custom-material",[614,3083,3084,3085,3088,3089,2560,3092,3095],{},"The default material is ",[618,3086,3087],{},"MeshBasicMaterial",". Override it via the slot\nto plug in any Three.js material — ",[618,3090,3091],{},"MeshStandardMaterial",[618,3093,3094],{},"MeshPhysicalMaterial",", or a custom shader.",[626,3097,3099],{"className":628,"code":3098,"language":633,"meta":576,"style":576},"\u003CDecal v-model:data=\"decals\" :map=\"texture\">\n \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" \u002F>\n\u003C\u002FDecal>\n",[618,3100,3101,3135,3140],{"__ignoreMap":576},[637,3102,3103,3105,3107,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133],{"class":639,"line":577},[637,3104,643],{"class":642},[637,3106,53],{"class":646},[637,3108,2806],{"class":650},[637,3110,1222],{"class":642},[637,3112,2811],{"class":650},[637,3114,657],{"class":642},[637,3116,660],{"class":642},[637,3118,2818],{"class":683},[637,3120,660],{"class":642},[637,3122,813],{"class":642},[637,3124,2825],{"class":650},[637,3126,657],{"class":642},[637,3128,660],{"class":642},[637,3130,2801],{"class":683},[637,3132,660],{"class":642},[637,3134,669],{"class":642},[637,3136,3137],{"class":639,"line":578},[637,3138,3139],{"class":683}," \u003CTresMeshStandardMaterial :transparent=\"true\" :polygon-offset=\"true\" \u002F>\n",[637,3141,3142,3144,3146],{"class":639,"line":708},[637,3143,732],{"class":642},[637,3145,53],{"class":646},[637,3147,669],{"class":642},[2078,3149,3150],{},[614,3151,3152,3153,3156,3157,3160,3161,3156,3164,3167,3168,2560,3170,3172],{},"Keep ",[618,3154,3155],{},"transparent: true"," and ",[618,3158,3159],{},"polygonOffset: true"," on any custom\nmaterial, otherwise stacking and alpha handling won't work as expected.\nColor \u002F opacity tint from the editor only applies to materials\nexposing ",[618,3162,3163],{},".color",[618,3165,3166],{},".opacity"," (",[618,3169,3087],{},[618,3171,3091],{},", …) — bespoke shader materials are skipped\nsilently.",[504,3174,3176],{"id":3175},"stacking-decals-z-layering","Stacking decals (z-layering)",[614,3178,3179,3180,3182,3183,3186,3187,1150],{},"Each decal has a ",[618,3181,2364],{}," controlling its draw order on the parent\nmesh. Higher = on top. The component handles z-fighting via\n",[618,3184,3185],{},"polygonOffset"," automatically — but if you stack many decals near\nparallel surfaces and still see flicker, raise ",[618,3188,3189],{},"layerGap",[2367,3191,3192],{},[3193,3194],"abstractions-decal-stacking",{},[626,3196,3198],{"className":628,"code":3197,"language":633,"meta":576,"style":576},"\u003CDecal\n v-model:data=\"decals\"\n :map=\"textures\"\n :layer-gap=\"0.002\"\n\u002F>\n",[618,3199,3200,3207,3225,3240,3256],{"__ignoreMap":576},[637,3201,3202,3204],{"class":639,"line":577},[637,3203,643],{"class":642},[637,3205,3206],{"class":646},"Decal\n",[637,3208,3209,3212,3214,3216,3218,3220,3222],{"class":639,"line":578},[637,3210,3211],{"class":650}," v-model",[637,3213,1222],{"class":642},[637,3215,2811],{"class":650},[637,3217,657],{"class":642},[637,3219,660],{"class":642},[637,3221,2818],{"class":683},[637,3223,3224],{"class":642},"\"\n",[637,3226,3227,3230,3232,3234,3236,3238],{"class":639,"line":708},[637,3228,3229],{"class":642}," :",[637,3231,2825],{"class":650},[637,3233,657],{"class":642},[637,3235,660],{"class":642},[637,3237,3050],{"class":683},[637,3239,3224],{"class":642},[637,3241,3242,3244,3247,3249,3251,3254],{"class":639,"line":729},[637,3243,3229],{"class":642},[637,3245,3246],{"class":650},"layer-gap",[637,3248,657],{"class":642},[637,3250,660],{"class":642},[637,3252,3253],{"class":823},"0.002",[637,3255,3224],{"class":642},[637,3257,3258],{"class":639,"line":739},[637,3259,3260],{"class":683},"\u002F>\n",[614,3262,3263,3264,3267],{},"zIndex stacks are ",[1705,3265,3266],{},"per-mesh"," — two decals on different meshes never\ncompete for the same layer slot.",[504,3269,3271,3272],{"id":3270},"editable-mode-decaldebugui","Editable mode + ",[618,3273,2297],{},[614,3275,3276,3277,3280,3281,3283,3284,3287,3288,1150],{},"Add the ",[618,3278,3279],{},"editable"," prop to mount the interactive editor, then pair it\nwith ",[618,3282,2297],{}," — a full in-canvas editor that ships as a drop-in\nHTML overlay sitting ",[1705,3285,3286],{},"outside"," ",[618,3289,3290],{},"\u003CTresCanvas>",[3292,3293,3294,3308,3329],"prose-warning",{},[614,3295,3296,3298,3299,3302,3303,3305,3306,1150],{},[618,3297,2297],{}," needs its stylesheet — import it ",[1705,3300,3301],{},"once"," at your app\nentry. ",[618,3304,2282],{}," itself is style-less, so this is only needed when you\nmount ",[618,3307,2297],{},[626,3309,3311],{"className":1190,"code":3310,"language":664,"meta":576,"style":576},"\u002F\u002F Vite \u002F Vue — in main.ts\nimport '@tresjs\u002Fcientos\u002Fstyles.css'\n",[618,3312,3313,3318],{"__ignoreMap":576},[637,3314,3315],{"class":639,"line":577},[637,3316,3317],{"class":1213},"\u002F\u002F Vite \u002F Vue — in main.ts\n",[637,3319,3320,3322,3324,3327],{"class":639,"line":578},[637,3321,677],{"class":676},[637,3323,699],{"class":642},[637,3325,3326],{"class":663},"@tresjs\u002Fcientos\u002Fstyles.css",[637,3328,705],{"class":642},[626,3330,3332],{"className":1190,"code":3331,"language":664,"meta":576,"style":576},"\u002F\u002F Nuxt — in nuxt.config.ts\nexport default defineNuxtConfig({\n css: ['@tresjs\u002Fcientos\u002Fstyles.css'],\n})\n",[618,3333,3334,3339,3354,3373],{"__ignoreMap":576},[637,3335,3336],{"class":639,"line":577},[637,3337,3338],{"class":1213},"\u002F\u002F Nuxt — in nuxt.config.ts\n",[637,3340,3341,3343,3346,3349,3351],{"class":639,"line":578},[637,3342,1198],{"class":676},[637,3344,3345],{"class":676}," default",[637,3347,3348],{"class":2506}," defineNuxtConfig",[637,3350,2509],{"class":683},[637,3352,3353],{"class":642},"{\n",[637,3355,3356,3359,3361,3363,3365,3367,3369,3371],{"class":639,"line":708},[637,3357,3358],{"class":646}," css",[637,3360,1222],{"class":642},[637,3362,2570],{"class":683},[637,3364,2512],{"class":642},[637,3366,3326],{"class":663},[637,3368,2512],{"class":642},[637,3370,1513],{"class":683},[637,3372,2560],{"class":642},[637,3374,3375,3377],{"class":639,"line":729},[637,3376,2500],{"class":642},[637,3378,2520],{"class":683},[2367,3380,3381],{},[3382,3383],"abstractions-decal-editable",{},[614,3385,3386,3387,3390,3391,3394,3395,1150],{},"Three panels: a floating ",[1705,3388,3389],{},"handle"," anchored to the editing decal, a\nbottom ",[1705,3392,3393],{},"dock"," (texture picker + edit tools), a right-side ",[1705,3396,3397],{},"layer\npanel",[2285,3399,3400,3410,3415,3421,3434,3439,3444,3450,3456,3462,3468],{},[2288,3401,3402,3405,3406,3409],{},[1705,3403,3404],{},"Floating handle"," (rotate + scale + snap + live ",[618,3407,3408],{},"scale% · rotation° · L\u003Cn>"," badge)",[2288,3411,3412],{},[1705,3413,3414],{},"Color tint & opacity",[2288,3416,3417,3420],{},[1705,3418,3419],{},"Mirror"," (flip X \u002F flip Y)",[2288,3422,3423,3167,3426,3429,3430,3433],{},[1705,3424,3425],{},"Layer controls",[618,3427,3428],{},"L+"," \u002F ",[618,3431,3432],{},"L-",")",[2288,3435,3436],{},[1705,3437,3438],{},"Visibility toggle",[2288,3440,3441],{},[1705,3442,3443],{},"Per-row remove",[2288,3445,3446,3449],{},[1705,3447,3448],{},"Layer panel"," (mesh-grouped, drag-to-reorder)",[2288,3451,3452,3455],{},[1705,3453,3454],{},"Texture picker"," (drag or click-to-arm)",[2288,3457,3458,3461],{},[1705,3459,3460],{},"Mode badge"," (placing \u002F editing status)",[2288,3463,3464,3467],{},[1705,3465,3466],{},"Undo \u002F Redo"," buttons",[2288,3469,3470,3467],{},[1705,3471,3472],{},"Import \u002F Export",[626,3474,3476],{"className":628,"code":3475,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, DecalDebugUI, OrbitControls, useTextures } from '@tresjs\u002Fcientos'\nimport type { DecalEditorSession, DecalJsonEntry } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { computed, reactive, shallowRef } from 'vue'\n\nconst { textures } = useTextures(['\u002Ftextures\u002Fa.png', '\u002Ftextures\u002Fb.png'])\n\nconst layout = reactive\u003CRecord\u003Cstring, DecalJsonEntry[]>>({\n cube: [],\n sphere: [],\n})\n\nconst decalRef = shallowRef\u003C{ editor: DecalEditorSession } | null>(null)\nconst session = computed(() => decalRef.value?.editor ?? null)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CDecalDebugUI :session=\"session\" :textures=\"textures ?? []\" :data=\"layout\" \u002F>\n\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[2, 2, 4]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresMesh name=\"cube\" :position=\"[-1.2, 0, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"white\" \u002F>\n \u003CDecal ref=\"decalRef\" v-model:data=\"layout.cube\" :map=\"textures\" editable \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh name=\"sphere\" :position=\"[1.2, 0, 0]\">\n \u003CTresSphereGeometry :args=\"[0.7]\" \u002F>\n \u003CTresMeshStandardMaterial color=\"white\" \u002F>\n \u003CDecal v-model:data=\"layout.sphere\" :map=\"textures\" editable \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,3477,3478,3498,3529,3556,3574,3602,3606,3641,3645,3680,3692,3703,3709,3713,3752,3792,3800,3804,3812,3862,3866,3874,3907,3915,3919,3965,3973,3991,4044,4052,4056,4100,4127,4146,4187,4196,4205],{"__ignoreMap":576},[637,3479,3480,3482,3484,3486,3488,3490,3492,3494,3496],{"class":639,"line":577},[637,3481,643],{"class":642},[637,3483,647],{"class":646},[637,3485,651],{"class":650},[637,3487,654],{"class":650},[637,3489,657],{"class":642},[637,3491,660],{"class":642},[637,3493,664],{"class":663},[637,3495,660],{"class":642},[637,3497,669],{"class":642},[637,3499,3500,3502,3504,3506,3508,3511,3513,3515,3517,3519,3521,3523,3525,3527],{"class":639,"line":578},[637,3501,677],{"class":676},[637,3503,680],{"class":642},[637,3505,2422],{"class":683},[637,3507,687],{"class":642},[637,3509,3510],{"class":683}," DecalDebugUI",[637,3512,687],{"class":642},[637,3514,690],{"class":683},[637,3516,687],{"class":642},[637,3518,2931],{"class":683},[637,3520,693],{"class":642},[637,3522,696],{"class":676},[637,3524,699],{"class":642},[637,3526,702],{"class":663},[637,3528,705],{"class":642},[637,3530,3531,3533,3536,3538,3541,3543,3546,3548,3550,3552,3554],{"class":639,"line":708},[637,3532,677],{"class":676},[637,3534,3535],{"class":676}," type",[637,3537,680],{"class":642},[637,3539,3540],{"class":683}," DecalEditorSession",[637,3542,687],{"class":642},[637,3544,3545],{"class":683}," DecalJsonEntry",[637,3547,693],{"class":642},[637,3549,696],{"class":676},[637,3551,699],{"class":642},[637,3553,702],{"class":663},[637,3555,705],{"class":642},[637,3557,3558,3560,3562,3564,3566,3568,3570,3572],{"class":639,"line":729},[637,3559,677],{"class":676},[637,3561,680],{"class":642},[637,3563,715],{"class":683},[637,3565,693],{"class":642},[637,3567,696],{"class":676},[637,3569,699],{"class":642},[637,3571,724],{"class":663},[637,3573,705],{"class":642},[637,3575,3576,3578,3580,3583,3585,3587,3589,3592,3594,3596,3598,3600],{"class":639,"line":739},[637,3577,677],{"class":676},[637,3579,680],{"class":642},[637,3581,3582],{"class":683}," computed",[637,3584,687],{"class":642},[637,3586,2468],{"class":683},[637,3588,687],{"class":642},[637,3590,3591],{"class":683}," shallowRef",[637,3593,693],{"class":642},[637,3595,696],{"class":676},[637,3597,699],{"class":642},[637,3599,633],{"class":663},[637,3601,705],{"class":642},[637,3603,3604],{"class":639,"line":745},[637,3605,742],{"emptyLinePlaceholder":594},[637,3607,3608,3610,3612,3614,3616,3618,3620,3623,3625,3628,3630,3632,3634,3637,3639],{"class":639,"line":755},[637,3609,2487],{"class":650},[637,3611,680],{"class":642},[637,3613,2954],{"class":683},[637,3615,2500],{"class":642},[637,3617,2503],{"class":642},[637,3619,2931],{"class":2506},[637,3621,3622],{"class":683},"([",[637,3624,2512],{"class":642},[637,3626,3627],{"class":663},"\u002Ftextures\u002Fa.png",[637,3629,2512],{"class":642},[637,3631,687],{"class":642},[637,3633,699],{"class":642},[637,3635,3636],{"class":663},"\u002Ftextures\u002Fb.png",[637,3638,2512],{"class":642},[637,3640,2672],{"class":683},[637,3642,3643],{"class":639,"line":778},[637,3644,742],{"emptyLinePlaceholder":594},[637,3646,3647,3649,3652,3654,3656,3658,3661,3663,3666,3668,3670,3673,3676,3678],{"class":639,"line":790},[637,3648,2487],{"class":650},[637,3650,3651],{"class":683}," layout ",[637,3653,657],{"class":642},[637,3655,2468],{"class":2506},[637,3657,643],{"class":642},[637,3659,3660],{"class":1204},"Record",[637,3662,643],{"class":642},[637,3664,3665],{"class":1204},"string",[637,3667,687],{"class":642},[637,3669,3545],{"class":1204},[637,3671,3672],{"class":683},"[]",[637,3674,3675],{"class":642},">>",[637,3677,2509],{"class":683},[637,3679,3353],{"class":642},[637,3681,3682,3685,3687,3690],{"class":639,"line":800},[637,3683,3684],{"class":646}," cube",[637,3686,1222],{"class":642},[637,3688,3689],{"class":683}," []",[637,3691,2560],{"class":642},[637,3693,3694,3697,3699,3701],{"class":639,"line":805},[637,3695,3696],{"class":646}," sphere",[637,3698,1222],{"class":642},[637,3700,3689],{"class":683},[637,3702,2560],{"class":642},[637,3704,3705,3707],{"class":639,"line":831},[637,3706,2500],{"class":642},[637,3708,2520],{"class":683},[637,3710,3711],{"class":639,"line":631},[637,3712,742],{"emptyLinePlaceholder":594},[637,3714,3715,3717,3720,3722,3724,3727,3730,3732,3734,3736,3739,3742,3745,3747,3750],{"class":639,"line":854},[637,3716,2487],{"class":650},[637,3718,3719],{"class":683}," decalRef ",[637,3721,657],{"class":642},[637,3723,3591],{"class":2506},[637,3725,3726],{"class":642},"\u003C{",[637,3728,3729],{"class":646}," editor",[637,3731,1222],{"class":642},[637,3733,3540],{"class":1204},[637,3735,693],{"class":642},[637,3737,3738],{"class":642}," |",[637,3740,3741],{"class":1204}," null",[637,3743,3744],{"class":642},">",[637,3746,2509],{"class":683},[637,3748,3749],{"class":642},"null",[637,3751,2520],{"class":683},[637,3753,3754,3756,3759,3761,3763,3765,3768,3771,3774,3776,3779,3782,3785,3788,3790],{"class":639,"line":865},[637,3755,2487],{"class":650},[637,3757,3758],{"class":683}," session ",[637,3760,657],{"class":642},[637,3762,3582],{"class":2506},[637,3764,2509],{"class":683},[637,3766,3767],{"class":642},"()",[637,3769,3770],{"class":650}," =>",[637,3772,3773],{"class":683}," decalRef",[637,3775,1150],{"class":642},[637,3777,3778],{"class":683},"value",[637,3780,3781],{"class":642},"?.",[637,3783,3784],{"class":683},"editor ",[637,3786,3787],{"class":642},"??",[637,3789,3741],{"class":642},[637,3791,2520],{"class":683},[637,3793,3794,3796,3798],{"class":639,"line":876},[637,3795,732],{"class":642},[637,3797,647],{"class":646},[637,3799,669],{"class":642},[637,3801,3802],{"class":639,"line":886},[637,3803,742],{"emptyLinePlaceholder":594},[637,3805,3806,3808,3810],{"class":639,"line":632},[637,3807,643],{"class":642},[637,3809,750],{"class":646},[637,3811,669],{"class":642},[637,3813,3814,3816,3819,3821,3824,3826,3828,3830,3832,3834,3836,3838,3840,3842,3845,3847,3849,3851,3853,3855,3858,3860],{"class":639,"line":906},[637,3815,758],{"class":642},[637,3817,3818],{"class":646},"DecalDebugUI",[637,3820,813],{"class":642},[637,3822,3823],{"class":650},"session",[637,3825,657],{"class":642},[637,3827,660],{"class":642},[637,3829,3823],{"class":683},[637,3831,660],{"class":642},[637,3833,813],{"class":642},[637,3835,3050],{"class":650},[637,3837,657],{"class":642},[637,3839,660],{"class":642},[637,3841,3050],{"class":683},[637,3843,3844],{"class":642}," ?? []",[637,3846,660],{"class":642},[637,3848,813],{"class":642},[637,3850,2811],{"class":650},[637,3852,657],{"class":642},[637,3854,660],{"class":642},[637,3856,3857],{"class":683},"layout",[637,3859,660],{"class":642},[637,3861,787],{"class":642},[637,3863,3864],{"class":639,"line":916},[637,3865,742],{"emptyLinePlaceholder":594},[637,3867,3868,3870,3872],{"class":639,"line":2695},[637,3869,758],{"class":642},[637,3871,761],{"class":646},[637,3873,669],{"class":642},[637,3875,3876,3878,3880,3882,3884,3886,3888,3890,3892,3894,3896,3898,3901,3903,3905],{"class":639,"line":2704},[637,3877,781],{"class":642},[637,3879,784],{"class":646},[637,3881,813],{"class":642},[637,3883,1491],{"class":650},[637,3885,657],{"class":642},[637,3887,660],{"class":642},[637,3889,1498],{"class":642},[637,3891,824],{"class":823},[637,3893,1503],{"class":642},[637,3895,824],{"class":823},[637,3897,1503],{"class":642},[637,3899,3900],{"class":823},"4",[637,3902,1513],{"class":642},[637,3904,660],{"class":642},[637,3906,787],{"class":642},[637,3908,3909,3911,3913],{"class":639,"line":2738},[637,3910,781],{"class":642},[637,3912,795],{"class":646},[637,3914,787],{"class":642},[637,3916,3917],{"class":639,"line":2747},[637,3918,742],{"emptyLinePlaceholder":594},[637,3920,3921,3923,3925,3928,3930,3932,3935,3937,3939,3941,3943,3945,3948,3951,3953,3955,3957,3959,3961,3963],{"class":639,"line":2756},[637,3922,781],{"class":642},[637,3924,860],{"class":646},[637,3926,3927],{"class":650}," name",[637,3929,657],{"class":642},[637,3931,660],{"class":642},[637,3933,3934],{"class":663},"cube",[637,3936,660],{"class":642},[637,3938,813],{"class":642},[637,3940,1491],{"class":650},[637,3942,657],{"class":642},[637,3944,660],{"class":642},[637,3946,3947],{"class":642},"[-",[637,3949,3950],{"class":823},"1.2",[637,3952,1503],{"class":642},[637,3954,969],{"class":823},[637,3956,1503],{"class":642},[637,3958,969],{"class":823},[637,3960,1513],{"class":642},[637,3962,660],{"class":642},[637,3964,669],{"class":642},[637,3966,3967,3969,3971],{"class":639,"line":2765},[637,3968,857],{"class":642},[637,3970,871],{"class":646},[637,3972,787],{"class":642},[637,3974,3975,3977,3979,3981,3983,3985,3987,3989],{"class":639,"line":2787},[637,3976,857],{"class":642},[637,3978,2770],{"class":646},[637,3980,2773],{"class":650},[637,3982,657],{"class":642},[637,3984,660],{"class":642},[637,3986,2780],{"class":663},[637,3988,660],{"class":642},[637,3990,787],{"class":642},[637,3992,3993,3995,3997,4000,4002,4004,4007,4009,4011,4013,4015,4017,4019,4021,4023,4025,4027,4029,4031,4033,4035,4037,4039,4042],{"class":639,"line":2838},[637,3994,857],{"class":642},[637,3996,53],{"class":646},[637,3998,3999],{"class":650}," ref",[637,4001,657],{"class":642},[637,4003,660],{"class":642},[637,4005,4006],{"class":663},"decalRef",[637,4008,660],{"class":642},[637,4010,2806],{"class":650},[637,4012,1222],{"class":642},[637,4014,2811],{"class":650},[637,4016,657],{"class":642},[637,4018,660],{"class":642},[637,4020,3857],{"class":683},[637,4022,1150],{"class":642},[637,4024,3934],{"class":683},[637,4026,660],{"class":642},[637,4028,813],{"class":642},[637,4030,2825],{"class":650},[637,4032,657],{"class":642},[637,4034,660],{"class":642},[637,4036,3050],{"class":683},[637,4038,660],{"class":642},[637,4040,4041],{"class":650}," editable",[637,4043,787],{"class":642},[637,4045,4046,4048,4050],{"class":639,"line":2847},[637,4047,899],{"class":642},[637,4049,860],{"class":646},[637,4051,669],{"class":642},[637,4053,4054],{"class":639,"line":2856},[637,4055,742],{"emptyLinePlaceholder":594},[637,4057,4059,4061,4063,4065,4067,4069,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096,4098],{"class":639,"line":4058},31,[637,4060,781],{"class":642},[637,4062,860],{"class":646},[637,4064,3927],{"class":650},[637,4066,657],{"class":642},[637,4068,660],{"class":642},[637,4070,4071],{"class":663},"sphere",[637,4073,660],{"class":642},[637,4075,813],{"class":642},[637,4077,1491],{"class":650},[637,4079,657],{"class":642},[637,4081,660],{"class":642},[637,4083,1498],{"class":642},[637,4085,3950],{"class":823},[637,4087,1503],{"class":642},[637,4089,969],{"class":823},[637,4091,1503],{"class":642},[637,4093,969],{"class":823},[637,4095,1513],{"class":642},[637,4097,660],{"class":642},[637,4099,669],{"class":642},[637,4101,4103,4105,4108,4110,4112,4114,4116,4118,4121,4123,4125],{"class":639,"line":4102},32,[637,4104,857],{"class":642},[637,4106,4107],{"class":646},"TresSphereGeometry",[637,4109,813],{"class":642},[637,4111,2021],{"class":650},[637,4113,657],{"class":642},[637,4115,660],{"class":642},[637,4117,1498],{"class":642},[637,4119,4120],{"class":823},"0.7",[637,4122,1513],{"class":642},[637,4124,660],{"class":642},[637,4126,787],{"class":642},[637,4128,4130,4132,4134,4136,4138,4140,4142,4144],{"class":639,"line":4129},33,[637,4131,857],{"class":642},[637,4133,2770],{"class":646},[637,4135,2773],{"class":650},[637,4137,657],{"class":642},[637,4139,660],{"class":642},[637,4141,2780],{"class":663},[637,4143,660],{"class":642},[637,4145,787],{"class":642},[637,4147,4149,4151,4153,4155,4157,4159,4161,4163,4165,4167,4169,4171,4173,4175,4177,4179,4181,4183,4185],{"class":639,"line":4148},34,[637,4150,857],{"class":642},[637,4152,53],{"class":646},[637,4154,2806],{"class":650},[637,4156,1222],{"class":642},[637,4158,2811],{"class":650},[637,4160,657],{"class":642},[637,4162,660],{"class":642},[637,4164,3857],{"class":683},[637,4166,1150],{"class":642},[637,4168,4071],{"class":683},[637,4170,660],{"class":642},[637,4172,813],{"class":642},[637,4174,2825],{"class":650},[637,4176,657],{"class":642},[637,4178,660],{"class":642},[637,4180,3050],{"class":683},[637,4182,660],{"class":642},[637,4184,4041],{"class":650},[637,4186,787],{"class":642},[637,4188,4190,4192,4194],{"class":639,"line":4189},35,[637,4191,899],{"class":642},[637,4193,860],{"class":646},[637,4195,669],{"class":642},[637,4197,4199,4201,4203],{"class":639,"line":4198},36,[637,4200,909],{"class":642},[637,4202,761],{"class":646},[637,4204,669],{"class":642},[637,4206,4208,4210,4212],{"class":639,"line":4207},37,[637,4209,732],{"class":642},[637,4211,750],{"class":646},[637,4213,669],{"class":642},[4215,4216,4218],"h3",{"id":4217},"how-the-wiring-works","How the wiring works",[2285,4220,4221,4232,4241,4250],{},[2288,4222,4223,4226,4227,4229,4230,1150],{},[618,4224,4225],{},"v-model:data=\"layout.cube\""," — each ",[618,4228,2282],{}," owns one slice of the\nlayout object. The slice's key matches the parent mesh's ",[618,4231,3068],{},[2288,4233,4234,4237,4238,4240],{},[618,4235,4236],{},"ref=\"decalRef\""," — grab a reference to any ",[618,4239,2282],{}," in the canvas;\nthe session is canvas-shared so it doesn't matter which.",[2288,4242,4243,4246,4247,4249],{},[618,4244,4245],{},"session = decalRef.value?.editor"," — the editor session powers\n",[618,4248,2297],{},". Pass it through.",[2288,4251,4252,4255,4256,4258],{},[618,4253,4254],{},":data=\"layout\""," on ",[618,4257,2297],{}," — the full mesh-keyed layout, so\nthe overlay can render the layer panel and route imports back to each\nDecal by name.",[2078,4260,4261],{},[614,4262,4263,4264,4267,4268,4271],{},"The overlay is full-viewport (",[618,4265,4266],{},"position: fixed; inset: 0",") by default.\nWhen embedding inside a bounded stage (docs, modal, sidebar preview),\npass ",[618,4269,4270],{},"contained"," so the overlay positions itself absolutely against\nthe nearest positioned ancestor instead.",[626,4273,4275],{"className":628,"code":4274,"language":633,"meta":576,"style":576},"\u003Cdiv style=\"position: relative; height: 500px;\">\n \u003CDecalDebugUI contained ... \u002F>\n \u003CTresCanvas>...\u003C\u002FTresCanvas>\n\u003C\u002Fdiv>\n",[618,4276,4277,4316,4321,4326],{"__ignoreMap":576},[637,4278,4279,4281,4284,4287,4289,4291,4294,4296,4299,4302,4305,4307,4310,4312,4314],{"class":639,"line":577},[637,4280,643],{"class":642},[637,4282,4283],{"class":646},"div",[637,4285,4286],{"class":650}," style",[637,4288,657],{"class":642},[637,4290,660],{"class":642},[637,4292,1491],{"class":4293},"sqsOY",[637,4295,1222],{"class":642},[637,4297,4298],{"class":683}," relative",[637,4300,4301],{"class":642},";",[637,4303,4304],{"class":4293}," height",[637,4306,1222],{"class":642},[637,4308,4309],{"class":823}," 500px",[637,4311,4301],{"class":642},[637,4313,660],{"class":642},[637,4315,669],{"class":642},[637,4317,4318],{"class":639,"line":578},[637,4319,4320],{"class":683}," \u003CDecalDebugUI contained ... \u002F>\n",[637,4322,4323],{"class":639,"line":708},[637,4324,4325],{"class":683}," \u003CTresCanvas>...\u003C\u002FTresCanvas>\n",[637,4327,4328,4330,4332],{"class":639,"line":729},[637,4329,732],{"class":642},[637,4331,4283],{"class":646},[637,4333,669],{"class":642},[504,4335,3472],{"id":4336},"import-export",[614,4338,4339,4340,4343,4344,4346],{},"The Export button in the dock auto-downloads the current layout as\n",[618,4341,4342],{},"decal-layout-YYYY-MM-DD.json",". The Import button opens a file picker;\nthe loaded JSON is sanitised (unknown mesh keys and unknown texture\nnames are dropped with a warning) and routed back through each\n",[618,4345,2282],{}," automatically — no extra host code needed.",[626,4348,4350],{"className":628,"code":4349,"language":633,"meta":576,"style":576},"\u003C!-- Custom filename -->\n\u003CDecalDebugUI :export-filename=\"`${sceneName}.json`\" ... \u002F>\n\n\u003C!-- Disable the built-in download — handle export yourself -->\n\u003CDecalDebugUI :export-filename=\"null\" @export=\"postToBackend\" ... \u002F>\n",[618,4351,4352,4357,4388,4392,4397],{"__ignoreMap":576},[637,4353,4354],{"class":639,"line":577},[637,4355,4356],{"class":1213},"\u003C!-- Custom filename -->\n",[637,4358,4359,4361,4363,4365,4368,4370,4373,4376,4378,4380,4383,4386],{"class":639,"line":578},[637,4360,643],{"class":642},[637,4362,3818],{"class":646},[637,4364,813],{"class":642},[637,4366,4367],{"class":650},"export-filename",[637,4369,657],{"class":642},[637,4371,4372],{"class":642},"\"`${",[637,4374,4375],{"class":683},"sceneName",[637,4377,2500],{"class":642},[637,4379,2877],{"class":663},[637,4381,4382],{"class":642},"`\"",[637,4384,4385],{"class":642}," ...",[637,4387,787],{"class":642},[637,4389,4390],{"class":639,"line":708},[637,4391,742],{"emptyLinePlaceholder":594},[637,4393,4394],{"class":639,"line":729},[637,4395,4396],{"class":1213},"\u003C!-- Disable the built-in download — handle export yourself -->\n",[637,4398,4399,4401,4403,4405,4407,4409,4411,4413,4415,4418,4420,4422,4424,4427,4429,4431],{"class":639,"line":739},[637,4400,643],{"class":642},[637,4402,3818],{"class":646},[637,4404,813],{"class":642},[637,4406,4367],{"class":650},[637,4408,657],{"class":642},[637,4410,660],{"class":642},[637,4412,3749],{"class":642},[637,4414,660],{"class":642},[637,4416,4417],{"class":642}," @",[637,4419,1198],{"class":650},[637,4421,657],{"class":642},[637,4423,660],{"class":642},[637,4425,4426],{"class":683},"postToBackend",[637,4428,660],{"class":642},[637,4430,4385],{"class":642},[637,4432,787],{"class":642},[504,4434,4436,4437,3433],{"id":4435},"targeting-a-loaded-model-glb","Targeting a loaded model (",[618,4438,4439],{},".glb",[614,4441,4442,4443,4445,4446,4452,4453,4456,4457,4459],{},"A ",[618,4444,2282],{}," can be a ",[1705,4447,4448,4449],{},"direct child of ",[618,4450,4451],{},"\u003Cprimitive>",". Auto-resolution\nwalks one step up the scene graph and only accepts a ",[618,4454,4455],{},"Mesh"," — so the\nbehaviour depends on what the ",[618,4458,4451],{}," wraps.",[4215,4461,4463,4464,4467,4468],{"id":4462},"when-object-is-a-mesh","When ",[618,4465,4466],{},":object"," is a ",[618,4469,4455],{},[614,4471,4472],{},"The decal auto-resolves the wrapped mesh as its target. This is the\nsimplest option for a single-mesh asset:",[626,4474,4476],{"className":628,"code":4475,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs\u002Fcientos'\n\nconst { nodes } = useGLTF('\u002Fmodels\u002Fhelmet.glb', { draco: true })\n\u002F\u002F nodes.Helmet is a Mesh in this asset.\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Helmet\" :object=\"nodes.Helmet\">\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable \u002F>\n \u003C\u002Fprimitive>\n\u003C\u002Ftemplate>\n",[618,4477,4478,4498,4521,4525,4566,4571,4579,4583,4591,4623,4664,4672],{"__ignoreMap":576},[637,4479,4480,4482,4484,4486,4488,4490,4492,4494,4496],{"class":639,"line":577},[637,4481,643],{"class":642},[637,4483,647],{"class":646},[637,4485,651],{"class":650},[637,4487,654],{"class":650},[637,4489,657],{"class":642},[637,4491,660],{"class":642},[637,4493,664],{"class":663},[637,4495,660],{"class":642},[637,4497,669],{"class":642},[637,4499,4500,4502,4504,4506,4508,4511,4513,4515,4517,4519],{"class":639,"line":578},[637,4501,677],{"class":676},[637,4503,680],{"class":642},[637,4505,2422],{"class":683},[637,4507,687],{"class":642},[637,4509,4510],{"class":683}," useGLTF",[637,4512,693],{"class":642},[637,4514,696],{"class":676},[637,4516,699],{"class":642},[637,4518,702],{"class":663},[637,4520,705],{"class":642},[637,4522,4523],{"class":639,"line":708},[637,4524,742],{"emptyLinePlaceholder":594},[637,4526,4527,4529,4531,4534,4536,4538,4540,4542,4544,4547,4549,4551,4553,4556,4558,4562,4564],{"class":639,"line":729},[637,4528,2487],{"class":650},[637,4530,680],{"class":642},[637,4532,4533],{"class":683}," nodes ",[637,4535,2500],{"class":642},[637,4537,2503],{"class":642},[637,4539,4510],{"class":2506},[637,4541,2509],{"class":683},[637,4543,2512],{"class":642},[637,4545,4546],{"class":663},"\u002Fmodels\u002Fhelmet.glb",[637,4548,2512],{"class":642},[637,4550,687],{"class":642},[637,4552,680],{"class":642},[637,4554,4555],{"class":646}," draco",[637,4557,1222],{"class":642},[637,4559,4561],{"class":4560},"sfNiH"," true",[637,4563,693],{"class":642},[637,4565,2520],{"class":683},[637,4567,4568],{"class":639,"line":739},[637,4569,4570],{"class":1213},"\u002F\u002F nodes.Helmet is a Mesh in this asset.\n",[637,4572,4573,4575,4577],{"class":639,"line":745},[637,4574,732],{"class":642},[637,4576,647],{"class":646},[637,4578,669],{"class":642},[637,4580,4581],{"class":639,"line":755},[637,4582,742],{"emptyLinePlaceholder":594},[637,4584,4585,4587,4589],{"class":639,"line":778},[637,4586,643],{"class":642},[637,4588,750],{"class":646},[637,4590,669],{"class":642},[637,4592,4593,4595,4598,4600,4602,4604,4607,4609,4612,4614,4616,4619,4621],{"class":639,"line":790},[637,4594,758],{"class":642},[637,4596,4597],{"class":646},"primitive",[637,4599,2794],{"class":650},[637,4601,657],{"class":642},[637,4603,660],{"class":642},[637,4605,4606],{"class":663},"nodes?.Helmet",[637,4608,660],{"class":642},[637,4610,4611],{"class":650}," :object",[637,4613,657],{"class":642},[637,4615,660],{"class":642},[637,4617,4618],{"class":663},"nodes.Helmet",[637,4620,660],{"class":642},[637,4622,669],{"class":642},[637,4624,4625,4627,4629,4631,4633,4635,4637,4639,4641,4643,4646,4648,4650,4652,4654,4656,4658,4660,4662],{"class":639,"line":800},[637,4626,781],{"class":642},[637,4628,53],{"class":646},[637,4630,2806],{"class":650},[637,4632,1222],{"class":642},[637,4634,2811],{"class":650},[637,4636,657],{"class":642},[637,4638,660],{"class":642},[637,4640,3857],{"class":683},[637,4642,1150],{"class":642},[637,4644,4645],{"class":683},"helmet",[637,4647,660],{"class":642},[637,4649,813],{"class":642},[637,4651,2825],{"class":650},[637,4653,657],{"class":642},[637,4655,660],{"class":642},[637,4657,3050],{"class":683},[637,4659,660],{"class":642},[637,4661,4041],{"class":650},[637,4663,787],{"class":642},[637,4665,4666,4668,4670],{"class":639,"line":805},[637,4667,909],{"class":642},[637,4669,4597],{"class":646},[637,4671,669],{"class":642},[637,4673,4674,4676,4678],{"class":639,"line":831},[637,4675,732],{"class":642},[637,4677,750],{"class":646},[637,4679,669],{"class":642},[2078,4681,4682],{},[614,4683,4684,4685,4687,4688,4691],{},"The resolved parent is the ",[618,4686,4451],{},"'s retargeting proxy rather than\nthe raw object. This is transparent in practice — geometry, ",[618,4689,4690],{},"matrixWorld","\nand raycasting all forward to the wrapped object — so the decal projects\nand follows transforms correctly.",[4215,4693,4463,4695,4467,4697],{"id":4694},"when-object-is-a-group",[618,4696,4466],{},[618,4698,4699],{},"Group",[614,4701,4702,4703,4705,4706,4708,4709,4711,4712,1222],{},"A named node in a ",[618,4704,4439],{}," is often a ",[618,4707,4699],{}," containing several child\nmeshes (e.g. a ceramic body + a metallic interior). Auto-resolution\nreturns ",[618,4710,3749],{}," in that case and the decal silently does nothing — pass\nthe actual target child via ",[618,4713,4714],{},":mesh",[626,4716,4718],{"className":628,"code":4717,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Decal, useGLTF } from '@tresjs\u002Fcientos'\nimport { computed } from 'vue'\nimport type { Mesh } from 'three'\n\nconst { nodes } = useGLTF('\u002Fmodels\u002Fmug.glb', { draco: true })\n\u002F\u002F nodes.Mug is a Group — pick the child you want to decal.\nconst body = computed\u003CMesh | null>(\n () => (nodes.value?.Mug?.getObjectByName('Body') as Mesh) ?? null,\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"nodes?.Mug\" :object=\"nodes.Mug\">\n \u003CDecal v-model:data=\"layout.mug\" :map=\"textures\" :mesh=\"body\" editable \u002F>\n \u003C\u002Fprimitive>\n\u003C\u002Ftemplate>\n",[618,4719,4720,4740,4762,4780,4802,4806,4843,4848,4872,4920,4924,4932,4936,4944,4974,5029,5037],{"__ignoreMap":576},[637,4721,4722,4724,4726,4728,4730,4732,4734,4736,4738],{"class":639,"line":577},[637,4723,643],{"class":642},[637,4725,647],{"class":646},[637,4727,651],{"class":650},[637,4729,654],{"class":650},[637,4731,657],{"class":642},[637,4733,660],{"class":642},[637,4735,664],{"class":663},[637,4737,660],{"class":642},[637,4739,669],{"class":642},[637,4741,4742,4744,4746,4748,4750,4752,4754,4756,4758,4760],{"class":639,"line":578},[637,4743,677],{"class":676},[637,4745,680],{"class":642},[637,4747,2422],{"class":683},[637,4749,687],{"class":642},[637,4751,4510],{"class":683},[637,4753,693],{"class":642},[637,4755,696],{"class":676},[637,4757,699],{"class":642},[637,4759,702],{"class":663},[637,4761,705],{"class":642},[637,4763,4764,4766,4768,4770,4772,4774,4776,4778],{"class":639,"line":708},[637,4765,677],{"class":676},[637,4767,680],{"class":642},[637,4769,3582],{"class":683},[637,4771,693],{"class":642},[637,4773,696],{"class":676},[637,4775,699],{"class":642},[637,4777,633],{"class":663},[637,4779,705],{"class":642},[637,4781,4782,4784,4786,4788,4791,4793,4795,4797,4800],{"class":639,"line":729},[637,4783,677],{"class":676},[637,4785,3535],{"class":676},[637,4787,680],{"class":642},[637,4789,4790],{"class":683}," Mesh",[637,4792,693],{"class":642},[637,4794,696],{"class":676},[637,4796,699],{"class":642},[637,4798,4799],{"class":663},"three",[637,4801,705],{"class":642},[637,4803,4804],{"class":639,"line":739},[637,4805,742],{"emptyLinePlaceholder":594},[637,4807,4808,4810,4812,4814,4816,4818,4820,4822,4824,4827,4829,4831,4833,4835,4837,4839,4841],{"class":639,"line":745},[637,4809,2487],{"class":650},[637,4811,680],{"class":642},[637,4813,4533],{"class":683},[637,4815,2500],{"class":642},[637,4817,2503],{"class":642},[637,4819,4510],{"class":2506},[637,4821,2509],{"class":683},[637,4823,2512],{"class":642},[637,4825,4826],{"class":663},"\u002Fmodels\u002Fmug.glb",[637,4828,2512],{"class":642},[637,4830,687],{"class":642},[637,4832,680],{"class":642},[637,4834,4555],{"class":646},[637,4836,1222],{"class":642},[637,4838,4561],{"class":4560},[637,4840,693],{"class":642},[637,4842,2520],{"class":683},[637,4844,4845],{"class":639,"line":755},[637,4846,4847],{"class":1213},"\u002F\u002F nodes.Mug is a Group — pick the child you want to decal.\n",[637,4849,4850,4852,4855,4857,4859,4861,4863,4865,4867,4869],{"class":639,"line":778},[637,4851,2487],{"class":650},[637,4853,4854],{"class":683}," body ",[637,4856,657],{"class":642},[637,4858,3582],{"class":2506},[637,4860,643],{"class":642},[637,4862,4455],{"class":1204},[637,4864,3738],{"class":642},[637,4866,3741],{"class":1204},[637,4868,3744],{"class":642},[637,4870,4871],{"class":683},"(\n",[637,4873,4874,4877,4879,4882,4884,4886,4888,4891,4893,4896,4898,4900,4903,4905,4908,4911,4913,4915,4917],{"class":639,"line":790},[637,4875,4876],{"class":642}," ()",[637,4878,3770],{"class":650},[637,4880,4881],{"class":683}," (nodes",[637,4883,1150],{"class":642},[637,4885,3778],{"class":683},[637,4887,3781],{"class":642},[637,4889,4890],{"class":683},"Mug",[637,4892,3781],{"class":642},[637,4894,4895],{"class":2506},"getObjectByName",[637,4897,2509],{"class":683},[637,4899,2512],{"class":642},[637,4901,4902],{"class":663},"Body",[637,4904,2512],{"class":642},[637,4906,4907],{"class":683},") ",[637,4909,4910],{"class":676},"as",[637,4912,4790],{"class":1204},[637,4914,4907],{"class":683},[637,4916,3787],{"class":642},[637,4918,4919],{"class":642}," null,\n",[637,4921,4922],{"class":639,"line":800},[637,4923,2520],{"class":683},[637,4925,4926,4928,4930],{"class":639,"line":805},[637,4927,732],{"class":642},[637,4929,647],{"class":646},[637,4931,669],{"class":642},[637,4933,4934],{"class":639,"line":831},[637,4935,742],{"emptyLinePlaceholder":594},[637,4937,4938,4940,4942],{"class":639,"line":631},[637,4939,643],{"class":642},[637,4941,750],{"class":646},[637,4943,669],{"class":642},[637,4945,4946,4948,4950,4952,4954,4956,4959,4961,4963,4965,4967,4970,4972],{"class":639,"line":854},[637,4947,758],{"class":642},[637,4949,4597],{"class":646},[637,4951,2794],{"class":650},[637,4953,657],{"class":642},[637,4955,660],{"class":642},[637,4957,4958],{"class":663},"nodes?.Mug",[637,4960,660],{"class":642},[637,4962,4611],{"class":650},[637,4964,657],{"class":642},[637,4966,660],{"class":642},[637,4968,4969],{"class":663},"nodes.Mug",[637,4971,660],{"class":642},[637,4973,669],{"class":642},[637,4975,4976,4978,4980,4982,4984,4986,4988,4990,4992,4994,4997,4999,5001,5003,5005,5007,5009,5011,5013,5016,5018,5020,5023,5025,5027],{"class":639,"line":865},[637,4977,781],{"class":642},[637,4979,53],{"class":646},[637,4981,2806],{"class":650},[637,4983,1222],{"class":642},[637,4985,2811],{"class":650},[637,4987,657],{"class":642},[637,4989,660],{"class":642},[637,4991,3857],{"class":683},[637,4993,1150],{"class":642},[637,4995,4996],{"class":683},"mug",[637,4998,660],{"class":642},[637,5000,813],{"class":642},[637,5002,2825],{"class":650},[637,5004,657],{"class":642},[637,5006,660],{"class":642},[637,5008,3050],{"class":683},[637,5010,660],{"class":642},[637,5012,813],{"class":642},[637,5014,5015],{"class":650},"mesh",[637,5017,657],{"class":642},[637,5019,660],{"class":642},[637,5021,5022],{"class":683},"body",[637,5024,660],{"class":642},[637,5026,4041],{"class":650},[637,5028,787],{"class":642},[637,5030,5031,5033,5035],{"class":639,"line":876},[637,5032,909],{"class":642},[637,5034,4597],{"class":646},[637,5036,669],{"class":642},[637,5038,5039,5041,5043],{"class":639,"line":886},[637,5040,732],{"class":642},[637,5042,750],{"class":646},[637,5044,669],{"class":642},[4215,5046,5048],{"id":5047},"targeting-an-extracted-sub-mesh","Targeting an extracted sub-mesh",[614,5050,5051,5052,5058,5059,5066,5067,5069,5070,1222],{},"Alternatively, ",[1705,5053,5054,5055,5057],{},"wrap a ",[618,5056,2382],{}," around an extracted sub-mesh",". Reach\nfor this when you need to target one named sub-mesh of a larger model (and\nkeep its material): use\n",[1144,5060,5063],{"href":5061,"rel":5062},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Fcomposables.html#usegraph",[1148],[618,5064,5065],{},"useGraph"," to\npull the sub-mesh, then build a regular ",[618,5068,2382],{}," around its\n",[618,5071,5072],{},":geometry",[626,5074,5076],{"className":628,"code":5075,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGraph, useLoader } from '@tresjs\u002Fcore'\nimport { Decal } from '@tresjs\u002Fcientos'\nimport { GLTFLoader } from 'three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader.js'\nimport { computed } from 'vue'\n\nconst { state: model } = useLoader(GLTFLoader, '\u002Fmodels\u002Fhelmet.glb')\nconst scene = computed(() => model.value?.scene)\nconst graph = useGraph(scene)\nconst nodes = computed(() => graph.value?.nodes)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresMesh\n v-if=\"nodes?.Helmet.geometry\"\n name=\"helmet\"\n :geometry=\"nodes.Helmet.geometry\"\n >\n \u003Cprimitive :object=\"nodes.Helmet.material\" attach=\"material\" \u002F>\n \u003CDecal v-model:data=\"layout.helmet\" :map=\"textures\" editable \u002F>\n \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n",[618,5077,5078,5098,5122,5140,5160,5178,5182,5214,5243,5257,5285,5293,5297,5305,5312,5336,5349,5372,5377,5408,5448,5456],{"__ignoreMap":576},[637,5079,5080,5082,5084,5086,5088,5090,5092,5094,5096],{"class":639,"line":577},[637,5081,643],{"class":642},[637,5083,647],{"class":646},[637,5085,651],{"class":650},[637,5087,654],{"class":650},[637,5089,657],{"class":642},[637,5091,660],{"class":642},[637,5093,664],{"class":663},[637,5095,660],{"class":642},[637,5097,669],{"class":642},[637,5099,5100,5102,5104,5107,5109,5112,5114,5116,5118,5120],{"class":639,"line":578},[637,5101,677],{"class":676},[637,5103,680],{"class":642},[637,5105,5106],{"class":683}," useGraph",[637,5108,687],{"class":642},[637,5110,5111],{"class":683}," useLoader",[637,5113,693],{"class":642},[637,5115,696],{"class":676},[637,5117,699],{"class":642},[637,5119,724],{"class":663},[637,5121,705],{"class":642},[637,5123,5124,5126,5128,5130,5132,5134,5136,5138],{"class":639,"line":708},[637,5125,677],{"class":676},[637,5127,680],{"class":642},[637,5129,2422],{"class":683},[637,5131,693],{"class":642},[637,5133,696],{"class":676},[637,5135,699],{"class":642},[637,5137,702],{"class":663},[637,5139,705],{"class":642},[637,5141,5142,5144,5146,5149,5151,5153,5155,5158],{"class":639,"line":729},[637,5143,677],{"class":676},[637,5145,680],{"class":642},[637,5147,5148],{"class":683}," GLTFLoader",[637,5150,693],{"class":642},[637,5152,696],{"class":676},[637,5154,699],{"class":642},[637,5156,5157],{"class":663},"three\u002Fexamples\u002Fjsm\u002Floaders\u002FGLTFLoader.js",[637,5159,705],{"class":642},[637,5161,5162,5164,5166,5168,5170,5172,5174,5176],{"class":639,"line":739},[637,5163,677],{"class":676},[637,5165,680],{"class":642},[637,5167,3582],{"class":683},[637,5169,693],{"class":642},[637,5171,696],{"class":676},[637,5173,699],{"class":642},[637,5175,633],{"class":663},[637,5177,705],{"class":642},[637,5179,5180],{"class":639,"line":745},[637,5181,742],{"emptyLinePlaceholder":594},[637,5183,5184,5186,5188,5190,5192,5195,5197,5199,5201,5204,5206,5208,5210,5212],{"class":639,"line":755},[637,5185,2487],{"class":650},[637,5187,680],{"class":642},[637,5189,2492],{"class":646},[637,5191,1222],{"class":642},[637,5193,5194],{"class":683}," model ",[637,5196,2500],{"class":642},[637,5198,2503],{"class":642},[637,5200,5111],{"class":2506},[637,5202,5203],{"class":683},"(GLTFLoader",[637,5205,687],{"class":642},[637,5207,699],{"class":642},[637,5209,4546],{"class":663},[637,5211,2512],{"class":642},[637,5213,2520],{"class":683},[637,5215,5216,5218,5221,5223,5225,5227,5229,5231,5234,5236,5238,5240],{"class":639,"line":778},[637,5217,2487],{"class":650},[637,5219,5220],{"class":683}," scene ",[637,5222,657],{"class":642},[637,5224,3582],{"class":2506},[637,5226,2509],{"class":683},[637,5228,3767],{"class":642},[637,5230,3770],{"class":650},[637,5232,5233],{"class":683}," model",[637,5235,1150],{"class":642},[637,5237,3778],{"class":683},[637,5239,3781],{"class":642},[637,5241,5242],{"class":683},"scene)\n",[637,5244,5245,5247,5250,5252,5254],{"class":639,"line":790},[637,5246,2487],{"class":650},[637,5248,5249],{"class":683}," graph ",[637,5251,657],{"class":642},[637,5253,5106],{"class":2506},[637,5255,5256],{"class":683},"(scene)\n",[637,5258,5259,5261,5263,5265,5267,5269,5271,5273,5276,5278,5280,5282],{"class":639,"line":800},[637,5260,2487],{"class":650},[637,5262,4533],{"class":683},[637,5264,657],{"class":642},[637,5266,3582],{"class":2506},[637,5268,2509],{"class":683},[637,5270,3767],{"class":642},[637,5272,3770],{"class":650},[637,5274,5275],{"class":683}," graph",[637,5277,1150],{"class":642},[637,5279,3778],{"class":683},[637,5281,3781],{"class":642},[637,5283,5284],{"class":683},"nodes)\n",[637,5286,5287,5289,5291],{"class":639,"line":805},[637,5288,732],{"class":642},[637,5290,647],{"class":646},[637,5292,669],{"class":642},[637,5294,5295],{"class":639,"line":831},[637,5296,742],{"emptyLinePlaceholder":594},[637,5298,5299,5301,5303],{"class":639,"line":631},[637,5300,643],{"class":642},[637,5302,750],{"class":646},[637,5304,669],{"class":642},[637,5306,5307,5309],{"class":639,"line":854},[637,5308,758],{"class":642},[637,5310,5311],{"class":646},"TresMesh\n",[637,5313,5314,5317,5319,5321,5324,5326,5329,5331,5334],{"class":639,"line":865},[637,5315,5316],{"class":676}," v-if",[637,5318,657],{"class":642},[637,5320,660],{"class":642},[637,5322,5323],{"class":683},"nodes",[637,5325,3781],{"class":642},[637,5327,5328],{"class":683},"Helmet",[637,5330,1150],{"class":642},[637,5332,5333],{"class":683},"geometry",[637,5335,3224],{"class":642},[637,5337,5338,5341,5343,5345,5347],{"class":639,"line":876},[637,5339,5340],{"class":650}," name",[637,5342,657],{"class":642},[637,5344,660],{"class":642},[637,5346,4645],{"class":663},[637,5348,3224],{"class":642},[637,5350,5351,5354,5356,5358,5360,5362,5364,5366,5368,5370],{"class":639,"line":886},[637,5352,5353],{"class":642}," :",[637,5355,5333],{"class":650},[637,5357,657],{"class":642},[637,5359,660],{"class":642},[637,5361,5323],{"class":683},[637,5363,1150],{"class":642},[637,5365,5328],{"class":683},[637,5367,1150],{"class":642},[637,5369,5333],{"class":683},[637,5371,3224],{"class":642},[637,5373,5374],{"class":639,"line":632},[637,5375,5376],{"class":642}," >\n",[637,5378,5379,5381,5383,5385,5387,5389,5392,5394,5397,5399,5401,5404,5406],{"class":639,"line":906},[637,5380,781],{"class":642},[637,5382,4597],{"class":646},[637,5384,4611],{"class":650},[637,5386,657],{"class":642},[637,5388,660],{"class":642},[637,5390,5391],{"class":663},"nodes.Helmet.material",[637,5393,660],{"class":642},[637,5395,5396],{"class":650}," attach",[637,5398,657],{"class":642},[637,5400,660],{"class":642},[637,5402,5403],{"class":663},"material",[637,5405,660],{"class":642},[637,5407,787],{"class":642},[637,5409,5410,5412,5414,5416,5418,5420,5422,5424,5426,5428,5430,5432,5434,5436,5438,5440,5442,5444,5446],{"class":639,"line":916},[637,5411,781],{"class":642},[637,5413,53],{"class":646},[637,5415,2806],{"class":650},[637,5417,1222],{"class":642},[637,5419,2811],{"class":650},[637,5421,657],{"class":642},[637,5423,660],{"class":642},[637,5425,3857],{"class":683},[637,5427,1150],{"class":642},[637,5429,4645],{"class":683},[637,5431,660],{"class":642},[637,5433,813],{"class":642},[637,5435,2825],{"class":650},[637,5437,657],{"class":642},[637,5439,660],{"class":642},[637,5441,3050],{"class":683},[637,5443,660],{"class":642},[637,5445,4041],{"class":650},[637,5447,787],{"class":642},[637,5449,5450,5452,5454],{"class":639,"line":2695},[637,5451,909],{"class":642},[637,5453,860],{"class":646},[637,5455,669],{"class":642},[637,5457,5458,5460,5462],{"class":639,"line":2704},[637,5459,732],{"class":642},[637,5461,750],{"class":646},[637,5463,669],{"class":642},[614,5465,5466,5467,3156,5469,5471,5472,5474,5475,5477],{},"The mesh's ",[618,5468,5333],{},[618,5470,5403],{}," come from the loaded model; the\n",[618,5473,2282],{}," lives inside a regular ",[618,5476,2382],{}," with a clean scene-graph\nparent.",[3292,5479,5480],{},[614,5481,5482,5483,5485,5486,5489,5490,5493,5494,5497],{},"A saved decal's ",[618,5484,1491],{}," is stored in ",[1705,5487,5488],{},"world space",", so it is\nre-projected onto the parent using the parent's transform ",[1705,5491,5492],{},"at load\ntime",". A persisted layout therefore only round-trips if the parent sits\nat the same transform it had when the decal was authored. Parents under a\ncontinuously- or randomly-animated wrapper (e.g. ",[618,5495,5496],{},"\u003CLevioso>",", which starts\nat a random phase each reload) move out from under the saved point, so the\nprojection clips to nothing and the decal vanishes. Author and persist\ndecals on parents whose transform is deterministic at load time, or apply\nthe animation only after the layout has mounted.",[504,5499,5501],{"id":5500},"json-schema","JSON schema",[614,5503,5504,5505,5507,5508,5511,5512,5514,5515,1150],{},"Each entry in the ",[618,5506,2811],{}," array follows the ",[618,5509,5510],{},"DecalJsonEntry"," shape; the\nlayout passed to ",[618,5513,2297],{}," groups these by mesh name as\n",[618,5516,5517],{},"DecalLayout = Record\u003Cstring, DecalJsonEntry[]>",[5519,5520,5521,5522,5526],"details",{},"\n ",[5523,5524,5525],"summary",{},"Full schema",[626,5527,5529],{"className":1190,"code":5528,"language":664,"meta":576,"style":576},"interface DecalJsonEntry {\n id: string \u002F\u002F stable UUID\n position: [number, number, number] \u002F\u002F target-mesh local space (raycast hit, baked into the parent's frame)\n orientation: [number, number, number] \u002F\u002F Euler XYZ\n size: [number, number, number] \u002F\u002F extents along X\u002FY; Z = projection depth\n zIndex: number \u002F\u002F per-mesh layer order, ≥ 0\n map: string | null \u002F\u002F matches a texture's .name\n flipX?: boolean \u002F\u002F omitted when false\n flipY?: boolean \u002F\u002F omitted when false\n color?: string \u002F\u002F hex (e.g. '#ff6b35'), omitted when no tint\n opacity?: number \u002F\u002F 0..1, omitted when 1\n visible?: boolean \u002F\u002F omitted when true; false hides the decal\n}\n\ntype DecalLayout = Record\u003Cstring, DecalJsonEntry[]>\n\u002F\u002F { sphere: [...], cube: [...] }\n",[618,5530,5531,5540,5553,5580,5604,5628,5640,5656,5670,5681,5693,5705,5717,5721,5725,5750],{"__ignoreMap":576},[637,5532,5533,5536,5538],{"class":639,"line":577},[637,5534,5535],{"class":650},"interface",[637,5537,3545],{"class":1204},[637,5539,1208],{"class":642},[637,5541,5542,5545,5547,5550],{"class":639,"line":578},[637,5543,5544],{"class":646}," id",[637,5546,1222],{"class":642},[637,5548,5549],{"class":1204}," string",[637,5551,5552],{"class":1213}," \u002F\u002F stable UUID\n",[637,5554,5555,5558,5560,5562,5565,5567,5570,5572,5574,5577],{"class":639,"line":708},[637,5556,5557],{"class":646}," position",[637,5559,1222],{"class":642},[637,5561,2570],{"class":683},[637,5563,5564],{"class":1204},"number",[637,5566,687],{"class":642},[637,5568,5569],{"class":1204}," number",[637,5571,687],{"class":642},[637,5573,5569],{"class":1204},[637,5575,5576],{"class":683},"] ",[637,5578,5579],{"class":1213},"\u002F\u002F target-mesh local space (raycast hit, baked into the parent's frame)\n",[637,5581,5582,5585,5587,5589,5591,5593,5595,5597,5599,5601],{"class":639,"line":729},[637,5583,5584],{"class":646}," orientation",[637,5586,1222],{"class":642},[637,5588,2570],{"class":683},[637,5590,5564],{"class":1204},[637,5592,687],{"class":642},[637,5594,5569],{"class":1204},[637,5596,687],{"class":642},[637,5598,5569],{"class":1204},[637,5600,5576],{"class":683},[637,5602,5603],{"class":1213},"\u002F\u002F Euler XYZ\n",[637,5605,5606,5609,5611,5613,5615,5617,5619,5621,5623,5625],{"class":639,"line":739},[637,5607,5608],{"class":646}," size",[637,5610,1222],{"class":642},[637,5612,2570],{"class":683},[637,5614,5564],{"class":1204},[637,5616,687],{"class":642},[637,5618,5569],{"class":1204},[637,5620,687],{"class":642},[637,5622,5569],{"class":1204},[637,5624,5576],{"class":683},[637,5626,5627],{"class":1213},"\u002F\u002F extents along X\u002FY; Z = projection depth\n",[637,5629,5630,5633,5635,5637],{"class":639,"line":745},[637,5631,5632],{"class":646}," zIndex",[637,5634,1222],{"class":642},[637,5636,5569],{"class":1204},[637,5638,5639],{"class":1213}," \u002F\u002F per-mesh layer order, ≥ 0\n",[637,5641,5642,5645,5647,5649,5651,5653],{"class":639,"line":755},[637,5643,5644],{"class":646}," map",[637,5646,1222],{"class":642},[637,5648,5549],{"class":1204},[637,5650,3738],{"class":642},[637,5652,3741],{"class":1204},[637,5654,5655],{"class":1213}," \u002F\u002F matches a texture's .name\n",[637,5657,5658,5661,5664,5667],{"class":639,"line":778},[637,5659,5660],{"class":646}," flipX",[637,5662,5663],{"class":642},"?:",[637,5665,5666],{"class":1204}," boolean",[637,5668,5669],{"class":1213}," \u002F\u002F omitted when false\n",[637,5671,5672,5675,5677,5679],{"class":639,"line":790},[637,5673,5674],{"class":646}," flipY",[637,5676,5663],{"class":642},[637,5678,5666],{"class":1204},[637,5680,5669],{"class":1213},[637,5682,5683,5686,5688,5690],{"class":639,"line":800},[637,5684,5685],{"class":646}," color",[637,5687,5663],{"class":642},[637,5689,5549],{"class":1204},[637,5691,5692],{"class":1213}," \u002F\u002F hex (e.g. '#ff6b35'), omitted when no tint\n",[637,5694,5695,5698,5700,5702],{"class":639,"line":805},[637,5696,5697],{"class":646}," opacity",[637,5699,5663],{"class":642},[637,5701,5569],{"class":1204},[637,5703,5704],{"class":1213}," \u002F\u002F 0..1, omitted when 1\n",[637,5706,5707,5710,5712,5714],{"class":639,"line":831},[637,5708,5709],{"class":646}," visible",[637,5711,5663],{"class":642},[637,5713,5666],{"class":1204},[637,5715,5716],{"class":1213}," \u002F\u002F omitted when true; false hides the decal\n",[637,5718,5719],{"class":639,"line":631},[637,5720,1329],{"class":642},[637,5722,5723],{"class":639,"line":854},[637,5724,742],{"emptyLinePlaceholder":594},[637,5726,5727,5730,5733,5735,5738,5740,5742,5744,5746,5748],{"class":639,"line":865},[637,5728,5729],{"class":650},"type",[637,5731,5732],{"class":1204}," DecalLayout",[637,5734,2503],{"class":642},[637,5736,5737],{"class":1204}," Record",[637,5739,643],{"class":642},[637,5741,3665],{"class":1204},[637,5743,687],{"class":642},[637,5745,3545],{"class":1204},[637,5747,3672],{"class":683},[637,5749,669],{"class":642},[637,5751,5752],{"class":639,"line":876},[637,5753,5754],{"class":1213},"\u002F\u002F { sphere: [...], cube: [...] }\n",[504,5756,5758,5760],{"id":5757},"decal-props",[618,5759,2282],{}," props",[931,5762,5763,5773],{},[934,5764,5765],{},[937,5766,5767,5769,5771],{},[940,5768,942],{},[940,5770,945],{},[940,5772,948],{},[950,5774,5775,5791,5811,5846,5864,5878,5892,5911,5939],{},[937,5776,5777,5781,5787],{},[955,5778,5779],{},[1705,5780,2811],{},[955,5782,5783,5784,5786],{},"Two-way list of stamped decals (use with ",[618,5785,2342],{},").",[955,5788,5789],{},[618,5790,3672],{},[937,5792,5793,5797,5807],{},[955,5794,5795],{},[1705,5796,2825],{},[955,5798,5799,5800,5802,5803,5806],{},"A single ",[618,5801,2321],{}," or array of ",[618,5804,5805],{},"Texture[]",". With multiple, the editor lets the user cycle through them as a palette.",[955,5808,5809],{},[618,5810,3749],{},[937,5812,5813,5817,5842],{},[955,5814,5815],{},[1705,5816,5015],{},[955,5818,5819,5820,5822,5823,5826,5827,5829,5830,5833,5834,3429,5836,3429,5839,5841],{},"Optional explicit target mesh (",[618,5821,4455],{}," or ",[618,5824,5825],{},"ShallowRef\u003CMesh>","). When omitted, the scene-graph parent of ",[618,5828,2282],{}," is auto-resolved via a hidden anchor ",[618,5831,5832],{},"\u003CTresGroup>",". The decal mesh is imperatively parented to the target so it follows the target's runtime ",[618,5835,1491],{},[618,5837,5838],{},"rotation",[618,5840,816],{}," via the scene-graph hierarchy.",[955,5843,5844],{},[618,5845,3749],{},[937,5847,5848,5852,5860],{},[955,5849,5850],{},[1705,5851,3279],{},[955,5853,4463,5854,5856,5857,5859],{},[618,5855,965],{},", mounts the interactive editor (raycast, hover, click-to-place, drag-from-thumbnail). Required for ",[618,5858,2297],{}," interactions to work on this Decal.",[955,5861,5862],{},[618,5863,975],{},[937,5865,5866,5871,5874],{},[955,5867,5868],{},[1705,5869,5870],{},"baseSize",[955,5872,5873],{},"Reference size used to derive each decal's size from the texture aspect ratio.",[955,5875,5876],{},[618,5877,1925],{},[937,5879,5880,5885,5888],{},[955,5881,5882],{},[1705,5883,5884],{},"baseOffset",[955,5886,5887],{},"Distance along the surface normal (parent units) to avoid z-fighting between the decal and the host mesh.",[955,5889,5890],{},[618,5891,1939],{},[937,5893,5894,5898,5907],{},[955,5895,5896],{},[1705,5897,3189],{},[955,5899,5900,5901,5903,5904,5906],{},"Extra offset added per ",[618,5902,2364],{}," step on top of ",[618,5905,5884],{},". Increase if stacked decals still flicker.",[955,5908,5909],{},[618,5910,1554],{},[937,5912,5913,5918,5934],{},[955,5914,5915],{},[1705,5916,5917],{},"cullThreshold",[955,5919,5920,5921,5924,5925,5930,5931,5933],{},"Drops projected triangles whose face normal makes an angle steeper than ",[618,5922,5923],{},"acos(threshold)"," with the projector. Mitigates ",[1144,5926,5929],{"href":5927,"rel":5928},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fissues\u002F21187",[1148],"#21187",". Pass ",[618,5932,969],{}," to disable.",[955,5935,5936],{},[618,5937,5938],{},"0.2",[937,5940,5941,5946,5949],{},[955,5942,5943],{},[1705,5944,5945],{},"edgeColor",[955,5947,5948],{},"Color of the edge outline drawn around a decal while it is hovered (pointer or layer panel) in editable mode.",[955,5950,5951],{},[618,5952,5953],{},"#0000ff",[504,5955,5957,5959],{"id":5956},"decal-events",[618,5958,2282],{}," events",[931,5961,5962,5974],{},[934,5963,5964],{},[937,5965,5966,5969,5972],{},[940,5967,5968],{},"Event",[940,5970,5971],{},"Payload",[940,5973,945],{},[950,5975,5976,5991,6006,6020,6040,6058,6075],{},[937,5977,5978,5983,5988],{},[955,5979,5980],{},[618,5981,5982],{},"update:data",[955,5984,5985],{},[618,5986,5987],{},"DecalJsonEntry[]",[955,5989,5990],{},"v-model partner — fires whenever the JSON list changes.",[937,5992,5993,5998,6003],{},[955,5994,5995],{},[618,5996,5997],{},"add",[955,5999,6000],{},[618,6001,6002],{},"DecalEntry",[955,6004,6005],{},"A new decal has been committed (create mode → confirm).",[937,6007,6008,6013,6017],{},[955,6009,6010],{},[618,6011,6012],{},"update",[955,6014,6015],{},[618,6016,6002],{},[955,6018,6019],{},"An existing decal has been committed (update mode → confirm).",[937,6021,6022,6027,6031],{},[955,6023,6024],{},[618,6025,6026],{},"delete",[955,6028,6029],{},[618,6030,6002],{},[955,6032,6033,6034,3429,6037,5786],{},"A decal has been removed (delete button or ",[618,6035,6036],{},"Del",[618,6038,6039],{},"Backspace",[937,6041,6042,6047,6051],{},[955,6043,6044],{},[618,6045,6046],{},"select",[955,6048,6049],{},[618,6050,6002],{},[955,6052,6053,6054,6057],{},"Edition began on ",[618,6055,6056],{},"entry"," (panel click, 3D click, or programmatic).",[937,6059,6060,6065,6068],{},[955,6061,6062],{},[618,6063,6064],{},"cancel",[955,6066,6067],{},"—",[955,6069,6070,6071,6074],{},"Edition was aborted without commit (",[618,6072,6073],{},"Esc",", click-outside in create mode).",[937,6076,6077,6082,6087],{},[955,6078,6079],{},[618,6080,6081],{},"decalClick",[955,6083,6084],{},[618,6085,6086],{},"{ entry: DecalEntry, event: MouseEvent }",[955,6088,6089,6090,6092,6093,1150],{},"Fires on click of any stamped decal, even when ",[618,6091,3279],{}," is ",[618,6094,975],{},[504,6096,6098,6100,6101,3433],{"id":6097},"decal-exposed-via-ref",[618,6099,2282],{}," exposed (via ",[618,6102,6103],{},"ref",[614,6105,6106,6107,6110],{},"The template ref resolves to ",[618,6108,6109],{},"DecalImperativeApi"," — import the type for\nfull autocompletion:",[626,6112,6114],{"className":1190,"code":6113,"language":664,"meta":576,"style":576},"import type { DecalImperativeApi } from '@tresjs\u002Fcientos'\n\nconst decalRef = ref\u003CDecalImperativeApi | null>(null)\n",[618,6115,6116,6137,6141],{"__ignoreMap":576},[637,6117,6118,6120,6122,6124,6127,6129,6131,6133,6135],{"class":639,"line":577},[637,6119,677],{"class":676},[637,6121,3535],{"class":676},[637,6123,680],{"class":642},[637,6125,6126],{"class":683}," DecalImperativeApi",[637,6128,693],{"class":642},[637,6130,696],{"class":676},[637,6132,699],{"class":642},[637,6134,702],{"class":663},[637,6136,705],{"class":642},[637,6138,6139],{"class":639,"line":578},[637,6140,742],{"emptyLinePlaceholder":594},[637,6142,6143,6145,6147,6149,6151,6153,6155,6157,6159,6161,6163,6165],{"class":639,"line":708},[637,6144,2487],{"class":650},[637,6146,3719],{"class":683},[637,6148,657],{"class":642},[637,6150,3999],{"class":2506},[637,6152,643],{"class":642},[637,6154,6109],{"class":1204},[637,6156,3738],{"class":642},[637,6158,3741],{"class":1204},[637,6160,3744],{"class":642},[637,6162,2509],{"class":683},[637,6164,3749],{"class":642},[637,6166,2520],{"class":683},[931,6168,6169,6181],{},[934,6170,6171],{},[937,6172,6173,6176,6179],{},[940,6174,6175],{},"Property",[940,6177,6178],{},"Type",[940,6180,945],{},[950,6182,6183,6201,6219,6237,6252],{},[937,6184,6185,6190,6195],{},[955,6186,6187],{},[618,6188,6189],{},"editor",[955,6191,6192],{},[618,6193,6194],{},"DecalEditorSession",[955,6196,6197,6198,1150],{},"The canvas-shared editor session. Pass it to ",[618,6199,6200],{},"\u003CDecalDebugUI :session>",[937,6202,6203,6208,6213],{},[955,6204,6205],{},[618,6206,6207],{},"beginEditById",[955,6209,6210],{},[618,6211,6212],{},"(id: string) => boolean",[955,6214,6215,6216,6218],{},"Programmatically start editing a specific decal. Returns ",[618,6217,975],{}," if the id is unknown.",[937,6220,6221,6226,6231],{},[955,6222,6223],{},[618,6224,6225],{},"commit",[955,6227,6228],{},[618,6229,6230],{},"() => void",[955,6232,6233,6234,5786],{},"Commit the in-flight edit (same as ",[618,6235,6236],{},"Enter",[937,6238,6239,6243,6247],{},[955,6240,6241],{},[618,6242,6064],{},[955,6244,6245],{},[618,6246,6230],{},[955,6248,6249,6250,5786],{},"Abort the in-flight edit (same as ",[618,6251,6073],{},[937,6253,6254,6259,6263],{},[955,6255,6256],{},[618,6257,6258],{},"remove",[955,6260,6261],{},[618,6262,6230],{},[955,6264,6265,6266,5786],{},"Delete the currently edited decal (same as ",[618,6267,6036],{},[504,6269,6271,5760],{"id":6270},"decaldebugui-props",[618,6272,2297],{},[931,6274,6275,6285],{},[934,6276,6277],{},[937,6278,6279,6281,6283],{},[940,6280,942],{},[940,6282,945],{},[940,6284,948],{},[950,6286,6287,6310,6335,6348,6368,6383,6406],{},[937,6288,6289,6293,6306],{},[955,6290,6291],{},[1705,6292,3823],{},[955,6294,6295,6298,6299,6301,6302,6305],{},[618,6296,6297],{},"DecalEditorSession | null"," — obtained from any ",[618,6300,2282],{}," ref via ",[618,6303,6304],{},"decalRef.value?.editor",". Mandatory for the overlay to wire up the interactive logic.",[955,6307,6308],{},[618,6309,3749],{},[937,6311,6312,6316,6330],{},[955,6313,6314],{},[1705,6315,2811],{},[955,6317,6318,6319,6322,6323,6326,6327,6329],{},"Mesh-name-keyed map of decal slices — ",[618,6320,6321],{},"{ sphere: [...], cube: [...] }",". Each key matches a ",[618,6324,6325],{},"\u003CTresMesh name=\"...\">"," whose child ",[618,6328,2282],{}," owns the slice.",[955,6331,6332],{},[618,6333,6334],{},"{}",[937,6336,6337,6341,6344],{},[955,6338,6339],{},[1705,6340,3050],{},[955,6342,6343],{},"The full texture palette shown in the dock's picker.",[955,6345,6346],{},[618,6347,3672],{},[937,6349,6350,6355,6364],{},[955,6351,6352],{},[1705,6353,6354],{},"theme",[955,6356,6357,5822,6360,6363],{},[618,6358,6359],{},"'light'",[618,6361,6362],{},"'dark'"," — overlay theme tokens.",[955,6365,6366],{},[618,6367,6359],{},[937,6369,6370,6375,6378],{},[955,6371,6372],{},[1705,6373,6374],{},"snapAngle",[955,6376,6377],{},"Rotation step (degrees) applied when the snap toggle is on. Snap-tick ring on the handle adapts automatically.",[955,6379,6380],{},[618,6381,6382],{},"15",[937,6384,6385,6390,6402],{},[955,6386,6387],{},[1705,6388,6389],{},"exportFilename",[955,6391,6392,6393,5930,6395,6397,6398,6401],{},"Filename for the built-in JSON download. When omitted, defaults to ",[618,6394,4342],{},[618,6396,3749],{}," to skip the auto-download (the ",[618,6399,6400],{},"@export"," event still fires).",[955,6403,6404],{},[618,6405,4342],{},[937,6407,6408,6412,6415],{},[955,6409,6410],{},[1705,6411,4270],{},[955,6413,6414],{},"Scope the overlay to the nearest positioned ancestor instead of pinning it to the viewport. Useful for embedding the editor inside a docs page or a bounded host stage.",[955,6416,6417],{},[618,6418,975],{},[504,6420,6422,5959],{"id":6421},"decaldebugui-events",[618,6423,2297],{},[931,6425,6426,6436],{},[934,6427,6428],{},[937,6429,6430,6432,6434],{},[940,6431,5968],{},[940,6433,5971],{},[940,6435,945],{},[950,6437,6438,6452],{},[937,6439,6440,6444,6449],{},[955,6441,6442],{},[618,6443,1198],{},[955,6445,6446],{},[618,6447,6448],{},"DecalLayout",[955,6450,6451],{},"Fires after the user clicks Export. The download (if enabled) has already been triggered — use this for side effects (POST, analytics…).",[937,6453,6454,6458,6462],{},[955,6455,6456],{},[618,6457,677],{},[955,6459,6460],{},[618,6461,6448],{},[955,6463,6464],{},"Fires after the user picks a JSON file. The layout has been sanitised (unknown keys dropped) and already applied to the bound Decals.",[504,6466,6468],{"id":6467},"caveats","Caveats",[2285,6470,6471,6486,6503,6519],{},[2288,6472,6473,6474,6477,6478,6481,6482,6485],{},"✨ The overlay sits at ",[618,6475,6476],{},"position: fixed; inset: 0; pointer-events: none"," with\nindividual panels opting back in. It sits ",[1705,6479,6480],{},"above"," the canvas by default\n(",[618,6483,6484],{},"z-index: 1000000",") — adjust via host CSS if needed.",[2288,6487,6488,6489,6491,6492,6495,6496,1503,6499,6502],{},"🎨 ",[618,6490,2297],{}," ships its own theme in a global stylesheet under the\n",[618,6493,6494],{},".cientos-decal-ui"," namespace, so host styles aren't affected. The CSS\nvariables (",[618,6497,6498],{},"--accent",[618,6500,6501],{},"--dock-bg",", etc.) can be overridden by targeting\nthe namespace.",[2288,6504,6505,6506,6509,6510,6512,6513,6515,6516,6518],{},"🔶 Decals are ",[1705,6507,6508],{},"per-canvas"," — if you have multiple ",[618,6511,3290],{}," in your\napp, each one has its own independent session. Pair each ",[618,6514,2297],{},"\nwith the right ",[618,6517,3823],{}," (from one of the Decals inside that canvas).",[2288,6520,6521,6522,1150],{},"🧩 The parent mesh resolution defaults to the scene-graph parent. If your\nsetup needs a different target (e.g. a mesh referenced from outside the\nDecal's parent slot), pass ",[618,6523,6524],{},":mesh=\"meshRef\"",[504,6526,6528],{"id":6527},"limitations","Limitations",[2078,6530,6531,6545,6552,6595],{},[614,6532,6533,6534,6537,6538,3429,6540,3429,6542,6544],{},"Decal vertices are baked into the ",[1705,6535,6536],{},"target mesh's local space"," at\nbuild time (the decal mesh is imperatively re-parented to the target,\nso ",[618,6539,1491],{},[618,6541,5838],{},[618,6543,816],{}," on the parent are followed via\nthe scene graph — no rebuild needed).",[614,6546,6547,6548,6551],{},"Runtime deformations that change vertex positions outside of a\ntransform are ",[1705,6549,6550],{},"not"," followed:",[2285,6553,6554,6567,6575,6582],{},[2288,6555,6556,6561,6562,1150],{},[1705,6557,6558],{},[618,6559,6560],{},"SkinnedMesh"," skinning is not applied — the decal stays in rest\npose. See ",[1144,6563,6566],{"href":6564,"rel":6565},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fissues\u002F7926",[1148],"three.js#7926",[2288,6568,6569,6574],{},[1705,6570,6571],{},[618,6572,6573],{},"morphAttributes"," on the parent are ignored.",[2288,6576,6577,6578,6581],{},"Direct mutations of the parent's ",[618,6579,6580],{},"geometry.attributes.position","\n(e.g. CPU wave displacement, GPGPU) — the projection is baked once.",[2288,6583,6584,6585,6589,6590,6592,6593,1150],{},"Decals near silhouettes can wrap around onto opposite faces (see\n",[1144,6586,6588],{"href":5927,"rel":6587},[1148],"three.js#21187",") —\nmitigated by the ",[618,6591,5917],{}," prop, default ",[618,6594,5938],{},[614,6596,6597,6599],{},[618,6598,2282],{}," warns once per parent mesh when it detects these conditions.",[504,6601,6603],{"id":6602},"keyboard-shortcuts","Keyboard shortcuts",[931,6605,6606,6616],{},[934,6607,6608],{},[937,6609,6610,6613],{},[940,6611,6612],{},"Shortcut",[940,6614,6615],{},"Action",[950,6617,6618,6627,6636,6648,6661,6674],{},[937,6619,6620,6624],{},[955,6621,6622],{},[618,6623,6236],{},[955,6625,6626],{},"Confirm the in-flight edit",[937,6628,6629,6633],{},[955,6630,6631],{},[618,6632,6073],{},[955,6634,6635],{},"Cancel (revert updates, drop pending placements)",[937,6637,6638,6645],{},[955,6639,6640,3429,6642],{},[618,6641,6036],{},[618,6643,6644],{},"⌫",[955,6646,6647],{},"Delete the edited decal (or cancel a create)",[937,6649,6650,6658],{},[955,6651,6652,3429,6655],{},[618,6653,6654],{},"⌘Z",[618,6656,6657],{},"Ctrl+Z",[955,6659,6660],{},"Undo",[937,6662,6663,6671],{},[955,6664,6665,3429,6668],{},[618,6666,6667],{},"⇧⌘Z",[618,6669,6670],{},"Ctrl+⇧Z",[955,6672,6673],{},"Redo",[937,6675,6676,6679],{},[955,6677,6678],{},"Click outside",[955,6680,6681],{},"Auto-commit an in-flight update; cancel a create",[504,6683,6685,6686,3433],{"id":6684},"programmatic-api-usedecaleditor","Programmatic API (",[618,6687,6688],{},"useDecalEditor",[614,6690,6691,6692,6694,6695,6697,6698,6700,6701,6703],{},"Skip ",[618,6693,2297],{}," entirely or augment it with custom panels —\n",[618,6696,2310],{}," returns the same canvas-scoped session every Decal\nshares. Call it from any component inside ",[618,6699,3290],{}," (after at\nleast one ",[618,6702,2282],{}," has mounted).",[626,6705,6707],{"className":1190,"code":6706,"language":664,"meta":576,"style":576},"import { useDecalEditor } from '@tresjs\u002Fcientos'\n\nconst session = useDecalEditor()\n",[618,6708,6709,6728,6732],{"__ignoreMap":576},[637,6710,6711,6713,6715,6718,6720,6722,6724,6726],{"class":639,"line":577},[637,6712,677],{"class":676},[637,6714,680],{"class":642},[637,6716,6717],{"class":683}," useDecalEditor",[637,6719,693],{"class":642},[637,6721,696],{"class":676},[637,6723,699],{"class":642},[637,6725,702],{"class":663},[637,6727,705],{"class":642},[637,6729,6730],{"class":639,"line":578},[637,6731,742],{"emptyLinePlaceholder":594},[637,6733,6734,6736,6738,6740,6742],{"class":639,"line":708},[637,6735,2487],{"class":650},[637,6737,3758],{"class":683},[637,6739,657],{"class":642},[637,6741,6717],{"class":2506},[637,6743,6744],{"class":683},"()\n",[614,6746,6747,6748,1503,6751,2560,6754,1503,6757,6760,6761,2560,6763,1503,6766,1503,6769,6772,6773,6776,6777,6780,6781,1503,6784,1503,6787,2560,6790,6793],{},"The session exposes reactive state (",[618,6749,6750],{},"editingEntry",[618,6752,6753],{},"editingMode",[618,6755,6756],{},"canUndo",[618,6758,6759],{},"canRedo",", …), by-id mutators (",[618,6762,6207],{},[618,6764,6765],{},"setZIndexById",[618,6767,6768],{},"setVisibilityById",[618,6770,6771],{},"removeById","), batched updates\n(",[618,6774,6775],{},"setMeshData","), commit \u002F delete \u002F cancel listeners, undo \u002F redo, and\na ",[618,6778,6779],{},"registerDecalEntry"," hook for external entries. Helper utilities\n(",[618,6782,6783],{},"ensureTextureNames",[618,6785,6786],{},"getTextureName",[618,6788,6789],{},"getTextureAspect",[618,6791,6792],{},"invalidateDecalGeometry",") are exported alongside.",[5519,6795,5521,6796,6799,6803,6878,6882,6953,6969,6973,7009,7015,7019,7158,7162,7208,7211,7215,7229,7399,7403],{},[5523,6797,6798],{},"Full API reference",[4215,6800,6802],{"id":6801},"reactive-state","Reactive state",[626,6804,6806],{"className":1190,"code":6805,"language":664,"meta":576,"style":576},"session.editingEntry \u002F\u002F ShallowRef\u003CDecalEntry | null>\nsession.editingMode \u002F\u002F Ref\u003C'create' | 'update' | null>\nsession.lockedMeshUuid \u002F\u002F Ref\u003Cstring | null>\nsession.hoveredEntry \u002F\u002F ShallowRef\u003CDecalEntry | null>\nsession.canUndo \u002F\u002F Ref\u003Cboolean>\nsession.canRedo \u002F\u002F Ref\u003Cboolean>\n",[618,6807,6808,6820,6832,6844,6855,6867],{"__ignoreMap":576},[637,6809,6810,6812,6814,6817],{"class":639,"line":577},[637,6811,3823],{"class":683},[637,6813,1150],{"class":642},[637,6815,6816],{"class":683},"editingEntry ",[637,6818,6819],{"class":1213},"\u002F\u002F ShallowRef\u003CDecalEntry | null>\n",[637,6821,6822,6824,6826,6829],{"class":639,"line":578},[637,6823,3823],{"class":683},[637,6825,1150],{"class":642},[637,6827,6828],{"class":683},"editingMode ",[637,6830,6831],{"class":1213},"\u002F\u002F Ref\u003C'create' | 'update' | null>\n",[637,6833,6834,6836,6838,6841],{"class":639,"line":708},[637,6835,3823],{"class":683},[637,6837,1150],{"class":642},[637,6839,6840],{"class":683},"lockedMeshUuid ",[637,6842,6843],{"class":1213},"\u002F\u002F Ref\u003Cstring | null>\n",[637,6845,6846,6848,6850,6853],{"class":639,"line":729},[637,6847,3823],{"class":683},[637,6849,1150],{"class":642},[637,6851,6852],{"class":683},"hoveredEntry ",[637,6854,6819],{"class":1213},[637,6856,6857,6859,6861,6864],{"class":639,"line":739},[637,6858,3823],{"class":683},[637,6860,1150],{"class":642},[637,6862,6863],{"class":683},"canUndo ",[637,6865,6866],{"class":1213},"\u002F\u002F Ref\u003Cboolean>\n",[637,6868,6869,6871,6873,6876],{"class":639,"line":745},[637,6870,3823],{"class":683},[637,6872,1150],{"class":642},[637,6874,6875],{"class":683},"canRedo ",[637,6877,6866],{"class":1213},[4215,6879,6881],{"id":6880},"mutating-decals-by-id","Mutating decals by id",[626,6883,6885],{"className":1190,"code":6884,"language":664,"meta":576,"style":576},"session.beginEditById(id) \u002F\u002F start editing a placed decal\nsession.setZIndexById(id, newZ) \u002F\u002F reorder one decal\nsession.setVisibilityById(id, false) \u002F\u002F hide \u002F show\nsession.removeById(id) \u002F\u002F delete\n",[618,6886,6887,6901,6920,6940],{"__ignoreMap":576},[637,6888,6889,6891,6893,6895,6898],{"class":639,"line":577},[637,6890,3823],{"class":683},[637,6892,1150],{"class":642},[637,6894,6207],{"class":2506},[637,6896,6897],{"class":683},"(id) ",[637,6899,6900],{"class":1213},"\u002F\u002F start editing a placed decal\n",[637,6902,6903,6905,6907,6909,6912,6914,6917],{"class":639,"line":578},[637,6904,3823],{"class":683},[637,6906,1150],{"class":642},[637,6908,6765],{"class":2506},[637,6910,6911],{"class":683},"(id",[637,6913,687],{"class":642},[637,6915,6916],{"class":683}," newZ) ",[637,6918,6919],{"class":1213},"\u002F\u002F reorder one decal\n",[637,6921,6922,6924,6926,6928,6930,6932,6935,6937],{"class":639,"line":708},[637,6923,3823],{"class":683},[637,6925,1150],{"class":642},[637,6927,6768],{"class":2506},[637,6929,6911],{"class":683},[637,6931,687],{"class":642},[637,6933,6934],{"class":4560}," false",[637,6936,4907],{"class":683},[637,6938,6939],{"class":1213},"\u002F\u002F hide \u002F show\n",[637,6941,6942,6944,6946,6948,6950],{"class":639,"line":729},[637,6943,3823],{"class":683},[637,6945,1150],{"class":642},[637,6947,6771],{"class":2506},[637,6949,6897],{"class":683},[637,6951,6952],{"class":1213},"\u002F\u002F delete\n",[614,6954,6955,6956,6959,6960,6962,6963,6965,6966,6968],{},"When the targeted id matches the ",[1705,6957,6958],{},"currently editing"," entry, mutations\nland on the in-flight buffer (committed on ",[618,6961,6236],{},", reverted on ",[618,6964,6073],{},").\nOtherwise they update ",[618,6967,2811],{}," immediately and record history.",[4215,6970,6972],{"id":6971},"batched-mesh-updates","Batched mesh updates",[626,6974,6976],{"className":1190,"code":6975,"language":664,"meta":576,"style":576},"session.setMeshData(meshName, nextEntries, { recordHistory: true })\n",[618,6977,6978],{"__ignoreMap":576},[637,6979,6980,6982,6984,6986,6989,6991,6994,6996,6998,7001,7003,7005,7007],{"class":639,"line":577},[637,6981,3823],{"class":683},[637,6983,1150],{"class":642},[637,6985,6775],{"class":2506},[637,6987,6988],{"class":683},"(meshName",[637,6990,687],{"class":642},[637,6992,6993],{"class":683}," nextEntries",[637,6995,687],{"class":642},[637,6997,680],{"class":642},[637,6999,7000],{"class":646}," recordHistory",[637,7002,1222],{"class":642},[637,7004,4561],{"class":4560},[637,7006,693],{"class":642},[637,7008,2520],{"class":683},[614,7010,7011,7012,7014],{},"A single emit avoids the stale-snapshot race that hits multiple\nback-to-back ",[618,7013,6765],{}," calls in the same tick.",[4215,7016,7018],{"id":7017},"listening-to-commits","Listening to commits",[626,7020,7022],{"className":1190,"code":7021,"language":664,"meta":576,"style":576},"const off = session.onCommit((entry, mode) => {\n console.log(mode, entry) \u002F\u002F mode: 'create' | 'update'\n})\nsession.onDelete((entry) => { \u002F* … *\u002F })\nsession.onCancel(() => { \u002F* … *\u002F })\n\n\u002F\u002F All return an unsubscribe function:\nonBeforeUnmount(off)\n",[618,7023,7024,7059,7084,7090,7118,7141,7145,7150],{"__ignoreMap":576},[637,7025,7026,7028,7031,7033,7036,7038,7041,7043,7045,7048,7050,7053,7055,7057],{"class":639,"line":577},[637,7027,2487],{"class":650},[637,7029,7030],{"class":683}," off ",[637,7032,657],{"class":642},[637,7034,7035],{"class":683}," session",[637,7037,1150],{"class":642},[637,7039,7040],{"class":2506},"onCommit",[637,7042,2509],{"class":683},[637,7044,2509],{"class":642},[637,7046,6056],{"class":7047},"sHdIc",[637,7049,687],{"class":642},[637,7051,7052],{"class":7047}," mode",[637,7054,3433],{"class":642},[637,7056,3770],{"class":650},[637,7058,1208],{"class":642},[637,7060,7061,7064,7066,7069,7071,7074,7076,7079,7081],{"class":639,"line":578},[637,7062,7063],{"class":683}," console",[637,7065,1150],{"class":642},[637,7067,7068],{"class":2506},"log",[637,7070,2509],{"class":646},[637,7072,7073],{"class":683},"mode",[637,7075,687],{"class":642},[637,7077,7078],{"class":683}," entry",[637,7080,4907],{"class":646},[637,7082,7083],{"class":1213},"\u002F\u002F mode: 'create' | 'update'\n",[637,7085,7086,7088],{"class":639,"line":708},[637,7087,2500],{"class":642},[637,7089,2520],{"class":683},[637,7091,7092,7094,7096,7099,7101,7103,7105,7107,7109,7111,7114,7116],{"class":639,"line":729},[637,7093,3823],{"class":683},[637,7095,1150],{"class":642},[637,7097,7098],{"class":2506},"onDelete",[637,7100,2509],{"class":683},[637,7102,2509],{"class":642},[637,7104,6056],{"class":7047},[637,7106,3433],{"class":642},[637,7108,3770],{"class":650},[637,7110,680],{"class":642},[637,7112,7113],{"class":1213}," \u002F* … *\u002F",[637,7115,693],{"class":642},[637,7117,2520],{"class":683},[637,7119,7120,7122,7124,7127,7129,7131,7133,7135,7137,7139],{"class":639,"line":739},[637,7121,3823],{"class":683},[637,7123,1150],{"class":642},[637,7125,7126],{"class":2506},"onCancel",[637,7128,2509],{"class":683},[637,7130,3767],{"class":642},[637,7132,3770],{"class":650},[637,7134,680],{"class":642},[637,7136,7113],{"class":1213},[637,7138,693],{"class":642},[637,7140,2520],{"class":683},[637,7142,7143],{"class":639,"line":745},[637,7144,742],{"emptyLinePlaceholder":594},[637,7146,7147],{"class":639,"line":755},[637,7148,7149],{"class":1213},"\u002F\u002F All return an unsubscribe function:\n",[637,7151,7152,7155],{"class":639,"line":778},[637,7153,7154],{"class":2506},"onBeforeUnmount",[637,7156,7157],{"class":683},"(off)\n",[4215,7159,7161],{"id":7160},"undo-redo","Undo \u002F redo",[626,7163,7165],{"className":1190,"code":7164,"language":664,"meta":576,"style":576},"session.canUndo.value \u002F\u002F Ref\u003Cboolean>\nsession.undo() \u002F\u002F returns true if something was undone\nsession.redo()\n",[618,7166,7167,7182,7197],{"__ignoreMap":576},[637,7168,7169,7171,7173,7175,7177,7180],{"class":639,"line":577},[637,7170,3823],{"class":683},[637,7172,1150],{"class":642},[637,7174,6756],{"class":683},[637,7176,1150],{"class":642},[637,7178,7179],{"class":683},"value ",[637,7181,6866],{"class":1213},[637,7183,7184,7186,7188,7191,7194],{"class":639,"line":578},[637,7185,3823],{"class":683},[637,7187,1150],{"class":642},[637,7189,7190],{"class":2506},"undo",[637,7192,7193],{"class":683},"() ",[637,7195,7196],{"class":1213},"\u002F\u002F returns true if something was undone\n",[637,7198,7199,7201,7203,7206],{"class":639,"line":708},[637,7200,3823],{"class":683},[637,7202,1150],{"class":642},[637,7204,7205],{"class":2506},"redo",[637,7207,6744],{"class":683},[614,7209,7210],{},"History is per-canvas, capped at 100 operations, disabled mid-edit.",[4215,7212,7214],{"id":7213},"power-user-external-entries","Power user — external entries",[614,7216,7217,7218,7220,7221,7224,7225,7228],{},"Plug a decal-like object that lives outside a ",[618,7219,2282],{}," (custom data\nsource, server snapshot, fake entry for tests) by registering a\n",[618,7222,7223],{},"DecalEntryActions"," bundle so the ",[618,7226,7227],{},"*ById"," session methods route to it:",[626,7230,7232],{"className":1190,"code":7231,"language":664,"meta":576,"style":576},"import type { DecalEntryActions } from '@tresjs\u002Fcientos'\n\nsession.registerDecalEntry('decal-7', {\n beginEdit: () => { \u002F* … *\u002F },\n setZIndex: (newZ) => { \u002F* … *\u002F },\n setVisibility: (visible) => { \u002F* … *\u002F },\n remove: () => { \u002F* … *\u002F },\n} satisfies DecalEntryActions)\nonBeforeUnmount(() => session.unregisterDecalEntry('decal-7'))\n",[618,7233,7234,7255,7259,7280,7299,7321,7343,7360,7371],{"__ignoreMap":576},[637,7235,7236,7238,7240,7242,7245,7247,7249,7251,7253],{"class":639,"line":577},[637,7237,677],{"class":676},[637,7239,3535],{"class":676},[637,7241,680],{"class":642},[637,7243,7244],{"class":683}," DecalEntryActions",[637,7246,693],{"class":642},[637,7248,696],{"class":676},[637,7250,699],{"class":642},[637,7252,702],{"class":663},[637,7254,705],{"class":642},[637,7256,7257],{"class":639,"line":578},[637,7258,742],{"emptyLinePlaceholder":594},[637,7260,7261,7263,7265,7267,7269,7271,7274,7276,7278],{"class":639,"line":708},[637,7262,3823],{"class":683},[637,7264,1150],{"class":642},[637,7266,6779],{"class":2506},[637,7268,2509],{"class":683},[637,7270,2512],{"class":642},[637,7272,7273],{"class":663},"decal-7",[637,7275,2512],{"class":642},[637,7277,687],{"class":642},[637,7279,1208],{"class":642},[637,7281,7282,7285,7287,7290,7292,7294,7296],{"class":639,"line":729},[637,7283,7284],{"class":2506}," beginEdit",[637,7286,1222],{"class":642},[637,7288,7289],{"class":642}," ()",[637,7291,3770],{"class":650},[637,7293,680],{"class":642},[637,7295,7113],{"class":1213},[637,7297,7298],{"class":642}," },\n",[637,7300,7301,7304,7306,7308,7311,7313,7315,7317,7319],{"class":639,"line":739},[637,7302,7303],{"class":2506}," setZIndex",[637,7305,1222],{"class":642},[637,7307,3167],{"class":642},[637,7309,7310],{"class":7047},"newZ",[637,7312,3433],{"class":642},[637,7314,3770],{"class":650},[637,7316,680],{"class":642},[637,7318,7113],{"class":1213},[637,7320,7298],{"class":642},[637,7322,7323,7326,7328,7330,7333,7335,7337,7339,7341],{"class":639,"line":745},[637,7324,7325],{"class":2506}," setVisibility",[637,7327,1222],{"class":642},[637,7329,3167],{"class":642},[637,7331,7332],{"class":7047},"visible",[637,7334,3433],{"class":642},[637,7336,3770],{"class":650},[637,7338,680],{"class":642},[637,7340,7113],{"class":1213},[637,7342,7298],{"class":642},[637,7344,7345,7348,7350,7352,7354,7356,7358],{"class":639,"line":755},[637,7346,7347],{"class":2506}," remove",[637,7349,1222],{"class":642},[637,7351,7289],{"class":642},[637,7353,3770],{"class":650},[637,7355,680],{"class":642},[637,7357,7113],{"class":1213},[637,7359,7298],{"class":642},[637,7361,7362,7364,7367,7369],{"class":639,"line":778},[637,7363,2500],{"class":642},[637,7365,7366],{"class":676}," satisfies",[637,7368,7244],{"class":1204},[637,7370,2520],{"class":683},[637,7372,7373,7375,7377,7379,7381,7383,7385,7388,7390,7392,7394,7396],{"class":639,"line":790},[637,7374,7154],{"class":2506},[637,7376,2509],{"class":683},[637,7378,3767],{"class":642},[637,7380,3770],{"class":650},[637,7382,7035],{"class":683},[637,7384,1150],{"class":642},[637,7386,7387],{"class":2506},"unregisterDecalEntry",[637,7389,2509],{"class":683},[637,7391,2512],{"class":642},[637,7393,7273],{"class":663},[637,7395,2512],{"class":642},[637,7397,7398],{"class":683},"))\n",[4215,7400,7402],{"id":7401},"helper-utilities","Helper utilities",[931,7404,7405,7414],{},[934,7406,7407],{},[937,7408,7409,7411],{},[940,7410,315],{},[940,7412,7413],{},"Use",[950,7415,7416,7436,7448,7461],{},[937,7417,7418,7423],{},[955,7419,7420],{},[618,7421,7422],{},"ensureTextureNames(textures)",[955,7424,7425,7426,7428,7429,7432,7433,1150],{},"Back-fills ",[618,7427,3074],{}," from ",[618,7430,7431],{},"userData.name"," or the filename in ",[618,7434,7435],{},"image.src",[937,7437,7438,7443],{},[955,7439,7440],{},[618,7441,7442],{},"getTextureName(texture)",[955,7444,7445,7446,1150],{},"Single-texture variant — returns a stable name or ",[618,7447,3749],{},[937,7449,7450,7455],{},[955,7451,7452],{},[618,7453,7454],{},"getTextureAspect(texture)",[955,7456,7457,7460],{},[618,7458,7459],{},"{ x, y }"," aspect ratio for custom-sized decals.",[937,7462,7463,7468],{},[955,7464,7465],{},[618,7466,7467],{},"invalidateDecalGeometry(mesh)",[955,7469,7470],{},"Force a rebuild on the next frame — call when the parent mesh moved or swapped.",[1331,7472,7473],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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}",{"title":576,"searchDepth":577,"depth":578,"links":7475},[7476,7477,7478,7479,7480,7484,7485,7493,7494,7496,7498,7500,7502,7504,7505,7506,7507],{"id":624,"depth":578,"text":15},{"id":2881,"depth":578,"text":2882},{"id":3081,"depth":578,"text":2331},{"id":3175,"depth":578,"text":3176},{"id":3270,"depth":578,"text":7481,"children":7482},"Editable mode + \u003CDecalDebugUI>",[7483],{"id":4217,"depth":708,"text":4218},{"id":4336,"depth":578,"text":3472},{"id":4435,"depth":578,"text":7486,"children":7487},"Targeting a loaded model (.glb)",[7488,7490,7492],{"id":4462,"depth":708,"text":7489},"When :object is a Mesh",{"id":4694,"depth":708,"text":7491},"When :object is a Group",{"id":5047,"depth":708,"text":5048},{"id":5500,"depth":578,"text":5501},{"id":5757,"depth":578,"text":7495},"\u003CDecal> props",{"id":5956,"depth":578,"text":7497},"\u003CDecal> events",{"id":6097,"depth":578,"text":7499},"\u003CDecal> exposed (via ref)",{"id":6270,"depth":578,"text":7501},"\u003CDecalDebugUI> props",{"id":6421,"depth":578,"text":7503},"\u003CDecalDebugUI> events",{"id":6467,"depth":578,"text":6468},{"id":6527,"depth":578,"text":6528},{"id":6602,"depth":578,"text":6603},{"id":6684,"depth":578,"text":7508},"Programmatic API (useDecalEditor)","Project a texture onto a mesh's surface — with an optional in-canvas editor UI.",{},{"title":53,"description":7509},"m2NsvoZvWVNeasT5e5-2uu_pua0zwIEDm3Mk9gA7pc8",{"id":7514,"title":57,"body":7515,"description":7817,"extension":591,"links":592,"meta":7818,"navigation":594,"path":58,"seo":7819,"stem":59,"__hash__":7820},"docs\u002F2.api\u002F1.abstractions\u002Fedges.md",{"type":501,"value":7516,"toc":7813},[7517,7522,7538,7540,7731,7733,7750,7811],[608,7518,7519],{},[7520,7521],"abstractions-edges",{},[614,7523,2867,7524,7527,7528,7533,7534,7537],{},[618,7525,7526],{},"cientos"," package provides an abstraction of ",[1144,7529,7532],{"href":7530,"rel":7531},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FEdgesGeometry",[1148],"EdgesGeometry"," from Three.js, ",[618,7535,7536],{},"\u003CEdges>"," is specifically designed for rendering visible edges of objects in a scene graph. This enhances the visual quality by highlighting contours and providing a stylized appearance which contributes to the artistic aspect of 3D visualizations.",[504,7539,15],{"id":624},[626,7541,7544],{"className":628,"code":7542,"highlights":7543,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Box, Edges, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CBox>\n \u003CTresMeshBasicMaterial \u002F>\n \u003CEdges \u002F>\n \u003C\u002FBox>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,831],[618,7545,7546,7566,7584,7612,7620,7624,7632,7640,7673,7681,7689,7698,7707,7715,7723],{"__ignoreMap":576},[637,7547,7548,7550,7552,7554,7556,7558,7560,7562,7564],{"class":639,"line":577},[637,7549,643],{"class":642},[637,7551,647],{"class":646},[637,7553,651],{"class":650},[637,7555,654],{"class":650},[637,7557,657],{"class":642},[637,7559,660],{"class":642},[637,7561,664],{"class":663},[637,7563,660],{"class":642},[637,7565,669],{"class":642},[637,7567,7568,7570,7572,7574,7576,7578,7580,7582],{"class":639,"line":578},[637,7569,677],{"class":676},[637,7571,680],{"class":642},[637,7573,715],{"class":683},[637,7575,693],{"class":642},[637,7577,696],{"class":676},[637,7579,699],{"class":642},[637,7581,724],{"class":663},[637,7583,705],{"class":642},[637,7585,7587,7589,7591,7593,7595,7598,7600,7602,7604,7606,7608,7610],{"class":7586,"line":708},[639,673],[637,7588,677],{"class":676},[637,7590,680],{"class":642},[637,7592,1401],{"class":683},[637,7594,687],{"class":642},[637,7596,7597],{"class":683}," Edges",[637,7599,687],{"class":642},[637,7601,690],{"class":683},[637,7603,693],{"class":642},[637,7605,696],{"class":676},[637,7607,699],{"class":642},[637,7609,702],{"class":663},[637,7611,705],{"class":642},[637,7613,7614,7616,7618],{"class":639,"line":729},[637,7615,732],{"class":642},[637,7617,647],{"class":646},[637,7619,669],{"class":642},[637,7621,7622],{"class":639,"line":739},[637,7623,742],{"emptyLinePlaceholder":594},[637,7625,7626,7628,7630],{"class":639,"line":745},[637,7627,643],{"class":642},[637,7629,750],{"class":646},[637,7631,669],{"class":642},[637,7633,7634,7636,7638],{"class":639,"line":755},[637,7635,758],{"class":642},[637,7637,761],{"class":646},[637,7639,669],{"class":642},[637,7641,7642,7644,7646,7648,7650,7652,7654,7656,7658,7660,7662,7664,7667,7669,7671],{"class":639,"line":778},[637,7643,781],{"class":642},[637,7645,784],{"class":646},[637,7647,813],{"class":642},[637,7649,1491],{"class":650},[637,7651,657],{"class":642},[637,7653,660],{"class":642},[637,7655,1498],{"class":642},[637,7657,969],{"class":823},[637,7659,1503],{"class":642},[637,7661,824],{"class":823},[637,7663,1503],{"class":642},[637,7665,7666],{"class":823},"5",[637,7668,1513],{"class":642},[637,7670,660],{"class":642},[637,7672,787],{"class":642},[637,7674,7675,7677,7679],{"class":639,"line":790},[637,7676,781],{"class":642},[637,7678,795],{"class":646},[637,7680,787],{"class":642},[637,7682,7683,7685,7687],{"class":639,"line":800},[637,7684,781],{"class":642},[637,7686,217],{"class":646},[637,7688,669],{"class":642},[637,7690,7691,7693,7696],{"class":639,"line":805},[637,7692,857],{"class":642},[637,7694,7695],{"class":646},"TresMeshBasicMaterial",[637,7697,787],{"class":642},[637,7699,7701,7703,7705],{"class":7700,"line":831},[639,673],[637,7702,857],{"class":642},[637,7704,57],{"class":646},[637,7706,787],{"class":642},[637,7708,7709,7711,7713],{"class":639,"line":631},[637,7710,899],{"class":642},[637,7712,217],{"class":646},[637,7714,669],{"class":642},[637,7716,7717,7719,7721],{"class":639,"line":854},[637,7718,909],{"class":642},[637,7720,761],{"class":646},[637,7722,669],{"class":642},[637,7724,7725,7727,7729],{"class":639,"line":865},[637,7726,732],{"class":642},[637,7728,750],{"class":646},[637,7730,669],{"class":642},[504,7732,926],{"id":925},[614,7734,7735,7737,7738,7743,7744,7749],{},[618,7736,7536],{}," is based on ",[1144,7739,7742],{"href":7740,"rel":7741},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fobjects\u002FLineSegments",[1148],"LineSegments"," & ",[1144,7745,7748],{"href":7746,"rel":7747},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fobjects\u002FLine",[1148],"Line"," and supports all of its props.",[931,7751,7752,7762],{},[934,7753,7754],{},[937,7755,7756,7758,7760],{},[940,7757,942],{"align":1001},[940,7759,945],{"align":1001},[940,7761,948],{},[950,7763,7764,7795],{},[937,7765,7766,7771,7790],{},[955,7767,7768],{"align":1001},[1705,7769,7770],{},"color",[955,7772,7773,7776,7777,7780,7781,2339,7786],{"align":1001},[618,7774,7775],{},"THREE.Color"," — Color of the edges. ",[7778,7779],"br",{}," More informations : ",[1144,7782,7785],{"href":7783,"rel":7784},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Finstances-arguments-and-props.html#colors",[1148],"TresColor",[1144,7787,7775],{"href":7788,"rel":7789},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmath\u002FColor",[1148],[955,7791,7792],{},[618,7793,7794],{},"#ff0000",[937,7796,7797,7802,7807],{},[955,7798,7799],{"align":1001},[1705,7800,7801],{},"threshold",[955,7803,7804,7806],{"align":1001},[618,7805,5564],{}," — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value",[955,7808,7809],{},[618,7810,1925],{},[1331,7812,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":7814},[7815,7816],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Render visible edges of objects with enhanced visual quality.",{},{"title":57,"description":7817},"vRk1JMb5etr7hxo-Xvqb4plDDBOVqDhpMNgSnbTVmEE",{"id":7822,"title":61,"body":7823,"description":8490,"extension":591,"links":592,"meta":8491,"navigation":594,"path":62,"seo":8492,"stem":63,"__hash__":8493},"docs\u002F2.api\u002F1.abstractions\u002Ffit.md",{"type":501,"value":7824,"toc":8486},[7825,7830,7836,7846,7852,7854,8350,8352,8483],[2367,7826,7827],{},[7828,7829],"abstractions-fit",{},[614,7831,7832,7835],{},[618,7833,7834],{},"\u003CFit \u002F>"," uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.",[614,7837,7838,7839,7842,7843,1150],{},"Alternatively, the children can be fit into a ",[618,7840,7841],{},"Box3"," or an ",[618,7844,7845],{},"Object3D",[614,7847,7848,7849,7851],{},"Or the children can simply be resized. With ",[618,7850,7834],{}," the children are scaled relative to the center of their calculated bounding box.",[504,7853,15],{"id":624},[626,7855,7858],{"className":628,"code":7856,"highlights":7857,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Fit, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { BoxGeometry, MeshNormalMaterial } from 'three'\n\nconst positions: number[][] = []\nfor (let y = 100; y \u003C= 120; y += 10) {\n for (let x = 100; x \u003C= 120; x += 10) {\n positions.push([x, y, 9999])\n }\n}\nconst geom = new BoxGeometry()\nconst mat = new MeshNormalMaterial()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4F4F4F\">\n \u003CTresPerspectiveCamera :position=\"[1, 1, 1]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CFit>\n \u003CTresMesh\n v-for=\"(pos, index) in positions\"\n :key=\"index\"\n :position=\"pos\"\n :args=\"[geom, mat]\"\n \u002F>\n \u003C\u002FFit>\n \u003CTresGridHelper :args=\"[1, 1]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,916,2787],[618,7859,7860,7880,7904,7922,7946,7950,7969,8011,8049,8076,8081,8085,8101,8116,8124,8128,8136,8155,8187,8195,8204,8210,8237,8253,8267,8291,8296,8305,8334,8342],{"__ignoreMap":576},[637,7861,7862,7864,7866,7868,7870,7872,7874,7876,7878],{"class":639,"line":577},[637,7863,643],{"class":642},[637,7865,647],{"class":646},[637,7867,651],{"class":650},[637,7869,654],{"class":650},[637,7871,657],{"class":642},[637,7873,660],{"class":642},[637,7875,664],{"class":663},[637,7877,660],{"class":642},[637,7879,669],{"class":642},[637,7881,7883,7885,7887,7890,7892,7894,7896,7898,7900,7902],{"class":7882,"line":578},[639,673],[637,7884,677],{"class":676},[637,7886,680],{"class":642},[637,7888,7889],{"class":683}," Fit",[637,7891,687],{"class":642},[637,7893,690],{"class":683},[637,7895,693],{"class":642},[637,7897,696],{"class":676},[637,7899,699],{"class":642},[637,7901,702],{"class":663},[637,7903,705],{"class":642},[637,7905,7906,7908,7910,7912,7914,7916,7918,7920],{"class":639,"line":708},[637,7907,677],{"class":676},[637,7909,680],{"class":642},[637,7911,715],{"class":683},[637,7913,693],{"class":642},[637,7915,696],{"class":676},[637,7917,699],{"class":642},[637,7919,724],{"class":663},[637,7921,705],{"class":642},[637,7923,7924,7926,7928,7931,7933,7936,7938,7940,7942,7944],{"class":639,"line":729},[637,7925,677],{"class":676},[637,7927,680],{"class":642},[637,7929,7930],{"class":683}," BoxGeometry",[637,7932,687],{"class":642},[637,7934,7935],{"class":683}," MeshNormalMaterial",[637,7937,693],{"class":642},[637,7939,696],{"class":676},[637,7941,699],{"class":642},[637,7943,4799],{"class":663},[637,7945,705],{"class":642},[637,7947,7948],{"class":639,"line":739},[637,7949,742],{"emptyLinePlaceholder":594},[637,7951,7952,7954,7957,7959,7961,7964,7966],{"class":639,"line":745},[637,7953,2487],{"class":650},[637,7955,7956],{"class":683}," positions",[637,7958,1222],{"class":642},[637,7960,5569],{"class":1204},[637,7962,7963],{"class":683},"[][] ",[637,7965,657],{"class":642},[637,7967,7968],{"class":683}," []\n",[637,7970,7971,7974,7976,7979,7982,7984,7987,7989,7991,7994,7997,7999,8001,8004,8007,8009],{"class":639,"line":755},[637,7972,7973],{"class":676},"for",[637,7975,3167],{"class":683},[637,7977,7978],{"class":650},"let",[637,7980,7981],{"class":683}," y ",[637,7983,657],{"class":642},[637,7985,7986],{"class":823}," 100",[637,7988,4301],{"class":642},[637,7990,7981],{"class":683},[637,7992,7993],{"class":642},"\u003C=",[637,7995,7996],{"class":823}," 120",[637,7998,4301],{"class":642},[637,8000,7981],{"class":683},[637,8002,8003],{"class":642},"+=",[637,8005,8006],{"class":823}," 10",[637,8008,4907],{"class":683},[637,8010,3353],{"class":642},[637,8012,8013,8016,8018,8020,8023,8025,8027,8029,8031,8034,8036,8038,8040,8043,8045,8047],{"class":639,"line":778},[637,8014,8015],{"class":676}," for",[637,8017,3167],{"class":646},[637,8019,7978],{"class":650},[637,8021,8022],{"class":683}," x",[637,8024,2503],{"class":642},[637,8026,7986],{"class":823},[637,8028,4301],{"class":642},[637,8030,8022],{"class":683},[637,8032,8033],{"class":642}," \u003C=",[637,8035,7996],{"class":823},[637,8037,4301],{"class":642},[637,8039,8022],{"class":683},[637,8041,8042],{"class":642}," +=",[637,8044,8006],{"class":823},[637,8046,4907],{"class":646},[637,8048,3353],{"class":642},[637,8050,8051,8054,8056,8059,8061,8064,8066,8069,8071,8074],{"class":639,"line":790},[637,8052,8053],{"class":683}," positions",[637,8055,1150],{"class":642},[637,8057,8058],{"class":2506},"push",[637,8060,3622],{"class":646},[637,8062,8063],{"class":683},"x",[637,8065,687],{"class":642},[637,8067,8068],{"class":683}," y",[637,8070,687],{"class":642},[637,8072,8073],{"class":823}," 9999",[637,8075,2672],{"class":646},[637,8077,8078],{"class":639,"line":800},[637,8079,8080],{"class":642}," }\n",[637,8082,8083],{"class":639,"line":805},[637,8084,1329],{"class":642},[637,8086,8087,8089,8092,8094,8097,8099],{"class":639,"line":831},[637,8088,2487],{"class":650},[637,8090,8091],{"class":683}," geom ",[637,8093,657],{"class":642},[637,8095,8096],{"class":642}," new",[637,8098,7930],{"class":2506},[637,8100,6744],{"class":683},[637,8102,8103,8105,8108,8110,8112,8114],{"class":639,"line":631},[637,8104,2487],{"class":650},[637,8106,8107],{"class":683}," mat ",[637,8109,657],{"class":642},[637,8111,8096],{"class":642},[637,8113,7935],{"class":2506},[637,8115,6744],{"class":683},[637,8117,8118,8120,8122],{"class":639,"line":854},[637,8119,732],{"class":642},[637,8121,647],{"class":646},[637,8123,669],{"class":642},[637,8125,8126],{"class":639,"line":865},[637,8127,742],{"emptyLinePlaceholder":594},[637,8129,8130,8132,8134],{"class":639,"line":876},[637,8131,643],{"class":642},[637,8133,750],{"class":646},[637,8135,669],{"class":642},[637,8137,8138,8140,8142,8144,8146,8148,8151,8153],{"class":639,"line":886},[637,8139,758],{"class":642},[637,8141,761],{"class":646},[637,8143,764],{"class":650},[637,8145,657],{"class":642},[637,8147,660],{"class":642},[637,8149,8150],{"class":663},"#4F4F4F",[637,8152,660],{"class":642},[637,8154,669],{"class":642},[637,8156,8157,8159,8161,8163,8165,8167,8169,8171,8173,8175,8177,8179,8181,8183,8185],{"class":639,"line":632},[637,8158,781],{"class":642},[637,8160,784],{"class":646},[637,8162,813],{"class":642},[637,8164,1491],{"class":650},[637,8166,657],{"class":642},[637,8168,660],{"class":642},[637,8170,1498],{"class":642},[637,8172,1925],{"class":823},[637,8174,1503],{"class":642},[637,8176,1925],{"class":823},[637,8178,1503],{"class":642},[637,8180,1925],{"class":823},[637,8182,1513],{"class":642},[637,8184,660],{"class":642},[637,8186,787],{"class":642},[637,8188,8189,8191,8193],{"class":639,"line":906},[637,8190,781],{"class":642},[637,8192,795],{"class":646},[637,8194,787],{"class":642},[637,8196,8198,8200,8202],{"class":8197,"line":916},[639,673],[637,8199,781],{"class":642},[637,8201,61],{"class":646},[637,8203,669],{"class":642},[637,8205,8206,8208],{"class":639,"line":2695},[637,8207,857],{"class":642},[637,8209,5311],{"class":646},[637,8211,8212,8215,8217,8219,8221,8224,8226,8229,8232,8235],{"class":639,"line":2704},[637,8213,8214],{"class":676}," v-for",[637,8216,657],{"class":642},[637,8218,660],{"class":642},[637,8220,2509],{"class":642},[637,8222,8223],{"class":683},"pos",[637,8225,1503],{"class":642},[637,8227,8228],{"class":683},"index",[637,8230,8231],{"class":642},") in ",[637,8233,8234],{"class":683},"positions",[637,8236,3224],{"class":642},[637,8238,8239,8242,8245,8247,8249,8251],{"class":639,"line":2738},[637,8240,8241],{"class":642}," :",[637,8243,8244],{"class":650},"key",[637,8246,657],{"class":642},[637,8248,660],{"class":642},[637,8250,8228],{"class":683},[637,8252,3224],{"class":642},[637,8254,8255,8257,8259,8261,8263,8265],{"class":639,"line":2747},[637,8256,8241],{"class":642},[637,8258,1491],{"class":650},[637,8260,657],{"class":642},[637,8262,660],{"class":642},[637,8264,8223],{"class":683},[637,8266,3224],{"class":642},[637,8268,8269,8271,8273,8275,8277,8279,8282,8284,8287,8289],{"class":639,"line":2756},[637,8270,8241],{"class":642},[637,8272,2021],{"class":650},[637,8274,657],{"class":642},[637,8276,660],{"class":642},[637,8278,1498],{"class":642},[637,8280,8281],{"class":683},"geom",[637,8283,1503],{"class":642},[637,8285,8286],{"class":683},"mat",[637,8288,1513],{"class":642},[637,8290,3224],{"class":642},[637,8292,8293],{"class":639,"line":2765},[637,8294,8295],{"class":642}," \u002F>\n",[637,8297,8299,8301,8303],{"class":8298,"line":2787},[639,673],[637,8300,899],{"class":642},[637,8302,61],{"class":646},[637,8304,669],{"class":642},[637,8306,8307,8309,8312,8314,8316,8318,8320,8322,8324,8326,8328,8330,8332],{"class":639,"line":2838},[637,8308,781],{"class":642},[637,8310,8311],{"class":646},"TresGridHelper",[637,8313,813],{"class":642},[637,8315,2021],{"class":650},[637,8317,657],{"class":642},[637,8319,660],{"class":642},[637,8321,1498],{"class":642},[637,8323,1925],{"class":823},[637,8325,1503],{"class":642},[637,8327,1925],{"class":823},[637,8329,1513],{"class":642},[637,8331,660],{"class":642},[637,8333,787],{"class":642},[637,8335,8336,8338,8340],{"class":639,"line":2847},[637,8337,909],{"class":642},[637,8339,761],{"class":646},[637,8341,669],{"class":642},[637,8343,8344,8346,8348],{"class":639,"line":2856},[637,8345,732],{"class":642},[637,8347,750],{"class":646},[637,8349,669],{"class":642},[504,8351,926],{"id":925},[931,8353,8354,8363],{},[934,8355,8356],{},[937,8357,8358,8361],{},[940,8359,8360],{"align":1001},"Name",[940,8362,945],{"align":1001},[950,8364,8365,8459],{},[937,8366,8367,8372],{},[955,8368,8369],{"align":1001},[1705,8370,8371],{},"into",[955,8373,962,8374,8376,8377,8451,8453,8454,8456],{"align":1001},[618,8375,8371],{}," is:",[2285,8378,8379,8388,8396,8404,8412,8423,8430],{},[2288,8380,8381,8382,8384,8385,8387],{},"omitted or explicitly ",[618,8383,1183],{},": position\u002Fscale children to fit into a 1 × 1 × 1 ",[618,8386,7841],{}," at world origin.",[2288,8389,8390,8392,8393,8395],{},[618,8391,3749],{},": turn off ",[618,8394,7834],{},"; reset scale\u002Fposition of children.",[2288,8397,8398,8400,8401,1150],{},[618,8399,5564],{},": convert argument to ",[618,8402,8403],{},"Vector3(number, number, number)",[2288,8405,8406,8400,8409,1150],{},[618,8407,8408],{},"[number, number, number]",[618,8410,8411],{},"Vector3",[2288,8413,8414,8416,8417,8419,8420,8422],{},[618,8415,8411],{},": position\u002Fscale children to fit inside a ",[618,8418,7841],{}," of size ",[618,8421,8411],{}," at target objects' cumulative center.",[2288,8424,8425,8427,8428,1150],{},[618,8426,7841],{},": position\u002Fscale children to fit inside ",[618,8429,7841],{},[2288,8431,8432,8434,8435,8437,8438,8437,8445,8447,8448,8450],{},[618,8433,7845],{},": position\u002Fscale children to fit inside calculated ",[618,8436,7841],{},". ",[1144,8439,1142,8442],{"href":8440,"rel":8441},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmath\u002FBox3.setFromObject",[1148],[618,8443,8444],{},"THREE.Box3.setFromObject",[618,8446,7834],{}," must not contain the ",[618,8449,7845],{}," and vice-versa.",[7778,8452],{},"default:",[7778,8455],{},[618,8457,8458],{},"new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))",[937,8460,8461,8465],{},[955,8462,8463],{"align":1001},[1705,8464,1139],{},[955,8466,8467,8475,8477,8453,8479,8481],{"align":1001},[1144,8468,1142,8470,8472,8473],{"href":1146,"rel":8469},[1148],[618,8471,1139],{}," argument in ",[618,8474,8444],{},[7778,8476],{},[7778,8478],{},[7778,8480],{},[618,8482,975],{},[1331,8484,8485],{},"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":576,"searchDepth":577,"depth":578,"links":8487},[8488,8489],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Uniformly scale and position children to fit into a defined space.",{},{"title":61,"description":8490},"tH6jw7YAXoAU7p9igc7yqRqMHzbHPTChNczZPQOqacI",{"id":8495,"title":65,"body":8496,"description":9744,"extension":591,"links":592,"meta":9745,"navigation":594,"path":66,"seo":9746,"stem":67,"__hash__":9747},"docs\u002F2.api\u002F1.abstractions\u002Finstances.md",{"type":501,"value":8497,"toc":9730},[8498,8503,8525,8542,8544,8982,8994,8998,9010,9078,9082,9085,9142,9146,9149,9162,9165,9169,9172,9247,9251,9266,9336,9364,9371,9375,9384,9434,9437,9441,9444,9462,9468,9471,9511,9527,9529,9532,9618,9627,9629,9708,9718,9727],[608,8499,8500],{},[8501,8502],"abstractions-instances",{},[614,8504,8505,8506,8509,8510,3156,8513,8516,8517,8520,8521,8524],{},"Rendering the same mesh many times is one drawcall per copy, and drawcalls are what a scene runs\nout of first. ",[618,8507,8508],{},"\u003CInstances \u002F>"," owns a single ",[618,8511,8512],{},"THREE.InstancedMesh",[618,8514,8515],{},"\u003CInstance \u002F>"," is a\nplaceholder that registers itself with it, so a ",[618,8518,8519],{},"v-for"," of a thousand nodes costs ",[1705,8522,8523],{},"one"," drawcall.",[614,8526,8527,8528,8530,8531,8533,8534,8537,8538,8541],{},"An ",[618,8529,8515],{}," behaves like any other node in the graph: give it ",[618,8532,1491],{},", nest it under a\ngroup, animate that group, toggle it with ",[618,8535,8536],{},"v-if",", listen for ",[618,8539,8540],{},"@click"," on one of them.",[504,8543,15],{"id":624},[626,8545,8548],{"className":628,"code":8546,"highlights":8547,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Instance, Instances } from '@tresjs\u002Fcientos'\nimport { BoxGeometry, MeshStandardMaterial } from 'three'\n\nconst geometry = new BoxGeometry(0.35, 0.35, 0.35)\nconst material = new MeshStandardMaterial()\n\nconst cubes = Array.from({ length: 900 }, (_, i) => [i % 30 - 15, 0, Math.floor(i \u002F 30) - 15])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[14, 10, 14]\" \u002F>\n \u003CInstances :geometry=\"geometry\" :material=\"material\">\n \u003CInstance\n v-for=\"(position, i) in cubes\"\n :key=\"i\"\n :position=\"position\"\n color=\"#38bdf8\"\n \u002F>\n \u003C\u002FInstances>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,854,876,886,632,906,916,2695],[618,8549,8550,8570,8588,8613,8636,8640,8669,8684,8688,8781,8789,8793,8801,8809,8843,8875,8883,8908,8923,8938,8953,8958,8966,8974],{"__ignoreMap":576},[637,8551,8552,8554,8556,8558,8560,8562,8564,8566,8568],{"class":639,"line":577},[637,8553,643],{"class":642},[637,8555,647],{"class":646},[637,8557,651],{"class":650},[637,8559,654],{"class":650},[637,8561,657],{"class":642},[637,8563,660],{"class":642},[637,8565,664],{"class":663},[637,8567,660],{"class":642},[637,8569,669],{"class":642},[637,8571,8572,8574,8576,8578,8580,8582,8584,8586],{"class":639,"line":578},[637,8573,677],{"class":676},[637,8575,680],{"class":642},[637,8577,715],{"class":683},[637,8579,693],{"class":642},[637,8581,696],{"class":676},[637,8583,699],{"class":642},[637,8585,724],{"class":663},[637,8587,705],{"class":642},[637,8589,8591,8593,8595,8598,8600,8603,8605,8607,8609,8611],{"class":8590,"line":708},[639,673],[637,8592,677],{"class":676},[637,8594,680],{"class":642},[637,8596,8597],{"class":683}," Instance",[637,8599,687],{"class":642},[637,8601,8602],{"class":683}," Instances",[637,8604,693],{"class":642},[637,8606,696],{"class":676},[637,8608,699],{"class":642},[637,8610,702],{"class":663},[637,8612,705],{"class":642},[637,8614,8615,8617,8619,8621,8623,8626,8628,8630,8632,8634],{"class":639,"line":729},[637,8616,677],{"class":676},[637,8618,680],{"class":642},[637,8620,7930],{"class":683},[637,8622,687],{"class":642},[637,8624,8625],{"class":683}," MeshStandardMaterial",[637,8627,693],{"class":642},[637,8629,696],{"class":676},[637,8631,699],{"class":642},[637,8633,4799],{"class":663},[637,8635,705],{"class":642},[637,8637,8638],{"class":639,"line":739},[637,8639,742],{"emptyLinePlaceholder":594},[637,8641,8642,8644,8647,8649,8651,8653,8655,8658,8660,8663,8665,8667],{"class":639,"line":745},[637,8643,2487],{"class":650},[637,8645,8646],{"class":683}," geometry ",[637,8648,657],{"class":642},[637,8650,8096],{"class":642},[637,8652,7930],{"class":2506},[637,8654,2509],{"class":683},[637,8656,8657],{"class":823},"0.35",[637,8659,687],{"class":642},[637,8661,8662],{"class":823}," 0.35",[637,8664,687],{"class":642},[637,8666,8662],{"class":823},[637,8668,2520],{"class":683},[637,8670,8671,8673,8676,8678,8680,8682],{"class":639,"line":755},[637,8672,2487],{"class":650},[637,8674,8675],{"class":683}," material ",[637,8677,657],{"class":642},[637,8679,8096],{"class":642},[637,8681,8625],{"class":2506},[637,8683,6744],{"class":683},[637,8685,8686],{"class":639,"line":778},[637,8687,742],{"emptyLinePlaceholder":594},[637,8689,8690,8692,8695,8697,8700,8702,8705,8707,8710,8713,8715,8718,8721,8723,8726,8728,8731,8733,8735,8738,8741,8744,8747,8750,8752,8754,8756,8759,8761,8764,8767,8770,8772,8774,8777,8779],{"class":639,"line":790},[637,8691,2487],{"class":650},[637,8693,8694],{"class":683}," cubes ",[637,8696,657],{"class":642},[637,8698,8699],{"class":683}," Array",[637,8701,1150],{"class":642},[637,8703,8704],{"class":2506},"from",[637,8706,2509],{"class":683},[637,8708,8709],{"class":642},"{",[637,8711,8712],{"class":646}," length",[637,8714,1222],{"class":642},[637,8716,8717],{"class":823}," 900",[637,8719,8720],{"class":642}," },",[637,8722,3167],{"class":642},[637,8724,8725],{"class":7047},"_",[637,8727,687],{"class":642},[637,8729,8730],{"class":7047}," i",[637,8732,3433],{"class":642},[637,8734,3770],{"class":650},[637,8736,8737],{"class":683}," [i ",[637,8739,8740],{"class":642},"%",[637,8742,8743],{"class":823}," 30",[637,8745,8746],{"class":642}," -",[637,8748,8749],{"class":823}," 15",[637,8751,687],{"class":642},[637,8753,2577],{"class":823},[637,8755,687],{"class":642},[637,8757,8758],{"class":683}," Math",[637,8760,1150],{"class":642},[637,8762,8763],{"class":2506},"floor",[637,8765,8766],{"class":683},"(i ",[637,8768,8769],{"class":642},"\u002F",[637,8771,8743],{"class":823},[637,8773,4907],{"class":683},[637,8775,8776],{"class":642},"-",[637,8778,8749],{"class":823},[637,8780,2672],{"class":683},[637,8782,8783,8785,8787],{"class":639,"line":800},[637,8784,732],{"class":642},[637,8786,647],{"class":646},[637,8788,669],{"class":642},[637,8790,8791],{"class":639,"line":805},[637,8792,742],{"emptyLinePlaceholder":594},[637,8794,8795,8797,8799],{"class":639,"line":831},[637,8796,643],{"class":642},[637,8798,750],{"class":646},[637,8800,669],{"class":642},[637,8802,8803,8805,8807],{"class":639,"line":631},[637,8804,758],{"class":642},[637,8806,761],{"class":646},[637,8808,669],{"class":642},[637,8810,8812,8814,8816,8818,8820,8822,8824,8826,8829,8831,8833,8835,8837,8839,8841],{"class":8811,"line":854},[639,673],[637,8813,781],{"class":642},[637,8815,784],{"class":646},[637,8817,813],{"class":642},[637,8819,1491],{"class":650},[637,8821,657],{"class":642},[637,8823,660],{"class":642},[637,8825,1498],{"class":642},[637,8827,8828],{"class":823},"14",[637,8830,1503],{"class":642},[637,8832,1510],{"class":823},[637,8834,1503],{"class":642},[637,8836,8828],{"class":823},[637,8838,1513],{"class":642},[637,8840,660],{"class":642},[637,8842,787],{"class":642},[637,8844,8845,8847,8849,8851,8853,8855,8857,8859,8861,8863,8865,8867,8869,8871,8873],{"class":639,"line":865},[637,8846,781],{"class":642},[637,8848,65],{"class":646},[637,8850,813],{"class":642},[637,8852,5333],{"class":650},[637,8854,657],{"class":642},[637,8856,660],{"class":642},[637,8858,5333],{"class":683},[637,8860,660],{"class":642},[637,8862,813],{"class":642},[637,8864,5403],{"class":650},[637,8866,657],{"class":642},[637,8868,660],{"class":642},[637,8870,5403],{"class":683},[637,8872,660],{"class":642},[637,8874,669],{"class":642},[637,8876,8878,8880],{"class":8877,"line":876},[639,673],[637,8879,857],{"class":642},[637,8881,8882],{"class":646},"Instance\n",[637,8884,8886,8888,8890,8892,8894,8896,8898,8901,8903,8906],{"class":8885,"line":886},[639,673],[637,8887,8214],{"class":676},[637,8889,657],{"class":642},[637,8891,660],{"class":642},[637,8893,2509],{"class":642},[637,8895,1491],{"class":683},[637,8897,1503],{"class":642},[637,8899,8900],{"class":683},"i",[637,8902,8231],{"class":642},[637,8904,8905],{"class":683},"cubes",[637,8907,3224],{"class":642},[637,8909,8911,8913,8915,8917,8919,8921],{"class":8910,"line":632},[639,673],[637,8912,8241],{"class":642},[637,8914,8244],{"class":650},[637,8916,657],{"class":642},[637,8918,660],{"class":642},[637,8920,8900],{"class":683},[637,8922,3224],{"class":642},[637,8924,8926,8928,8930,8932,8934,8936],{"class":8925,"line":906},[639,673],[637,8927,8241],{"class":642},[637,8929,1491],{"class":650},[637,8931,657],{"class":642},[637,8933,660],{"class":642},[637,8935,1491],{"class":683},[637,8937,3224],{"class":642},[637,8939,8941,8944,8946,8948,8951],{"class":8940,"line":916},[639,673],[637,8942,8943],{"class":650}," color",[637,8945,657],{"class":642},[637,8947,660],{"class":642},[637,8949,8950],{"class":663},"#38bdf8",[637,8952,3224],{"class":642},[637,8954,8956],{"class":8955,"line":2695},[639,673],[637,8957,8295],{"class":642},[637,8959,8960,8962,8964],{"class":639,"line":2704},[637,8961,899],{"class":642},[637,8963,65],{"class":646},[637,8965,669],{"class":642},[637,8967,8968,8970,8972],{"class":639,"line":2738},[637,8969,909],{"class":642},[637,8971,761],{"class":646},[637,8973,669],{"class":642},[637,8975,8976,8978,8980],{"class":639,"line":2747},[637,8977,732],{"class":642},[637,8979,750],{"class":646},[637,8981,669],{"class":642},[2078,8983,8984],{},[614,8985,2867,8986,3156,8988,8990,8991,8993],{},[618,8987,5333],{},[618,8989,5403],{}," are yours: ",[618,8992,8508],{}," never disposes them.",[504,8995,8997],{"id":8996},"per-instance-color","Per-instance color",[614,8999,9000,9002,9003,9005,9006,9009],{},[618,9001,8515],{}," takes a ",[618,9004,7770],{}," prop, written into the batch's ",[618,9007,9008],{},"instanceColor"," buffer. The buffer is\nonly allocated once at least one instance asks for a color, so an uncolored batch pays nothing.",[626,9011,9013],{"className":628,"code":9012,"language":633,"meta":576,"style":576},"\u003CInstance :position=\"[0, 0, 0]\" :color=\"isSelected ? '#f97316' : '#38bdf8'\" \u002F>\n",[618,9014,9015],{"__ignoreMap":576},[637,9016,9017,9019,9022,9024,9026,9028,9030,9032,9034,9036,9038,9040,9042,9044,9046,9048,9050,9052,9054,9057,9060,9062,9065,9067,9069,9071,9073,9076],{"class":639,"line":577},[637,9018,643],{"class":642},[637,9020,9021],{"class":646},"Instance",[637,9023,813],{"class":642},[637,9025,1491],{"class":650},[637,9027,657],{"class":642},[637,9029,660],{"class":642},[637,9031,1498],{"class":683},[637,9033,969],{"class":823},[637,9035,687],{"class":642},[637,9037,2577],{"class":823},[637,9039,687],{"class":642},[637,9041,2577],{"class":823},[637,9043,1513],{"class":683},[637,9045,660],{"class":642},[637,9047,813],{"class":642},[637,9049,7770],{"class":650},[637,9051,657],{"class":642},[637,9053,660],{"class":642},[637,9055,9056],{"class":683},"isSelected ",[637,9058,9059],{"class":642},"?",[637,9061,699],{"class":642},[637,9063,9064],{"class":663},"#f97316",[637,9066,2512],{"class":642},[637,9068,813],{"class":642},[637,9070,699],{"class":642},[637,9072,8950],{"class":663},[637,9074,9075],{"class":642},"'\"",[637,9077,787],{"class":642},[504,9079,9081],{"id":9080},"pointer-events","Pointer events",[614,9083,9084],{},"Each placeholder raycasts against the batch's geometry at its own transform, so pointer events land\non the single instance you clicked, not on the whole batch.",[626,9086,9088],{"className":628,"code":9087,"language":633,"meta":576,"style":576},"\u003CInstance :position=\"position\" @click=\"select(id)\" @pointer-enter=\"hover(id)\" \u002F>\n",[618,9089,9090],{"__ignoreMap":576},[637,9091,9092,9094,9096,9098,9100,9102,9104,9106,9108,9110,9113,9115,9117,9119,9122,9124,9126,9129,9131,9133,9136,9138,9140],{"class":639,"line":577},[637,9093,643],{"class":642},[637,9095,9021],{"class":646},[637,9097,813],{"class":642},[637,9099,1491],{"class":650},[637,9101,657],{"class":642},[637,9103,660],{"class":642},[637,9105,1491],{"class":683},[637,9107,660],{"class":642},[637,9109,4417],{"class":642},[637,9111,9112],{"class":650},"click",[637,9114,657],{"class":642},[637,9116,660],{"class":642},[637,9118,6046],{"class":2506},[637,9120,9121],{"class":683},"(id)",[637,9123,660],{"class":642},[637,9125,4417],{"class":642},[637,9127,9128],{"class":650},"pointer-enter",[637,9130,657],{"class":642},[637,9132,660],{"class":642},[637,9134,9135],{"class":2506},"hover",[637,9137,9121],{"class":683},[637,9139,660],{"class":642},[637,9141,787],{"class":642},[504,9143,9145],{"id":9144},"hiding-instances","Hiding instances",[614,9147,9148],{},"Two ways, and they differ in what they cost:",[2285,9150,9151,9157],{},[2288,9152,9153,9156],{},[618,9154,9155],{},":visible=\"false\""," keeps the instance registered but drops it from the batch for that frame.\nUse it for something that toggles often.",[2288,9158,9159,9161],{},[618,9160,8536],{}," unmounts the placeholder and unregisters it. Use it when the node is really gone.",[614,9163,9164],{},"Either way the remaining instances are packed densely, so hidden ones cost nothing on the GPU.",[504,9166,9168],{"id":9167},"nesting-and-transforms","Nesting and transforms",[614,9170,9171],{},"Instances read their world matrix, so parent transforms work exactly as you would expect:",[626,9173,9175],{"className":628,"code":9174,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n \u003CLevioso>\n \u003CTresGroup :position=\"[0, 3, 0]\">\n \u003C!-- floats with the group, still the same drawcall -->\n \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n \u003C\u002FTresGroup>\n \u003C\u002FLevioso>\n\u003C\u002FInstances>\n",[618,9176,9177,9209,9214,9219,9224,9229,9234,9239],{"__ignoreMap":576},[637,9178,9179,9181,9183,9185,9187,9189,9191,9193,9195,9197,9199,9201,9203,9205,9207],{"class":639,"line":577},[637,9180,643],{"class":642},[637,9182,65],{"class":646},[637,9184,813],{"class":642},[637,9186,5333],{"class":650},[637,9188,657],{"class":642},[637,9190,660],{"class":642},[637,9192,5333],{"class":683},[637,9194,660],{"class":642},[637,9196,813],{"class":642},[637,9198,5403],{"class":650},[637,9200,657],{"class":642},[637,9202,660],{"class":642},[637,9204,5403],{"class":683},[637,9206,660],{"class":642},[637,9208,669],{"class":642},[637,9210,9211],{"class":639,"line":578},[637,9212,9213],{"class":683}," \u003CLevioso>\n",[637,9215,9216],{"class":639,"line":708},[637,9217,9218],{"class":683}," \u003CTresGroup :position=\"[0, 3, 0]\">\n",[637,9220,9221],{"class":639,"line":729},[637,9222,9223],{"class":683}," \u003C!-- floats with the group, still the same drawcall -->\n",[637,9225,9226],{"class":639,"line":739},[637,9227,9228],{"class":683}," \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n",[637,9230,9231],{"class":639,"line":745},[637,9232,9233],{"class":683}," \u003C\u002FTresGroup>\n",[637,9235,9236],{"class":639,"line":755},[637,9237,9238],{"class":683}," \u003C\u002FLevioso>\n",[637,9240,9241,9243,9245],{"class":639,"line":778},[637,9242,732],{"class":642},[637,9244,65],{"class":646},[637,9246,669],{"class":642},[504,9248,9250],{"id":9249},"animating-instances","Animating instances",[614,9252,9253,9254,9257,9258,9260,9261,9002,9263,9265],{},"Anything that moves an instance's node moves it in the batch, because the batch re-reads world\nmatrices every frame. An ",[618,9255,9256],{},"AnimationMixer"," included: a mixer resolves its tracks by ",[618,9259,7845],{},"\nname, and an ",[618,9262,8515],{},[618,9264,3068],{}," like any other node, so a clip can drive one directly.",[626,9267,9269],{"className":628,"code":9268,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\">\n \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n \u003CTresGroup name=\"Rotor\">\n \u003CInstance name=\"Blade\" \u002F>\n \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n \u003C\u002FTresGroup>\n\u003C\u002FInstances>\n",[618,9270,9271,9303,9308,9313,9318,9323,9328],{"__ignoreMap":576},[637,9272,9273,9275,9277,9279,9281,9283,9285,9287,9289,9291,9293,9295,9297,9299,9301],{"class":639,"line":577},[637,9274,643],{"class":642},[637,9276,65],{"class":646},[637,9278,813],{"class":642},[637,9280,5333],{"class":650},[637,9282,657],{"class":642},[637,9284,660],{"class":642},[637,9286,5333],{"class":683},[637,9288,660],{"class":642},[637,9290,813],{"class":642},[637,9292,5403],{"class":650},[637,9294,657],{"class":642},[637,9296,660],{"class":642},[637,9298,5403],{"class":683},[637,9300,660],{"class":642},[637,9302,669],{"class":642},[637,9304,9305],{"class":639,"line":578},[637,9306,9307],{"class":683}," \u003C!-- \"Blade\" is driven by the clip; everything under \"Rotor\" rides along with it -->\n",[637,9309,9310],{"class":639,"line":708},[637,9311,9312],{"class":683}," \u003CTresGroup name=\"Rotor\">\n",[637,9314,9315],{"class":639,"line":729},[637,9316,9317],{"class":683}," \u003CInstance name=\"Blade\" \u002F>\n",[637,9319,9320],{"class":639,"line":739},[637,9321,9322],{"class":683}," \u003CInstance v-for=\"i in 12\" :key=\"i\" :position=\"ringPosition(i)\" \u002F>\n",[637,9324,9325],{"class":639,"line":745},[637,9326,9327],{"class":683}," \u003C\u002FTresGroup>\n",[637,9329,9330,9332,9334],{"class":639,"line":755},[637,9331,732],{"class":642},[637,9333,65],{"class":646},[637,9335,669],{"class":642},[2078,9337,9338],{},[614,9339,9340,9341,1503,9344,3156,9346,9349,9350,9352,9353,9356,9357,9359,9360,9363],{},"Inside a ",[618,9342,9343],{},"\u003CMerged \u002F>",[618,9345,3068],{},[618,9347,9348],{},"batch"," are different things: ",[618,9351,9348],{}," picks which\n",[618,9354,9355],{},"InstancedMesh"," to join, ",[618,9358,3068],{}," is what this node is called. ",[618,9361,9362],{},"tres gltf --instance"," emits both,\nbecause a batch is keyed after its first mesh and every copy in it shares that key.",[614,9365,9366,9367,9370],{},"A track that finds no node is not silent: three logs\n",[618,9368,9369],{},"THREE.PropertyBinding: No target node found for track: \u003Cname>.position."," once for it.",[504,9372,9374],{"id":9373},"limit-and-growth","Limit and growth",[614,9376,9377,9380,9381,9383],{},[618,9378,9379],{},"limit"," is the initial buffer allocation, not a cap. If more instances register than it allows, the\nbatch reallocates its buffers (doubling), keeps every instance, and warns once in dev telling you\nwhich ",[618,9382,9379],{}," would have avoided the reallocation.",[626,9385,9387],{"className":628,"code":9386,"language":633,"meta":576,"style":576},"\u003CInstances :geometry=\"geometry\" :material=\"material\" :limit=\"5000\">\n",[618,9388,9389],{"__ignoreMap":576},[637,9390,9391,9393,9395,9397,9399,9401,9403,9405,9407,9409,9411,9413,9415,9417,9419,9421,9423,9425,9427,9430,9432],{"class":639,"line":577},[637,9392,643],{"class":642},[637,9394,65],{"class":646},[637,9396,813],{"class":642},[637,9398,5333],{"class":650},[637,9400,657],{"class":642},[637,9402,660],{"class":642},[637,9404,5333],{"class":683},[637,9406,660],{"class":642},[637,9408,813],{"class":642},[637,9410,5403],{"class":650},[637,9412,657],{"class":642},[637,9414,660],{"class":642},[637,9416,5403],{"class":683},[637,9418,660],{"class":642},[637,9420,813],{"class":642},[637,9422,9379],{"class":650},[637,9424,657],{"class":642},[637,9426,660],{"class":642},[637,9428,9429],{"class":823},"5000",[637,9431,660],{"class":642},[637,9433,669],{"class":642},[614,9435,9436],{},"Set it close to your real maximum when you know it: reallocating mid-scene is avoidable work.",[504,9438,9440],{"id":9439},"why-every-instance-shows-up-in-the-scene-graph","Why every instance shows up in the scene graph",[614,9442,9443],{},"Open the devtools on a batch of 500 and you will see 500 nodes. That is expected, not a leak.",[614,9445,9446,9447,9449,9450,9452,9453,9455,9456,9458,9459,9461],{},"Each ",[618,9448,8515],{}," is a real ",[618,9451,7845],{}," in the graph. That is precisely what buys you the ergonomics:\n",[618,9454,1491],{}," is just a transform, nesting under a group works because the group is its parent, ",[618,9457,8536],{},"\nworks because unmounting a node unregisters it, and ",[618,9460,8540],{}," works because there is a node to hit.\nThe batch reads each node's world matrix every frame and packs it into the instance buffer.",[614,9463,9464,9465,9467],{},"What those nodes do ",[1705,9466,6550],{}," do is render. They carry no geometry and never enter the render list, so\n500 of them still cost one drawcall. What you are seeing in the graph is bookkeeping, not draw work.",[614,9469,9470],{},"The costs that are real:",[931,9472,9473,9482],{},[934,9474,9475],{},[937,9476,9477,9479],{},[940,9478],{"align":1001},[940,9480,9481],{"align":1001},"Cost",[950,9483,9484,9492,9500],{},[937,9485,9486,9489],{},[955,9487,9488],{"align":1001},"Per frame",[955,9490,9491],{"align":1001},"One world-matrix update and one matrix multiply per instance.",[937,9493,9494,9497],{},[955,9495,9496],{"align":1001},"On pointer move",[955,9498,9499],{"align":1001},"A raycast per instance, but only for instances that have a pointer handler (or inherit one from an ancestor). A scatter with no handlers costs nothing.",[937,9501,9502,9505],{},[955,9503,9504],{"align":1001},"Memory",[955,9506,9507,9508,9510],{"align":1001},"One bare ",[618,9509,7845],{}," per instance.",[2078,9512,9513],{},[614,9514,9515,9516,9519,9520,9523,9524,9526],{},"If you have tens of thousands of instances that never move, never toggle and never need picking, a\n",[618,9517,9518],{},"TresInstancedMesh"," whose ",[618,9521,9522],{},"instanceMatrix"," you fill yourself will always be cheaper. ",[618,9525,8508],{},"\ntrades that per-node overhead for being able to write instances as ordinary Vue nodes.",[504,9528,926],{"id":925},[4215,9530,65],{"id":9531},"instances",[931,9533,9534,9544],{},[934,9535,9536],{},[937,9537,9538,9540,9542],{},[940,9539,942],{"align":1001},[940,9541,945],{"align":1001},[940,9543,948],{},[950,9545,9546,9560,9573,9587,9602],{},[937,9547,9548,9552,9555],{},[955,9549,9550],{"align":1001},[618,9551,5333],{},[955,9553,9554],{"align":1001},"Geometry shared by every instance. Not disposed by the component.",[955,9556,9557],{},[1709,9558,9559],{},"required",[937,9561,9562,9566,9569],{},[955,9563,9564],{"align":1001},[618,9565,5403],{},[955,9567,9568],{"align":1001},"Material shared by every instance. Not disposed by the component.",[955,9570,9571],{},[1709,9572,9559],{},[937,9574,9575,9579,9582],{},[955,9576,9577],{"align":1001},[618,9578,9379],{},[955,9580,9581],{"align":1001},"Initial buffer allocation. Grows automatically when exceeded.",[955,9583,9584],{},[618,9585,9586],{},"1000",[937,9588,9589,9593,9598],{},[955,9590,9591],{"align":1001},[618,9592,9348],{},[955,9594,9595,9596,1150],{"align":1001},"Key this batch registers under with an ancestor ",[618,9597,9343],{},[955,9599,9600],{},[618,9601,1183],{},[937,9603,9604,9608,9614],{},[955,9605,9606],{"align":1001},[618,9607,3068],{},[955,9609,9610,9611,9613],{"align":1001},"Name for the ",[618,9612,9355],{}," itself.",[955,9615,9616],{},[618,9617,1183],{},[614,9619,9620,9621,9623,9624,1150],{},"Exposes the underlying ",[618,9622,8512],{}," through ",[618,9625,9626],{},"instance",[4215,9628,9021],{"id":9626},[931,9630,9631,9641],{},[934,9632,9633],{},[937,9634,9635,9637,9639],{},[940,9636,942],{"align":1001},[940,9638,945],{"align":1001},[940,9640,948],{},[950,9642,9643,9662,9678,9693],{},[937,9644,9645,9649,9658],{},[955,9646,9647],{"align":1001},[618,9648,9348],{},[955,9650,9651,9652,9655,9656,1150],{"align":1001},"Batch to join, by its key in ",[618,9653,9654],{},"\u003CMerged :meshes \u002F>",". Omit for the nearest ",[618,9657,8508],{},[955,9659,9660],{},[618,9661,1183],{},[937,9663,9664,9668,9674],{},[955,9665,9666],{"align":1001},[618,9667,3068],{},[955,9669,9670,9671,9673],{"align":1001},"Name for this instance's node, so a mixer or ",[618,9672,4895],{}," can find it.",[955,9675,9676],{},[618,9677,1183],{},[937,9679,9680,9684,9689],{},[955,9681,9682],{"align":1001},[618,9683,7770],{},[955,9685,9686,9687,1150],{"align":1001},"Per-instance color, written into ",[618,9688,9008],{},[955,9690,9691],{},[618,9692,1183],{},[937,9694,9695,9699,9704],{},[955,9696,9697],{"align":1001},[618,9698,7332],{},[955,9700,9701,9703],{"align":1001},[618,9702,975],{}," drops the instance from the batch without unregistering it.",[955,9705,9706],{},[618,9707,965],{},[614,9709,9710,9711,1503,9713,1503,9715,9717],{},"Transform props (",[618,9712,1491],{},[618,9714,5838],{},[618,9716,816],{},", …) and pointer events behave like any other node.",[9719,9720,9721],"read-more",{"to":78},[614,9722,9723,9724,9726],{},"Instancing several meshes at once, for example every node of a glTF model, is what ",[618,9725,9343],{}," is for.",[1331,9728,9729],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html 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 .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);}",{"title":576,"searchDepth":577,"depth":578,"links":9731},[9732,9733,9734,9735,9736,9737,9738,9739,9740],{"id":624,"depth":578,"text":15},{"id":8996,"depth":578,"text":8997},{"id":9080,"depth":578,"text":9081},{"id":9144,"depth":578,"text":9145},{"id":9167,"depth":578,"text":9168},{"id":9249,"depth":578,"text":9250},{"id":9373,"depth":578,"text":9374},{"id":9439,"depth":578,"text":9440},{"id":925,"depth":578,"text":926,"children":9741},[9742,9743],{"id":9531,"depth":708,"text":65},{"id":9626,"depth":708,"text":9021},"Draw thousands of copies of one mesh in a single drawcall, declaratively.",{},{"title":65,"description":9744},"oen2skMgwR0U-7YShh5_abvUd_4Azzt9H53lH2LVISk",{"id":9749,"title":69,"body":9750,"description":10197,"extension":591,"links":592,"meta":10198,"navigation":594,"path":70,"seo":10199,"stem":71,"__hash__":10200},"docs\u002F2.api\u002F1.abstractions\u002Flevioso.md",{"type":501,"value":9751,"toc":10193},[9752,9757,9764,9773,9775,10119,10121,10191],[608,9753,9754],{},[9755,9756],"abstractions-levioso",{},[614,9758,9759],{},[9760,9761],"img",{"alt":9762,"src":9763},"Leviosa","https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FHaCFT5ghY6L1m\u002Fgiphy.gif",[614,9765,2867,9766,9768,9769,9772],{},[618,9767,7526],{}," package provides a ",[618,9770,9771],{},"\u003CLevioso \u002F>"," wrapper that makes its content … float, just like Magic 🪄✨",[504,9774,15],{"id":624},[626,9776,9779],{"className":628,"code":9777,"highlights":9778,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs\u002Fcore\";\nimport { Levioso, OrbitControls, Box } from \"@tresjs\u002Fcientos\";\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :clear-color=\"0x82dbc5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" :look-at=\"[0, 0, 0]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CLevioso :speed=\"4\">\n \u003CBox \u002F>\n \u003C\u002FLevioso>\n \u003CTresAmbientLight :intensity=\"1\" \u002F>\n \u003CTresDirectionalLight :intensity=\"1\" :position=\"[2, 2, 2]\" \u002F>\n \u003CTresGridHelper :position=\"[0, -1, 0]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[708,805,631],[618,9780,9781,9801,9823,9853,9857,9865,9869,9877,9899,9956,9964,9987,9995,10004,10025,10070,10103,10111],{"__ignoreMap":576},[637,9782,9783,9785,9787,9789,9791,9793,9795,9797,9799],{"class":639,"line":577},[637,9784,643],{"class":642},[637,9786,647],{"class":646},[637,9788,651],{"class":650},[637,9790,654],{"class":650},[637,9792,657],{"class":642},[637,9794,660],{"class":642},[637,9796,664],{"class":663},[637,9798,660],{"class":642},[637,9800,669],{"class":642},[637,9802,9803,9805,9807,9809,9811,9813,9816,9818,9820],{"class":639,"line":578},[637,9804,677],{"class":676},[637,9806,680],{"class":642},[637,9808,715],{"class":683},[637,9810,693],{"class":642},[637,9812,696],{"class":676},[637,9814,9815],{"class":642}," \"",[637,9817,724],{"class":663},[637,9819,660],{"class":642},[637,9821,9822],{"class":642},";\n",[637,9824,9826,9828,9830,9833,9835,9837,9839,9841,9843,9845,9847,9849,9851],{"class":9825,"line":708},[639,673],[637,9827,677],{"class":676},[637,9829,680],{"class":642},[637,9831,9832],{"class":683}," Levioso",[637,9834,687],{"class":642},[637,9836,690],{"class":683},[637,9838,687],{"class":642},[637,9840,1401],{"class":683},[637,9842,693],{"class":642},[637,9844,696],{"class":676},[637,9846,9815],{"class":642},[637,9848,702],{"class":663},[637,9850,660],{"class":642},[637,9852,9822],{"class":642},[637,9854,9855],{"class":639,"line":729},[637,9856,742],{"emptyLinePlaceholder":594},[637,9858,9859,9861,9863],{"class":639,"line":739},[637,9860,732],{"class":642},[637,9862,647],{"class":646},[637,9864,669],{"class":642},[637,9866,9867],{"class":639,"line":745},[637,9868,742],{"emptyLinePlaceholder":594},[637,9870,9871,9873,9875],{"class":639,"line":755},[637,9872,643],{"class":642},[637,9874,750],{"class":646},[637,9876,669],{"class":642},[637,9878,9879,9881,9883,9885,9888,9890,9892,9895,9897],{"class":639,"line":778},[637,9880,758],{"class":642},[637,9882,761],{"class":646},[637,9884,813],{"class":642},[637,9886,9887],{"class":650},"clear-color",[637,9889,657],{"class":642},[637,9891,660],{"class":642},[637,9893,9894],{"class":823},"0x82dbc5",[637,9896,660],{"class":642},[637,9898,669],{"class":642},[637,9900,9901,9903,9905,9907,9909,9911,9913,9915,9917,9919,9921,9923,9925,9927,9929,9931,9934,9936,9938,9940,9942,9944,9946,9948,9950,9952,9954],{"class":639,"line":790},[637,9902,781],{"class":642},[637,9904,784],{"class":646},[637,9906,813],{"class":642},[637,9908,1491],{"class":650},[637,9910,657],{"class":642},[637,9912,660],{"class":642},[637,9914,1498],{"class":642},[637,9916,969],{"class":823},[637,9918,1503],{"class":642},[637,9920,969],{"class":823},[637,9922,1503],{"class":642},[637,9924,7666],{"class":823},[637,9926,1513],{"class":642},[637,9928,660],{"class":642},[637,9930,813],{"class":642},[637,9932,9933],{"class":650},"look-at",[637,9935,657],{"class":642},[637,9937,660],{"class":642},[637,9939,1498],{"class":642},[637,9941,969],{"class":823},[637,9943,1503],{"class":642},[637,9945,969],{"class":823},[637,9947,1503],{"class":642},[637,9949,969],{"class":823},[637,9951,1513],{"class":642},[637,9953,660],{"class":642},[637,9955,787],{"class":642},[637,9957,9958,9960,9962],{"class":639,"line":800},[637,9959,781],{"class":642},[637,9961,795],{"class":646},[637,9963,787],{"class":642},[637,9965,9967,9969,9972,9974,9977,9979,9981,9983,9985],{"class":9966,"line":805},[639,673],[637,9968,781],{"class":642},[637,9970,9971],{"class":646},"Levioso",[637,9973,813],{"class":642},[637,9975,9976],{"class":650},"speed",[637,9978,657],{"class":642},[637,9980,660],{"class":642},[637,9982,3900],{"class":823},[637,9984,660],{"class":642},[637,9986,669],{"class":642},[637,9988,9989,9991,9993],{"class":639,"line":831},[637,9990,857],{"class":642},[637,9992,217],{"class":646},[637,9994,787],{"class":642},[637,9996,9998,10000,10002],{"class":9997,"line":631},[639,673],[637,9999,899],{"class":642},[637,10001,9971],{"class":646},[637,10003,669],{"class":642},[637,10005,10006,10008,10011,10013,10015,10017,10019,10021,10023],{"class":639,"line":854},[637,10007,781],{"class":642},[637,10009,10010],{"class":646},"TresAmbientLight",[637,10012,813],{"class":642},[637,10014,1918],{"class":650},[637,10016,657],{"class":642},[637,10018,660],{"class":642},[637,10020,1925],{"class":823},[637,10022,660],{"class":642},[637,10024,787],{"class":642},[637,10026,10027,10029,10032,10034,10036,10038,10040,10042,10044,10046,10048,10050,10052,10054,10056,10058,10060,10062,10064,10066,10068],{"class":639,"line":865},[637,10028,781],{"class":642},[637,10030,10031],{"class":646},"TresDirectionalLight",[637,10033,813],{"class":642},[637,10035,1918],{"class":650},[637,10037,657],{"class":642},[637,10039,660],{"class":642},[637,10041,1925],{"class":823},[637,10043,660],{"class":642},[637,10045,813],{"class":642},[637,10047,1491],{"class":650},[637,10049,657],{"class":642},[637,10051,660],{"class":642},[637,10053,1498],{"class":642},[637,10055,824],{"class":823},[637,10057,1503],{"class":642},[637,10059,824],{"class":823},[637,10061,1503],{"class":642},[637,10063,824],{"class":823},[637,10065,1513],{"class":642},[637,10067,660],{"class":642},[637,10069,787],{"class":642},[637,10071,10072,10074,10076,10078,10080,10082,10084,10086,10088,10091,10093,10095,10097,10099,10101],{"class":639,"line":876},[637,10073,781],{"class":642},[637,10075,8311],{"class":646},[637,10077,813],{"class":642},[637,10079,1491],{"class":650},[637,10081,657],{"class":642},[637,10083,660],{"class":642},[637,10085,1498],{"class":642},[637,10087,969],{"class":823},[637,10089,10090],{"class":642},", -",[637,10092,1925],{"class":823},[637,10094,1503],{"class":642},[637,10096,969],{"class":823},[637,10098,1513],{"class":642},[637,10100,660],{"class":642},[637,10102,787],{"class":642},[637,10104,10105,10107,10109],{"class":639,"line":886},[637,10106,909],{"class":642},[637,10108,761],{"class":646},[637,10110,669],{"class":642},[637,10112,10113,10115,10117],{"class":639,"line":632},[637,10114,732],{"class":642},[637,10116,750],{"class":646},[637,10118,669],{"class":642},[504,10120,926],{"id":925},[931,10122,10123,10133],{},[934,10124,10125],{},[937,10126,10127,10129,10131],{},[940,10128,942],{"align":1001},[940,10130,945],{"align":1001},[940,10132,948],{},[950,10134,10135,10148,10162,10176],{},[937,10136,10137,10141,10144],{},[955,10138,10139],{"align":1001},[618,10140,9976],{},[955,10142,10143],{"align":1001},"Floating speed, higher it rocks more 🤘.",[955,10145,10146],{},[618,10147,1925],{},[937,10149,10150,10155,10158],{},[955,10151,10152],{"align":1001},[618,10153,10154],{},"rotationFactor",[955,10156,10157],{"align":1001},"Factor for Euler rotation.",[955,10159,10160],{},[618,10161,1925],{},[937,10163,10164,10169,10172],{},[955,10165,10166],{"align":1001},[618,10167,10168],{},"floatFactor",[955,10170,10171],{"align":1001},"Factor for Up\u002Fdown movement.",[955,10173,10174],{},[618,10175,1925],{},[937,10177,10178,10183,10186],{},[955,10179,10180],{"align":1001},[618,10181,10182],{},"range",[955,10184,10185],{"align":1001},"Range of y-axis values the object will float within.",[955,10187,10188],{},[618,10189,10190],{},"[-0.1, 0.1]",[1331,10192,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":10194},[10195,10196],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Make content float like magic with smooth animations.",{},{"title":69,"description":10197},"VAdlRyCWTgbZPtL3_7gw5lCESxOAP-g-m4p4X69NI_4",{"id":10202,"title":73,"body":10203,"description":10887,"extension":591,"links":592,"meta":10888,"navigation":594,"path":74,"seo":10889,"stem":75,"__hash__":10890},"docs\u002F2.api\u002F1.abstractions\u002Fmask.md",{"type":501,"value":10204,"toc":10882},[10205,10210,10216,10249,10251,10756,10758,10820,10823,10830,10835,10850,10879],[608,10206,10207],{},[10208,10209],"abstractions-mask",{},[614,10211,10212,10215],{},[618,10213,10214],{},"\u003CMask\u002F>"," uses the stencil buffer to cut out areas of the screen.",[3292,10217,10218,10236],{},[614,10219,10220,10221,10224,10225,10228,10229,10232,10233,1150],{},"To use ",[618,10222,10223],{},"\u003CMask \u002F>"," you ",[1709,10226,10227],{},"must"," add ",[618,10230,10231],{},":stencil=\"true\""," to your ",[618,10234,10235],{},"\u003CTresCanvas \u002F>",[614,10237,10238,10240,10241,10248],{},[618,10239,10223],{}," relies on the ",[1144,10242,10245],{"href":10243,"rel":10244},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Frenderers\u002FWebGLRenderer",[1148],[618,10246,10247],{},"stencil buffer",". In recent versions of THREE.js, by default, the stencil buffer is not created.",[504,10250,15],{"id":624},[626,10252,10255],{"className":628,"code":10253,"highlights":10254,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Mask, OrbitControls, useMask } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :stencil=\"true\" clear-color=\"#4f4f4f\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresGroup :scale=\"2\">\n \u003CTresMesh>\n \u003CTresRingGeometry :args=\"[0.95, 1, 64]\" \u002F>\n \u003CTresMeshBasicMaterial color=\"white\" \u002F>\n \u003C\u002FTresMesh>\n \u003CMask :id=\"1\">\n \u003CTresCircleGeometry \u002F>\n \u003CTresMeshBasicMaterial color=\"#fbb03b\" \u002F>\n \u003C\u002FMask>\n \u003C\u002FTresGroup>\n\n \u003CTresMesh :position-z=\"-1\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh :position-z=\"-3\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh :position-z=\"-5\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,876,886,632,906],[618,10256,10257,10277,10306,10324,10332,10336,10344,10376,10384,10392,10396,10417,10425,10460,10478,10486,10508,10518,10538,10547,10555,10559,10582,10590,10616,10624,10628,10650,10658,10682,10690,10694,10716,10724,10732,10740,10748],{"__ignoreMap":576},[637,10258,10259,10261,10263,10265,10267,10269,10271,10273,10275],{"class":639,"line":577},[637,10260,643],{"class":642},[637,10262,647],{"class":646},[637,10264,651],{"class":650},[637,10266,654],{"class":650},[637,10268,657],{"class":642},[637,10270,660],{"class":642},[637,10272,664],{"class":663},[637,10274,660],{"class":642},[637,10276,669],{"class":642},[637,10278,10280,10282,10284,10287,10289,10291,10293,10296,10298,10300,10302,10304],{"class":10279,"line":578},[639,673],[637,10281,677],{"class":676},[637,10283,680],{"class":642},[637,10285,10286],{"class":683}," Mask",[637,10288,687],{"class":642},[637,10290,690],{"class":683},[637,10292,687],{"class":642},[637,10294,10295],{"class":683}," useMask",[637,10297,693],{"class":642},[637,10299,696],{"class":676},[637,10301,699],{"class":642},[637,10303,702],{"class":663},[637,10305,705],{"class":642},[637,10307,10308,10310,10312,10314,10316,10318,10320,10322],{"class":639,"line":708},[637,10309,677],{"class":676},[637,10311,680],{"class":642},[637,10313,715],{"class":683},[637,10315,693],{"class":642},[637,10317,696],{"class":676},[637,10319,699],{"class":642},[637,10321,724],{"class":663},[637,10323,705],{"class":642},[637,10325,10326,10328,10330],{"class":639,"line":729},[637,10327,732],{"class":642},[637,10329,647],{"class":646},[637,10331,669],{"class":642},[637,10333,10334],{"class":639,"line":739},[637,10335,742],{"emptyLinePlaceholder":594},[637,10337,10338,10340,10342],{"class":639,"line":745},[637,10339,643],{"class":642},[637,10341,750],{"class":646},[637,10343,669],{"class":642},[637,10345,10346,10348,10350,10352,10355,10357,10359,10361,10363,10365,10367,10369,10372,10374],{"class":639,"line":755},[637,10347,758],{"class":642},[637,10349,761],{"class":646},[637,10351,813],{"class":642},[637,10353,10354],{"class":650},"stencil",[637,10356,657],{"class":642},[637,10358,660],{"class":642},[637,10360,965],{"class":4560},[637,10362,660],{"class":642},[637,10364,764],{"class":650},[637,10366,657],{"class":642},[637,10368,660],{"class":642},[637,10370,10371],{"class":663},"#4f4f4f",[637,10373,660],{"class":642},[637,10375,669],{"class":642},[637,10377,10378,10380,10382],{"class":639,"line":778},[637,10379,781],{"class":642},[637,10381,784],{"class":646},[637,10383,787],{"class":642},[637,10385,10386,10388,10390],{"class":639,"line":790},[637,10387,781],{"class":642},[637,10389,795],{"class":646},[637,10391,787],{"class":642},[637,10393,10394],{"class":639,"line":800},[637,10395,742],{"emptyLinePlaceholder":594},[637,10397,10398,10400,10403,10405,10407,10409,10411,10413,10415],{"class":639,"line":805},[637,10399,781],{"class":642},[637,10401,10402],{"class":646},"TresGroup",[637,10404,813],{"class":642},[637,10406,816],{"class":650},[637,10408,657],{"class":642},[637,10410,660],{"class":642},[637,10412,824],{"class":823},[637,10414,660],{"class":642},[637,10416,669],{"class":642},[637,10418,10419,10421,10423],{"class":639,"line":831},[637,10420,857],{"class":642},[637,10422,860],{"class":646},[637,10424,669],{"class":642},[637,10426,10427,10429,10432,10434,10436,10438,10440,10442,10445,10447,10449,10451,10454,10456,10458],{"class":639,"line":631},[637,10428,868],{"class":642},[637,10430,10431],{"class":646},"TresRingGeometry",[637,10433,813],{"class":642},[637,10435,2021],{"class":650},[637,10437,657],{"class":642},[637,10439,660],{"class":642},[637,10441,1498],{"class":642},[637,10443,10444],{"class":823},"0.95",[637,10446,1503],{"class":642},[637,10448,1925],{"class":823},[637,10450,1503],{"class":642},[637,10452,10453],{"class":823},"64",[637,10455,1513],{"class":642},[637,10457,660],{"class":642},[637,10459,787],{"class":642},[637,10461,10462,10464,10466,10468,10470,10472,10474,10476],{"class":639,"line":854},[637,10463,868],{"class":642},[637,10465,7695],{"class":646},[637,10467,2773],{"class":650},[637,10469,657],{"class":642},[637,10471,660],{"class":642},[637,10473,2780],{"class":663},[637,10475,660],{"class":642},[637,10477,787],{"class":642},[637,10479,10480,10482,10484],{"class":639,"line":865},[637,10481,889],{"class":642},[637,10483,860],{"class":646},[637,10485,669],{"class":642},[637,10487,10489,10491,10493,10495,10498,10500,10502,10504,10506],{"class":10488,"line":876},[639,673],[637,10490,857],{"class":642},[637,10492,73],{"class":646},[637,10494,813],{"class":642},[637,10496,10497],{"class":650},"id",[637,10499,657],{"class":642},[637,10501,660],{"class":642},[637,10503,1925],{"class":823},[637,10505,660],{"class":642},[637,10507,669],{"class":642},[637,10509,10511,10513,10516],{"class":10510,"line":886},[639,673],[637,10512,868],{"class":642},[637,10514,10515],{"class":646},"TresCircleGeometry",[637,10517,787],{"class":642},[637,10519,10521,10523,10525,10527,10529,10531,10534,10536],{"class":10520,"line":632},[639,673],[637,10522,868],{"class":642},[637,10524,7695],{"class":646},[637,10526,2773],{"class":650},[637,10528,657],{"class":642},[637,10530,660],{"class":642},[637,10532,10533],{"class":663},"#fbb03b",[637,10535,660],{"class":642},[637,10537,787],{"class":642},[637,10539,10541,10543,10545],{"class":10540,"line":906},[639,673],[637,10542,889],{"class":642},[637,10544,73],{"class":646},[637,10546,669],{"class":642},[637,10548,10549,10551,10553],{"class":639,"line":916},[637,10550,899],{"class":642},[637,10552,10402],{"class":646},[637,10554,669],{"class":642},[637,10556,10557],{"class":639,"line":2695},[637,10558,742],{"emptyLinePlaceholder":594},[637,10560,10561,10563,10565,10567,10570,10572,10574,10576,10578,10580],{"class":639,"line":2704},[637,10562,781],{"class":642},[637,10564,860],{"class":646},[637,10566,813],{"class":642},[637,10568,10569],{"class":650},"position-z",[637,10571,657],{"class":642},[637,10573,660],{"class":642},[637,10575,8776],{"class":642},[637,10577,1925],{"class":823},[637,10579,660],{"class":642},[637,10581,669],{"class":642},[637,10583,10584,10586,10588],{"class":639,"line":2738},[637,10585,857],{"class":642},[637,10587,871],{"class":646},[637,10589,787],{"class":642},[637,10591,10592,10594,10596,10599,10601,10603,10606,10608,10610,10612,10614],{"class":639,"line":2747},[637,10593,857],{"class":642},[637,10595,881],{"class":646},[637,10597,10598],{"class":650}," v-bind",[637,10600,657],{"class":642},[637,10602,660],{"class":642},[637,10604,10605],{"class":2506},"useMask",[637,10607,2509],{"class":642},[637,10609,1925],{"class":823},[637,10611,3433],{"class":642},[637,10613,660],{"class":642},[637,10615,787],{"class":642},[637,10617,10618,10620,10622],{"class":639,"line":2756},[637,10619,899],{"class":642},[637,10621,860],{"class":646},[637,10623,669],{"class":642},[637,10625,10626],{"class":639,"line":2765},[637,10627,742],{"emptyLinePlaceholder":594},[637,10629,10630,10632,10634,10636,10638,10640,10642,10644,10646,10648],{"class":639,"line":2787},[637,10631,781],{"class":642},[637,10633,860],{"class":646},[637,10635,813],{"class":642},[637,10637,10569],{"class":650},[637,10639,657],{"class":642},[637,10641,660],{"class":642},[637,10643,8776],{"class":642},[637,10645,2729],{"class":823},[637,10647,660],{"class":642},[637,10649,669],{"class":642},[637,10651,10652,10654,10656],{"class":639,"line":2838},[637,10653,857],{"class":642},[637,10655,871],{"class":646},[637,10657,787],{"class":642},[637,10659,10660,10662,10664,10666,10668,10670,10672,10674,10676,10678,10680],{"class":639,"line":2847},[637,10661,857],{"class":642},[637,10663,881],{"class":646},[637,10665,10598],{"class":650},[637,10667,657],{"class":642},[637,10669,660],{"class":642},[637,10671,10605],{"class":2506},[637,10673,2509],{"class":642},[637,10675,1925],{"class":823},[637,10677,3433],{"class":642},[637,10679,660],{"class":642},[637,10681,787],{"class":642},[637,10683,10684,10686,10688],{"class":639,"line":2856},[637,10685,899],{"class":642},[637,10687,860],{"class":646},[637,10689,669],{"class":642},[637,10691,10692],{"class":639,"line":4058},[637,10693,742],{"emptyLinePlaceholder":594},[637,10695,10696,10698,10700,10702,10704,10706,10708,10710,10712,10714],{"class":639,"line":4102},[637,10697,781],{"class":642},[637,10699,860],{"class":646},[637,10701,813],{"class":642},[637,10703,10569],{"class":650},[637,10705,657],{"class":642},[637,10707,660],{"class":642},[637,10709,8776],{"class":642},[637,10711,7666],{"class":823},[637,10713,660],{"class":642},[637,10715,669],{"class":642},[637,10717,10718,10720,10722],{"class":639,"line":4129},[637,10719,857],{"class":642},[637,10721,871],{"class":646},[637,10723,787],{"class":642},[637,10725,10726,10728,10730],{"class":639,"line":4148},[637,10727,857],{"class":642},[637,10729,881],{"class":646},[637,10731,787],{"class":642},[637,10733,10734,10736,10738],{"class":639,"line":4189},[637,10735,899],{"class":642},[637,10737,860],{"class":646},[637,10739,669],{"class":642},[637,10741,10742,10744,10746],{"class":639,"line":4198},[637,10743,909],{"class":642},[637,10745,761],{"class":646},[637,10747,669],{"class":642},[637,10749,10750,10752,10754],{"class":639,"line":4207},[637,10751,732],{"class":642},[637,10753,750],{"class":646},[637,10755,669],{"class":642},[504,10757,926],{"id":925},[931,10759,10760,10770],{},[934,10761,10762],{},[937,10763,10764,10766,10768],{},[940,10765,942],{"align":1001},[940,10767,945],{"align":1001},[940,10769,948],{},[950,10771,10772,10788,10804],{},[937,10773,10774,10780,10786],{},[955,10775,10776],{"align":1001},[1705,10777,10778],{},[618,10779,10497],{},[955,10781,10782,10783,10785],{"align":1001},"Id of the stencil buffer to use. Each mask must have a ",[618,10784,5564],{}," id. Multiple masks can refer to the same id.",[955,10787],{},[937,10789,10790,10797,10800],{},[955,10791,10792],{"align":1001},[1705,10793,10794],{},[618,10795,10796],{},"colorWrite",[955,10798,10799],{"align":1001},"Whether the colors of the mask's own material will leak through.",[955,10801,10802],{},[618,10803,975],{},[937,10805,10806,10813,10816],{},[955,10807,10808],{"align":1001},[1705,10809,10810],{},[618,10811,10812],{},"depthWrite",[955,10814,10815],{"align":1001},"Whether the depth of the mask's own material will leak through.",[955,10817,10818],{},[618,10819,975],{},[504,10821,10605],{"id":10822},"usemask",[614,10824,10825,10826,10829],{},"Composable that returns the stencil configuration to apply a mask to a material. Use it with ",[618,10827,10828],{},"v-bind"," on materials that should be affected by the mask.",[614,10831,10832],{},[1705,10833,10834],{},"Parameters:",[2285,10836,10837,10842],{},[2288,10838,10839,10841],{},[618,10840,10497],{}," - The mask id to use (number or Ref)",[2288,10843,10844,10847,10848],{},[618,10845,10846],{},"inverse"," - Whether to invert the mask (boolean or Ref), defaults to ",[618,10849,975],{},[626,10851,10853],{"className":628,"code":10852,"language":633,"meta":576,"style":576},"\u003CTresMeshNormalMaterial v-bind=\"useMask(1)\" \u002F>\n",[618,10854,10855],{"__ignoreMap":576},[637,10856,10857,10859,10861,10863,10865,10867,10869,10871,10873,10875,10877],{"class":639,"line":577},[637,10858,643],{"class":642},[637,10860,881],{"class":646},[637,10862,10598],{"class":650},[637,10864,657],{"class":642},[637,10866,660],{"class":642},[637,10868,10605],{"class":2506},[637,10870,2509],{"class":683},[637,10872,1925],{"class":823},[637,10874,3433],{"class":683},[637,10876,660],{"class":642},[637,10878,787],{"class":642},[1331,10880,10881],{},"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 .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 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);}",{"title":576,"searchDepth":577,"depth":578,"links":10883},[10884,10885,10886],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":10822,"depth":578,"text":10605},"Cut out areas of the screen using the stencil buffer.",{},{"title":73,"description":10887},"G7X7KSfvm9ZBJpENVvMjF0UaBORYjhBMGhf9hH7E7tw",{"id":10892,"title":77,"body":10893,"description":11731,"extension":591,"links":592,"meta":11732,"navigation":594,"path":78,"seo":11733,"stem":79,"__hash__":11734},"docs\u002F2.api\u002F1.abstractions\u002Fmerged.md",{"type":501,"value":10894,"toc":11725},[10895,10900,10911,10918,10920,10923,11198,11201,11550,11558,11562,11570,11637,11640,11644,11656,11658,11707,11712,11722],[608,10896,10897],{},[10898,10899],"abstractions-merged",{},[614,10901,10902,9002,10904,10907,10908,1150],{},[618,10903,9343],{},[618,10905,10906],{},"{ name: mesh }"," map and builds one instanced batch per entry. Any descendant,\nat any depth and in any component, joins one by key with ",[618,10909,10910],{},"\u003CInstance batch=\"...\" \u002F>",[614,10912,10913,10914,10917],{},"That is what makes repeating a whole model cheap: a robot made of two meshes drawn 49 times is\n",[1705,10915,10916],{},"two"," drawcalls, not 98.",[504,10919,15],{"id":624},[614,10921,10922],{},"The model becomes its own component, and knows nothing about the batches beyond their names:",[626,10924,10927],{"className":628,"code":10925,"filename":10926,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Instance } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresGroup>\n \u003CInstance batch=\"Body\" :position=\"[0, 0.6, 0]\" \u002F>\n \u003CInstance batch=\"Body\" :position=\"[0, 1.6, 0]\" :scale=\"0.6\" \u002F>\n \u003CInstance batch=\"Eye\" :position=\"[-0.18, 1.7, 0.32]\" \u002F>\n \u003CInstance batch=\"Eye\" :position=\"[0.18, 1.7, 0.32]\" \u002F>\n \u003C\u002FTresGroup>\n\u003C\u002Ftemplate>\n","Robot.vue",[618,10928,10929,10949,10967,10975,10979,10987,10995,11039,11094,11140,11182,11190],{"__ignoreMap":576},[637,10930,10931,10933,10935,10937,10939,10941,10943,10945,10947],{"class":639,"line":577},[637,10932,643],{"class":642},[637,10934,647],{"class":646},[637,10936,651],{"class":650},[637,10938,654],{"class":650},[637,10940,657],{"class":642},[637,10942,660],{"class":642},[637,10944,664],{"class":663},[637,10946,660],{"class":642},[637,10948,669],{"class":642},[637,10950,10951,10953,10955,10957,10959,10961,10963,10965],{"class":639,"line":578},[637,10952,677],{"class":676},[637,10954,680],{"class":642},[637,10956,8597],{"class":683},[637,10958,693],{"class":642},[637,10960,696],{"class":676},[637,10962,699],{"class":642},[637,10964,702],{"class":663},[637,10966,705],{"class":642},[637,10968,10969,10971,10973],{"class":639,"line":708},[637,10970,732],{"class":642},[637,10972,647],{"class":646},[637,10974,669],{"class":642},[637,10976,10977],{"class":639,"line":729},[637,10978,742],{"emptyLinePlaceholder":594},[637,10980,10981,10983,10985],{"class":639,"line":739},[637,10982,643],{"class":642},[637,10984,750],{"class":646},[637,10986,669],{"class":642},[637,10988,10989,10991,10993],{"class":639,"line":745},[637,10990,758],{"class":642},[637,10992,10402],{"class":646},[637,10994,669],{"class":642},[637,10996,10997,10999,11001,11004,11006,11008,11010,11012,11014,11016,11018,11020,11022,11024,11026,11029,11031,11033,11035,11037],{"class":639,"line":755},[637,10998,781],{"class":642},[637,11000,9021],{"class":646},[637,11002,11003],{"class":650}," batch",[637,11005,657],{"class":642},[637,11007,660],{"class":642},[637,11009,4902],{"class":663},[637,11011,660],{"class":642},[637,11013,813],{"class":642},[637,11015,1491],{"class":650},[637,11017,657],{"class":642},[637,11019,660],{"class":642},[637,11021,1498],{"class":642},[637,11023,969],{"class":823},[637,11025,1503],{"class":642},[637,11027,11028],{"class":823},"0.6",[637,11030,1503],{"class":642},[637,11032,969],{"class":823},[637,11034,1513],{"class":642},[637,11036,660],{"class":642},[637,11038,787],{"class":642},[637,11040,11041,11043,11045,11047,11049,11051,11053,11055,11057,11059,11061,11063,11065,11067,11069,11072,11074,11076,11078,11080,11082,11084,11086,11088,11090,11092],{"class":639,"line":778},[637,11042,781],{"class":642},[637,11044,9021],{"class":646},[637,11046,11003],{"class":650},[637,11048,657],{"class":642},[637,11050,660],{"class":642},[637,11052,4902],{"class":663},[637,11054,660],{"class":642},[637,11056,813],{"class":642},[637,11058,1491],{"class":650},[637,11060,657],{"class":642},[637,11062,660],{"class":642},[637,11064,1498],{"class":642},[637,11066,969],{"class":823},[637,11068,1503],{"class":642},[637,11070,11071],{"class":823},"1.6",[637,11073,1503],{"class":642},[637,11075,969],{"class":823},[637,11077,1513],{"class":642},[637,11079,660],{"class":642},[637,11081,813],{"class":642},[637,11083,816],{"class":650},[637,11085,657],{"class":642},[637,11087,660],{"class":642},[637,11089,11028],{"class":823},[637,11091,660],{"class":642},[637,11093,787],{"class":642},[637,11095,11096,11098,11100,11102,11104,11106,11109,11111,11113,11115,11117,11119,11121,11124,11126,11129,11131,11134,11136,11138],{"class":639,"line":790},[637,11097,781],{"class":642},[637,11099,9021],{"class":646},[637,11101,11003],{"class":650},[637,11103,657],{"class":642},[637,11105,660],{"class":642},[637,11107,11108],{"class":663},"Eye",[637,11110,660],{"class":642},[637,11112,813],{"class":642},[637,11114,1491],{"class":650},[637,11116,657],{"class":642},[637,11118,660],{"class":642},[637,11120,3947],{"class":642},[637,11122,11123],{"class":823},"0.18",[637,11125,1503],{"class":642},[637,11127,11128],{"class":823},"1.7",[637,11130,1503],{"class":642},[637,11132,11133],{"class":823},"0.32",[637,11135,1513],{"class":642},[637,11137,660],{"class":642},[637,11139,787],{"class":642},[637,11141,11142,11144,11146,11148,11150,11152,11154,11156,11158,11160,11162,11164,11166,11168,11170,11172,11174,11176,11178,11180],{"class":639,"line":800},[637,11143,781],{"class":642},[637,11145,9021],{"class":646},[637,11147,11003],{"class":650},[637,11149,657],{"class":642},[637,11151,660],{"class":642},[637,11153,11108],{"class":663},[637,11155,660],{"class":642},[637,11157,813],{"class":642},[637,11159,1491],{"class":650},[637,11161,657],{"class":642},[637,11163,660],{"class":642},[637,11165,1498],{"class":642},[637,11167,11123],{"class":823},[637,11169,1503],{"class":642},[637,11171,11128],{"class":823},[637,11173,1503],{"class":642},[637,11175,11133],{"class":823},[637,11177,1513],{"class":642},[637,11179,660],{"class":642},[637,11181,787],{"class":642},[637,11183,11184,11186,11188],{"class":639,"line":805},[637,11185,909],{"class":642},[637,11187,10402],{"class":646},[637,11189,669],{"class":642},[637,11191,11192,11194,11196],{"class":639,"line":831},[637,11193,732],{"class":642},[637,11195,750],{"class":646},[637,11197,669],{"class":642},[614,11199,11200],{},"The provider hands over the meshes and renders as many copies as it likes:",[626,11202,11205],{"className":628,"code":11203,"highlights":11204,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Merged, useGLTF } from '@tresjs\u002Fcientos'\nimport Robot from '.\u002FRobot.vue'\n\nconst { nodes } = useGLTF('\u002Frobot.glb')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[12, 9, 12]\" \u002F>\n \u003CMerged :meshes=\"{ Body: nodes.Body, Eye: nodes.Eye }\">\n \u003CRobot :position=\"[-2, 0, 0]\" \u002F>\n \u003CRobot :position=\"[0, 0, 0]\" \u002F>\n \u003CRobot :position=\"[2, 0, 0]\" \u002F>\n \u003C\u002FMerged>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[831,631,854,865,876,886,632],[618,11206,11207,11227,11245,11268,11284,11288,11313,11321,11325,11333,11341,11375,11423,11457,11490,11523,11532,11541],{"__ignoreMap":576},[637,11208,11209,11211,11213,11215,11217,11219,11221,11223,11225],{"class":639,"line":577},[637,11210,643],{"class":642},[637,11212,647],{"class":646},[637,11214,651],{"class":650},[637,11216,654],{"class":650},[637,11218,657],{"class":642},[637,11220,660],{"class":642},[637,11222,664],{"class":663},[637,11224,660],{"class":642},[637,11226,669],{"class":642},[637,11228,11229,11231,11233,11235,11237,11239,11241,11243],{"class":639,"line":578},[637,11230,677],{"class":676},[637,11232,680],{"class":642},[637,11234,715],{"class":683},[637,11236,693],{"class":642},[637,11238,696],{"class":676},[637,11240,699],{"class":642},[637,11242,724],{"class":663},[637,11244,705],{"class":642},[637,11246,11247,11249,11251,11254,11256,11258,11260,11262,11264,11266],{"class":639,"line":708},[637,11248,677],{"class":676},[637,11250,680],{"class":642},[637,11252,11253],{"class":683}," Merged",[637,11255,687],{"class":642},[637,11257,4510],{"class":683},[637,11259,693],{"class":642},[637,11261,696],{"class":676},[637,11263,699],{"class":642},[637,11265,702],{"class":663},[637,11267,705],{"class":642},[637,11269,11270,11272,11275,11277,11279,11282],{"class":639,"line":729},[637,11271,677],{"class":676},[637,11273,11274],{"class":683}," Robot ",[637,11276,8704],{"class":676},[637,11278,699],{"class":642},[637,11280,11281],{"class":663},".\u002FRobot.vue",[637,11283,705],{"class":642},[637,11285,11286],{"class":639,"line":739},[637,11287,742],{"emptyLinePlaceholder":594},[637,11289,11290,11292,11294,11296,11298,11300,11302,11304,11306,11309,11311],{"class":639,"line":745},[637,11291,2487],{"class":650},[637,11293,680],{"class":642},[637,11295,4533],{"class":683},[637,11297,2500],{"class":642},[637,11299,2503],{"class":642},[637,11301,4510],{"class":2506},[637,11303,2509],{"class":683},[637,11305,2512],{"class":642},[637,11307,11308],{"class":663},"\u002Frobot.glb",[637,11310,2512],{"class":642},[637,11312,2520],{"class":683},[637,11314,11315,11317,11319],{"class":639,"line":755},[637,11316,732],{"class":642},[637,11318,647],{"class":646},[637,11320,669],{"class":642},[637,11322,11323],{"class":639,"line":778},[637,11324,742],{"emptyLinePlaceholder":594},[637,11326,11327,11329,11331],{"class":639,"line":790},[637,11328,643],{"class":642},[637,11330,750],{"class":646},[637,11332,669],{"class":642},[637,11334,11335,11337,11339],{"class":639,"line":800},[637,11336,758],{"class":642},[637,11338,761],{"class":646},[637,11340,669],{"class":642},[637,11342,11343,11345,11347,11349,11351,11353,11355,11357,11360,11362,11365,11367,11369,11371,11373],{"class":639,"line":805},[637,11344,781],{"class":642},[637,11346,784],{"class":646},[637,11348,813],{"class":642},[637,11350,1491],{"class":650},[637,11352,657],{"class":642},[637,11354,660],{"class":642},[637,11356,1498],{"class":642},[637,11358,11359],{"class":823},"12",[637,11361,1503],{"class":642},[637,11363,11364],{"class":823},"9",[637,11366,1503],{"class":642},[637,11368,11359],{"class":823},[637,11370,1513],{"class":642},[637,11372,660],{"class":642},[637,11374,787],{"class":642},[637,11376,11378,11380,11382,11384,11387,11389,11391,11394,11396,11399,11401,11403,11405,11407,11409,11411,11413,11415,11417,11419,11421],{"class":11377,"line":831},[639,673],[637,11379,781],{"class":642},[637,11381,77],{"class":646},[637,11383,813],{"class":642},[637,11385,11386],{"class":650},"meshes",[637,11388,657],{"class":642},[637,11390,660],{"class":642},[637,11392,11393],{"class":642},"{ ",[637,11395,4902],{"class":646},[637,11397,11398],{"class":642},": ",[637,11400,5323],{"class":683},[637,11402,1150],{"class":642},[637,11404,4902],{"class":683},[637,11406,1503],{"class":642},[637,11408,11108],{"class":646},[637,11410,11398],{"class":642},[637,11412,5323],{"class":683},[637,11414,1150],{"class":642},[637,11416,11108],{"class":683},[637,11418,693],{"class":642},[637,11420,660],{"class":642},[637,11422,669],{"class":642},[637,11424,11426,11428,11431,11433,11435,11437,11439,11441,11443,11445,11447,11449,11451,11453,11455],{"class":11425,"line":631},[639,673],[637,11427,857],{"class":642},[637,11429,11430],{"class":646},"Robot",[637,11432,813],{"class":642},[637,11434,1491],{"class":650},[637,11436,657],{"class":642},[637,11438,660],{"class":642},[637,11440,3947],{"class":642},[637,11442,824],{"class":823},[637,11444,1503],{"class":642},[637,11446,969],{"class":823},[637,11448,1503],{"class":642},[637,11450,969],{"class":823},[637,11452,1513],{"class":642},[637,11454,660],{"class":642},[637,11456,787],{"class":642},[637,11458,11460,11462,11464,11466,11468,11470,11472,11474,11476,11478,11480,11482,11484,11486,11488],{"class":11459,"line":854},[639,673],[637,11461,857],{"class":642},[637,11463,11430],{"class":646},[637,11465,813],{"class":642},[637,11467,1491],{"class":650},[637,11469,657],{"class":642},[637,11471,660],{"class":642},[637,11473,1498],{"class":642},[637,11475,969],{"class":823},[637,11477,1503],{"class":642},[637,11479,969],{"class":823},[637,11481,1503],{"class":642},[637,11483,969],{"class":823},[637,11485,1513],{"class":642},[637,11487,660],{"class":642},[637,11489,787],{"class":642},[637,11491,11493,11495,11497,11499,11501,11503,11505,11507,11509,11511,11513,11515,11517,11519,11521],{"class":11492,"line":865},[639,673],[637,11494,857],{"class":642},[637,11496,11430],{"class":646},[637,11498,813],{"class":642},[637,11500,1491],{"class":650},[637,11502,657],{"class":642},[637,11504,660],{"class":642},[637,11506,1498],{"class":642},[637,11508,824],{"class":823},[637,11510,1503],{"class":642},[637,11512,969],{"class":823},[637,11514,1503],{"class":642},[637,11516,969],{"class":823},[637,11518,1513],{"class":642},[637,11520,660],{"class":642},[637,11522,787],{"class":642},[637,11524,11526,11528,11530],{"class":11525,"line":876},[639,673],[637,11527,899],{"class":642},[637,11529,77],{"class":646},[637,11531,669],{"class":642},[637,11533,11535,11537,11539],{"class":11534,"line":886},[639,673],[637,11536,909],{"class":642},[637,11538,761],{"class":646},[637,11540,669],{"class":642},[637,11542,11544,11546,11548],{"class":11543,"line":632},[639,673],[637,11545,732],{"class":642},[637,11547,750],{"class":646},[637,11549,669],{"class":642},[2078,11551,11552],{},[614,11553,11554,11555,11557],{},"Nothing needs to be threaded through props or slots: the batches are provided, so an ",[618,11556,8515],{},"\nfinds the one it names no matter how deep it sits or how many components stand between them.",[504,11559,11561],{"id":11560},"instancing-a-whole-gltf","Instancing a whole glTF",[614,11563,11564,11566,11567,11569],{},[618,11565,133],{}," gives you ",[618,11568,5323],{},", so instancing every repeated mesh of a model is a matter of picking the\nones worth batching:",[626,11571,11573],{"className":628,"code":11572,"language":633,"meta":576,"style":576},"\u003CMerged :meshes=\"{ Screw: nodes.Screw, Bolt: nodes.Bolt }\">\n \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" \u002F>\n\u003C\u002FMerged>\n",[618,11574,11575,11624,11629],{"__ignoreMap":576},[637,11576,11577,11579,11581,11583,11585,11587,11589,11591,11594,11596,11599,11601,11604,11606,11609,11611,11613,11615,11618,11620,11622],{"class":639,"line":577},[637,11578,643],{"class":642},[637,11580,77],{"class":646},[637,11582,813],{"class":642},[637,11584,11386],{"class":650},[637,11586,657],{"class":642},[637,11588,660],{"class":642},[637,11590,8709],{"class":642},[637,11592,11593],{"class":646}," Screw",[637,11595,1222],{"class":642},[637,11597,11598],{"class":683}," nodes",[637,11600,1150],{"class":642},[637,11602,11603],{"class":683},"Screw",[637,11605,687],{"class":642},[637,11607,11608],{"class":646}," Bolt",[637,11610,1222],{"class":642},[637,11612,11598],{"class":683},[637,11614,1150],{"class":642},[637,11616,11617],{"class":683},"Bolt ",[637,11619,2500],{"class":642},[637,11621,660],{"class":642},[637,11623,669],{"class":642},[637,11625,11626],{"class":639,"line":578},[637,11627,11628],{"class":683}," \u003CMachine v-for=\"i in 20\" :key=\"i\" :position=\"layout[i]\" \u002F>\n",[637,11630,11631,11633,11635],{"class":639,"line":708},[637,11632,732],{"class":642},[637,11634,77],{"class":646},[637,11636,669],{"class":642},[614,11638,11639],{},"The payoff is across models, not within one: twenty machines sharing two batches is two drawcalls.",[504,11641,11643],{"id":11642},"opting-a-node-out","Opting a node out",[614,11645,8527,11646,11648,11649,11652,11653,11655],{},[618,11647,8515],{}," is all-or-nothing per node: it uses the batch's geometry and material. When one\nnode needs its own material, a different geometry, or its own shader, render a normal ",[618,11650,11651],{},"\u003CTresMesh \u002F>","\ninstead of an ",[618,11654,8515],{},". You trade one drawcall for full control over that node, and every\nother node stays batched.",[504,11657,926],{"id":925},[931,11659,11660,11670],{},[934,11661,11662],{},[937,11663,11664,11666,11668],{},[940,11665,942],{"align":1001},[940,11667,945],{"align":1001},[940,11669,948],{},[950,11671,11672,11688],{},[937,11673,11674,11678,11684],{},[955,11675,11676],{"align":1001},[618,11677,11386],{},[955,11679,11680,11681,11683],{"align":1001},"One batch per entry, keyed by what ",[618,11682,10910],{}," joins.",[955,11685,11686],{},[1709,11687,9559],{},[937,11689,11690,11694,11702],{},[955,11691,11692],{"align":1001},[618,11693,9379],{},[955,11695,11696,11697,11699,11700,1150],{"align":1001},"Initial buffer allocation per batch. One batch per entry in ",[618,11698,11386],{},", so it defaults lower than ",[618,11701,8508],{},[955,11703,11704],{},[618,11705,11706],{},"100",[614,11708,11709,11710,1150],{},"Exposes the named batch registry through ",[618,11711,9531],{},[9719,11713,11714],{"to":66},[614,11715,11716,11717,11719,11720,1150],{},"Per-instance colors, pointer events, visibility and the ",[618,11718,9379],{}," growth behaviour are documented on ",[618,11721,8508],{},[1331,11723,11724],{},"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}",{"title":576,"searchDepth":577,"depth":578,"links":11726},[11727,11728,11729,11730],{"id":624,"depth":578,"text":15},{"id":11560,"depth":578,"text":11561},{"id":11642,"depth":578,"text":11643},{"id":925,"depth":578,"text":926},"One instanced batch per mesh, shared across your whole component tree.",{},{"title":77,"description":11731},"3F6JCpa8a9Uibd4xr6WY6bvefyMLo6XgADbv_ux0u-g",{"id":11736,"title":81,"body":11737,"description":12238,"extension":591,"links":592,"meta":12239,"navigation":594,"path":82,"seo":12240,"stem":83,"__hash__":12241},"docs\u002F2.api\u002F1.abstractions\u002Foutline.md",{"type":501,"value":11738,"toc":12234},[11739,11744,11755,11757,12135,12137,12232],[608,11740,11741],{},[11742,11743],"abstractions-outline",{},[614,11745,11746,11749,11750,3156,11752,1150],{},[618,11747,11748],{},"\u003COutline \u002F>"," creates an inverted-hull outline using its parent's geometry. Supported parents are ",[618,11751,2382],{},[618,11753,11754],{},"\u003CTresSkinnedMesh>",[504,11756,15],{"id":624},[626,11758,11761],{"className":628,"code":11759,"highlights":11760,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { OrbitControls, Outline } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#4f4f4f\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n \u003CTresAmbientLight :intensity=\"3.14\" \u002F>\n \u003CTresPointLight :intensity=\"50\" :position=\"[2, 2, 0]\" \u002F>\n \u003CTresMesh :position-x=\"-0.75\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshPhongMaterial \u002F>\n \u003COutline :thickness=\"7.5\" color=\"#82dbc5\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresMesh :position-x=\"0.75\">\n \u003CTresSphereGeometry :args=\"[0.5]\" \u002F>\n \u003CTresMeshPhongMaterial \u002F>\n \u003COutline :thickness=\"7.5\" color=\"#fbb03b\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[708,865,916],[618,11762,11763,11783,11801,11825,11833,11837,11845,11863,11871,11879,11900,11946,11969,11977,11986,12020,12028,12048,12072,12080,12111,12119,12127],{"__ignoreMap":576},[637,11764,11765,11767,11769,11771,11773,11775,11777,11779,11781],{"class":639,"line":577},[637,11766,643],{"class":642},[637,11768,647],{"class":646},[637,11770,651],{"class":650},[637,11772,654],{"class":650},[637,11774,657],{"class":642},[637,11776,660],{"class":642},[637,11778,664],{"class":663},[637,11780,660],{"class":642},[637,11782,669],{"class":642},[637,11784,11785,11787,11789,11791,11793,11795,11797,11799],{"class":639,"line":578},[637,11786,677],{"class":676},[637,11788,680],{"class":642},[637,11790,715],{"class":683},[637,11792,693],{"class":642},[637,11794,696],{"class":676},[637,11796,699],{"class":642},[637,11798,724],{"class":663},[637,11800,705],{"class":642},[637,11802,11804,11806,11808,11810,11812,11815,11817,11819,11821,11823],{"class":11803,"line":708},[639,673],[637,11805,677],{"class":676},[637,11807,680],{"class":642},[637,11809,690],{"class":683},[637,11811,687],{"class":642},[637,11813,11814],{"class":683}," Outline",[637,11816,693],{"class":642},[637,11818,696],{"class":676},[637,11820,699],{"class":642},[637,11822,702],{"class":663},[637,11824,705],{"class":642},[637,11826,11827,11829,11831],{"class":639,"line":729},[637,11828,732],{"class":642},[637,11830,647],{"class":646},[637,11832,669],{"class":642},[637,11834,11835],{"class":639,"line":739},[637,11836,742],{"emptyLinePlaceholder":594},[637,11838,11839,11841,11843],{"class":639,"line":745},[637,11840,643],{"class":642},[637,11842,750],{"class":646},[637,11844,669],{"class":642},[637,11846,11847,11849,11851,11853,11855,11857,11859,11861],{"class":639,"line":755},[637,11848,758],{"class":642},[637,11850,761],{"class":646},[637,11852,764],{"class":650},[637,11854,657],{"class":642},[637,11856,660],{"class":642},[637,11858,10371],{"class":663},[637,11860,660],{"class":642},[637,11862,669],{"class":642},[637,11864,11865,11867,11869],{"class":639,"line":778},[637,11866,781],{"class":642},[637,11868,784],{"class":646},[637,11870,787],{"class":642},[637,11872,11873,11875,11877],{"class":639,"line":790},[637,11874,781],{"class":642},[637,11876,795],{"class":646},[637,11878,787],{"class":642},[637,11880,11881,11883,11885,11887,11889,11891,11893,11896,11898],{"class":639,"line":800},[637,11882,781],{"class":642},[637,11884,10010],{"class":646},[637,11886,813],{"class":642},[637,11888,1918],{"class":650},[637,11890,657],{"class":642},[637,11892,660],{"class":642},[637,11894,11895],{"class":823},"3.14",[637,11897,660],{"class":642},[637,11899,787],{"class":642},[637,11901,11902,11904,11907,11909,11911,11913,11915,11918,11920,11922,11924,11926,11928,11930,11932,11934,11936,11938,11940,11942,11944],{"class":639,"line":805},[637,11903,781],{"class":642},[637,11905,11906],{"class":646},"TresPointLight",[637,11908,813],{"class":642},[637,11910,1918],{"class":650},[637,11912,657],{"class":642},[637,11914,660],{"class":642},[637,11916,11917],{"class":823},"50",[637,11919,660],{"class":642},[637,11921,813],{"class":642},[637,11923,1491],{"class":650},[637,11925,657],{"class":642},[637,11927,660],{"class":642},[637,11929,1498],{"class":642},[637,11931,824],{"class":823},[637,11933,1503],{"class":642},[637,11935,824],{"class":823},[637,11937,1503],{"class":642},[637,11939,969],{"class":823},[637,11941,1513],{"class":642},[637,11943,660],{"class":642},[637,11945,787],{"class":642},[637,11947,11948,11950,11952,11954,11957,11959,11961,11963,11965,11967],{"class":639,"line":831},[637,11949,781],{"class":642},[637,11951,860],{"class":646},[637,11953,813],{"class":642},[637,11955,11956],{"class":650},"position-x",[637,11958,657],{"class":642},[637,11960,660],{"class":642},[637,11962,8776],{"class":642},[637,11964,2621],{"class":823},[637,11966,660],{"class":642},[637,11968,669],{"class":642},[637,11970,11971,11973,11975],{"class":639,"line":631},[637,11972,857],{"class":642},[637,11974,871],{"class":646},[637,11976,787],{"class":642},[637,11978,11979,11981,11984],{"class":639,"line":854},[637,11980,857],{"class":642},[637,11982,11983],{"class":646},"TresMeshPhongMaterial",[637,11985,787],{"class":642},[637,11987,11989,11991,11993,11995,11998,12000,12002,12005,12007,12009,12011,12013,12016,12018],{"class":11988,"line":865},[639,673],[637,11990,857],{"class":642},[637,11992,81],{"class":646},[637,11994,813],{"class":642},[637,11996,11997],{"class":650},"thickness",[637,11999,657],{"class":642},[637,12001,660],{"class":642},[637,12003,12004],{"class":823},"7.5",[637,12006,660],{"class":642},[637,12008,2773],{"class":650},[637,12010,657],{"class":642},[637,12012,660],{"class":642},[637,12014,12015],{"class":663},"#82dbc5",[637,12017,660],{"class":642},[637,12019,787],{"class":642},[637,12021,12022,12024,12026],{"class":639,"line":876},[637,12023,899],{"class":642},[637,12025,860],{"class":646},[637,12027,669],{"class":642},[637,12029,12030,12032,12034,12036,12038,12040,12042,12044,12046],{"class":639,"line":886},[637,12031,781],{"class":642},[637,12033,860],{"class":646},[637,12035,813],{"class":642},[637,12037,11956],{"class":650},[637,12039,657],{"class":642},[637,12041,660],{"class":642},[637,12043,2621],{"class":823},[637,12045,660],{"class":642},[637,12047,669],{"class":642},[637,12049,12050,12052,12054,12056,12058,12060,12062,12064,12066,12068,12070],{"class":639,"line":632},[637,12051,857],{"class":642},[637,12053,4107],{"class":646},[637,12055,813],{"class":642},[637,12057,2021],{"class":650},[637,12059,657],{"class":642},[637,12061,660],{"class":642},[637,12063,1498],{"class":642},[637,12065,1545],{"class":823},[637,12067,1513],{"class":642},[637,12069,660],{"class":642},[637,12071,787],{"class":642},[637,12073,12074,12076,12078],{"class":639,"line":906},[637,12075,857],{"class":642},[637,12077,11983],{"class":646},[637,12079,787],{"class":642},[637,12081,12083,12085,12087,12089,12091,12093,12095,12097,12099,12101,12103,12105,12107,12109],{"class":12082,"line":916},[639,673],[637,12084,857],{"class":642},[637,12086,81],{"class":646},[637,12088,813],{"class":642},[637,12090,11997],{"class":650},[637,12092,657],{"class":642},[637,12094,660],{"class":642},[637,12096,12004],{"class":823},[637,12098,660],{"class":642},[637,12100,2773],{"class":650},[637,12102,657],{"class":642},[637,12104,660],{"class":642},[637,12106,10533],{"class":663},[637,12108,660],{"class":642},[637,12110,787],{"class":642},[637,12112,12113,12115,12117],{"class":639,"line":2695},[637,12114,899],{"class":642},[637,12116,860],{"class":646},[637,12118,669],{"class":642},[637,12120,12121,12123,12125],{"class":639,"line":2704},[637,12122,909],{"class":642},[637,12124,761],{"class":646},[637,12126,669],{"class":642},[637,12128,12129,12131,12133],{"class":639,"line":2738},[637,12130,732],{"class":642},[637,12132,750],{"class":646},[637,12134,669],{"class":642},[504,12136,926],{"id":925},[931,12138,12139,12149],{},[934,12140,12141],{},[937,12142,12143,12145,12147],{},[940,12144,926],{},[940,12146,945],{},[940,12148,948],{},[950,12150,12151,12163,12175,12187,12199,12211],{},[937,12152,12153,12155,12158],{},[955,12154,7770],{},[955,12156,12157],{},"Outline color",[955,12159,12160],{},[618,12161,12162],{},"'black'",[937,12164,12165,12168,12171],{},[955,12166,12167],{},"screenspace",[955,12169,12170],{},"Whether line thickness is independent of zoom",[955,12172,12173],{},[618,12174,975],{},[937,12176,12177,12180,12183],{},[955,12178,12179],{},"opacity",[955,12181,12182],{},"Outline opacity",[955,12184,12185],{},[618,12186,1925],{},[937,12188,12189,12192,12195],{},[955,12190,12191],{},"transparent",[955,12193,12194],{},"Outline transparency",[955,12196,12197],{},[618,12198,975],{},[937,12200,12201,12203,12206],{},[955,12202,11997],{},[955,12204,12205],{},"Outline thickness",[955,12207,12208],{},[618,12209,12210],{},"0.05",[937,12212,12213,12216,12227],{},[955,12214,12215],{},"angle",[955,12217,12218,12219,12221,12222],{},"Geometry crease angle (",[618,12220,969],{}," is no crease). See ",[1144,12223,12226],{"href":12224,"rel":12225},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#examples\u002Fen\u002Futils\u002FBufferGeometryUtils.toCreasedNormals",[1148],"BufferGeometryUtils.toCreasedNormals",[955,12228,12229],{},[618,12230,12231],{},"Math.PI",[1331,12233,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":12235},[12236,12237],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Create inverted-hull outlines using parent geometry.",{},{"title":81,"description":12238},"L_LPQP787liM6IASr51UnMfLs2CRosI1PG5BXlr7m_Q",{"id":12243,"title":85,"body":12244,"description":13126,"extension":591,"links":592,"meta":13127,"navigation":594,"path":86,"seo":13128,"stem":87,"__hash__":13129},"docs\u002F2.api\u002F1.abstractions\u002Fsampler.md",{"type":501,"value":12245,"toc":13121},[12246,12251,12254,12256,12592,12594,12658,12662,12669,13118],[608,12247,12248],{},[12249,12250],"abstractions-sampler",{},[614,12252,12253],{},"Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.",[504,12255,15],{"id":624},[626,12257,12260],{"className":628,"code":12258,"highlights":12259,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sampler } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CSampler :count=\"50\">\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresInstancedMesh :args=\"[null!, null!, 1000]\">\n \u003CTresBoxGeometry :args=\"[0.1, 0.1, 0.1]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresInstancedMesh>\n \u003C\u002FSampler>\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,805,831,631,854,865,876,886,632,906,916],[618,12261,12262,12282,12306,12324,12332,12336,12344,12363,12395,12403,12407,12429,12438,12448,12457,12462,12488,12521,12530,12539,12548,12576,12584],{"__ignoreMap":576},[637,12263,12264,12266,12268,12270,12272,12274,12276,12278,12280],{"class":639,"line":577},[637,12265,643],{"class":642},[637,12267,647],{"class":646},[637,12269,651],{"class":650},[637,12271,654],{"class":650},[637,12273,657],{"class":642},[637,12275,660],{"class":642},[637,12277,664],{"class":663},[637,12279,660],{"class":642},[637,12281,669],{"class":642},[637,12283,12285,12287,12289,12291,12293,12296,12298,12300,12302,12304],{"class":12284,"line":578},[639,673],[637,12286,677],{"class":676},[637,12288,680],{"class":642},[637,12290,690],{"class":683},[637,12292,687],{"class":642},[637,12294,12295],{"class":683}," Sampler",[637,12297,693],{"class":642},[637,12299,696],{"class":676},[637,12301,699],{"class":642},[637,12303,702],{"class":663},[637,12305,705],{"class":642},[637,12307,12308,12310,12312,12314,12316,12318,12320,12322],{"class":639,"line":708},[637,12309,677],{"class":676},[637,12311,680],{"class":642},[637,12313,715],{"class":683},[637,12315,693],{"class":642},[637,12317,696],{"class":676},[637,12319,699],{"class":642},[637,12321,724],{"class":663},[637,12323,705],{"class":642},[637,12325,12326,12328,12330],{"class":639,"line":729},[637,12327,732],{"class":642},[637,12329,647],{"class":646},[637,12331,669],{"class":642},[637,12333,12334],{"class":639,"line":739},[637,12335,742],{"emptyLinePlaceholder":594},[637,12337,12338,12340,12342],{"class":639,"line":745},[637,12339,643],{"class":642},[637,12341,750],{"class":646},[637,12343,669],{"class":642},[637,12345,12346,12348,12350,12352,12354,12356,12359,12361],{"class":639,"line":755},[637,12347,758],{"class":642},[637,12349,761],{"class":646},[637,12351,764],{"class":650},[637,12353,657],{"class":642},[637,12355,660],{"class":642},[637,12357,12358],{"class":663},"#82DBC5",[637,12360,660],{"class":642},[637,12362,669],{"class":642},[637,12364,12365,12367,12369,12371,12373,12375,12377,12379,12381,12383,12385,12387,12389,12391,12393],{"class":639,"line":778},[637,12366,781],{"class":642},[637,12368,784],{"class":646},[637,12370,813],{"class":642},[637,12372,1491],{"class":650},[637,12374,657],{"class":642},[637,12376,660],{"class":642},[637,12378,1498],{"class":642},[637,12380,969],{"class":823},[637,12382,1503],{"class":642},[637,12384,1545],{"class":823},[637,12386,1503],{"class":642},[637,12388,7666],{"class":823},[637,12390,1513],{"class":642},[637,12392,660],{"class":642},[637,12394,787],{"class":642},[637,12396,12397,12399,12401],{"class":639,"line":790},[637,12398,781],{"class":642},[637,12400,795],{"class":646},[637,12402,787],{"class":642},[637,12404,12405],{"class":639,"line":800},[637,12406,742],{"emptyLinePlaceholder":594},[637,12408,12410,12412,12414,12416,12419,12421,12423,12425,12427],{"class":12409,"line":805},[639,673],[637,12411,781],{"class":642},[637,12413,85],{"class":646},[637,12415,813],{"class":642},[637,12417,12418],{"class":650},"count",[637,12420,657],{"class":642},[637,12422,660],{"class":642},[637,12424,11917],{"class":823},[637,12426,660],{"class":642},[637,12428,669],{"class":642},[637,12430,12432,12434,12436],{"class":12431,"line":831},[639,673],[637,12433,857],{"class":642},[637,12435,860],{"class":646},[637,12437,669],{"class":642},[637,12439,12441,12443,12446],{"class":12440,"line":631},[639,673],[637,12442,868],{"class":642},[637,12444,12445],{"class":646},"TresTorusGeometry",[637,12447,787],{"class":642},[637,12449,12451,12453,12455],{"class":12450,"line":854},[639,673],[637,12452,889],{"class":642},[637,12454,860],{"class":646},[637,12456,669],{"class":642},[637,12458,12460],{"class":12459,"line":865},[639,673],[637,12461,742],{"emptyLinePlaceholder":594},[637,12463,12465,12467,12469,12471,12473,12475,12477,12480,12482,12484,12486],{"class":12464,"line":876},[639,673],[637,12466,857],{"class":642},[637,12468,9518],{"class":646},[637,12470,813],{"class":642},[637,12472,2021],{"class":650},[637,12474,657],{"class":642},[637,12476,660],{"class":642},[637,12478,12479],{"class":642},"[null!, null!, ",[637,12481,9586],{"class":823},[637,12483,1513],{"class":642},[637,12485,660],{"class":642},[637,12487,669],{"class":642},[637,12489,12491,12493,12495,12497,12499,12501,12503,12505,12507,12509,12511,12513,12515,12517,12519],{"class":12490,"line":886},[639,673],[637,12492,868],{"class":642},[637,12494,871],{"class":646},[637,12496,813],{"class":642},[637,12498,2021],{"class":650},[637,12500,657],{"class":642},[637,12502,660],{"class":642},[637,12504,1498],{"class":642},[637,12506,2235],{"class":823},[637,12508,1503],{"class":642},[637,12510,2235],{"class":823},[637,12512,1503],{"class":642},[637,12514,2235],{"class":823},[637,12516,1513],{"class":642},[637,12518,660],{"class":642},[637,12520,787],{"class":642},[637,12522,12524,12526,12528],{"class":12523,"line":632},[639,673],[637,12525,868],{"class":642},[637,12527,881],{"class":646},[637,12529,787],{"class":642},[637,12531,12533,12535,12537],{"class":12532,"line":906},[639,673],[637,12534,889],{"class":642},[637,12536,9518],{"class":646},[637,12538,669],{"class":642},[637,12540,12542,12544,12546],{"class":12541,"line":916},[639,673],[637,12543,899],{"class":642},[637,12545,85],{"class":646},[637,12547,669],{"class":642},[637,12549,12550,12552,12554,12556,12558,12560,12562,12564,12566,12568,12570,12572,12574],{"class":639,"line":2695},[637,12551,781],{"class":642},[637,12553,8311],{"class":646},[637,12555,813],{"class":642},[637,12557,2021],{"class":650},[637,12559,657],{"class":642},[637,12561,660],{"class":642},[637,12563,1498],{"class":642},[637,12565,1510],{"class":823},[637,12567,1503],{"class":642},[637,12569,1510],{"class":823},[637,12571,1513],{"class":642},[637,12573,660],{"class":642},[637,12575,787],{"class":642},[637,12577,12578,12580,12582],{"class":639,"line":2704},[637,12579,909],{"class":642},[637,12581,761],{"class":646},[637,12583,669],{"class":642},[637,12585,12586,12588,12590],{"class":639,"line":2738},[637,12587,732],{"class":642},[637,12589,750],{"class":646},[637,12591,669],{"class":642},[504,12593,926],{"id":925},[931,12595,12596,12604],{},[934,12597,12598],{},[937,12599,12600,12602],{},[940,12601,926],{},[940,12603,945],{},[950,12605,12606,12615,12625,12636,12647],{},[937,12607,12608,12610],{},[955,12609,5015],{},[955,12611,12612,12614],{},[1705,12613,4455],{}," Surface mesh from which to sample",[937,12616,12617,12619],{},[955,12618,12418],{},[955,12620,12621,12624],{},[1705,12622,12623],{},"Number"," Number of samples",[937,12626,12627,12630],{},[955,12628,12629],{},"instanceMesh",[955,12631,12632,12635],{},[1705,12633,12634],{},"InstanceMesh"," InstanceMesh to scatter",[937,12637,12638,12641],{},[955,12639,12640],{},"weight",[955,12642,12643,12646],{},[1705,12644,12645],{},"String"," A vertex attribute to be used as a weight when sampling",[937,12648,12649,12652],{},[955,12650,12651],{},"transform",[955,12653,12654,12657],{},[1705,12655,12656],{},"Function"," A function that can be used as a custom sampling",[504,12659,12661],{"id":12660},"usesurfacesampler","useSurfaceSampler",[614,12663,12664,12665],{},"A hook to obtain the result of the ",[12666,12667,12668],"sampler",{}," as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.",[626,12670,12673],{"className":628,"code":12671,"highlights":12672,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, useSurfaceSampler } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { ref, watch } from 'vue'\n\nconst torusRef = ref()\nconst instancesRef = ref()\n\nwatch(torusRef, (value) => {\n useSurfaceSampler(value, 50, instancesRef.value, 'color')\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresMesh ref=\"torusRef\">\n \u003CTresTorusGeometry \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresInstancedMesh\n ref=\"instancesRef\"\n :args=\"[null!, null!, 1_000]\"\n >\n \u003CTresSphereGeometry :args=\"[0.1, 32, 32]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresInstancedMesh>\n\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,800],[618,12674,12675,12695,12719,12737,12760,12764,12777,12790,12794,12814,12848,12854,12862,12866,12874,12892,12924,12932,12936,12955,12963,12971,12975,12982,12996,13016,13021,13054,13062,13070,13074,13102,13110],{"__ignoreMap":576},[637,12676,12677,12679,12681,12683,12685,12687,12689,12691,12693],{"class":639,"line":577},[637,12678,643],{"class":642},[637,12680,647],{"class":646},[637,12682,651],{"class":650},[637,12684,654],{"class":650},[637,12686,657],{"class":642},[637,12688,660],{"class":642},[637,12690,664],{"class":663},[637,12692,660],{"class":642},[637,12694,669],{"class":642},[637,12696,12698,12700,12702,12704,12706,12709,12711,12713,12715,12717],{"class":12697,"line":578},[639,673],[637,12699,677],{"class":676},[637,12701,680],{"class":642},[637,12703,690],{"class":683},[637,12705,687],{"class":642},[637,12707,12708],{"class":683}," useSurfaceSampler",[637,12710,693],{"class":642},[637,12712,696],{"class":676},[637,12714,699],{"class":642},[637,12716,702],{"class":663},[637,12718,705],{"class":642},[637,12720,12721,12723,12725,12727,12729,12731,12733,12735],{"class":639,"line":708},[637,12722,677],{"class":676},[637,12724,680],{"class":642},[637,12726,715],{"class":683},[637,12728,693],{"class":642},[637,12730,696],{"class":676},[637,12732,699],{"class":642},[637,12734,724],{"class":663},[637,12736,705],{"class":642},[637,12738,12739,12741,12743,12745,12747,12750,12752,12754,12756,12758],{"class":639,"line":729},[637,12740,677],{"class":676},[637,12742,680],{"class":642},[637,12744,3999],{"class":683},[637,12746,687],{"class":642},[637,12748,12749],{"class":683}," watch",[637,12751,693],{"class":642},[637,12753,696],{"class":676},[637,12755,699],{"class":642},[637,12757,633],{"class":663},[637,12759,705],{"class":642},[637,12761,12762],{"class":639,"line":739},[637,12763,742],{"emptyLinePlaceholder":594},[637,12765,12766,12768,12771,12773,12775],{"class":639,"line":745},[637,12767,2487],{"class":650},[637,12769,12770],{"class":683}," torusRef ",[637,12772,657],{"class":642},[637,12774,3999],{"class":2506},[637,12776,6744],{"class":683},[637,12778,12779,12781,12784,12786,12788],{"class":639,"line":755},[637,12780,2487],{"class":650},[637,12782,12783],{"class":683}," instancesRef ",[637,12785,657],{"class":642},[637,12787,3999],{"class":2506},[637,12789,6744],{"class":683},[637,12791,12792],{"class":639,"line":778},[637,12793,742],{"emptyLinePlaceholder":594},[637,12795,12796,12799,12802,12804,12806,12808,12810,12812],{"class":639,"line":790},[637,12797,12798],{"class":2506},"watch",[637,12800,12801],{"class":683},"(torusRef",[637,12803,687],{"class":642},[637,12805,3167],{"class":642},[637,12807,3778],{"class":7047},[637,12809,3433],{"class":642},[637,12811,3770],{"class":650},[637,12813,1208],{"class":642},[637,12815,12817,12820,12822,12824,12826,12829,12831,12834,12836,12838,12840,12842,12844,12846],{"class":12816,"line":800},[639,673],[637,12818,12819],{"class":2506}," useSurfaceSampler",[637,12821,2509],{"class":646},[637,12823,3778],{"class":683},[637,12825,687],{"class":642},[637,12827,12828],{"class":823}," 50",[637,12830,687],{"class":642},[637,12832,12833],{"class":683}," instancesRef",[637,12835,1150],{"class":642},[637,12837,3778],{"class":683},[637,12839,687],{"class":642},[637,12841,699],{"class":642},[637,12843,7770],{"class":663},[637,12845,2512],{"class":642},[637,12847,2520],{"class":646},[637,12849,12850,12852],{"class":639,"line":805},[637,12851,2500],{"class":642},[637,12853,2520],{"class":683},[637,12855,12856,12858,12860],{"class":639,"line":831},[637,12857,732],{"class":642},[637,12859,647],{"class":646},[637,12861,669],{"class":642},[637,12863,12864],{"class":639,"line":631},[637,12865,742],{"emptyLinePlaceholder":594},[637,12867,12868,12870,12872],{"class":639,"line":854},[637,12869,643],{"class":642},[637,12871,750],{"class":646},[637,12873,669],{"class":642},[637,12875,12876,12878,12880,12882,12884,12886,12888,12890],{"class":639,"line":865},[637,12877,758],{"class":642},[637,12879,761],{"class":646},[637,12881,764],{"class":650},[637,12883,657],{"class":642},[637,12885,660],{"class":642},[637,12887,12358],{"class":663},[637,12889,660],{"class":642},[637,12891,669],{"class":642},[637,12893,12894,12896,12898,12900,12902,12904,12906,12908,12910,12912,12914,12916,12918,12920,12922],{"class":639,"line":876},[637,12895,781],{"class":642},[637,12897,784],{"class":646},[637,12899,813],{"class":642},[637,12901,1491],{"class":650},[637,12903,657],{"class":642},[637,12905,660],{"class":642},[637,12907,1498],{"class":642},[637,12909,969],{"class":823},[637,12911,1503],{"class":642},[637,12913,1545],{"class":823},[637,12915,1503],{"class":642},[637,12917,7666],{"class":823},[637,12919,1513],{"class":642},[637,12921,660],{"class":642},[637,12923,787],{"class":642},[637,12925,12926,12928,12930],{"class":639,"line":886},[637,12927,781],{"class":642},[637,12929,795],{"class":646},[637,12931,787],{"class":642},[637,12933,12934],{"class":639,"line":632},[637,12935,742],{"emptyLinePlaceholder":594},[637,12937,12938,12940,12942,12944,12946,12948,12951,12953],{"class":639,"line":906},[637,12939,781],{"class":642},[637,12941,860],{"class":646},[637,12943,3999],{"class":650},[637,12945,657],{"class":642},[637,12947,660],{"class":642},[637,12949,12950],{"class":663},"torusRef",[637,12952,660],{"class":642},[637,12954,669],{"class":642},[637,12956,12957,12959,12961],{"class":639,"line":916},[637,12958,857],{"class":642},[637,12960,12445],{"class":646},[637,12962,787],{"class":642},[637,12964,12965,12967,12969],{"class":639,"line":2695},[637,12966,899],{"class":642},[637,12968,860],{"class":646},[637,12970,669],{"class":642},[637,12972,12973],{"class":639,"line":2704},[637,12974,742],{"emptyLinePlaceholder":594},[637,12976,12977,12979],{"class":639,"line":2738},[637,12978,781],{"class":642},[637,12980,12981],{"class":646},"TresInstancedMesh\n",[637,12983,12984,12987,12989,12991,12994],{"class":639,"line":2747},[637,12985,12986],{"class":650}," ref",[637,12988,657],{"class":642},[637,12990,660],{"class":642},[637,12992,12993],{"class":663},"instancesRef",[637,12995,3224],{"class":642},[637,12997,12998,13001,13003,13005,13007,13009,13012,13014],{"class":639,"line":2756},[637,12999,13000],{"class":642}," :",[637,13002,2021],{"class":650},[637,13004,657],{"class":642},[637,13006,660],{"class":642},[637,13008,12479],{"class":642},[637,13010,13011],{"class":823},"1_000",[637,13013,1513],{"class":642},[637,13015,3224],{"class":642},[637,13017,13018],{"class":639,"line":2765},[637,13019,13020],{"class":642}," >\n",[637,13022,13023,13025,13027,13029,13031,13033,13035,13037,13039,13041,13044,13046,13048,13050,13052],{"class":639,"line":2787},[637,13024,857],{"class":642},[637,13026,4107],{"class":646},[637,13028,813],{"class":642},[637,13030,2021],{"class":650},[637,13032,657],{"class":642},[637,13034,660],{"class":642},[637,13036,1498],{"class":642},[637,13038,2235],{"class":823},[637,13040,1503],{"class":642},[637,13042,13043],{"class":823},"32",[637,13045,1503],{"class":642},[637,13047,13043],{"class":823},[637,13049,1513],{"class":642},[637,13051,660],{"class":642},[637,13053,787],{"class":642},[637,13055,13056,13058,13060],{"class":639,"line":2838},[637,13057,857],{"class":642},[637,13059,881],{"class":646},[637,13061,787],{"class":642},[637,13063,13064,13066,13068],{"class":639,"line":2847},[637,13065,899],{"class":642},[637,13067,9518],{"class":646},[637,13069,669],{"class":642},[637,13071,13072],{"class":639,"line":2856},[637,13073,742],{"emptyLinePlaceholder":594},[637,13075,13076,13078,13080,13082,13084,13086,13088,13090,13092,13094,13096,13098,13100],{"class":639,"line":4058},[637,13077,781],{"class":642},[637,13079,8311],{"class":646},[637,13081,813],{"class":642},[637,13083,2021],{"class":650},[637,13085,657],{"class":642},[637,13087,660],{"class":642},[637,13089,1498],{"class":642},[637,13091,1510],{"class":823},[637,13093,1503],{"class":642},[637,13095,1510],{"class":823},[637,13097,1513],{"class":642},[637,13099,660],{"class":642},[637,13101,787],{"class":642},[637,13103,13104,13106,13108],{"class":639,"line":4102},[637,13105,909],{"class":642},[637,13107,761],{"class":646},[637,13109,669],{"class":642},[637,13111,13112,13114,13116],{"class":639,"line":4129},[637,13113,732],{"class":642},[637,13115,750],{"class":646},[637,13117,669],{"class":642},[1331,13119,13120],{},"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 .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":576,"searchDepth":577,"depth":578,"links":13122},[13123,13124,13125],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":12660,"depth":578,"text":12661},"Distribute instances on mesh surfaces using MeshSurfaceSampler.",{},{"title":85,"description":13126},"tp0RMAouxWdIwvGbhPWEaPk4Au2TU5HY1qCtuO9XCUA",{"id":13131,"title":89,"body":13132,"description":13476,"extension":591,"links":592,"meta":13477,"navigation":594,"path":90,"seo":13478,"stem":91,"__hash__":13479},"docs\u002F2.api\u002F1.abstractions\u002Fscreen-sizer.md",{"type":501,"value":13133,"toc":13472},[13134,13139,13148,13151,13153,13462,13464,13470],[2367,13135,13136],{},[13137,13138],"abstractions-screen-sizer",{},[614,13140,1354,13141,13144,13145,13147],{},[618,13142,13143],{},"\u003CTresObject3D \u002F>"," wrapper that scales to \"screen space\". By default ",[618,13146,1925],{}," THREE world unit will be translated to 1 screen pixel.",[614,13149,13150],{},"E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.",[504,13152,15],{"id":624},[626,13154,13157],{"className":628,"code":13155,"highlights":13156,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { OrbitControls, ScreenSizer } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#3f3f3f\">\n \u003CTresPerspectiveCamera :position=\"[10, 10, 10]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CScreenSizer>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[100, 100, 100]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FScreenSizer>\n \u003CTresMesh :position-x=\"5\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800,865],[618,13158,13159,13179,13197,13221,13229,13233,13241,13260,13292,13300,13309,13317,13349,13357,13365,13374,13394,13402,13410,13418,13446,13454],{"__ignoreMap":576},[637,13160,13161,13163,13165,13167,13169,13171,13173,13175,13177],{"class":639,"line":577},[637,13162,643],{"class":642},[637,13164,647],{"class":646},[637,13166,651],{"class":650},[637,13168,654],{"class":650},[637,13170,657],{"class":642},[637,13172,660],{"class":642},[637,13174,664],{"class":663},[637,13176,660],{"class":642},[637,13178,669],{"class":642},[637,13180,13181,13183,13185,13187,13189,13191,13193,13195],{"class":639,"line":578},[637,13182,677],{"class":676},[637,13184,680],{"class":642},[637,13186,715],{"class":683},[637,13188,693],{"class":642},[637,13190,696],{"class":676},[637,13192,699],{"class":642},[637,13194,724],{"class":663},[637,13196,705],{"class":642},[637,13198,13200,13202,13204,13206,13208,13211,13213,13215,13217,13219],{"class":13199,"line":708},[639,673],[637,13201,677],{"class":676},[637,13203,680],{"class":642},[637,13205,690],{"class":683},[637,13207,687],{"class":642},[637,13209,13210],{"class":683}," ScreenSizer",[637,13212,693],{"class":642},[637,13214,696],{"class":676},[637,13216,699],{"class":642},[637,13218,702],{"class":663},[637,13220,705],{"class":642},[637,13222,13223,13225,13227],{"class":639,"line":729},[637,13224,732],{"class":642},[637,13226,647],{"class":646},[637,13228,669],{"class":642},[637,13230,13231],{"class":639,"line":739},[637,13232,742],{"emptyLinePlaceholder":594},[637,13234,13235,13237,13239],{"class":639,"line":745},[637,13236,643],{"class":642},[637,13238,750],{"class":646},[637,13240,669],{"class":642},[637,13242,13243,13245,13247,13249,13251,13253,13256,13258],{"class":639,"line":755},[637,13244,758],{"class":642},[637,13246,761],{"class":646},[637,13248,764],{"class":650},[637,13250,657],{"class":642},[637,13252,660],{"class":642},[637,13254,13255],{"class":663},"#3f3f3f",[637,13257,660],{"class":642},[637,13259,669],{"class":642},[637,13261,13262,13264,13266,13268,13270,13272,13274,13276,13278,13280,13282,13284,13286,13288,13290],{"class":639,"line":778},[637,13263,781],{"class":642},[637,13265,784],{"class":646},[637,13267,813],{"class":642},[637,13269,1491],{"class":650},[637,13271,657],{"class":642},[637,13273,660],{"class":642},[637,13275,1498],{"class":642},[637,13277,1510],{"class":823},[637,13279,1503],{"class":642},[637,13281,1510],{"class":823},[637,13283,1503],{"class":642},[637,13285,1510],{"class":823},[637,13287,1513],{"class":642},[637,13289,660],{"class":642},[637,13291,787],{"class":642},[637,13293,13294,13296,13298],{"class":639,"line":790},[637,13295,781],{"class":642},[637,13297,795],{"class":646},[637,13299,787],{"class":642},[637,13301,13303,13305,13307],{"class":13302,"line":800},[639,673],[637,13304,781],{"class":642},[637,13306,89],{"class":646},[637,13308,669],{"class":642},[637,13310,13311,13313,13315],{"class":639,"line":805},[637,13312,857],{"class":642},[637,13314,860],{"class":646},[637,13316,669],{"class":642},[637,13318,13319,13321,13323,13325,13327,13329,13331,13333,13335,13337,13339,13341,13343,13345,13347],{"class":639,"line":831},[637,13320,868],{"class":642},[637,13322,871],{"class":646},[637,13324,813],{"class":642},[637,13326,2021],{"class":650},[637,13328,657],{"class":642},[637,13330,660],{"class":642},[637,13332,1498],{"class":642},[637,13334,11706],{"class":823},[637,13336,1503],{"class":642},[637,13338,11706],{"class":823},[637,13340,1503],{"class":642},[637,13342,11706],{"class":823},[637,13344,1513],{"class":642},[637,13346,660],{"class":642},[637,13348,787],{"class":642},[637,13350,13351,13353,13355],{"class":639,"line":631},[637,13352,868],{"class":642},[637,13354,881],{"class":646},[637,13356,787],{"class":642},[637,13358,13359,13361,13363],{"class":639,"line":854},[637,13360,889],{"class":642},[637,13362,860],{"class":646},[637,13364,669],{"class":642},[637,13366,13368,13370,13372],{"class":13367,"line":865},[639,673],[637,13369,899],{"class":642},[637,13371,89],{"class":646},[637,13373,669],{"class":642},[637,13375,13376,13378,13380,13382,13384,13386,13388,13390,13392],{"class":639,"line":876},[637,13377,781],{"class":642},[637,13379,860],{"class":646},[637,13381,813],{"class":642},[637,13383,11956],{"class":650},[637,13385,657],{"class":642},[637,13387,660],{"class":642},[637,13389,7666],{"class":823},[637,13391,660],{"class":642},[637,13393,669],{"class":642},[637,13395,13396,13398,13400],{"class":639,"line":886},[637,13397,857],{"class":642},[637,13399,871],{"class":646},[637,13401,787],{"class":642},[637,13403,13404,13406,13408],{"class":639,"line":632},[637,13405,857],{"class":642},[637,13407,881],{"class":646},[637,13409,787],{"class":642},[637,13411,13412,13414,13416],{"class":639,"line":906},[637,13413,899],{"class":642},[637,13415,860],{"class":646},[637,13417,669],{"class":642},[637,13419,13420,13422,13424,13426,13428,13430,13432,13434,13436,13438,13440,13442,13444],{"class":639,"line":916},[637,13421,781],{"class":642},[637,13423,8311],{"class":646},[637,13425,813],{"class":642},[637,13427,2021],{"class":650},[637,13429,657],{"class":642},[637,13431,660],{"class":642},[637,13433,1498],{"class":642},[637,13435,1510],{"class":823},[637,13437,1503],{"class":642},[637,13439,1510],{"class":823},[637,13441,1513],{"class":642},[637,13443,660],{"class":642},[637,13445,787],{"class":642},[637,13447,13448,13450,13452],{"class":639,"line":2695},[637,13449,909],{"class":642},[637,13451,761],{"class":646},[637,13453,669],{"class":642},[637,13455,13456,13458,13460],{"class":639,"line":2704},[637,13457,732],{"class":642},[637,13459,750],{"class":646},[637,13461,669],{"class":642},[504,13463,926],{"id":925},[614,13465,13466,13467,1150],{},"Inherits all props from ",[618,13468,13469],{},"THREE.Object3D",[1331,13471,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":13473},[13474,13475],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Scale objects to screen space where 1 unit equals 1 pixel.",{},{"title":89,"description":13476},"kz3721y8yAocwgiv4rVn-y48A-pFvSXFLwhVmj14V5k",{"id":13481,"title":93,"body":13482,"description":13864,"extension":591,"links":592,"meta":13865,"navigation":594,"path":94,"seo":13866,"stem":95,"__hash__":13867},"docs\u002F2.api\u002F1.abstractions\u002Fscreen-space.md",{"type":501,"value":13483,"toc":13860},[13484,13489,13502,13524,13526,13764,13766,13858],[608,13485,13486],{},[13487,13488],"abstractions-screen-space",{},[614,13490,13491,13494,13495,13498,13499,1150],{},[618,13492,13493],{},"\u003CScreenSpace \u002F>"," wraps its children in a ",[618,13496,13497],{},"\u003CTresGroup \u002F>"," and positions them in front of the active camera at ",[618,13500,13501],{},":depth",[614,13503,13504,13505,1503,13507,1503,13509,1503,13511,13513,13514,13517,13518,7842,13521,1150],{},"Additionally, the ",[618,13506,959],{},[618,13508,982],{},[618,13510,1001],{},[618,13512,1020],{}," props can be used to position them similarly to CSS ",[618,13515,13516],{},"position: absolute"," property when using a ",[618,13519,13520],{},"PerspectiveCamera",[618,13522,13523],{},"OrtographicCamera",[504,13525,15],{"id":624},[626,13527,13530],{"className":628,"code":13528,"highlights":13529,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, ScreenSpace } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#333\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CScreenSpace :depth=\"5\">\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FScreenSpace>\n\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,805,876],[618,13531,13532,13552,13576,13594,13602,13606,13614,13633,13641,13649,13653,13675,13683,13691,13699,13707,13716,13720,13748,13756],{"__ignoreMap":576},[637,13533,13534,13536,13538,13540,13542,13544,13546,13548,13550],{"class":639,"line":577},[637,13535,643],{"class":642},[637,13537,647],{"class":646},[637,13539,651],{"class":650},[637,13541,654],{"class":650},[637,13543,657],{"class":642},[637,13545,660],{"class":642},[637,13547,664],{"class":663},[637,13549,660],{"class":642},[637,13551,669],{"class":642},[637,13553,13555,13557,13559,13561,13563,13566,13568,13570,13572,13574],{"class":13554,"line":578},[639,673],[637,13556,677],{"class":676},[637,13558,680],{"class":642},[637,13560,690],{"class":683},[637,13562,687],{"class":642},[637,13564,13565],{"class":683}," ScreenSpace",[637,13567,693],{"class":642},[637,13569,696],{"class":676},[637,13571,699],{"class":642},[637,13573,702],{"class":663},[637,13575,705],{"class":642},[637,13577,13578,13580,13582,13584,13586,13588,13590,13592],{"class":639,"line":708},[637,13579,677],{"class":676},[637,13581,680],{"class":642},[637,13583,715],{"class":683},[637,13585,693],{"class":642},[637,13587,696],{"class":676},[637,13589,699],{"class":642},[637,13591,724],{"class":663},[637,13593,705],{"class":642},[637,13595,13596,13598,13600],{"class":639,"line":729},[637,13597,732],{"class":642},[637,13599,647],{"class":646},[637,13601,669],{"class":642},[637,13603,13604],{"class":639,"line":739},[637,13605,742],{"emptyLinePlaceholder":594},[637,13607,13608,13610,13612],{"class":639,"line":745},[637,13609,643],{"class":642},[637,13611,750],{"class":646},[637,13613,669],{"class":642},[637,13615,13616,13618,13620,13622,13624,13626,13629,13631],{"class":639,"line":755},[637,13617,758],{"class":642},[637,13619,761],{"class":646},[637,13621,764],{"class":650},[637,13623,657],{"class":642},[637,13625,660],{"class":642},[637,13627,13628],{"class":663},"#333",[637,13630,660],{"class":642},[637,13632,669],{"class":642},[637,13634,13635,13637,13639],{"class":639,"line":778},[637,13636,781],{"class":642},[637,13638,784],{"class":646},[637,13640,787],{"class":642},[637,13642,13643,13645,13647],{"class":639,"line":790},[637,13644,781],{"class":642},[637,13646,795],{"class":646},[637,13648,787],{"class":642},[637,13650,13651],{"class":639,"line":800},[637,13652,742],{"emptyLinePlaceholder":594},[637,13654,13656,13658,13660,13662,13665,13667,13669,13671,13673],{"class":13655,"line":805},[639,673],[637,13657,781],{"class":642},[637,13659,93],{"class":646},[637,13661,813],{"class":642},[637,13663,13664],{"class":650},"depth",[637,13666,657],{"class":642},[637,13668,660],{"class":642},[637,13670,7666],{"class":823},[637,13672,660],{"class":642},[637,13674,669],{"class":642},[637,13676,13677,13679,13681],{"class":639,"line":831},[637,13678,857],{"class":642},[637,13680,860],{"class":646},[637,13682,669],{"class":642},[637,13684,13685,13687,13689],{"class":639,"line":631},[637,13686,868],{"class":642},[637,13688,12445],{"class":646},[637,13690,787],{"class":642},[637,13692,13693,13695,13697],{"class":639,"line":854},[637,13694,868],{"class":642},[637,13696,881],{"class":646},[637,13698,787],{"class":642},[637,13700,13701,13703,13705],{"class":639,"line":865},[637,13702,889],{"class":642},[637,13704,860],{"class":646},[637,13706,669],{"class":642},[637,13708,13710,13712,13714],{"class":13709,"line":876},[639,673],[637,13711,899],{"class":642},[637,13713,93],{"class":646},[637,13715,669],{"class":642},[637,13717,13718],{"class":639,"line":886},[637,13719,742],{"emptyLinePlaceholder":594},[637,13721,13722,13724,13726,13728,13730,13732,13734,13736,13738,13740,13742,13744,13746],{"class":639,"line":632},[637,13723,781],{"class":642},[637,13725,8311],{"class":646},[637,13727,813],{"class":642},[637,13729,2021],{"class":650},[637,13731,657],{"class":642},[637,13733,660],{"class":642},[637,13735,1498],{"class":642},[637,13737,1510],{"class":823},[637,13739,1503],{"class":642},[637,13741,1510],{"class":823},[637,13743,1513],{"class":642},[637,13745,660],{"class":642},[637,13747,787],{"class":642},[637,13749,13750,13752,13754],{"class":639,"line":906},[637,13751,909],{"class":642},[637,13753,761],{"class":646},[637,13755,669],{"class":642},[637,13757,13758,13760,13762],{"class":639,"line":916},[637,13759,732],{"class":642},[637,13761,750],{"class":646},[637,13763,669],{"class":642},[504,13765,926],{"id":925},[931,13767,13768,13778],{},[934,13769,13770],{},[937,13771,13772,13774,13776],{},[940,13773,942],{"align":1001},[940,13775,945],{"align":1001},[940,13777,948],{},[950,13779,13780,13794,13813,13827,13844],{},[937,13781,13782,13786,13789],{},[955,13783,13784],{"align":1001},[618,13785,13664],{},[955,13787,13788],{"align":1001},"Distance from the camera",[955,13790,13791],{},[618,13792,13793],{},"-1",[937,13795,13796,13800,13808],{},[955,13797,13798],{"align":1001},[618,13799,959],{},[955,13801,13802,13803,13805,13806],{"align":1001},"Similar to CSS ",[618,13804,959],{}," property. Cannot be used with ",[618,13807,982],{},[955,13809,13810,13812],{},[618,13811,1545],{}," (vertical center of the screen)",[937,13814,13815,13819,13825],{},[955,13816,13817],{"align":1001},[618,13818,982],{},[955,13820,13802,13821,13805,13823],{"align":1001},[618,13822,982],{},[618,13824,959],{},[955,13826],{},[937,13828,13829,13833,13839],{},[955,13830,13831],{"align":1001},[618,13832,1001],{},[955,13834,13802,13835,13805,13837],{"align":1001},[618,13836,1001],{},[618,13838,1020],{},[955,13840,13841,13843],{},[618,13842,1545],{}," (horizontal center of the screen)",[937,13845,13846,13850,13856],{},[955,13847,13848],{"align":1001},[618,13849,1020],{},[955,13851,13802,13852,13805,13854],{"align":1001},[618,13853,1020],{},[618,13855,1001],{},[955,13857],{},[1331,13859,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":13861},[13862,13863],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Position objects in front of the camera with CSS-like positioning.",{},{"title":93,"description":13864},"kqBTtDRTjTEQO1CtIqpPWtj4cpsi2JzyDHE4eOsdRvU",[13869,15153,15614,15945,16677,17035],{"id":13870,"title":103,"body":13871,"description":15149,"extension":591,"links":592,"meta":15150,"navigation":594,"path":104,"seo":15151,"stem":105,"__hash__":15152},"docs\u002F2.api\u002F2.controls\u002Fcamera-controls.md",{"type":501,"value":13872,"toc":15140},[13873,13878,13889,13897,13899,14121,14126,14128,14131,14581,14584,14613,14773,14776,14904,14913,14916,15039,15043,15098,15137],[608,13874,13875],{},[13876,13877],"controls-camera-controls",{},[614,13879,13880,13885,13886,13888],{},[1144,13881,13884],{"href":13882,"rel":13883},"https:\u002F\u002Fgithub.com\u002Fyomotsu\u002Fcamera-controls",[1148],"CameraControls"," is a camera controller similar to ",[1144,13887,795],{"href":116}," yet supports smooth transitions and more features.",[614,13890,13891,13892,1150],{},"However, it is thirty party library for ThreeJS. So to use it you would need to install and import using ",[1144,13893,13896],{"href":13894,"rel":13895},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcamera-controls",[1148],"npm",[504,13898,15],{"id":624},[626,13900,13903],{"className":628,"code":13901,"highlights":13902,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { CameraControls } from \"@tresjs\u002Fcientos\"\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CCameraControls \u002F>\n \u003CBox :scale=\"2\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FBox>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003CTresGridHelper \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[755],[618,13904,13905,13915,13934,13942,13950,13968,14000,14009,14029,14049,14057,14065,14097,14105,14113],{"__ignoreMap":576},[637,13906,13907,13909,13911,13913],{"class":639,"line":577},[637,13908,643],{"class":642},[637,13910,647],{"class":646},[637,13912,651],{"class":650},[637,13914,669],{"class":642},[637,13916,13917,13919,13921,13924,13926,13928,13930,13932],{"class":639,"line":578},[637,13918,677],{"class":676},[637,13920,680],{"class":642},[637,13922,13923],{"class":683}," CameraControls",[637,13925,693],{"class":642},[637,13927,696],{"class":676},[637,13929,9815],{"class":642},[637,13931,702],{"class":663},[637,13933,3224],{"class":642},[637,13935,13936,13938,13940],{"class":639,"line":708},[637,13937,732],{"class":642},[637,13939,647],{"class":646},[637,13941,669],{"class":642},[637,13943,13944,13946,13948],{"class":639,"line":729},[637,13945,643],{"class":642},[637,13947,750],{"class":646},[637,13949,669],{"class":642},[637,13951,13952,13954,13956,13958,13960,13962,13964,13966],{"class":639,"line":739},[637,13953,758],{"class":642},[637,13955,761],{"class":646},[637,13957,764],{"class":650},[637,13959,657],{"class":642},[637,13961,660],{"class":642},[637,13963,12358],{"class":663},[637,13965,660],{"class":642},[637,13967,669],{"class":642},[637,13969,13970,13972,13974,13976,13978,13980,13982,13984,13986,13988,13990,13992,13994,13996,13998],{"class":639,"line":745},[637,13971,781],{"class":642},[637,13973,784],{"class":646},[637,13975,813],{"class":642},[637,13977,1491],{"class":650},[637,13979,657],{"class":642},[637,13981,660],{"class":642},[637,13983,1498],{"class":642},[637,13985,2729],{"class":823},[637,13987,1503],{"class":642},[637,13989,2729],{"class":823},[637,13991,1503],{"class":642},[637,13993,2729],{"class":823},[637,13995,1513],{"class":642},[637,13997,660],{"class":642},[637,13999,787],{"class":642},[637,14001,14003,14005,14007],{"class":14002,"line":755},[639,673],[637,14004,781],{"class":642},[637,14006,13884],{"class":646},[637,14008,787],{"class":642},[637,14010,14011,14013,14015,14017,14019,14021,14023,14025,14027],{"class":639,"line":778},[637,14012,781],{"class":642},[637,14014,217],{"class":646},[637,14016,813],{"class":642},[637,14018,816],{"class":650},[637,14020,657],{"class":642},[637,14022,660],{"class":642},[637,14024,824],{"class":823},[637,14026,660],{"class":642},[637,14028,669],{"class":642},[637,14030,14031,14033,14036,14038,14040,14042,14045,14047],{"class":639,"line":790},[637,14032,857],{"class":642},[637,14034,14035],{"class":646},"TresMeshToonMaterial",[637,14037,2773],{"class":650},[637,14039,657],{"class":642},[637,14041,660],{"class":642},[637,14043,14044],{"class":663},"orange",[637,14046,660],{"class":642},[637,14048,787],{"class":642},[637,14050,14051,14053,14055],{"class":639,"line":800},[637,14052,899],{"class":642},[637,14054,217],{"class":646},[637,14056,669],{"class":642},[637,14058,14059,14061,14063],{"class":639,"line":805},[637,14060,781],{"class":642},[637,14062,10010],{"class":646},[637,14064,787],{"class":642},[637,14066,14067,14069,14071,14073,14075,14077,14079,14081,14083,14085,14087,14089,14091,14093,14095],{"class":639,"line":831},[637,14068,781],{"class":642},[637,14070,10031],{"class":646},[637,14072,813],{"class":642},[637,14074,1491],{"class":650},[637,14076,657],{"class":642},[637,14078,660],{"class":642},[637,14080,1498],{"class":642},[637,14082,969],{"class":823},[637,14084,1503],{"class":642},[637,14086,824],{"class":823},[637,14088,1503],{"class":642},[637,14090,3900],{"class":823},[637,14092,1513],{"class":642},[637,14094,660],{"class":642},[637,14096,787],{"class":642},[637,14098,14099,14101,14103],{"class":639,"line":631},[637,14100,781],{"class":642},[637,14102,8311],{"class":646},[637,14104,787],{"class":642},[637,14106,14107,14109,14111],{"class":639,"line":854},[637,14108,909],{"class":642},[637,14110,761],{"class":646},[637,14112,669],{"class":642},[637,14114,14115,14117,14119],{"class":639,"line":865},[637,14116,732],{"class":642},[637,14118,750],{"class":646},[637,14120,669],{"class":642},[3292,14122,14123],{},[614,14124,14125],{},"Is really important that the Perspective camera is set first in the canvas. Otherwise might break.",[504,14127,926],{"id":925},[614,14129,14130],{},"Certainly! Here's the properties of the object in raw markdown table format:",[931,14132,14133,14143],{},[934,14134,14135],{},[937,14136,14137,14139,14141],{},[940,14138,942],{"align":1001},[940,14140,945],{"align":1001},[940,14142,948],{},[950,14144,14145,14159,14173,14187,14201,14215,14230,14245,14260,14275,14289,14305,14319,14333,14348,14363,14377,14392,14406,14420,14436,14451,14467,14481,14499,14514,14532,14546,14565],{},[937,14146,14147,14152,14155],{},[955,14148,14149],{"align":1001},[1705,14150,14151],{},"makeDefault",[955,14153,14154],{"align":1001},"Whether to make this the default controls.",[955,14156,14157],{},[618,14158,975],{},[937,14160,14161,14166,14169],{},[955,14162,14163],{"align":1001},[1705,14164,14165],{},"camera",[955,14167,14168],{"align":1001},"The camera to control.",[955,14170,14171],{},[618,14172,1183],{},[937,14174,14175,14180,14183],{},[955,14176,14177],{"align":1001},[1705,14178,14179],{},"domElement",[955,14181,14182],{"align":1001},"The DOM element to listen to.",[955,14184,14185],{},[618,14186,1183],{},[937,14188,14189,14194,14197],{},[955,14190,14191],{"align":1001},[1705,14192,14193],{},"minPolarAngle",[955,14195,14196],{"align":1001},"Minimum vertical angle in radians.",[955,14198,14199],{},[618,14200,969],{},[937,14202,14203,14208,14211],{},[955,14204,14205],{"align":1001},[1705,14206,14207],{},"maxPolarAngle",[955,14209,14210],{"align":1001},"Maximum vertical angle in radians.",[955,14212,14213],{},[618,14214,12231],{},[937,14216,14217,14222,14225],{},[955,14218,14219],{"align":1001},[1705,14220,14221],{},"minAzimuthAngle",[955,14223,14224],{"align":1001},"Minimum horizontal angle in radians.",[955,14226,14227],{},[618,14228,14229],{},"-Infinity",[937,14231,14232,14237,14240],{},[955,14233,14234],{"align":1001},[1705,14235,14236],{},"maxAzimuthAngle",[955,14238,14239],{"align":1001},"Maximum horizontal angle in radians.",[955,14241,14242],{},[618,14243,14244],{},"Infinity",[937,14246,14247,14252,14255],{},[955,14248,14249],{"align":1001},[1705,14250,14251],{},"distance",[955,14253,14254],{"align":1001},"Current distance.",[955,14256,14257],{},[618,14258,14259],{},"camera.position.z",[937,14261,14262,14267,14270],{},[955,14263,14264],{"align":1001},[1705,14265,14266],{},"minDistance",[955,14268,14269],{"align":1001},"Minimum distance for dolly. PerspectiveCamera only.",[955,14271,14272],{},[618,14273,14274],{},"Number.EPSILON",[937,14276,14277,14282,14285],{},[955,14278,14279],{"align":1001},[1705,14280,14281],{},"maxDistance",[955,14283,14284],{"align":1001},"Maximum distance for dolly. PerspectiveCamera only.",[955,14286,14287],{},[618,14288,14244],{},[937,14290,14291,14296,14301],{},[955,14292,14293],{"align":1001},[1705,14294,14295],{},"infinityDolly",[955,14297,14298,14300],{"align":1001},[618,14299,965],{}," to enable Infinity Dolly for wheel and pinch.",[955,14302,14303],{},[618,14304,975],{},[937,14306,14307,14312,14315],{},[955,14308,14309],{"align":1001},[1705,14310,14311],{},"minZoom",[955,14313,14314],{"align":1001},"Minimum camera zoom.",[955,14316,14317],{},[618,14318,1939],{},[937,14320,14321,14326,14329],{},[955,14322,14323],{"align":1001},[1705,14324,14325],{},"maxZoom",[955,14327,14328],{"align":1001},"Maximum camera zoom.",[955,14330,14331],{},[618,14332,14244],{},[937,14334,14335,14340,14343],{},[955,14336,14337],{"align":1001},[1705,14338,14339],{},"smoothTime",[955,14341,14342],{"align":1001},"Approximate time in seconds to reach the target. A smaller value will reach the target faster.",[955,14344,14345],{},[618,14346,14347],{},"0.25",[937,14349,14350,14355,14358],{},[955,14351,14352],{"align":1001},[1705,14353,14354],{},"draggingSmoothTime",[955,14356,14357],{"align":1001},"The smoothTime while dragging.",[955,14359,14360],{},[618,14361,14362],{},"0.125",[937,14364,14365,14370,14373],{},[955,14366,14367],{"align":1001},[1705,14368,14369],{},"maxSpeed",[955,14371,14372],{"align":1001},"Max transition speed in units per second.",[955,14374,14375],{},[618,14376,14244],{},[937,14378,14379,14384,14387],{},[955,14380,14381],{"align":1001},[1705,14382,14383],{},"azimuthRotateSpeed",[955,14385,14386],{"align":1001},"Speed of azimuth (horizontal) rotation.",[955,14388,14389],{},[618,14390,14391],{},"1.0",[937,14393,14394,14399,14402],{},[955,14395,14396],{"align":1001},[1705,14397,14398],{},"polarRotateSpeed",[955,14400,14401],{"align":1001},"Speed of polar (vertical) rotation.",[955,14403,14404],{},[618,14405,14391],{},[937,14407,14408,14413,14416],{},[955,14409,14410],{"align":1001},[1705,14411,14412],{},"dollySpeed",[955,14414,14415],{"align":1001},"Speed of mouse-wheel dollying.",[955,14417,14418],{},[618,14419,14391],{},[937,14421,14422,14427,14432],{},[955,14423,14424],{"align":1001},[1705,14425,14426],{},"dollyDragInverted",[955,14428,14429,14431],{"align":1001},[618,14430,965],{}," to invert direction when dollying or zooming via drag.",[955,14433,14434],{},[618,14435,975],{},[937,14437,14438,14443,14446],{},[955,14439,14440],{"align":1001},[1705,14441,14442],{},"truckSpeed",[955,14444,14445],{"align":1001},"Speed of drag for truck and pedestal.",[955,14447,14448],{},[618,14449,14450],{},"2.0",[937,14452,14453,14458,14463],{},[955,14454,14455],{"align":1001},[1705,14456,14457],{},"dollyToCursor",[955,14459,14460,14462],{"align":1001},[618,14461,965],{}," to enable Dolly-in to the mouse cursor coords.",[955,14464,14465],{},[618,14466,975],{},[937,14468,14469,14474,14477],{},[955,14470,14471],{"align":1001},[1705,14472,14473],{},"dragToOffset",[955,14475,14476],{"align":1001},"Whether to drag to offset.",[955,14478,14479],{},[618,14480,975],{},[937,14482,14483,14488,14495],{},[955,14484,14485],{"align":1001},[1705,14486,14487],{},"verticalDragToForward",[955,14489,14490,14491,14494],{"align":1001},"The same as ",[618,14492,14493],{},".screenSpacePanning"," in Three.js's OrbitControls.",[955,14496,14497],{},[618,14498,975],{},[937,14500,14501,14506,14509],{},[955,14502,14503],{"align":1001},[1705,14504,14505],{},"boundaryFriction",[955,14507,14508],{"align":1001},"Friction ratio of the boundary.",[955,14510,14511],{},[618,14512,14513],{},"0.0",[937,14515,14516,14521,14528],{},[955,14517,14518],{"align":1001},[1705,14519,14520],{},"restThreshold",[955,14522,14523,14524,14527],{"align":1001},"Controls how soon the ",[618,14525,14526],{},"rest"," event fires as the camera slows.",[955,14529,14530],{},[618,14531,1939],{},[937,14533,14534,14539,14542],{},[955,14535,14536],{"align":1001},[1705,14537,14538],{},"colliderMeshes",[955,14540,14541],{"align":1001},"An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.",[955,14543,14544],{},[618,14545,3672],{},[937,14547,14548,14553,14556],{},[955,14549,14550],{"align":1001},[1705,14551,14552],{},"mouseButtons",[955,14554,14555],{"align":1001},"Configuration of actions on mouse input.",[955,14557,1142,14558,14564],{},[1144,14559,14561],{"href":14560},"#user-input-config",[618,14562,14563],{},"User input config"," for details",[937,14566,14567,14572,14575],{},[955,14568,14569],{"align":1001},[1705,14570,14571],{},"touches",[955,14573,14574],{"align":1001},"Configuration of actions on touch.",[955,14576,1142,14577,14564],{},[1144,14578,14579],{"href":14560},[618,14580,14563],{},[504,14582,14563],{"id":14583},"user-input-config",[614,14585,14586,14587,14589,14590,14592,14593,14601,14602,14604,14605,14608,14609,14612],{},"You can easily override the default user input config by defining ",[618,14588,14552],{}," and\u002For ",[618,14591,14571],{}," props that correspond to ",[1144,14594,14597,14600],{"href":14595,"rel":14596},"https:\u002F\u002Fgithub.com\u002Fyomotsu\u002Fcamera-controls?#user-input-config",[1148],[618,14598,14599],{},"camera-controls"," settings",". For ease of use, we're re-exporting the ",[618,14603,13884],{}," class as ",[618,14606,14607],{},"BaseCameraControls"," which gives you access to the ",[618,14610,14611],{},"ACTION"," enum.",[626,14614,14616],{"className":628,"code":14615,"language":633,"meta":576,"style":576},"\u003Cscript lang=\"ts\" setup>\nimport { BaseCameraControls, CameraControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n ...\n \u003CCameraControls\n :mouse-buttons=\"{ left: BaseCameraControls.ACTION.DOLLY }\"\n :touches=\"{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }\"\n \u002F>\n ...\n\u003C\u002Ftemplate>\n",[618,14617,14618,14638,14661,14669,14673,14681,14686,14693,14725,14756,14761,14765],{"__ignoreMap":576},[637,14619,14620,14622,14624,14626,14628,14630,14632,14634,14636],{"class":639,"line":577},[637,14621,643],{"class":642},[637,14623,647],{"class":646},[637,14625,654],{"class":650},[637,14627,657],{"class":642},[637,14629,660],{"class":642},[637,14631,664],{"class":663},[637,14633,660],{"class":642},[637,14635,651],{"class":650},[637,14637,669],{"class":642},[637,14639,14640,14642,14644,14647,14649,14651,14653,14655,14657,14659],{"class":639,"line":578},[637,14641,677],{"class":676},[637,14643,680],{"class":642},[637,14645,14646],{"class":683}," BaseCameraControls",[637,14648,687],{"class":642},[637,14650,13923],{"class":683},[637,14652,693],{"class":642},[637,14654,696],{"class":676},[637,14656,699],{"class":642},[637,14658,702],{"class":663},[637,14660,705],{"class":642},[637,14662,14663,14665,14667],{"class":639,"line":708},[637,14664,732],{"class":642},[637,14666,647],{"class":646},[637,14668,669],{"class":642},[637,14670,14671],{"class":639,"line":729},[637,14672,742],{"emptyLinePlaceholder":594},[637,14674,14675,14677,14679],{"class":639,"line":739},[637,14676,643],{"class":642},[637,14678,750],{"class":646},[637,14680,669],{"class":642},[637,14682,14683],{"class":639,"line":745},[637,14684,14685],{"class":683}," ...\n",[637,14687,14688,14690],{"class":639,"line":755},[637,14689,758],{"class":642},[637,14691,14692],{"class":646},"CameraControls\n",[637,14694,14695,14697,14700,14702,14704,14706,14708,14710,14712,14714,14716,14718,14721,14723],{"class":639,"line":778},[637,14696,5353],{"class":642},[637,14698,14699],{"class":650},"mouse-buttons",[637,14701,657],{"class":642},[637,14703,660],{"class":642},[637,14705,11393],{"class":642},[637,14707,1001],{"class":646},[637,14709,11398],{"class":642},[637,14711,14607],{"class":683},[637,14713,1150],{"class":642},[637,14715,14611],{"class":683},[637,14717,1150],{"class":642},[637,14719,14720],{"class":683},"DOLLY",[637,14722,693],{"class":642},[637,14724,3224],{"class":642},[637,14726,14727,14729,14731,14733,14735,14737,14739,14741,14743,14745,14747,14749,14752,14754],{"class":639,"line":790},[637,14728,5353],{"class":642},[637,14730,14571],{"class":650},[637,14732,657],{"class":642},[637,14734,660],{"class":642},[637,14736,11393],{"class":642},[637,14738,8523],{"class":646},[637,14740,11398],{"class":642},[637,14742,14607],{"class":683},[637,14744,1150],{"class":642},[637,14746,14611],{"class":683},[637,14748,1150],{"class":642},[637,14750,14751],{"class":683},"TOUCH_TRUCK",[637,14753,693],{"class":642},[637,14755,3224],{"class":642},[637,14757,14758],{"class":639,"line":800},[637,14759,14760],{"class":642}," \u002F>\n",[637,14762,14763],{"class":639,"line":805},[637,14764,14685],{"class":683},[637,14766,14767,14769,14771],{"class":639,"line":831},[637,14768,732],{"class":642},[637,14770,750],{"class":646},[637,14772,669],{"class":642},[4215,14774,14775],{"id":14699},"Mouse buttons",[931,14777,14778,14790],{},[934,14779,14780],{},[937,14781,14782,14785,14788],{},[940,14783,14784],{},"Button to assign",[940,14786,14787],{},"Options",[940,14789,948],{},[950,14791,14792,14823,14848,14878],{},[937,14793,14794,14799,14819],{},[955,14795,14796],{},[618,14797,14798],{},"mouseButtons.left",[955,14800,14801,14804,14805,14804,14808,14804,14811,14804,14813,14804,14816],{},[618,14802,14803],{},"ROTATE"," | ",[618,14806,14807],{},"TRUCK",[618,14809,14810],{},"OFFSET",[618,14812,14720],{},[618,14814,14815],{},"ZOOM",[618,14817,14818],{},"NONE",[955,14820,14821],{},[618,14822,14803],{},[937,14824,14825,14830,14844],{},[955,14826,14827],{},[618,14828,14829],{},"mouseButtons.right",[955,14831,14832,14804,14834,14804,14836,14804,14838,14804,14840,14804,14842],{},[618,14833,14803],{},[618,14835,14807],{},[618,14837,14810],{},[618,14839,14720],{},[618,14841,14815],{},[618,14843,14818],{},[955,14845,14846],{},[618,14847,14807],{},[937,14849,14850,14856,14870],{},[955,14851,14852,14855],{},[618,14853,14854],{},"mouseButtons.wheel"," ¹",[955,14857,14858,14804,14860,14804,14862,14804,14864,14804,14866,14804,14868],{},[618,14859,14803],{},[618,14861,14807],{},[618,14863,14810],{},[618,14865,14720],{},[618,14867,14815],{},[618,14869,14818],{},[955,14871,14872,14874,14875,14877],{},[618,14873,14720],{}," for Perspective camera, ",[618,14876,14815],{}," for Orthographic camera.",[937,14879,14880,14886,14900],{},[955,14881,14882,14885],{},[618,14883,14884],{},"mouseButtons.middle"," ²",[955,14887,14888,14804,14890,14804,14892,14804,14894,14804,14896,14804,14898],{},[618,14889,14803],{},[618,14891,14807],{},[618,14893,14810],{},[618,14895,14720],{},[618,14897,14815],{},[618,14899,14818],{},[955,14901,14902],{},[618,14903,14720],{},[14905,14906,14907,14910],"ol",{},[2288,14908,14909],{},"Mouse wheel event for scroll \"up\u002Fdown\", on mac \"up\u002Fdown\u002Fleft\u002Fright\".",[2288,14911,14912],{},"Mouse wheel \"button\" click event.",[4215,14914,14915],{"id":14571},"Touches",[931,14917,14918,14929],{},[934,14919,14920],{},[937,14921,14922,14925,14927],{},[940,14923,14924],{},"Fingers to assign",[940,14926,14787],{},[940,14928,948],{},[950,14930,14931,14958,15006],{},[937,14932,14933,14938,14954],{},[955,14934,14935],{},[618,14936,14937],{},"touches.one",[955,14939,14940,14804,14943,14804,14945,14804,14948,14804,14950,14804,14952],{},[618,14941,14942],{},"TOUCH_ROTATE",[618,14944,14751],{},[618,14946,14947],{},"TOUCH_OFFSET",[618,14949,14720],{},[618,14951,14815],{},[618,14953,14818],{},[955,14955,14956],{},[618,14957,14942],{},[937,14959,14960,14965,14999],{},[955,14961,14962],{},[618,14963,14964],{},"touches.two",[955,14966,14967,14804,14970,14804,14973,14804,14976,14804,14979,14804,14982,14804,14985,14804,14988,14804,14991,14804,14993,14804,14995,14804,14997],{},[618,14968,14969],{},"TOUCH_DOLLY_TRUCK",[618,14971,14972],{},"TOUCH_DOLLY_OFFSET",[618,14974,14975],{},"TOUCH_DOLLY_ROTATE",[618,14977,14978],{},"TOUCH_ZOOM_TRUCK",[618,14980,14981],{},"TOUCH_ZOOM_OFFSET",[618,14983,14984],{},"TOUCH_ZOOM_ROTATE",[618,14986,14987],{},"TOUCH_DOLLY",[618,14989,14990],{},"TOUCH_ZOOM",[618,14992,14942],{},[618,14994,14751],{},[618,14996,14947],{},[618,14998,14818],{},[955,15000,15001,14874,15003,15005],{},[618,15002,14969],{},[618,15004,14978],{}," for Othographic camera.",[937,15007,15008,15013,15035],{},[955,15009,15010],{},[618,15011,15012],{},"touches.three",[955,15014,15015,14804,15017,14804,15019,14804,15021,14804,15023,14804,15025,14804,15027,14804,15029,14804,15031,14804,15033],{},[618,15016,14969],{},[618,15018,14972],{},[618,15020,14975],{},[618,15022,14978],{},[618,15024,14981],{},[618,15026,14984],{},[618,15028,14942],{},[618,15030,14751],{},[618,15032,14947],{},[618,15034,14818],{},[955,15036,15037],{},[618,15038,14751],{},[504,15040,15042],{"id":15041},"events","Events",[626,15044,15046],{"className":628,"code":15045,"language":633,"meta":576,"style":576},"\u003CCameraControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" \u002F>\n",[618,15047,15048],{"__ignoreMap":576},[637,15049,15050,15052,15054,15056,15059,15061,15063,15066,15068,15070,15073,15075,15077,15080,15082,15084,15087,15089,15091,15094,15096],{"class":639,"line":577},[637,15051,643],{"class":642},[637,15053,13884],{"class":646},[637,15055,4417],{"class":642},[637,15057,15058],{"class":650},"change",[637,15060,657],{"class":642},[637,15062,660],{"class":642},[637,15064,15065],{"class":683},"onChange",[637,15067,660],{"class":642},[637,15069,4417],{"class":642},[637,15071,15072],{"class":650},"start",[637,15074,657],{"class":642},[637,15076,660],{"class":642},[637,15078,15079],{"class":683},"onStart",[637,15081,660],{"class":642},[637,15083,4417],{"class":642},[637,15085,15086],{"class":650},"end",[637,15088,657],{"class":642},[637,15090,660],{"class":642},[637,15092,15093],{"class":683},"onEnd",[637,15095,660],{"class":642},[637,15097,787],{"class":642},[931,15099,15100,15108],{},[934,15101,15102],{},[937,15103,15104,15106],{},[940,15105,5968],{"align":1001},[940,15107,945],{"align":1001},[950,15109,15110,15119,15128],{},[937,15111,15112,15116],{},[955,15113,15114],{"align":1001},[1705,15115,15072],{},[955,15117,15118],{"align":1001},"Dispatched when the control starts to change.",[937,15120,15121,15125],{},[955,15122,15123],{"align":1001},[1705,15124,15058],{},[955,15126,15127],{"align":1001},"Dispatched when the control changes.",[937,15129,15130,15134],{},[955,15131,15132],{"align":1001},[1705,15133,15086],{},[955,15135,15136],{"align":1001},"Dispatched when the control ends to change.",[1331,15138,15139],{},"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":576,"searchDepth":577,"depth":578,"links":15141},[15142,15143,15144,15148],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":14583,"depth":578,"text":14563,"children":15145},[15146,15147],{"id":14699,"depth":708,"text":14775},{"id":14571,"depth":708,"text":14915},{"id":15041,"depth":578,"text":15042},"Is similar to OrbitControls yet supports smooth transitions and more features.",{},{"title":103,"description":15149},"Er67NB_D9l-p90cx_F8Ueo3oYf_90DhOHx1q_8YgH3g",{"id":15154,"title":107,"body":15155,"description":15610,"extension":591,"links":592,"meta":15611,"navigation":594,"path":108,"seo":15612,"stem":109,"__hash__":15613},"docs\u002F2.api\u002F2.controls\u002Fkeyboard-controls.md",{"type":501,"value":15156,"toc":15605},[15157,15162,15168,15253,15269,15271,15428,15432,15434,15513,15515,15566,15602],[608,15158,15159],{},[15160,15161],"controls-keyboard-controls",{},[614,15163,15164,15167],{},[618,15165,15166],{},"\u003CKeyboardControls \u002F>"," is a simple keyboard controller for the camera. The camera's movements are bound to:",[931,15169,15170,15179],{},[934,15171,15172],{},[937,15173,15174,15177],{},[940,15175,15176],{"align":1001},"Keyboard",[940,15178,6615],{"align":1001},[950,15180,15181,15194,15207,15220,15233,15243],{},[937,15182,15183,15191],{},[955,15184,15185,3429,15188],{"align":1001},[618,15186,15187],{},"W",[618,15189,15190],{},"↑",[955,15192,15193],{"align":1001},"Move forward",[937,15195,15196,15204],{},[955,15197,15198,3429,15201],{"align":1001},[618,15199,15200],{},"S",[618,15202,15203],{},"↓",[955,15205,15206],{"align":1001},"Move backward",[937,15208,15209,15217],{},[955,15210,15211,3429,15214],{"align":1001},[618,15212,15213],{},"A",[618,15215,15216],{},"←",[955,15218,15219],{"align":1001},"Move left",[937,15221,15222,15230],{},[955,15223,15224,3429,15227],{"align":1001},[618,15225,15226],{},"D",[618,15228,15229],{},"→",[955,15231,15232],{"align":1001},"Move right",[937,15234,15235,15240],{},[955,15236,15237],{"align":1001},[618,15238,15239],{},"E",[955,15241,15242],{"align":1001},"Move up",[937,15244,15245,15250],{},[955,15246,15247],{"align":1001},[618,15248,15249],{},"Q",[955,15251,15252],{"align":1001},"Move down",[2078,15254,15255],{},[614,15256,15257,15260,15261,15264,15265,1150],{},[618,15258,15259],{},"KeyboardControls"," uses ",[618,15262,15263],{},"PointerLockControls"," under the hood. You can use ",[1144,15266,15268],{"href":15267},"pointer-lock-controls#props","PointerLockControls props and events",[504,15270,15],{"id":624},[626,15272,15275],{"className":628,"code":15273,"highlights":15274,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { KeyboardControls, Box } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera \u002F>\n \u003CBox :position-y=\"0.5\" \u002F>\n \u003CKeyboardControls \u002F>\n \u003CTresGridHelper \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800],[618,15276,15277,15297,15315,15339,15347,15351,15359,15367,15375,15395,15404,15412,15420],{"__ignoreMap":576},[637,15278,15279,15281,15283,15285,15287,15289,15291,15293,15295],{"class":639,"line":577},[637,15280,643],{"class":642},[637,15282,647],{"class":646},[637,15284,651],{"class":650},[637,15286,654],{"class":650},[637,15288,657],{"class":642},[637,15290,660],{"class":642},[637,15292,664],{"class":663},[637,15294,660],{"class":642},[637,15296,669],{"class":642},[637,15298,15299,15301,15303,15305,15307,15309,15311,15313],{"class":639,"line":578},[637,15300,677],{"class":676},[637,15302,680],{"class":642},[637,15304,715],{"class":683},[637,15306,693],{"class":642},[637,15308,696],{"class":676},[637,15310,699],{"class":642},[637,15312,724],{"class":663},[637,15314,705],{"class":642},[637,15316,15318,15320,15322,15325,15327,15329,15331,15333,15335,15337],{"class":15317,"line":708},[639,673],[637,15319,677],{"class":676},[637,15321,680],{"class":642},[637,15323,15324],{"class":683}," KeyboardControls",[637,15326,687],{"class":642},[637,15328,1401],{"class":683},[637,15330,693],{"class":642},[637,15332,696],{"class":676},[637,15334,699],{"class":642},[637,15336,702],{"class":663},[637,15338,705],{"class":642},[637,15340,15341,15343,15345],{"class":639,"line":729},[637,15342,732],{"class":642},[637,15344,647],{"class":646},[637,15346,669],{"class":642},[637,15348,15349],{"class":639,"line":739},[637,15350,742],{"emptyLinePlaceholder":594},[637,15352,15353,15355,15357],{"class":639,"line":745},[637,15354,643],{"class":642},[637,15356,750],{"class":646},[637,15358,669],{"class":642},[637,15360,15361,15363,15365],{"class":639,"line":755},[637,15362,758],{"class":642},[637,15364,761],{"class":646},[637,15366,669],{"class":642},[637,15368,15369,15371,15373],{"class":639,"line":778},[637,15370,781],{"class":642},[637,15372,784],{"class":646},[637,15374,787],{"class":642},[637,15376,15377,15379,15381,15383,15385,15387,15389,15391,15393],{"class":639,"line":790},[637,15378,781],{"class":642},[637,15380,217],{"class":646},[637,15382,813],{"class":642},[637,15384,2000],{"class":650},[637,15386,657],{"class":642},[637,15388,660],{"class":642},[637,15390,1545],{"class":823},[637,15392,660],{"class":642},[637,15394,787],{"class":642},[637,15396,15398,15400,15402],{"class":15397,"line":800},[639,673],[637,15399,781],{"class":642},[637,15401,15259],{"class":646},[637,15403,787],{"class":642},[637,15405,15406,15408,15410],{"class":639,"line":805},[637,15407,781],{"class":642},[637,15409,8311],{"class":646},[637,15411,787],{"class":642},[637,15413,15414,15416,15418],{"class":639,"line":831},[637,15415,909],{"class":642},[637,15417,761],{"class":646},[637,15419,669],{"class":642},[637,15421,15422,15424,15426],{"class":639,"line":631},[637,15423,732],{"class":642},[637,15425,750],{"class":646},[637,15427,669],{"class":642},[3292,15429,15430],{},[614,15431,14125],{},[504,15433,926],{"id":925},[931,15435,15436,15446],{},[934,15437,15438],{},[937,15439,15440,15442,15444],{},[940,15441,942],{"align":1001},[940,15443,945],{"align":1001},[940,15445,948],{},[950,15447,15448,15460,15475,15487,15499],{},[937,15449,15450,15455,15458],{},[955,15451,15452],{"align":1001},[1705,15453,15454],{},"moveSpeed",[955,15456,15457],{"align":1001},"Speed movement.",[955,15459,5938],{},[937,15461,15462,15466,15471],{},[955,15463,15464],{"align":1001},[1705,15465,14151],{},[955,15467,962,15468,15470],{"align":1001},[618,15469,965],{},", the controls will be set as the default controls for the scene.",[955,15472,15473],{},[618,15474,965],{},[937,15476,15477,15481,15483],{},[955,15478,15479],{"align":1001},[1705,15480,14165],{},[955,15482,14168],{"align":1001},[955,15484,15485],{},[618,15486,1183],{},[937,15488,15489,15493,15495],{},[955,15490,15491],{"align":1001},[1705,15492,14179],{},[955,15494,14182],{"align":1001},[955,15496,15497],{},[618,15498,1183],{},[937,15500,15501,15506,15509],{},[955,15502,15503],{"align":1001},[1705,15504,15505],{},"selector",[955,15507,15508],{"align":1001},"Accept an id element as string. If set, the new element will be used as the trigger",[955,15510,15511],{},[618,15512,1183],{},[504,15514,15042],{"id":15041},[626,15516,15518],{"className":628,"code":15517,"language":633,"meta":576,"style":576},"\u003CKeyboardControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" \u002F>\n",[618,15519,15520],{"__ignoreMap":576},[637,15521,15522,15524,15526,15528,15530,15532,15534,15536,15538,15540,15543,15545,15547,15549,15552,15554,15556,15559,15562,15564],{"class":639,"line":577},[637,15523,643],{"class":642},[637,15525,15259],{"class":646},[637,15527,4417],{"class":642},[637,15529,15058],{"class":650},[637,15531,657],{"class":642},[637,15533,660],{"class":642},[637,15535,15065],{"class":683},[637,15537,660],{"class":642},[637,15539,4417],{"class":642},[637,15541,15542],{"class":650},"is-lock",[637,15544,657],{"class":642},[637,15546,660],{"class":642},[637,15548,2509],{"class":642},[637,15550,15551],{"class":7047},"state",[637,15553,3433],{"class":642},[637,15555,3770],{"class":650},[637,15557,15558],{"class":2506}," isActive",[637,15560,15561],{"class":683},"(state)",[637,15563,660],{"class":642},[637,15565,787],{"class":683},[931,15567,15568,15576],{},[934,15569,15570],{},[937,15571,15572,15574],{},[940,15573,5968],{"align":1001},[940,15575,945],{"align":1001},[950,15577,15578,15594],{},[937,15579,15580,15585],{},[955,15581,15582],{"align":1001},[1705,15583,15584],{},"isLock",[955,15586,15587,15588,15590,15591,15593],{"align":1001},"Return ",[618,15589,965],{}," if \"lock\", ",[618,15592,975],{}," if \"unlock\" events are triggered.",[937,15595,15596,15600],{},[955,15597,15598],{"align":1001},[1705,15599,15058],{},[955,15601,15127],{"align":1001},[1331,15603,15604],{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":15606},[15607,15608,15609],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},"WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards",{},{"title":107,"description":15610},"JsqWPKHPZZiR4adE8-4JRSXX6nIDXZY-G6WUdxsHgQM",{"id":15615,"title":111,"body":15616,"description":15941,"extension":591,"links":592,"meta":15942,"navigation":594,"path":112,"seo":15943,"stem":113,"__hash__":15944},"docs\u002F2.api\u002F2.controls\u002Fmap-controls.md",{"type":501,"value":15617,"toc":15937},[15618,15623,15631,15633,15853,15858,15860,15930,15935],[608,15619,15620],{},[15621,15622],"controls-map-controls",{},[614,15624,15625,15630],{},[1144,15626,15629],{"href":15627,"rel":15628},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=controls#examples\u002Fen\u002Fcontrols\u002FMapControls",[1148],"MapControls"," similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse\u002Ftouch interaction and disables screen space panning by default.",[504,15632,15],{"id":624},[626,15634,15637],{"className":628,"code":15635,"highlights":15636,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { MapControls } from \"@tresjs\u002Fcientos\"\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CMapControls \u002F>\n \u003CBox :scale=\"2\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FBox>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003CTresGridHelper \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[755],[618,15638,15639,15649,15668,15676,15684,15702,15734,15743,15763,15781,15789,15797,15829,15837,15845],{"__ignoreMap":576},[637,15640,15641,15643,15645,15647],{"class":639,"line":577},[637,15642,643],{"class":642},[637,15644,647],{"class":646},[637,15646,651],{"class":650},[637,15648,669],{"class":642},[637,15650,15651,15653,15655,15658,15660,15662,15664,15666],{"class":639,"line":578},[637,15652,677],{"class":676},[637,15654,680],{"class":642},[637,15656,15657],{"class":683}," MapControls",[637,15659,693],{"class":642},[637,15661,696],{"class":676},[637,15663,9815],{"class":642},[637,15665,702],{"class":663},[637,15667,3224],{"class":642},[637,15669,15670,15672,15674],{"class":639,"line":708},[637,15671,732],{"class":642},[637,15673,647],{"class":646},[637,15675,669],{"class":642},[637,15677,15678,15680,15682],{"class":639,"line":729},[637,15679,643],{"class":642},[637,15681,750],{"class":646},[637,15683,669],{"class":642},[637,15685,15686,15688,15690,15692,15694,15696,15698,15700],{"class":639,"line":739},[637,15687,758],{"class":642},[637,15689,761],{"class":646},[637,15691,764],{"class":650},[637,15693,657],{"class":642},[637,15695,660],{"class":642},[637,15697,12358],{"class":663},[637,15699,660],{"class":642},[637,15701,669],{"class":642},[637,15703,15704,15706,15708,15710,15712,15714,15716,15718,15720,15722,15724,15726,15728,15730,15732],{"class":639,"line":745},[637,15705,781],{"class":642},[637,15707,784],{"class":646},[637,15709,813],{"class":642},[637,15711,1491],{"class":650},[637,15713,657],{"class":642},[637,15715,660],{"class":642},[637,15717,1498],{"class":642},[637,15719,2729],{"class":823},[637,15721,1503],{"class":642},[637,15723,2729],{"class":823},[637,15725,1503],{"class":642},[637,15727,2729],{"class":823},[637,15729,1513],{"class":642},[637,15731,660],{"class":642},[637,15733,787],{"class":642},[637,15735,15737,15739,15741],{"class":15736,"line":755},[639,673],[637,15738,781],{"class":642},[637,15740,15629],{"class":646},[637,15742,787],{"class":642},[637,15744,15745,15747,15749,15751,15753,15755,15757,15759,15761],{"class":639,"line":778},[637,15746,781],{"class":642},[637,15748,217],{"class":646},[637,15750,813],{"class":642},[637,15752,816],{"class":650},[637,15754,657],{"class":642},[637,15756,660],{"class":642},[637,15758,824],{"class":823},[637,15760,660],{"class":642},[637,15762,669],{"class":642},[637,15764,15765,15767,15769,15771,15773,15775,15777,15779],{"class":639,"line":790},[637,15766,857],{"class":642},[637,15768,14035],{"class":646},[637,15770,2773],{"class":650},[637,15772,657],{"class":642},[637,15774,660],{"class":642},[637,15776,14044],{"class":663},[637,15778,660],{"class":642},[637,15780,787],{"class":642},[637,15782,15783,15785,15787],{"class":639,"line":800},[637,15784,899],{"class":642},[637,15786,217],{"class":646},[637,15788,669],{"class":642},[637,15790,15791,15793,15795],{"class":639,"line":805},[637,15792,781],{"class":642},[637,15794,10010],{"class":646},[637,15796,787],{"class":642},[637,15798,15799,15801,15803,15805,15807,15809,15811,15813,15815,15817,15819,15821,15823,15825,15827],{"class":639,"line":831},[637,15800,781],{"class":642},[637,15802,10031],{"class":646},[637,15804,813],{"class":642},[637,15806,1491],{"class":650},[637,15808,657],{"class":642},[637,15810,660],{"class":642},[637,15812,1498],{"class":642},[637,15814,969],{"class":823},[637,15816,1503],{"class":642},[637,15818,824],{"class":823},[637,15820,1503],{"class":642},[637,15822,3900],{"class":823},[637,15824,1513],{"class":642},[637,15826,660],{"class":642},[637,15828,787],{"class":642},[637,15830,15831,15833,15835],{"class":639,"line":631},[637,15832,781],{"class":642},[637,15834,8311],{"class":646},[637,15836,787],{"class":642},[637,15838,15839,15841,15843],{"class":639,"line":854},[637,15840,909],{"class":642},[637,15842,761],{"class":646},[637,15844,669],{"class":642},[637,15846,15847,15849,15851],{"class":639,"line":865},[637,15848,732],{"class":642},[637,15850,750],{"class":646},[637,15852,669],{"class":642},[3292,15854,15855],{},[614,15856,15857],{},"It is really important that the perspective camera is set first in the canvas. Otherwise the scene might break.",[504,15859,926],{"id":925},[931,15861,15862,15872],{},[934,15863,15864],{},[937,15865,15866,15868,15870],{},[940,15867,942],{"align":1001},[940,15869,945],{"align":1001},[940,15871,948],{},[950,15873,15874,15888,15900,15913],{},[937,15875,15876,15880,15884],{},[955,15877,15878],{"align":1001},[1705,15879,14151],{},[955,15881,962,15882,15470],{"align":1001},[618,15883,965],{},[955,15885,15886],{},[618,15887,975],{},[937,15889,15890,15894,15896],{},[955,15891,15892],{"align":1001},[1705,15893,14165],{},[955,15895,14168],{"align":1001},[955,15897,15898],{},[618,15899,1183],{},[937,15901,15902,15906,15909],{},[955,15903,15904],{"align":1001},[1705,15905,14179],{},[955,15907,15908],{"align":1001},"The dom element to listen to.",[955,15910,15911],{},[618,15912,1183],{},[937,15914,15915,15920,15926],{},[955,15916,15917],{"align":1001},[1705,15918,15919],{},"screenSpacePanning",[955,15921,15922,15923,15925],{"align":1001},"Defines how the camera's position is translated when panning. If ",[618,15924,965],{},", the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction.",[955,15927,15928],{},[618,15929,975],{},[2078,15931,15932],{},[614,15933,15934],{},"All the props of the orbit controls component apply here too.",[1331,15936,15139],{},{"title":576,"searchDepth":577,"depth":578,"links":15938},[15939,15940],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"similar to OrbitControls but for map views",{},{"title":111,"description":15941},"3Gr5ZfaS0tXm4RGuh0wLyX1tmIw4ZrdyL-nbg-P_RPU",{"id":15946,"title":115,"body":15947,"description":16673,"extension":591,"links":592,"meta":16674,"navigation":594,"path":116,"seo":16675,"stem":117,"__hash__":16676},"docs\u002F2.api\u002F2.controls\u002Forbit-controls.md",{"type":501,"value":15948,"toc":16668},[15949,15954,15961,15963,16182,16186,16188,16579,16581,16630,16666],[608,15950,15951],{},[15952,15953],"controls-orbit-controls",{},[614,15955,15956,15960],{},[1144,15957,795],{"href":15958,"rel":15959},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=orbit#examples\u002Fen\u002Fcontrols\u002FOrbitControls",[1148]," is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.",[504,15962,15],{"id":624},[626,15964,15967],{"className":628,"code":15965,"highlights":15966,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { OrbitControls } from \"@tresjs\u002Fcientos\"\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CBox :scale=\"2\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FBox>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003CTresGridHelper \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[755],[618,15968,15969,15979,15997,16005,16013,16031,16063,16072,16092,16110,16118,16126,16158,16166,16174],{"__ignoreMap":576},[637,15970,15971,15973,15975,15977],{"class":639,"line":577},[637,15972,643],{"class":642},[637,15974,647],{"class":646},[637,15976,651],{"class":650},[637,15978,669],{"class":642},[637,15980,15981,15983,15985,15987,15989,15991,15993,15995],{"class":639,"line":578},[637,15982,677],{"class":676},[637,15984,680],{"class":642},[637,15986,690],{"class":683},[637,15988,693],{"class":642},[637,15990,696],{"class":676},[637,15992,9815],{"class":642},[637,15994,702],{"class":663},[637,15996,3224],{"class":642},[637,15998,15999,16001,16003],{"class":639,"line":708},[637,16000,732],{"class":642},[637,16002,647],{"class":646},[637,16004,669],{"class":642},[637,16006,16007,16009,16011],{"class":639,"line":729},[637,16008,643],{"class":642},[637,16010,750],{"class":646},[637,16012,669],{"class":642},[637,16014,16015,16017,16019,16021,16023,16025,16027,16029],{"class":639,"line":739},[637,16016,758],{"class":642},[637,16018,761],{"class":646},[637,16020,764],{"class":650},[637,16022,657],{"class":642},[637,16024,660],{"class":642},[637,16026,12358],{"class":663},[637,16028,660],{"class":642},[637,16030,669],{"class":642},[637,16032,16033,16035,16037,16039,16041,16043,16045,16047,16049,16051,16053,16055,16057,16059,16061],{"class":639,"line":745},[637,16034,781],{"class":642},[637,16036,784],{"class":646},[637,16038,813],{"class":642},[637,16040,1491],{"class":650},[637,16042,657],{"class":642},[637,16044,660],{"class":642},[637,16046,1498],{"class":642},[637,16048,2729],{"class":823},[637,16050,1503],{"class":642},[637,16052,2729],{"class":823},[637,16054,1503],{"class":642},[637,16056,2729],{"class":823},[637,16058,1513],{"class":642},[637,16060,660],{"class":642},[637,16062,787],{"class":642},[637,16064,16066,16068,16070],{"class":16065,"line":755},[639,673],[637,16067,781],{"class":642},[637,16069,795],{"class":646},[637,16071,787],{"class":642},[637,16073,16074,16076,16078,16080,16082,16084,16086,16088,16090],{"class":639,"line":778},[637,16075,781],{"class":642},[637,16077,217],{"class":646},[637,16079,813],{"class":642},[637,16081,816],{"class":650},[637,16083,657],{"class":642},[637,16085,660],{"class":642},[637,16087,824],{"class":823},[637,16089,660],{"class":642},[637,16091,669],{"class":642},[637,16093,16094,16096,16098,16100,16102,16104,16106,16108],{"class":639,"line":790},[637,16095,857],{"class":642},[637,16097,14035],{"class":646},[637,16099,2773],{"class":650},[637,16101,657],{"class":642},[637,16103,660],{"class":642},[637,16105,14044],{"class":663},[637,16107,660],{"class":642},[637,16109,787],{"class":642},[637,16111,16112,16114,16116],{"class":639,"line":800},[637,16113,899],{"class":642},[637,16115,217],{"class":646},[637,16117,669],{"class":642},[637,16119,16120,16122,16124],{"class":639,"line":805},[637,16121,781],{"class":642},[637,16123,10010],{"class":646},[637,16125,787],{"class":642},[637,16127,16128,16130,16132,16134,16136,16138,16140,16142,16144,16146,16148,16150,16152,16154,16156],{"class":639,"line":831},[637,16129,781],{"class":642},[637,16131,10031],{"class":646},[637,16133,813],{"class":642},[637,16135,1491],{"class":650},[637,16137,657],{"class":642},[637,16139,660],{"class":642},[637,16141,1498],{"class":642},[637,16143,969],{"class":823},[637,16145,1503],{"class":642},[637,16147,824],{"class":823},[637,16149,1503],{"class":642},[637,16151,3900],{"class":823},[637,16153,1513],{"class":642},[637,16155,660],{"class":642},[637,16157,787],{"class":642},[637,16159,16160,16162,16164],{"class":639,"line":631},[637,16161,781],{"class":642},[637,16163,8311],{"class":646},[637,16165,787],{"class":642},[637,16167,16168,16170,16172],{"class":639,"line":854},[637,16169,909],{"class":642},[637,16171,761],{"class":646},[637,16173,669],{"class":642},[637,16175,16176,16178,16180],{"class":639,"line":865},[637,16177,732],{"class":642},[637,16179,750],{"class":646},[637,16181,669],{"class":642},[3292,16183,16184],{},[614,16185,14125],{},[504,16187,926],{"id":925},[931,16189,16190,16200],{},[934,16191,16192],{},[937,16193,16194,16196,16198],{},[940,16195,942],{"align":1001},[940,16197,945],{"align":1001},[940,16199,948],{},[950,16201,16202,16216,16228,16240,16254,16270,16288,16302,16320,16334,16349,16364,16385,16403,16416,16429,16442,16455,16468,16481,16495,16509,16523,16537,16551,16565],{},[937,16203,16204,16208,16212],{},[955,16205,16206],{"align":1001},[1705,16207,14151],{},[955,16209,962,16210,15470],{"align":1001},[618,16211,965],{},[955,16213,16214],{},[618,16215,975],{},[937,16217,16218,16222,16224],{},[955,16219,16220],{"align":1001},[1705,16221,14165],{},[955,16223,14168],{"align":1001},[955,16225,16226],{},[618,16227,1183],{},[937,16229,16230,16234,16236],{},[955,16231,16232],{"align":1001},[1705,16233,14179],{},[955,16235,15908],{"align":1001},[955,16237,16238],{},[618,16239,1183],{},[937,16241,16242,16247,16250],{},[955,16243,16244],{"align":1001},[1705,16245,16246],{},"target",[955,16248,16249],{"align":1001},"The target to orbit around.",[955,16251,16252],{},[618,16253,1183],{},[937,16255,16256,16261,16266],{},[955,16257,16258],{"align":1001},[1705,16259,16260],{},"enableDamping",[955,16262,962,16263,16265],{"align":1001},[618,16264,965],{},", the controls will use damping (inertia), which can be used to give a sense of weight to the controls.",[955,16267,16268],{},[618,16269,965],{},[937,16271,16272,16277,16284],{},[955,16273,16274],{"align":1001},[1705,16275,16276],{},"dampingFactor",[955,16278,16279,16280,16283],{"align":1001},"The damping inertia used if ",[618,16281,16282],{},".enableDamping"," is set to true.",[955,16285,16286],{},[618,16287,12210],{},[937,16289,16290,16295,16298],{},[955,16291,16292],{"align":1001},[1705,16293,16294],{},"autoRotate",[955,16296,16297],{"align":1001},"Set to true to automatically rotate around the target.",[955,16299,16300],{},[618,16301,975],{},[937,16303,16304,16309,16316],{},[955,16305,16306],{"align":1001},[1705,16307,16308],{},"autoRotateSpeed",[955,16310,16311,16312,16315],{"align":1001},"How fast to rotate around the target if ",[618,16313,16314],{},".autoRotate"," is true.",[955,16317,16318],{},[618,16319,824],{},[937,16321,16322,16327,16330],{},[955,16323,16324],{"align":1001},[1705,16325,16326],{},"enablePan",[955,16328,16329],{"align":1001},"Whether to enable panning.",[955,16331,16332],{},[618,16333,965],{},[937,16335,16336,16341,16344],{},[955,16337,16338],{"align":1001},[1705,16339,16340],{},"keyPanSpeed",[955,16342,16343],{"align":1001},"How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.",[955,16345,16346],{},[618,16347,16348],{},"7.0",[937,16350,16351,16356,16359],{},[955,16352,16353],{"align":1001},[1705,16354,16355],{},"keys",[955,16357,16358],{"align":1001},"This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.",[955,16360,16361],{},[618,16362,16363],{},"{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }",[937,16365,16366,16370,16381],{},[955,16367,16368],{"align":1001},[1705,16369,14236],{},[955,16371,16372,16373,16376,16377,16380],{"align":1001},"How far you can orbit horizontally, upper limit. If set, the interval ",[637,16374,16375],{}," min, max"," must be a sub-interval of ",[637,16378,16379],{}," - 2 PI, 2 PI",", with ( max - min \u003C 2 PI ). Default is Infinity.",[955,16382,16383],{},[618,16384,14244],{},[937,16386,16387,16391,16399],{},[955,16388,16389],{"align":1001},[1705,16390,14221],{},[955,16392,16393,16394,16376,16396,16398],{"align":1001},"How far you can orbit horizontally, lower limit. If set, the interval ",[637,16395,16375],{},[637,16397,16379],{},", with ( max - min \u003C 2 PI ). Default is - Infinity.",[955,16400,16401],{},[618,16402,14229],{},[937,16404,16405,16409,16412],{},[955,16406,16407],{"align":1001},[1705,16408,14207],{},[955,16410,16411],{"align":1001},"How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.",[955,16413,16414],{},[618,16415,12231],{},[937,16417,16418,16422,16425],{},[955,16419,16420],{"align":1001},[1705,16421,14193],{},[955,16423,16424],{"align":1001},"How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.",[955,16426,16427],{},[618,16428,969],{},[937,16430,16431,16435,16438],{},[955,16432,16433],{"align":1001},[1705,16434,14266],{},[955,16436,16437],{"align":1001},"The minimum distance of the camera to the target. Default is 0.",[955,16439,16440],{},[618,16441,969],{},[937,16443,16444,16448,16451],{},[955,16445,16446],{"align":1001},[1705,16447,14281],{},[955,16449,16450],{"align":1001},"The maximum distance of the camera to the target. Default is Infinity.",[955,16452,16453],{},[618,16454,14244],{},[937,16456,16457,16461,16464],{},[955,16458,16459],{"align":1001},[1705,16460,14311],{},[955,16462,16463],{"align":1001},"The minimum field of view angle, in radians. Default is 0.",[955,16465,16466],{},[618,16467,969],{},[937,16469,16470,16474,16477],{},[955,16471,16472],{"align":1001},[1705,16473,14325],{},[955,16475,16476],{"align":1001},"The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.",[955,16478,16479],{},[618,16480,14244],{},[937,16482,16483,16487,16490],{},[955,16484,16485],{"align":1001},[1705,16486,14571],{},[955,16488,16489],{"align":1001},"This object contains references to the touch actions used by the controls.",[955,16491,16492],{},[618,16493,16494],{},"{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }",[937,16496,16497,16501,16504],{},[955,16498,16499],{"align":1001},[1705,16500,14552],{},[955,16502,16503],{"align":1001},"This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.",[955,16505,16506],{},[618,16507,16508],{},"{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }",[937,16510,16511,16516,16519],{},[955,16512,16513],{"align":1001},[1705,16514,16515],{},"enableZoom",[955,16517,16518],{"align":1001},"Whether to enable zooming.",[955,16520,16521],{},[618,16522,965],{},[937,16524,16525,16530,16533],{},[955,16526,16527],{"align":1001},[1705,16528,16529],{},"zoomSpeed",[955,16531,16532],{"align":1001},"How fast to zoom in and out. Default is 1.",[955,16534,16535],{},[618,16536,1925],{},[937,16538,16539,16544,16547],{},[955,16540,16541],{"align":1001},[1705,16542,16543],{},"enableRotate",[955,16545,16546],{"align":1001},"Whether to enable rotating.",[955,16548,16549],{},[618,16550,965],{},[937,16552,16553,16558,16561],{},[955,16554,16555],{"align":1001},[1705,16556,16557],{},"rotateSpeed",[955,16559,16560],{"align":1001},"How fast to rotate around the target. Default is 1.",[955,16562,16563],{},[618,16564,1925],{},[937,16566,16567,16571,16575],{},[955,16568,16569],{"align":1001},[1705,16570,15919],{},[955,16572,15922,16573,15925],{"align":1001},[618,16574,965],{},[955,16576,16577],{},[618,16578,965],{},[504,16580,15042],{"id":15041},[626,16582,16584],{"className":628,"code":16583,"language":633,"meta":576,"style":576},"\u003COrbitControls @change=\"onChange\" @start=\"onStart\" @end=\"onEnd\" \u002F>\n",[618,16585,16586],{"__ignoreMap":576},[637,16587,16588,16590,16592,16594,16596,16598,16600,16602,16604,16606,16608,16610,16612,16614,16616,16618,16620,16622,16624,16626,16628],{"class":639,"line":577},[637,16589,643],{"class":642},[637,16591,795],{"class":646},[637,16593,4417],{"class":642},[637,16595,15058],{"class":650},[637,16597,657],{"class":642},[637,16599,660],{"class":642},[637,16601,15065],{"class":683},[637,16603,660],{"class":642},[637,16605,4417],{"class":642},[637,16607,15072],{"class":650},[637,16609,657],{"class":642},[637,16611,660],{"class":642},[637,16613,15079],{"class":683},[637,16615,660],{"class":642},[637,16617,4417],{"class":642},[637,16619,15086],{"class":650},[637,16621,657],{"class":642},[637,16623,660],{"class":642},[637,16625,15093],{"class":683},[637,16627,660],{"class":642},[637,16629,787],{"class":642},[931,16631,16632,16640],{},[934,16633,16634],{},[937,16635,16636,16638],{},[940,16637,5968],{"align":1001},[940,16639,945],{"align":1001},[950,16641,16642,16650,16658],{},[937,16643,16644,16648],{},[955,16645,16646],{"align":1001},[1705,16647,15072],{},[955,16649,15118],{"align":1001},[937,16651,16652,16656],{},[955,16653,16654],{"align":1001},[1705,16655,15058],{},[955,16657,15127],{"align":1001},[937,16659,16660,16664],{},[955,16661,16662],{"align":1001},[1705,16663,15086],{},[955,16665,15136],{"align":1001},[1331,16667,15139],{},{"title":576,"searchDepth":577,"depth":578,"links":16669},[16670,16671,16672],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},"Allows you to orbit around the scene",{},{"title":115,"description":16673},"IQCftiJiGyLobGnbQSjgWE8zZkH7Aq-fMxmuEUs6EWI",{"id":16678,"title":119,"body":16679,"description":17031,"extension":591,"links":592,"meta":17032,"navigation":594,"path":120,"seo":17033,"stem":121,"__hash__":17034},"docs\u002F2.api\u002F2.controls\u002Fpointer-lock-controls.md",{"type":501,"value":16680,"toc":17026},[16681,16686,16693,16712,16714,16871,16875,16877,16942,16944,16991,17024],[608,16682,16683],{},[16684,16685],"controls-pointer-lock-controls",{},[614,16687,16688,16692],{},[1144,16689,15263],{"href":16690,"rel":16691},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=pointe#examples\u002Fen\u002Fcontrols\u002FPointerLockControls",[1148]," is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.",[3292,16694,16695],{},[614,16696,16697,16698,16711],{},"This control uses the ",[637,16699,16701,16704],{"style":16700},"background-color:#222;padding:0.25rem;border-radius:4px;",[1144,16702],{"href":116,"style":16703},"color:#f7f7f7;text-decoration:none",[1144,16705,16708],{"href":16706,"rel":16707},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FPointer_Lock_API",[1148],[618,16709,16710],{},"Pointer Lock API",", the same rules are applied, for example, you need to interact with the browser to \"lock\" or start the event.\nIn addition, you need to wait 1 second between canceling and re-starting the event",[504,16713,15],{"id":624},[626,16715,16718],{"className":628,"code":16716,"highlights":16717,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { PointerLockControls, Box } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera \u002F>\n \u003CBox :position-y=\"0.5\" \u002F>\n \u003CPointerLockControls \u002F>\n \u003CTresGridHelper \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800],[618,16719,16720,16740,16758,16782,16790,16794,16802,16810,16818,16838,16847,16855,16863],{"__ignoreMap":576},[637,16721,16722,16724,16726,16728,16730,16732,16734,16736,16738],{"class":639,"line":577},[637,16723,643],{"class":642},[637,16725,647],{"class":646},[637,16727,651],{"class":650},[637,16729,654],{"class":650},[637,16731,657],{"class":642},[637,16733,660],{"class":642},[637,16735,664],{"class":663},[637,16737,660],{"class":642},[637,16739,669],{"class":642},[637,16741,16742,16744,16746,16748,16750,16752,16754,16756],{"class":639,"line":578},[637,16743,677],{"class":676},[637,16745,680],{"class":642},[637,16747,715],{"class":683},[637,16749,693],{"class":642},[637,16751,696],{"class":676},[637,16753,699],{"class":642},[637,16755,724],{"class":663},[637,16757,705],{"class":642},[637,16759,16761,16763,16765,16768,16770,16772,16774,16776,16778,16780],{"class":16760,"line":708},[639,673],[637,16762,677],{"class":676},[637,16764,680],{"class":642},[637,16766,16767],{"class":683}," PointerLockControls",[637,16769,687],{"class":642},[637,16771,1401],{"class":683},[637,16773,693],{"class":642},[637,16775,696],{"class":676},[637,16777,699],{"class":642},[637,16779,702],{"class":663},[637,16781,705],{"class":642},[637,16783,16784,16786,16788],{"class":639,"line":729},[637,16785,732],{"class":642},[637,16787,647],{"class":646},[637,16789,669],{"class":642},[637,16791,16792],{"class":639,"line":739},[637,16793,742],{"emptyLinePlaceholder":594},[637,16795,16796,16798,16800],{"class":639,"line":745},[637,16797,643],{"class":642},[637,16799,750],{"class":646},[637,16801,669],{"class":642},[637,16803,16804,16806,16808],{"class":639,"line":755},[637,16805,758],{"class":642},[637,16807,761],{"class":646},[637,16809,669],{"class":642},[637,16811,16812,16814,16816],{"class":639,"line":778},[637,16813,781],{"class":642},[637,16815,784],{"class":646},[637,16817,787],{"class":642},[637,16819,16820,16822,16824,16826,16828,16830,16832,16834,16836],{"class":639,"line":790},[637,16821,781],{"class":642},[637,16823,217],{"class":646},[637,16825,813],{"class":642},[637,16827,2000],{"class":650},[637,16829,657],{"class":642},[637,16831,660],{"class":642},[637,16833,1545],{"class":823},[637,16835,660],{"class":642},[637,16837,787],{"class":642},[637,16839,16841,16843,16845],{"class":16840,"line":800},[639,673],[637,16842,781],{"class":642},[637,16844,15263],{"class":646},[637,16846,787],{"class":642},[637,16848,16849,16851,16853],{"class":639,"line":805},[637,16850,781],{"class":642},[637,16852,8311],{"class":646},[637,16854,787],{"class":642},[637,16856,16857,16859,16861],{"class":639,"line":831},[637,16858,909],{"class":642},[637,16860,761],{"class":646},[637,16862,669],{"class":642},[637,16864,16865,16867,16869],{"class":639,"line":631},[637,16866,732],{"class":642},[637,16868,750],{"class":646},[637,16870,669],{"class":642},[3292,16872,16873],{},[614,16874,14125],{},[504,16876,926],{"id":925},[931,16878,16879,16889],{},[934,16880,16881],{},[937,16882,16883,16885,16887],{},[940,16884,942],{"align":1001},[940,16886,945],{"align":1001},[940,16888,948],{},[950,16890,16891,16905,16917,16929],{},[937,16892,16893,16897,16901],{},[955,16894,16895],{"align":1001},[1705,16896,14151],{},[955,16898,962,16899,15470],{"align":1001},[618,16900,965],{},[955,16902,16903],{},[618,16904,975],{},[937,16906,16907,16911,16913],{},[955,16908,16909],{"align":1001},[1705,16910,14165],{},[955,16912,14168],{"align":1001},[955,16914,16915],{},[618,16916,1183],{},[937,16918,16919,16923,16925],{},[955,16920,16921],{"align":1001},[1705,16922,14179],{},[955,16924,15908],{"align":1001},[955,16926,16927],{},[618,16928,1183],{},[937,16930,16931,16935,16938],{},[955,16932,16933],{"align":1001},[1705,16934,15505],{},[955,16936,16937],{"align":1001},"Accept an id element as string, if it is set, the new element will be used as the trigger",[955,16939,16940],{},[618,16941,1183],{},[504,16943,15042],{"id":15041},[626,16945,16947],{"className":628,"code":16946,"language":633,"meta":576,"style":576},"\u003CPointerLockControls @change=\"onChange\" @is-lock=\"(state) => isActive(state)\" \u002F>\n",[618,16948,16949],{"__ignoreMap":576},[637,16950,16951,16953,16955,16957,16959,16961,16963,16965,16967,16969,16971,16973,16975,16977,16979,16981,16983,16985,16987,16989],{"class":639,"line":577},[637,16952,643],{"class":642},[637,16954,15263],{"class":646},[637,16956,4417],{"class":642},[637,16958,15058],{"class":650},[637,16960,657],{"class":642},[637,16962,660],{"class":642},[637,16964,15065],{"class":683},[637,16966,660],{"class":642},[637,16968,4417],{"class":642},[637,16970,15542],{"class":650},[637,16972,657],{"class":642},[637,16974,660],{"class":642},[637,16976,2509],{"class":642},[637,16978,15551],{"class":7047},[637,16980,3433],{"class":642},[637,16982,3770],{"class":650},[637,16984,15558],{"class":2506},[637,16986,15561],{"class":683},[637,16988,660],{"class":642},[637,16990,787],{"class":683},[931,16992,16993,17001],{},[934,16994,16995],{},[937,16996,16997,16999],{},[940,16998,5968],{"align":1001},[940,17000,945],{"align":1001},[950,17002,17003,17016],{},[937,17004,17005,17009],{},[955,17006,17007],{"align":1001},[1705,17008,15584],{},[955,17010,15587,17011,15590,17013,17015],{"align":1001},[618,17012,965],{},[618,17014,975],{}," if \"unlock\" events are trigger.",[937,17017,17018,17022],{},[955,17019,17020],{"align":1001},[1705,17021,15058],{},[955,17023,15127],{"align":1001},[1331,17025,15604],{},{"title":576,"searchDepth":577,"depth":578,"links":17027},[17028,17029,17030],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},"Allows you to capture the mouse movement and simulate a first person camera",{},{"title":119,"description":17031},"D_6d4pTGDPfnlucQrxiFcUWuxhufIMPSU-uRuD7K7M4",{"id":17036,"title":123,"body":17037,"description":17781,"extension":591,"links":592,"meta":17782,"navigation":594,"path":124,"seo":17783,"stem":125,"__hash__":17784},"docs\u002F2.api\u002F2.controls\u002Ftransform-controls.md",{"type":501,"value":17038,"toc":17771},[17039,17046,17051,17053,17064,17308,17326,17330,17333,17337,17342,17345,17381,17385,17390,17393,17428,17431,17436,17439,17474,17476,17702,17704,17765,17768],[614,17040,2867,17041,17045],{},[1144,17042,123],{"href":17043,"rel":17044},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#examples\u002Fen\u002Fcontrols\u002FTransformControls",[1148]," are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender",[608,17047,17048],{},[17049,17050],"controls-transform-controls",{},[504,17052,15],{"id":624},[614,17054,17055,17056,17059,17060,17063],{},"To use the Transform Controls, simply add the ",[618,17057,17058],{},"TransformControls"," component to your scene. You can pass the ",[618,17061,17062],{},"templateRef","of the instance you want to control as a prop.",[626,17065,17068],{"className":628,"code":17066,"highlights":17067,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nconst boxRef = shallowRef()\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" \u002F>\n \u003COrbitControls make-default \u002F>\n \u003CTransformControls :object=\"boxRef\" \u002F>\n \u003CTresMesh ref=\"boxRef\" :position=\"[0, 4, 0]\" cast-shadow>\n \u003CTresBoxGeometry :args=\"[1.5, 1.5, 1.5]\" \u002F>\n \u003CTresMeshToonMaterial color=\"#4F4F4F\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[755,778],[618,17069,17070,17080,17093,17101,17109,17117,17154,17165,17188,17233,17266,17284,17292,17300],{"__ignoreMap":576},[637,17071,17072,17074,17076,17078],{"class":639,"line":577},[637,17073,643],{"class":642},[637,17075,647],{"class":646},[637,17077,651],{"class":650},[637,17079,669],{"class":642},[637,17081,17082,17084,17087,17089,17091],{"class":639,"line":578},[637,17083,2487],{"class":650},[637,17085,17086],{"class":683}," boxRef ",[637,17088,657],{"class":642},[637,17090,3591],{"class":2506},[637,17092,6744],{"class":683},[637,17094,17095,17097,17099],{"class":639,"line":708},[637,17096,732],{"class":642},[637,17098,647],{"class":646},[637,17100,669],{"class":642},[637,17102,17103,17105,17107],{"class":639,"line":729},[637,17104,643],{"class":642},[637,17106,750],{"class":646},[637,17108,669],{"class":642},[637,17110,17111,17113,17115],{"class":639,"line":739},[637,17112,758],{"class":642},[637,17114,761],{"class":646},[637,17116,669],{"class":642},[637,17118,17119,17121,17123,17125,17127,17129,17131,17133,17136,17138,17140,17142,17144,17146,17148,17150,17152],{"class":639,"line":745},[637,17120,781],{"class":642},[637,17122,784],{"class":646},[637,17124,813],{"class":642},[637,17126,2021],{"class":650},[637,17128,657],{"class":642},[637,17130,660],{"class":642},[637,17132,1498],{"class":642},[637,17134,17135],{"class":823},"45",[637,17137,1503],{"class":642},[637,17139,1925],{"class":823},[637,17141,1503],{"class":642},[637,17143,2235],{"class":823},[637,17145,1503],{"class":642},[637,17147,9586],{"class":823},[637,17149,1513],{"class":642},[637,17151,660],{"class":642},[637,17153,787],{"class":642},[637,17155,17157,17159,17161,17163],{"class":17156,"line":755},[639,673],[637,17158,781],{"class":642},[637,17160,795],{"class":646},[637,17162,1900],{"class":650},[637,17164,787],{"class":642},[637,17166,17168,17170,17172,17174,17177,17179,17181,17184,17186],{"class":17167,"line":778},[639,673],[637,17169,781],{"class":642},[637,17171,17058],{"class":646},[637,17173,813],{"class":642},[637,17175,17176],{"class":650},"object",[637,17178,657],{"class":642},[637,17180,660],{"class":642},[637,17182,17183],{"class":683},"boxRef",[637,17185,660],{"class":642},[637,17187,787],{"class":642},[637,17189,17190,17192,17194,17196,17198,17200,17202,17204,17206,17208,17210,17212,17214,17216,17218,17220,17222,17224,17226,17228,17231],{"class":639,"line":790},[637,17191,781],{"class":642},[637,17193,860],{"class":646},[637,17195,3999],{"class":650},[637,17197,657],{"class":642},[637,17199,660],{"class":642},[637,17201,17183],{"class":663},[637,17203,660],{"class":642},[637,17205,813],{"class":642},[637,17207,1491],{"class":650},[637,17209,657],{"class":642},[637,17211,660],{"class":642},[637,17213,1498],{"class":642},[637,17215,969],{"class":823},[637,17217,1503],{"class":642},[637,17219,3900],{"class":823},[637,17221,1503],{"class":642},[637,17223,969],{"class":823},[637,17225,1513],{"class":642},[637,17227,660],{"class":642},[637,17229,17230],{"class":650}," cast-shadow",[637,17232,669],{"class":642},[637,17234,17235,17237,17239,17241,17243,17245,17247,17249,17252,17254,17256,17258,17260,17262,17264],{"class":639,"line":800},[637,17236,857],{"class":642},[637,17238,871],{"class":646},[637,17240,813],{"class":642},[637,17242,2021],{"class":650},[637,17244,657],{"class":642},[637,17246,660],{"class":642},[637,17248,1498],{"class":642},[637,17250,17251],{"class":823},"1.5",[637,17253,1503],{"class":642},[637,17255,17251],{"class":823},[637,17257,1503],{"class":642},[637,17259,17251],{"class":823},[637,17261,1513],{"class":642},[637,17263,660],{"class":642},[637,17265,787],{"class":642},[637,17267,17268,17270,17272,17274,17276,17278,17280,17282],{"class":639,"line":805},[637,17269,857],{"class":642},[637,17271,14035],{"class":646},[637,17273,2773],{"class":650},[637,17275,657],{"class":642},[637,17277,660],{"class":642},[637,17279,8150],{"class":663},[637,17281,660],{"class":642},[637,17283,787],{"class":642},[637,17285,17286,17288,17290],{"class":639,"line":831},[637,17287,899],{"class":642},[637,17289,860],{"class":646},[637,17291,669],{"class":642},[637,17293,17294,17296,17298],{"class":639,"line":631},[637,17295,909],{"class":642},[637,17297,761],{"class":646},[637,17299,669],{"class":642},[637,17301,17302,17304,17306],{"class":639,"line":854},[637,17303,732],{"class":642},[637,17305,750],{"class":646},[637,17307,669],{"class":642},[3292,17309,17310],{},[614,17311,17312,17313,17317,17318,17320,17321,17323,17324,1150],{},"If you are using other controls ",[637,17314,17315],{"style":16700},[1144,17316,795],{"href":116,"style":16703}," they will interfere with each other when dragging. To avoid this, you can set the ",[618,17319,14151],{}," prop to ",[618,17322,965],{}," on the ",[1705,17325,795],{},[504,17327,17329],{"id":17328},"modes","Modes",[614,17331,17332],{},"The Transform Controls can be used in three different modes:",[4215,17334,17336],{"id":17335},"translate","Translate",[614,17338,17339],{},[9760,17340],{"alt":17336,"src":17341},"\u002Fcientos\u002Ftransform-controls-translate.png",[614,17343,17344],{},"The default mode allows you to move the object around the scene.",[626,17346,17348],{"className":628,"code":17347,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"translate\" :object=\"sphereRef\" \u002F>\n",[618,17349,17350],{"__ignoreMap":576},[637,17351,17352,17354,17356,17358,17360,17362,17364,17366,17368,17370,17372,17374,17377,17379],{"class":639,"line":577},[637,17353,643],{"class":642},[637,17355,17058],{"class":646},[637,17357,7052],{"class":650},[637,17359,657],{"class":642},[637,17361,660],{"class":642},[637,17363,17335],{"class":663},[637,17365,660],{"class":642},[637,17367,813],{"class":642},[637,17369,17176],{"class":650},[637,17371,657],{"class":642},[637,17373,660],{"class":642},[637,17375,17376],{"class":683},"sphereRef",[637,17378,660],{"class":642},[637,17380,787],{"class":642},[4215,17382,17384],{"id":17383},"rotate","Rotate",[614,17386,17387],{},[9760,17388],{"alt":17384,"src":17389},"\u002Fcientos\u002Ftransform-controls-rotate.png",[614,17391,17392],{},"The rotate mode allows you to rotate the object around the scene.",[626,17394,17396],{"className":628,"code":17395,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"rotate\" :object=\"boxRef\" \u002F>\n",[618,17397,17398],{"__ignoreMap":576},[637,17399,17400,17402,17404,17406,17408,17410,17412,17414,17416,17418,17420,17422,17424,17426],{"class":639,"line":577},[637,17401,643],{"class":642},[637,17403,17058],{"class":646},[637,17405,7052],{"class":650},[637,17407,657],{"class":642},[637,17409,660],{"class":642},[637,17411,17383],{"class":663},[637,17413,660],{"class":642},[637,17415,813],{"class":642},[637,17417,17176],{"class":650},[637,17419,657],{"class":642},[637,17421,660],{"class":642},[637,17423,17183],{"class":683},[637,17425,660],{"class":642},[637,17427,787],{"class":642},[4215,17429,17430],{"id":816},"Scale",[614,17432,17433],{},[9760,17434],{"alt":17430,"src":17435},"\u002Fcientos\u002Ftransform-controls-scale.png",[614,17437,17438],{},"The scale mode allows you to scale the object around the scene.",[626,17440,17442],{"className":628,"code":17441,"language":633,"meta":576,"style":576},"\u003CTransformControls mode=\"scale\" :object=\"sphereRef\" \u002F>\n",[618,17443,17444],{"__ignoreMap":576},[637,17445,17446,17448,17450,17452,17454,17456,17458,17460,17462,17464,17466,17468,17470,17472],{"class":639,"line":577},[637,17447,643],{"class":642},[637,17449,17058],{"class":646},[637,17451,7052],{"class":650},[637,17453,657],{"class":642},[637,17455,660],{"class":642},[637,17457,816],{"class":663},[637,17459,660],{"class":642},[637,17461,813],{"class":642},[637,17463,17176],{"class":650},[637,17465,657],{"class":642},[637,17467,660],{"class":642},[637,17469,17376],{"class":683},[637,17471,660],{"class":642},[637,17473,787],{"class":642},[504,17475,926],{"id":925},[931,17477,17478,17488],{},[934,17479,17480],{},[937,17481,17482,17484,17486],{},[940,17483,942],{"align":1001},[940,17485,945],{"align":1001},[940,17487,948],{},[950,17489,17490,17508,17527,17543,17578,17598,17612,17626,17640,17654,17670,17686],{},[937,17491,17492,17496,17504],{},[955,17493,17494],{"align":1001},[1705,17495,17176],{},[955,17497,17498,17499,17503],{"align":1001},"The instance ",[1144,17500,7845],{"href":17501,"rel":17502},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html#api\u002Fen\u002Fcore\u002FObject3D",[1148]," to control.",[955,17505,17506],{},[618,17507,3749],{},[937,17509,17510,17514,17523],{},[955,17511,17512],{"align":1001},[1705,17513,7073],{},[955,17515,17516,17517,1503,17519,5822,17521,1150],{"align":1001},"The mode of the controls. Can be ",[618,17518,17335],{},[618,17520,17383],{},[618,17522,816],{},[955,17524,17525],{},[618,17526,17335],{},[937,17528,17529,17534,17539],{},[955,17530,17531],{"align":1001},[1705,17532,17533],{},"enabled",[955,17535,962,17536,17538],{"align":1001},[618,17537,965],{},", the controls will be enabled.",[955,17540,17541],{},[618,17542,965],{},[937,17544,17545,17550,17574],{},[955,17546,17547],{"align":1001},[1705,17548,17549],{},"axis",[955,17551,17552,17553,1503,17556,1503,17559,1503,17562,1503,17565,1503,17568,1503,17571,1150],{"align":1001},"The axis to use for the controls. Can be ",[618,17554,17555],{},"X",[618,17557,17558],{},"Y",[618,17560,17561],{},"Z",[618,17563,17564],{},"XY",[618,17566,17567],{},"YZ",[618,17569,17570],{},"XZ",[618,17572,17573],{},"XYZ",[955,17575,17576],{},[618,17577,17573],{},[937,17579,17580,17585,17594],{},[955,17581,17582],{"align":1001},[1705,17583,17584],{},"space",[955,17586,17587,17588,5822,17591,1150],{"align":1001},"The space to use for the controls. Can be ",[618,17589,17590],{},"local",[618,17592,17593],{},"world",[955,17595,17596],{},[618,17597,17590],{},[937,17599,17600,17605,17608],{},[955,17601,17602],{"align":1001},[1705,17603,17604],{},"size",[955,17606,17607],{"align":1001},"The size of the controls.",[955,17609,17610],{},[618,17611,1925],{},[937,17613,17614,17619,17622],{},[955,17615,17616],{"align":1001},[1705,17617,17618],{},"translationSnap",[955,17620,17621],{"align":1001},"The distance to snap to when translating. (World units)",[955,17623,17624],{},[618,17625,3749],{},[937,17627,17628,17633,17636],{},[955,17629,17630],{"align":1001},[1705,17631,17632],{},"rotationSnap",[955,17634,17635],{"align":1001},"The angle to snap to when rotating. (Radians)",[955,17637,17638],{},[618,17639,3749],{},[937,17641,17642,17647,17650],{},[955,17643,17644],{"align":1001},[1705,17645,17646],{},"scaleSnap",[955,17648,17649],{"align":1001},"The scale to snap to when scaling.",[955,17651,17652],{},[618,17653,3749],{},[937,17655,17656,17661,17666],{},[955,17657,17658],{"align":1001},[1705,17659,17660],{},"showX",[955,17662,962,17663,17665],{"align":1001},[618,17664,965],{},", the X-axis helper will be shown.",[955,17667,17668],{},[618,17669,965],{},[937,17671,17672,17677,17682],{},[955,17673,17674],{"align":1001},[1705,17675,17676],{},"showY",[955,17678,962,17679,17681],{"align":1001},[618,17680,965],{},", the Y-axis helper will be shown.",[955,17683,17684],{},[618,17685,965],{},[937,17687,17688,17693,17698],{},[955,17689,17690],{"align":1001},[1705,17691,17692],{},"showZ",[955,17694,962,17695,17697],{"align":1001},[618,17696,965],{},", the Z-axis helper will be shown.",[955,17699,17700],{},[618,17701,965],{},[504,17703,15042],{"id":15041},[931,17705,17706,17714],{},[934,17707,17708],{},[937,17709,17710,17712],{},[940,17711,5968],{"align":1001},[940,17713,945],{"align":1001},[950,17715,17716,17726,17735,17745,17755],{},[937,17717,17718,17723],{},[955,17719,17720],{"align":1001},[1705,17721,17722],{},"dragging",[955,17724,17725],{"align":1001},"Fired when the user starts or stops dragging the controls.",[937,17727,17728,17732],{},[955,17729,17730],{"align":1001},[1705,17731,15058],{},[955,17733,17734],{"align":1001},"Fired when the user changes the controls.",[937,17736,17737,17742],{},[955,17738,17739],{"align":1001},[1705,17740,17741],{},"mouseDown",[955,17743,17744],{"align":1001},"Fired when the user clicks on the controls.",[937,17746,17747,17752],{},[955,17748,17749],{"align":1001},[1705,17750,17751],{},"mouseUp",[955,17753,17754],{"align":1001},"Fired when the user releases the mouse button on the controls.",[937,17756,17757,17762],{},[955,17758,17759],{"align":1001},[1705,17760,17761],{},"objectChange",[955,17763,17764],{"align":1001},"Fired when the user changes the object.",[1331,17766,17767],{"scoped":594},"\nimg {\n aspect-ratio: 16\u002F9;\n object-fit: cover;\n object-position: top;\n border-radius: 8px;\n}\n",[1331,17769,17770],{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":576,"searchDepth":577,"depth":578,"links":17772},[17773,17774,17779,17780],{"id":624,"depth":578,"text":15},{"id":17328,"depth":578,"text":17329,"children":17775},[17776,17777,17778],{"id":17335,"depth":708,"text":17336},{"id":17383,"depth":708,"text":17384},{"id":816,"depth":708,"text":17430},{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},"Set of three gizmos that can be used to translate, rotate and scale objects",{},{"title":123,"description":17781},"_oLjZPc3YQUArU7wqNKfUEMez4NtYo2Rc8q7SCJPpVI",[17786,18860,19661,20311,20984,21635,23148,26153,26644],{"id":17787,"title":133,"body":17788,"description":18856,"extension":591,"links":592,"meta":18857,"navigation":594,"path":134,"seo":18858,"stem":135,"__hash__":18859},"docs\u002F2.api\u002F3.loaders\u002F1.use-gltf.md",{"type":501,"value":17789,"toc":18848},[17790,17795,17802,17804,18211,18227,18299,18303,18437,18440,18509,18513,18516,18608,18611,18615,18631,18787,18796,18800,18809,18840,18845],[2367,17791,17792],{},[17793,17794],"loaders-gltf",{},[614,17796,17797,17798,17801],{},"A composable that allows you to easily load glb\u002FglTF models into your ",[1705,17799,17800],{},"TresJS"," scene.",[504,17803,15],{"id":624},[17805,17806,17807,17957],"code-group",{},[626,17808,17812],{"className":628,"code":17809,"filename":17810,"highlights":17811,"language":633,"meta":576,"style":576},"\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",[578,739],[618,17813,17814,17834,17853,17857,17873,17900,17908,17912,17920,17949],{"__ignoreMap":576},[637,17815,17816,17818,17820,17822,17824,17826,17828,17830,17832],{"class":639,"line":577},[637,17817,643],{"class":642},[637,17819,647],{"class":646},[637,17821,651],{"class":650},[637,17823,654],{"class":650},[637,17825,657],{"class":642},[637,17827,660],{"class":642},[637,17829,664],{"class":663},[637,17831,660],{"class":642},[637,17833,669],{"class":642},[637,17835,17837,17839,17841,17843,17845,17847,17849,17851],{"class":17836,"line":578},[639,673],[637,17838,677],{"class":676},[637,17840,680],{"class":642},[637,17842,4510],{"class":683},[637,17844,693],{"class":642},[637,17846,696],{"class":676},[637,17848,699],{"class":642},[637,17850,702],{"class":663},[637,17852,705],{"class":642},[637,17854,17855],{"class":639,"line":708},[637,17856,742],{"emptyLinePlaceholder":594},[637,17858,17859,17861,17864,17866,17868,17871],{"class":639,"line":729},[637,17860,2487],{"class":650},[637,17862,17863],{"class":683}," path ",[637,17865,657],{"class":642},[637,17867,699],{"class":642},[637,17869,17870],{"class":663},".\u002Fblender-cube.glb",[637,17872,705],{"class":642},[637,17874,17876,17878,17880,17882,17884,17886,17888,17891,17893,17895,17897],{"class":17875,"line":739},[639,673],[637,17877,2487],{"class":650},[637,17879,680],{"class":642},[637,17881,2492],{"class":683},[637,17883,687],{"class":642},[637,17885,11598],{"class":683},[637,17887,687],{"class":642},[637,17889,17890],{"class":683}," materials ",[637,17892,2500],{"class":642},[637,17894,2503],{"class":642},[637,17896,4510],{"class":2506},[637,17898,17899],{"class":683},"(path)\n",[637,17901,17902,17904,17906],{"class":639,"line":745},[637,17903,732],{"class":642},[637,17905,647],{"class":646},[637,17907,669],{"class":642},[637,17909,17910],{"class":639,"line":755},[637,17911,742],{"emptyLinePlaceholder":594},[637,17913,17914,17916,17918],{"class":639,"line":778},[637,17915,643],{"class":642},[637,17917,750],{"class":646},[637,17919,669],{"class":642},[637,17921,17922,17924,17926,17928,17930,17932,17934,17936,17938,17940,17942,17945,17947],{"class":639,"line":790},[637,17923,758],{"class":642},[637,17925,4597],{"class":646},[637,17927,2794],{"class":650},[637,17929,657],{"class":642},[637,17931,660],{"class":642},[637,17933,15551],{"class":663},[637,17935,660],{"class":642},[637,17937,4611],{"class":650},[637,17939,657],{"class":642},[637,17941,660],{"class":642},[637,17943,17944],{"class":663},"state?.scene",[637,17946,660],{"class":642},[637,17948,787],{"class":642},[637,17950,17951,17953,17955],{"class":639,"line":800},[637,17952,732],{"class":642},[637,17954,750],{"class":646},[637,17956,669],{"class":642},[626,17958,17961],{"className":628,"code":17959,"filename":17960,"language":633,"meta":576,"style":576},"\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",[618,17962,17963,17983,18001,18019,18035,18043,18047,18055,18074,18106,18114,18123,18130,18144,18170,18175,18195,18203],{"__ignoreMap":576},[637,17964,17965,17967,17969,17971,17973,17975,17977,17979,17981],{"class":639,"line":577},[637,17966,643],{"class":642},[637,17968,647],{"class":646},[637,17970,651],{"class":650},[637,17972,654],{"class":650},[637,17974,657],{"class":642},[637,17976,660],{"class":642},[637,17978,664],{"class":663},[637,17980,660],{"class":642},[637,17982,669],{"class":642},[637,17984,17985,17987,17989,17991,17993,17995,17997,17999],{"class":639,"line":578},[637,17986,677],{"class":676},[637,17988,680],{"class":642},[637,17990,690],{"class":683},[637,17992,693],{"class":642},[637,17994,696],{"class":676},[637,17996,699],{"class":642},[637,17998,702],{"class":663},[637,18000,705],{"class":642},[637,18002,18003,18005,18007,18009,18011,18013,18015,18017],{"class":639,"line":708},[637,18004,677],{"class":676},[637,18006,680],{"class":642},[637,18008,715],{"class":683},[637,18010,693],{"class":642},[637,18012,696],{"class":676},[637,18014,699],{"class":642},[637,18016,724],{"class":663},[637,18018,705],{"class":642},[637,18020,18021,18023,18026,18028,18030,18033],{"class":639,"line":729},[637,18022,677],{"class":676},[637,18024,18025],{"class":683}," TheModel ",[637,18027,8704],{"class":676},[637,18029,699],{"class":642},[637,18031,18032],{"class":663},".\u002FTheModel.vue",[637,18034,705],{"class":642},[637,18036,18037,18039,18041],{"class":639,"line":739},[637,18038,732],{"class":642},[637,18040,647],{"class":646},[637,18042,669],{"class":642},[637,18044,18045],{"class":639,"line":745},[637,18046,742],{"emptyLinePlaceholder":594},[637,18048,18049,18051,18053],{"class":639,"line":755},[637,18050,643],{"class":642},[637,18052,750],{"class":646},[637,18054,669],{"class":642},[637,18056,18057,18059,18061,18063,18065,18067,18070,18072],{"class":639,"line":778},[637,18058,758],{"class":642},[637,18060,761],{"class":646},[637,18062,764],{"class":650},[637,18064,657],{"class":642},[637,18066,660],{"class":642},[637,18068,18069],{"class":663},"#F78B3D",[637,18071,660],{"class":642},[637,18073,669],{"class":642},[637,18075,18076,18078,18080,18082,18084,18086,18088,18090,18092,18094,18096,18098,18100,18102,18104],{"class":639,"line":790},[637,18077,781],{"class":642},[637,18079,784],{"class":646},[637,18081,813],{"class":642},[637,18083,1491],{"class":650},[637,18085,657],{"class":642},[637,18087,660],{"class":642},[637,18089,1498],{"class":642},[637,18091,2729],{"class":823},[637,18093,1503],{"class":642},[637,18095,824],{"class":823},[637,18097,1503],{"class":642},[637,18099,7666],{"class":823},[637,18101,1513],{"class":642},[637,18103,660],{"class":642},[637,18105,787],{"class":642},[637,18107,18108,18110,18112],{"class":639,"line":800},[637,18109,781],{"class":642},[637,18111,795],{"class":646},[637,18113,787],{"class":642},[637,18115,18116,18118,18121],{"class":639,"line":805},[637,18117,781],{"class":642},[637,18119,18120],{"class":646},"TheModel",[637,18122,787],{"class":642},[637,18124,18125,18127],{"class":639,"line":831},[637,18126,781],{"class":642},[637,18128,18129],{"class":646},"TresDirectionalLight\n",[637,18131,18132,18134,18136,18138,18140,18142],{"class":639,"line":631},[637,18133,13000],{"class":642},[637,18135,1918],{"class":650},[637,18137,657],{"class":642},[637,18139,660],{"class":642},[637,18141,824],{"class":823},[637,18143,3224],{"class":642},[637,18145,18146,18148,18150,18152,18154,18156,18158,18160,18162,18164,18166,18168],{"class":639,"line":854},[637,18147,13000],{"class":642},[637,18149,1491],{"class":650},[637,18151,657],{"class":642},[637,18153,660],{"class":642},[637,18155,1498],{"class":642},[637,18157,2729],{"class":823},[637,18159,1503],{"class":642},[637,18161,2729],{"class":823},[637,18163,1503],{"class":642},[637,18165,2729],{"class":823},[637,18167,1513],{"class":642},[637,18169,3224],{"class":642},[637,18171,18172],{"class":639,"line":865},[637,18173,18174],{"class":642}," \u002F>\n",[637,18176,18177,18179,18181,18183,18185,18187,18189,18191,18193],{"class":639,"line":876},[637,18178,781],{"class":642},[637,18180,10010],{"class":646},[637,18182,813],{"class":642},[637,18184,1918],{"class":650},[637,18186,657],{"class":642},[637,18188,660],{"class":642},[637,18190,1925],{"class":823},[637,18192,660],{"class":642},[637,18194,787],{"class":642},[637,18196,18197,18199,18201],{"class":639,"line":886},[637,18198,909],{"class":642},[637,18200,761],{"class":646},[637,18202,669],{"class":642},[637,18204,18205,18207,18209],{"class":639,"line":632},[637,18206,732],{"class":642},[637,18208,750],{"class":646},[637,18210,669],{"class":642},[614,18212,18213,18214,18216,18217,18220,18221,18226],{},"An advantage of using ",[618,18215,133],{}," is that you can pass a ",[618,18218,18219],{},"draco"," prop to enable ",[1144,18222,18225],{"href":18223,"rel":18224},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=drac#examples\u002Fen\u002Floaders\u002FDRACOLoader",[1148],"Draco compression"," for the model. This will reduce the size of the model and improve performance.",[626,18228,18230],{"className":1190,"code":18229,"language":664,"meta":576,"style":576},"import { useGLTF } from '@tresjs\u002Fcientos'\n\nconst { state, nodes, materials } = useGLTF('\u002Fmodels\u002FAkuAku.gltf', { draco: true })\n",[618,18231,18232,18250,18254],{"__ignoreMap":576},[637,18233,18234,18236,18238,18240,18242,18244,18246,18248],{"class":639,"line":577},[637,18235,677],{"class":676},[637,18237,680],{"class":642},[637,18239,4510],{"class":683},[637,18241,693],{"class":642},[637,18243,696],{"class":676},[637,18245,699],{"class":642},[637,18247,702],{"class":663},[637,18249,705],{"class":642},[637,18251,18252],{"class":639,"line":578},[637,18253,742],{"emptyLinePlaceholder":594},[637,18255,18256,18258,18260,18262,18264,18266,18268,18270,18272,18274,18276,18278,18280,18283,18285,18287,18289,18291,18293,18295,18297],{"class":639,"line":708},[637,18257,2487],{"class":650},[637,18259,680],{"class":642},[637,18261,2492],{"class":683},[637,18263,687],{"class":642},[637,18265,11598],{"class":683},[637,18267,687],{"class":642},[637,18269,17890],{"class":683},[637,18271,2500],{"class":642},[637,18273,2503],{"class":642},[637,18275,4510],{"class":2506},[637,18277,2509],{"class":683},[637,18279,2512],{"class":642},[637,18281,18282],{"class":663},"\u002Fmodels\u002FAkuAku.gltf",[637,18284,2512],{"class":642},[637,18286,687],{"class":642},[637,18288,680],{"class":642},[637,18290,4555],{"class":646},[637,18292,1222],{"class":642},[637,18294,4561],{"class":4560},[637,18296,693],{"class":642},[637,18298,2520],{"class":683},[504,18300,18302],{"id":18301},"return-values","Return Values",[931,18304,18305,18315],{},[934,18306,18307],{},[937,18308,18309,18311,18313],{},[940,18310,8360],{"align":1001},[940,18312,6178],{},[940,18314,945],{},[950,18316,18317,18334,18348,18362,18377,18392,18407,18422],{},[937,18318,18319,18323,18328],{},[955,18320,18321],{"align":1001},[1705,18322,15551],{},[955,18324,18325],{},[618,18326,18327],{},"Ref\u003CGLTF | null>",[955,18329,18330,18331,18333],{},"The loaded GLTF, or ",[618,18332,3749],{}," until it arrives",[937,18335,18336,18340,18345],{},[955,18337,18338],{"align":1001},[1705,18339,5323],{},[955,18341,18342],{},[618,18343,18344],{},"ComputedRef\u003CTNodes>",[955,18346,18347],{},"All nodes in the scene, keyed by name",[937,18349,18350,18354,18359],{},[955,18351,18352],{"align":1001},[1705,18353,528],{},[955,18355,18356],{},[618,18357,18358],{},"ComputedRef\u003CTMaterials>",[955,18360,18361],{},"All materials in the scene, keyed by name",[937,18363,18364,18369,18374],{},[955,18365,18366],{"align":1001},[1705,18367,18368],{},"isLoading",[955,18370,18371],{},[618,18372,18373],{},"Ref\u003Cboolean>",[955,18375,18376],{},"Whether the model is currently loading",[937,18378,18379,18384,18389],{},[955,18380,18381],{"align":1001},[1705,18382,18383],{},"error",[955,18385,18386],{},[618,18387,18388],{},"Ref\u003Cunknown>",[955,18390,18391],{},"Whatever the loader threw, if anything",[937,18393,18394,18399,18404],{},[955,18395,18396],{"align":1001},[1705,18397,18398],{},"progress",[955,18400,18401],{},[618,18402,18403],{},"{ loaded: number, total: number, percentage: number }",[955,18405,18406],{},"Progress of the current load",[937,18408,18409,18414,18419],{},[955,18410,18411],{"align":1001},[1705,18412,18413],{},"load",[955,18415,18416],{},[618,18417,18418],{},"(path: string) => void",[955,18420,18421],{},"Load a different model into the same state",[937,18423,18424,18429,18434],{},[955,18425,18426],{"align":1001},[1705,18427,18428],{},"execute",[955,18430,18431],{},[618,18432,18433],{},"(delay?: number) => Promise\u003CGLTF>",[955,18435,18436],{},"Re-run the load",[504,18438,14787],{"id":18439},"options",[931,18441,18442,18454],{},[934,18443,18444],{},[937,18445,18446,18448,18450,18452],{},[940,18447,8360],{"align":1001},[940,18449,6178],{},[940,18451,948],{},[940,18453,945],{},[950,18455,18456,18474,18493],{},[937,18457,18458,18462,18467,18471],{},[955,18459,18460],{"align":1001},[1705,18461,18219],{},[955,18463,18464],{},[618,18465,18466],{},"boolean",[955,18468,18469],{},[618,18470,975],{},[955,18472,18473],{},"Whether to enable Draco compression.",[937,18475,18476,18481,18485,18490],{},[955,18477,18478],{"align":1001},[1705,18479,18480],{},"decoderPath",[955,18482,18483],{},[618,18484,3665],{},[955,18486,18487],{},[618,18488,18489],{},"'https:\u002F\u002Fwww.gstatic.com\u002Fdraco\u002Fversioned\u002Fdecoders\u002F1.5.6\u002F'",[955,18491,18492],{},"Path to the Draco decoder.",[937,18494,18495,18500,18504,18506],{},[955,18496,18497],{"align":1001},[1705,18498,18499],{},"traverse",[955,18501,18502],{},[618,18503,12656],{},[955,18505],{},[955,18507,18508],{},"A traverse function applied to the scene upon loading the model.",[504,18510,18512],{"id":18511},"accessing-nodes-and-materials","Accessing Nodes and Materials",[614,18514,18515],{},"The composable provides computed properties to easily access nodes and materials in your scene:",[626,18517,18519],{"className":1190,"code":18518,"language":664,"meta":576,"style":576},"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",[618,18520,18521,18550,18554,18559,18579,18583,18588],{"__ignoreMap":576},[637,18522,18523,18525,18527,18529,18531,18533,18535,18537,18539,18541,18543,18546,18548],{"class":639,"line":577},[637,18524,2487],{"class":650},[637,18526,680],{"class":642},[637,18528,11598],{"class":683},[637,18530,687],{"class":642},[637,18532,17890],{"class":683},[637,18534,2500],{"class":642},[637,18536,2503],{"class":642},[637,18538,4510],{"class":2506},[637,18540,2509],{"class":683},[637,18542,2512],{"class":642},[637,18544,18545],{"class":663},"\u002Fmodel.glb",[637,18547,2512],{"class":642},[637,18549,2520],{"class":683},[637,18551,18552],{"class":639,"line":578},[637,18553,742],{"emptyLinePlaceholder":594},[637,18555,18556],{"class":639,"line":708},[637,18557,18558],{"class":1213},"\u002F\u002F Access a specific node\n",[637,18560,18561,18563,18566,18568,18570,18572,18574,18576],{"class":639,"line":729},[637,18562,2487],{"class":650},[637,18564,18565],{"class":683}," mesh ",[637,18567,657],{"class":642},[637,18569,11598],{"class":683},[637,18571,1150],{"class":642},[637,18573,3778],{"class":683},[637,18575,1150],{"class":642},[637,18577,18578],{"class":683},"MeshName\n",[637,18580,18581],{"class":639,"line":739},[637,18582,742],{"emptyLinePlaceholder":594},[637,18584,18585],{"class":639,"line":745},[637,18586,18587],{"class":1213},"\u002F\u002F Access a specific material\n",[637,18589,18590,18592,18594,18596,18599,18601,18603,18605],{"class":639,"line":755},[637,18591,2487],{"class":650},[637,18593,8675],{"class":683},[637,18595,657],{"class":642},[637,18597,18598],{"class":683}," materials",[637,18600,1150],{"class":642},[637,18602,3778],{"class":683},[637,18604,1150],{"class":642},[637,18606,18607],{"class":683},"MaterialName\n",[614,18609,18610],{},"This makes it easier to manipulate specific parts of your model or apply materials programmatically.",[504,18612,18614],{"id":18613},"typing-nodes-and-materials","Typing Nodes and Materials",[614,18616,18617,18618,3156,18620,18622,18623,18626,18627,18630],{},"The keys of ",[618,18619,5323],{},[618,18621,528],{}," come from the file, so by default both are a loose record and\n",[618,18624,18625],{},"nodes.value.Body"," is an ",[618,18628,18629],{},"any",". Pass the shape of your model as generics to get them typed:",[626,18632,18634],{"className":1190,"code":18633,"language":664,"meta":576,"style":576},"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",[618,18635,18636,18660,18678,18682,18701,18719,18723,18763,18767],{"__ignoreMap":576},[637,18637,18638,18640,18642,18644,18646,18648,18650,18652,18654,18656,18658],{"class":639,"line":577},[637,18639,677],{"class":676},[637,18641,3535],{"class":676},[637,18643,680],{"class":642},[637,18645,4790],{"class":683},[637,18647,687],{"class":642},[637,18649,8625],{"class":683},[637,18651,693],{"class":642},[637,18653,696],{"class":676},[637,18655,699],{"class":642},[637,18657,4799],{"class":663},[637,18659,705],{"class":642},[637,18661,18662,18664,18666,18668,18670,18672,18674,18676],{"class":639,"line":578},[637,18663,677],{"class":676},[637,18665,680],{"class":642},[637,18667,4510],{"class":683},[637,18669,693],{"class":642},[637,18671,696],{"class":676},[637,18673,699],{"class":642},[637,18675,702],{"class":663},[637,18677,705],{"class":642},[637,18679,18680],{"class":639,"line":708},[637,18681,742],{"emptyLinePlaceholder":594},[637,18683,18684,18686,18689,18691,18694,18696,18698],{"class":639,"line":729},[637,18685,5535],{"class":650},[637,18687,18688],{"class":1204}," ModelNodes",[637,18690,680],{"class":642},[637,18692,18693],{"class":646}," Body",[637,18695,1222],{"class":642},[637,18697,4790],{"class":1204},[637,18699,18700],{"class":642}," }\n",[637,18702,18703,18705,18708,18710,18713,18715,18717],{"class":639,"line":739},[637,18704,5535],{"class":650},[637,18706,18707],{"class":1204}," ModelMaterials",[637,18709,680],{"class":642},[637,18711,18712],{"class":646}," Skin",[637,18714,1222],{"class":642},[637,18716,8625],{"class":1204},[637,18718,18700],{"class":642},[637,18720,18721],{"class":639,"line":745},[637,18722,742],{"emptyLinePlaceholder":594},[637,18724,18725,18727,18729,18731,18733,18735,18737,18739,18741,18743,18746,18748,18750,18752,18754,18756,18759,18761],{"class":639,"line":755},[637,18726,2487],{"class":650},[637,18728,680],{"class":642},[637,18730,11598],{"class":683},[637,18732,687],{"class":642},[637,18734,17890],{"class":683},[637,18736,2500],{"class":642},[637,18738,2503],{"class":642},[637,18740,4510],{"class":2506},[637,18742,643],{"class":642},[637,18744,18745],{"class":1204},"ModelNodes",[637,18747,687],{"class":642},[637,18749,18707],{"class":1204},[637,18751,3744],{"class":642},[637,18753,2509],{"class":683},[637,18755,2512],{"class":642},[637,18757,18758],{"class":663},"\u002Fmodels\u002Frobot.glb",[637,18760,2512],{"class":642},[637,18762,2520],{"class":683},[637,18764,18765],{"class":639,"line":778},[637,18766,742],{"emptyLinePlaceholder":594},[637,18768,18769,18771,18773,18775,18777,18779,18781,18784],{"class":639,"line":790},[637,18770,5323],{"class":683},[637,18772,1150],{"class":642},[637,18774,3778],{"class":683},[637,18776,1150],{"class":642},[637,18778,4902],{"class":683},[637,18780,1150],{"class":642},[637,18782,18783],{"class":683},"geometry ",[637,18785,18786],{"class":1213},"\u002F\u002F Mesh, not any\n",[2078,18788,18789],{},[614,18790,18791,18792,18795],{},"These interfaces are a claim about the model, not a proof: nothing checks them against the file at\nruntime. ",[618,18793,18794],{},"tres gltf"," reads them off the model and writes them for you, which is the only version\nof this that cannot drift.",[504,18797,18799],{"id":18798},"generating-a-component-instead","Generating a Component Instead",[614,18801,18802,18803,18808],{},"For a whole model, writing an element per node by hand does not scale. The\n",[1144,18804,18807],{"href":18805,"rel":18806},"https:\u002F\u002Fdocs.tresjs.org\u002Fcli\u002Fgltf",[1148],"TresJS CLI"," generates that component from the model itself,\ntyped, with a slot for every node so your overrides survive the next export:",[626,18810,18814],{"className":18811,"code":18812,"language":18813,"meta":576,"style":576},"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",[618,18815,18816,18830,18835],{"__ignoreMap":576},[637,18817,18818,18821,18824,18827],{"class":639,"line":577},[637,18819,18820],{"class":1204},"npx",[637,18822,18823],{"class":663}," @tresjs\u002Fcli",[637,18825,18826],{"class":663}," gltf",[637,18828,18829],{"class":663}," public\u002Fmodels\u002Frobot.glb\n",[637,18831,18832],{"class":639,"line":578},[637,18833,18834],{"class":1213},"# ✔ src\u002Fmodels\u002FRobot.gen.vue\n",[637,18836,18837],{"class":639,"line":708},[637,18838,18839],{"class":1213},"# 3 slots: Head, Body, Base\n",[9719,18841,18842],{"to":20},[614,18843,18844],{},"The three ways to load a model, and when to reach for each one.",[1331,18846,18847],{},"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":576,"searchDepth":577,"depth":578,"links":18849},[18850,18851,18852,18853,18854,18855],{"id":624,"depth":578,"text":15},{"id":18301,"depth":578,"text":18302},{"id":18439,"depth":578,"text":14787},{"id":18511,"depth":578,"text":18512},{"id":18613,"depth":578,"text":18614},{"id":18798,"depth":578,"text":18799},"A composable to load GLTF models in TresJS scenes.",{},{"title":133,"description":18856},"GXgGm8CNEUfvvQtnfGLIAO2SvN0dCIqKy3klk6A7TeY",{"id":18861,"title":137,"body":18862,"description":19657,"extension":591,"links":592,"meta":19658,"navigation":594,"path":138,"seo":19659,"stem":139,"__hash__":19660},"docs\u002F2.api\u002F3.loaders\u002F2.gltf-model.md",{"type":501,"value":18863,"toc":19651},[18864,18868,18879,18881,19243,19247,19253,19496,19498,19593,19608,19612,19629,19644,19648],[2367,18865,18866],{},[17793,18867],{},[614,18869,2867,18870,18872,18873,18878],{},[618,18871,137],{}," component is a wrapper around ",[1144,18874,18876],{"href":18875},".\u002Fuse-gltf",[618,18877,133],{}," composable and accepts the same options as props.",[504,18880,15],{"id":624},[17805,18882,18883,18997],{},[626,18884,18887],{"className":628,"code":18885,"filename":17810,"highlights":18886,"language":633,"meta":576,"style":576},"\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",[578,778],[618,18888,18889,18909,18929,18933,18947,18955,18959,18967,18989],{"__ignoreMap":576},[637,18890,18891,18893,18895,18897,18899,18901,18903,18905,18907],{"class":639,"line":577},[637,18892,643],{"class":642},[637,18894,647],{"class":646},[637,18896,651],{"class":650},[637,18898,654],{"class":650},[637,18900,657],{"class":642},[637,18902,660],{"class":642},[637,18904,664],{"class":663},[637,18906,660],{"class":642},[637,18908,669],{"class":642},[637,18910,18912,18914,18916,18919,18921,18923,18925,18927],{"class":18911,"line":578},[639,673],[637,18913,677],{"class":676},[637,18915,680],{"class":642},[637,18917,18918],{"class":683}," GLTFModel",[637,18920,693],{"class":642},[637,18922,696],{"class":676},[637,18924,699],{"class":642},[637,18926,702],{"class":663},[637,18928,705],{"class":642},[637,18930,18931],{"class":639,"line":708},[637,18932,742],{"emptyLinePlaceholder":594},[637,18934,18935,18937,18939,18941,18943,18945],{"class":639,"line":729},[637,18936,2487],{"class":650},[637,18938,17863],{"class":683},[637,18940,657],{"class":642},[637,18942,699],{"class":642},[637,18944,17870],{"class":663},[637,18946,705],{"class":642},[637,18948,18949,18951,18953],{"class":639,"line":739},[637,18950,732],{"class":642},[637,18952,647],{"class":646},[637,18954,669],{"class":642},[637,18956,18957],{"class":639,"line":745},[637,18958,742],{"emptyLinePlaceholder":594},[637,18960,18961,18963,18965],{"class":639,"line":755},[637,18962,643],{"class":642},[637,18964,750],{"class":646},[637,18966,669],{"class":642},[637,18968,18970,18972,18974,18976,18979,18981,18983,18985,18987],{"class":18969,"line":778},[639,673],[637,18971,758],{"class":642},[637,18973,137],{"class":646},[637,18975,813],{"class":642},[637,18977,18978],{"class":650},"path",[637,18980,657],{"class":642},[637,18982,660],{"class":642},[637,18984,18978],{"class":683},[637,18986,660],{"class":642},[637,18988,787],{"class":642},[637,18990,18991,18993,18995],{"class":639,"line":790},[637,18992,732],{"class":642},[637,18994,750],{"class":646},[637,18996,669],{"class":642},[626,18998,18999],{"className":628,"code":17959,"filename":17960,"language":633,"meta":576,"style":576},[618,19000,19001,19021,19039,19057,19071,19079,19083,19091,19109,19141,19149,19157,19163,19177,19203,19207,19227,19235],{"__ignoreMap":576},[637,19002,19003,19005,19007,19009,19011,19013,19015,19017,19019],{"class":639,"line":577},[637,19004,643],{"class":642},[637,19006,647],{"class":646},[637,19008,651],{"class":650},[637,19010,654],{"class":650},[637,19012,657],{"class":642},[637,19014,660],{"class":642},[637,19016,664],{"class":663},[637,19018,660],{"class":642},[637,19020,669],{"class":642},[637,19022,19023,19025,19027,19029,19031,19033,19035,19037],{"class":639,"line":578},[637,19024,677],{"class":676},[637,19026,680],{"class":642},[637,19028,690],{"class":683},[637,19030,693],{"class":642},[637,19032,696],{"class":676},[637,19034,699],{"class":642},[637,19036,702],{"class":663},[637,19038,705],{"class":642},[637,19040,19041,19043,19045,19047,19049,19051,19053,19055],{"class":639,"line":708},[637,19042,677],{"class":676},[637,19044,680],{"class":642},[637,19046,715],{"class":683},[637,19048,693],{"class":642},[637,19050,696],{"class":676},[637,19052,699],{"class":642},[637,19054,724],{"class":663},[637,19056,705],{"class":642},[637,19058,19059,19061,19063,19065,19067,19069],{"class":639,"line":729},[637,19060,677],{"class":676},[637,19062,18025],{"class":683},[637,19064,8704],{"class":676},[637,19066,699],{"class":642},[637,19068,18032],{"class":663},[637,19070,705],{"class":642},[637,19072,19073,19075,19077],{"class":639,"line":739},[637,19074,732],{"class":642},[637,19076,647],{"class":646},[637,19078,669],{"class":642},[637,19080,19081],{"class":639,"line":745},[637,19082,742],{"emptyLinePlaceholder":594},[637,19084,19085,19087,19089],{"class":639,"line":755},[637,19086,643],{"class":642},[637,19088,750],{"class":646},[637,19090,669],{"class":642},[637,19092,19093,19095,19097,19099,19101,19103,19105,19107],{"class":639,"line":778},[637,19094,758],{"class":642},[637,19096,761],{"class":646},[637,19098,764],{"class":650},[637,19100,657],{"class":642},[637,19102,660],{"class":642},[637,19104,18069],{"class":663},[637,19106,660],{"class":642},[637,19108,669],{"class":642},[637,19110,19111,19113,19115,19117,19119,19121,19123,19125,19127,19129,19131,19133,19135,19137,19139],{"class":639,"line":790},[637,19112,781],{"class":642},[637,19114,784],{"class":646},[637,19116,813],{"class":642},[637,19118,1491],{"class":650},[637,19120,657],{"class":642},[637,19122,660],{"class":642},[637,19124,1498],{"class":642},[637,19126,2729],{"class":823},[637,19128,1503],{"class":642},[637,19130,824],{"class":823},[637,19132,1503],{"class":642},[637,19134,7666],{"class":823},[637,19136,1513],{"class":642},[637,19138,660],{"class":642},[637,19140,787],{"class":642},[637,19142,19143,19145,19147],{"class":639,"line":800},[637,19144,781],{"class":642},[637,19146,795],{"class":646},[637,19148,787],{"class":642},[637,19150,19151,19153,19155],{"class":639,"line":805},[637,19152,781],{"class":642},[637,19154,18120],{"class":646},[637,19156,787],{"class":642},[637,19158,19159,19161],{"class":639,"line":831},[637,19160,781],{"class":642},[637,19162,18129],{"class":646},[637,19164,19165,19167,19169,19171,19173,19175],{"class":639,"line":631},[637,19166,13000],{"class":642},[637,19168,1918],{"class":650},[637,19170,657],{"class":642},[637,19172,660],{"class":642},[637,19174,824],{"class":823},[637,19176,3224],{"class":642},[637,19178,19179,19181,19183,19185,19187,19189,19191,19193,19195,19197,19199,19201],{"class":639,"line":854},[637,19180,13000],{"class":642},[637,19182,1491],{"class":650},[637,19184,657],{"class":642},[637,19186,660],{"class":642},[637,19188,1498],{"class":642},[637,19190,2729],{"class":823},[637,19192,1503],{"class":642},[637,19194,2729],{"class":823},[637,19196,1503],{"class":642},[637,19198,2729],{"class":823},[637,19200,1513],{"class":642},[637,19202,3224],{"class":642},[637,19204,19205],{"class":639,"line":865},[637,19206,18174],{"class":642},[637,19208,19209,19211,19213,19215,19217,19219,19221,19223,19225],{"class":639,"line":876},[637,19210,781],{"class":642},[637,19212,10010],{"class":646},[637,19214,813],{"class":642},[637,19216,1918],{"class":650},[637,19218,657],{"class":642},[637,19220,660],{"class":642},[637,19222,1925],{"class":823},[637,19224,660],{"class":642},[637,19226,787],{"class":642},[637,19228,19229,19231,19233],{"class":639,"line":886},[637,19230,909],{"class":642},[637,19232,761],{"class":646},[637,19234,669],{"class":642},[637,19236,19237,19239,19241],{"class":639,"line":632},[637,19238,732],{"class":642},[637,19240,750],{"class":646},[637,19242,669],{"class":642},[504,19244,19246],{"id":19245},"model-reference","Model reference",[614,19248,19249,19250,19252],{},"The component exposes the loaded GLTF as ",[618,19251,9626],{},", so a template ref gets you the parsed model:",[626,19254,19256],{"className":628,"code":19255,"language":633,"meta":576,"style":576},"\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",[618,19257,19258,19278,19296,19318,19322,19347,19351,19356,19390,19423,19429,19437,19441,19449,19456,19470,19484,19488],{"__ignoreMap":576},[637,19259,19260,19262,19264,19266,19268,19270,19272,19274,19276],{"class":639,"line":577},[637,19261,643],{"class":642},[637,19263,647],{"class":646},[637,19265,651],{"class":650},[637,19267,654],{"class":650},[637,19269,657],{"class":642},[637,19271,660],{"class":642},[637,19273,664],{"class":663},[637,19275,660],{"class":642},[637,19277,669],{"class":642},[637,19279,19280,19282,19284,19286,19288,19290,19292,19294],{"class":639,"line":578},[637,19281,677],{"class":676},[637,19283,680],{"class":642},[637,19285,18918],{"class":683},[637,19287,693],{"class":642},[637,19289,696],{"class":676},[637,19291,699],{"class":642},[637,19293,702],{"class":663},[637,19295,705],{"class":642},[637,19297,19298,19300,19302,19304,19306,19308,19310,19312,19314,19316],{"class":639,"line":708},[637,19299,677],{"class":676},[637,19301,680],{"class":642},[637,19303,3999],{"class":683},[637,19305,687],{"class":642},[637,19307,12749],{"class":683},[637,19309,693],{"class":642},[637,19311,696],{"class":676},[637,19313,699],{"class":642},[637,19315,633],{"class":663},[637,19317,705],{"class":642},[637,19319,19320],{"class":639,"line":729},[637,19321,742],{"emptyLinePlaceholder":594},[637,19323,19324,19326,19329,19331,19333,19335,19338,19341,19343,19345],{"class":639,"line":739},[637,19325,2487],{"class":650},[637,19327,19328],{"class":683}," modelRef ",[637,19330,657],{"class":642},[637,19332,3999],{"class":2506},[637,19334,643],{"class":642},[637,19336,19337],{"class":1204},"InstanceType",[637,19339,19340],{"class":642},"\u003Ctypeof",[637,19342,18918],{"class":683},[637,19344,3675],{"class":642},[637,19346,6744],{"class":683},[637,19348,19349],{"class":639,"line":745},[637,19350,742],{"emptyLinePlaceholder":594},[637,19352,19353],{"class":639,"line":755},[637,19354,19355],{"class":1213},"\u002F\u002F `instance` is null until the file lands, so watch it rather than the ref\n",[637,19357,19358,19360,19362,19364,19366,19369,19371,19373,19375,19377,19379,19381,19384,19386,19388],{"class":639,"line":778},[637,19359,12798],{"class":2506},[637,19361,2509],{"class":683},[637,19363,3767],{"class":642},[637,19365,3770],{"class":650},[637,19367,19368],{"class":683}," modelRef",[637,19370,1150],{"class":642},[637,19372,3778],{"class":683},[637,19374,3781],{"class":642},[637,19376,9626],{"class":683},[637,19378,687],{"class":642},[637,19380,3167],{"class":642},[637,19382,19383],{"class":7047},"gltf",[637,19385,3433],{"class":642},[637,19387,3770],{"class":650},[637,19389,1208],{"class":642},[637,19391,19392,19395,19397,19400,19402,19404,19406,19409,19411,19413,19415,19417,19419,19421],{"class":639,"line":790},[637,19393,19394],{"class":683}," gltf",[637,19396,3781],{"class":642},[637,19398,19399],{"class":683},"scene",[637,19401,1150],{"class":642},[637,19403,1491],{"class":683},[637,19405,1150],{"class":642},[637,19407,19408],{"class":2506},"set",[637,19410,2509],{"class":646},[637,19412,969],{"class":823},[637,19414,687],{"class":642},[637,19416,2577],{"class":823},[637,19418,687],{"class":642},[637,19420,2577],{"class":823},[637,19422,2520],{"class":646},[637,19424,19425,19427],{"class":639,"line":800},[637,19426,2500],{"class":642},[637,19428,2520],{"class":683},[637,19430,19431,19433,19435],{"class":639,"line":805},[637,19432,732],{"class":642},[637,19434,647],{"class":646},[637,19436,669],{"class":642},[637,19438,19439],{"class":639,"line":831},[637,19440,742],{"emptyLinePlaceholder":594},[637,19442,19443,19445,19447],{"class":639,"line":631},[637,19444,643],{"class":642},[637,19446,750],{"class":646},[637,19448,669],{"class":642},[637,19450,19451,19453],{"class":639,"line":854},[637,19452,758],{"class":642},[637,19454,19455],{"class":646},"GLTFModel\n",[637,19457,19458,19461,19463,19465,19468],{"class":639,"line":865},[637,19459,19460],{"class":650}," ref",[637,19462,657],{"class":642},[637,19464,660],{"class":642},[637,19466,19467],{"class":663},"modelRef",[637,19469,3224],{"class":642},[637,19471,19472,19475,19477,19479,19482],{"class":639,"line":876},[637,19473,19474],{"class":650}," path",[637,19476,657],{"class":642},[637,19478,660],{"class":642},[637,19480,19481],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Fmodels\u002Fgltf\u002Fblender-cube.glb",[637,19483,3224],{"class":642},[637,19485,19486],{"class":639,"line":886},[637,19487,14760],{"class":642},[637,19489,19490,19492,19494],{"class":639,"line":632},[637,19491,732],{"class":642},[637,19493,750],{"class":646},[637,19495,669],{"class":642},[504,19497,926],{"id":925},[931,19499,19500,19510],{},[934,19501,19502],{},[937,19503,19504,19506,19508],{},[940,19505,942],{"align":1001},[940,19507,945],{"align":1001},[940,19509,948],{},[950,19511,19512,19528,19545,19559,19577],{},[937,19513,19514,19518,19524],{},[955,19515,19516],{"align":1001},[618,19517,18978],{},[955,19519,19520,19521,1150],{"align":1001},"Path to the model file. ",[1705,19522,19523],{},"Required",[955,19525,19526],{},[618,19527,1183],{},[937,19529,19530,19534,19541],{},[955,19531,19532],{"align":1001},[618,19533,18219],{},[955,19535,19536,19537,19540],{"align":1001},"Enable ",[1144,19538,18225],{"href":18223,"rel":19539},[1148]," for the model.",[955,19542,19543],{},[618,19544,975],{},[937,19546,19547,19551,19554],{},[955,19548,19549],{"align":1001},[618,19550,18480],{},[955,19552,19553],{"align":1001},"Path to a Draco decoder.",[955,19555,19556],{},[618,19557,19558],{},"'https:\u002F\u002Fwww.gstatic.com\u002Fdraco\u002Fversioned\u002Fdecoders\u002F1.4.1\u002F'",[937,19560,19561,19566,19573],{},[955,19562,19563],{"align":1001},[618,19564,19565],{},"castShadow",[955,19567,19568,19569,19572],{"align":1001},"Apply ",[618,19570,19571],{},"cast-shadow"," to all meshes inside your model.",[955,19574,19575],{},[618,19576,975],{},[937,19578,19579,19584,19589],{},[955,19580,19581],{"align":1001},[618,19582,19583],{},"receiveShadow",[955,19585,19568,19586,19572],{"align":1001},[618,19587,19588],{},"receive-shadow",[955,19590,19591],{},[618,19592,975],{},[2078,19594,19595],{},[614,19596,19597,19599,19600,19604,19605,19607],{},[618,19598,18978],{}," is not reactive: the component reads it once on setup. Use\n",[1144,19601,19602],{"href":18875},[618,19603,133],{}," with a ",[618,19606,6103],{}," path if you need to swap models at runtime.",[504,19609,19611],{"id":19610},"when-to-reach-for-something-else","When to reach for something else",[614,19613,19614,19616,19617,19619,19620,19624,19625,19628],{},[618,19615,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 ",[618,19618,8536],{}," on. When you need that, use\n",[1144,19621,19622],{"href":18875},[618,19623,133],{}," to compose the parts yourself, or let the\n",[1144,19626,18807],{"href":18805,"rel":19627},[1148]," generate a typed component with a slot per node:",[626,19630,19632],{"className":18811,"code":19631,"language":18813,"meta":576,"style":576},"npx @tresjs\u002Fcli gltf public\u002Fmodels\u002Frobot.glb\n",[618,19633,19634],{"__ignoreMap":576},[637,19635,19636,19638,19640,19642],{"class":639,"line":577},[637,19637,18820],{"class":1204},[637,19639,18823],{"class":663},[637,19641,18826],{"class":663},[637,19643,18829],{"class":663},[9719,19645,19646],{"to":20},[614,19647,18844],{},[1331,19649,19650],{},"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":576,"searchDepth":577,"depth":578,"links":19652},[19653,19654,19655,19656],{"id":624,"depth":578,"text":15},{"id":19245,"depth":578,"text":19246},{"id":925,"depth":578,"text":926},{"id":19610,"depth":578,"text":19611},"A component based on useGLTF to load models in TresJS scenes.",{},{"title":137,"description":19657},"7ZC7Z69pgP-jZnR6HympsN-R2u7P7l9BDbUvIu5p9J8",{"id":19662,"title":141,"body":19663,"description":20307,"extension":591,"links":592,"meta":20308,"navigation":594,"path":142,"seo":20309,"stem":143,"__hash__":20310},"docs\u002F2.api\u002F3.loaders\u002F3.use-fbx.md",{"type":501,"value":19664,"toc":20301},[19665,19670,19675,19677,20097,20099,20178,20180,20206,20208,20210,20296,20298],[2367,19666,19667],{},[19668,19669],"loaders-fbx",{},[614,19671,19672,19673,17801],{},"A composable that allows you to easily load FBX models into your ",[1705,19674,17800],{},[504,19676,15],{"id":624},[17805,19678,19679,19848],{},[626,19680,19683],{"className":628,"code":19681,"filename":17810,"highlights":19682,"language":633,"meta":576,"style":576},"\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",[578,745],[618,19684,19685,19705,19725,19729,19744,19756,19781,19789,19793,19801,19840],{"__ignoreMap":576},[637,19686,19687,19689,19691,19693,19695,19697,19699,19701,19703],{"class":639,"line":577},[637,19688,643],{"class":642},[637,19690,647],{"class":646},[637,19692,651],{"class":650},[637,19694,654],{"class":650},[637,19696,657],{"class":642},[637,19698,660],{"class":642},[637,19700,664],{"class":663},[637,19702,660],{"class":642},[637,19704,669],{"class":642},[637,19706,19708,19710,19712,19715,19717,19719,19721,19723],{"class":19707,"line":578},[639,673],[637,19709,677],{"class":676},[637,19711,680],{"class":642},[637,19713,19714],{"class":683}," useFBX",[637,19716,693],{"class":642},[637,19718,696],{"class":676},[637,19720,699],{"class":642},[637,19722,702],{"class":663},[637,19724,705],{"class":642},[637,19726,19727],{"class":639,"line":708},[637,19728,742],{"emptyLinePlaceholder":594},[637,19730,19731,19733,19735,19737,19739,19742],{"class":639,"line":729},[637,19732,2487],{"class":650},[637,19734,17863],{"class":683},[637,19736,657],{"class":642},[637,19738,699],{"class":642},[637,19740,19741],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002F",[637,19743,705],{"class":642},[637,19745,19746,19749,19751,19754],{"class":639,"line":739},[637,19747,19748],{"class":642}," +",[637,19750,699],{"class":642},[637,19752,19753],{"class":663},"Tresjs\u002Fassets\u002Fmain\u002Fmodels\u002Ffbx\u002Fkenney-suv\u002Fsuv.fbx",[637,19755,705],{"class":642},[637,19757,19759,19761,19763,19765,19767,19769,19771,19773,19775,19777,19779],{"class":19758,"line":745},[639,673],[637,19760,2487],{"class":650},[637,19762,680],{"class":642},[637,19764,2492],{"class":683},[637,19766,687],{"class":642},[637,19768,11598],{"class":683},[637,19770,687],{"class":642},[637,19772,17890],{"class":683},[637,19774,2500],{"class":642},[637,19776,2503],{"class":642},[637,19778,19714],{"class":2506},[637,19780,17899],{"class":683},[637,19782,19783,19785,19787],{"class":639,"line":755},[637,19784,732],{"class":642},[637,19786,647],{"class":646},[637,19788,669],{"class":642},[637,19790,19791],{"class":639,"line":778},[637,19792,742],{"emptyLinePlaceholder":594},[637,19794,19795,19797,19799],{"class":639,"line":790},[637,19796,643],{"class":642},[637,19798,750],{"class":646},[637,19800,669],{"class":642},[637,19802,19803,19805,19807,19809,19811,19813,19815,19817,19819,19821,19823,19825,19827,19830,19832,19834,19836,19838],{"class":639,"line":800},[637,19804,758],{"class":642},[637,19806,4597],{"class":646},[637,19808,2794],{"class":650},[637,19810,657],{"class":642},[637,19812,660],{"class":642},[637,19814,15551],{"class":663},[637,19816,660],{"class":642},[637,19818,4611],{"class":650},[637,19820,657],{"class":642},[637,19822,660],{"class":642},[637,19824,15551],{"class":663},[637,19826,660],{"class":642},[637,19828,19829],{"class":650}," :scale",[637,19831,657],{"class":642},[637,19833,660],{"class":642},[637,19835,12210],{"class":663},[637,19837,660],{"class":642},[637,19839,787],{"class":642},[637,19841,19842,19844,19846],{"class":639,"line":805},[637,19843,732],{"class":642},[637,19845,750],{"class":646},[637,19847,669],{"class":642},[626,19849,19851],{"className":628,"code":19850,"filename":17960,"language":633,"meta":576,"style":576},"\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",[618,19852,19853,19873,19891,19909,19923,19931,19935,19943,19962,19995,20003,20011,20017,20031,20057,20061,20081,20089],{"__ignoreMap":576},[637,19854,19855,19857,19859,19861,19863,19865,19867,19869,19871],{"class":639,"line":577},[637,19856,643],{"class":642},[637,19858,647],{"class":646},[637,19860,651],{"class":650},[637,19862,654],{"class":650},[637,19864,657],{"class":642},[637,19866,660],{"class":642},[637,19868,664],{"class":663},[637,19870,660],{"class":642},[637,19872,669],{"class":642},[637,19874,19875,19877,19879,19881,19883,19885,19887,19889],{"class":639,"line":578},[637,19876,677],{"class":676},[637,19878,680],{"class":642},[637,19880,690],{"class":683},[637,19882,693],{"class":642},[637,19884,696],{"class":676},[637,19886,699],{"class":642},[637,19888,702],{"class":663},[637,19890,705],{"class":642},[637,19892,19893,19895,19897,19899,19901,19903,19905,19907],{"class":639,"line":708},[637,19894,677],{"class":676},[637,19896,680],{"class":642},[637,19898,715],{"class":683},[637,19900,693],{"class":642},[637,19902,696],{"class":676},[637,19904,699],{"class":642},[637,19906,724],{"class":663},[637,19908,705],{"class":642},[637,19910,19911,19913,19915,19917,19919,19921],{"class":639,"line":729},[637,19912,677],{"class":676},[637,19914,18025],{"class":683},[637,19916,8704],{"class":676},[637,19918,699],{"class":642},[637,19920,18032],{"class":663},[637,19922,705],{"class":642},[637,19924,19925,19927,19929],{"class":639,"line":739},[637,19926,732],{"class":642},[637,19928,647],{"class":646},[637,19930,669],{"class":642},[637,19932,19933],{"class":639,"line":745},[637,19934,742],{"emptyLinePlaceholder":594},[637,19936,19937,19939,19941],{"class":639,"line":755},[637,19938,643],{"class":642},[637,19940,750],{"class":646},[637,19942,669],{"class":642},[637,19944,19945,19947,19949,19951,19953,19955,19958,19960],{"class":639,"line":778},[637,19946,758],{"class":642},[637,19948,761],{"class":646},[637,19950,764],{"class":650},[637,19952,657],{"class":642},[637,19954,660],{"class":642},[637,19956,19957],{"class":663},"#1F90FF",[637,19959,660],{"class":642},[637,19961,669],{"class":642},[637,19963,19964,19966,19968,19970,19972,19974,19976,19978,19981,19983,19985,19987,19989,19991,19993],{"class":639,"line":790},[637,19965,781],{"class":642},[637,19967,784],{"class":646},[637,19969,813],{"class":642},[637,19971,1491],{"class":650},[637,19973,657],{"class":642},[637,19975,660],{"class":642},[637,19977,1498],{"class":642},[637,19979,19980],{"class":823},"11",[637,19982,1503],{"class":642},[637,19984,19980],{"class":823},[637,19986,1503],{"class":642},[637,19988,19980],{"class":823},[637,19990,1513],{"class":642},[637,19992,660],{"class":642},[637,19994,787],{"class":642},[637,19996,19997,19999,20001],{"class":639,"line":800},[637,19998,781],{"class":642},[637,20000,795],{"class":646},[637,20002,787],{"class":642},[637,20004,20005,20007,20009],{"class":639,"line":805},[637,20006,781],{"class":642},[637,20008,18120],{"class":646},[637,20010,787],{"class":642},[637,20012,20013,20015],{"class":639,"line":831},[637,20014,781],{"class":642},[637,20016,18129],{"class":646},[637,20018,20019,20021,20023,20025,20027,20029],{"class":639,"line":631},[637,20020,13000],{"class":642},[637,20022,1918],{"class":650},[637,20024,657],{"class":642},[637,20026,660],{"class":642},[637,20028,824],{"class":823},[637,20030,3224],{"class":642},[637,20032,20033,20035,20037,20039,20041,20043,20045,20047,20049,20051,20053,20055],{"class":639,"line":854},[637,20034,13000],{"class":642},[637,20036,1491],{"class":650},[637,20038,657],{"class":642},[637,20040,660],{"class":642},[637,20042,1498],{"class":642},[637,20044,2729],{"class":823},[637,20046,1503],{"class":642},[637,20048,2729],{"class":823},[637,20050,1503],{"class":642},[637,20052,2729],{"class":823},[637,20054,1513],{"class":642},[637,20056,3224],{"class":642},[637,20058,20059],{"class":639,"line":865},[637,20060,18174],{"class":642},[637,20062,20063,20065,20067,20069,20071,20073,20075,20077,20079],{"class":639,"line":876},[637,20064,781],{"class":642},[637,20066,10010],{"class":646},[637,20068,813],{"class":642},[637,20070,1918],{"class":650},[637,20072,657],{"class":642},[637,20074,660],{"class":642},[637,20076,1925],{"class":823},[637,20078,660],{"class":642},[637,20080,787],{"class":642},[637,20082,20083,20085,20087],{"class":639,"line":886},[637,20084,909],{"class":642},[637,20086,761],{"class":646},[637,20088,669],{"class":642},[637,20090,20091,20093,20095],{"class":639,"line":632},[637,20092,732],{"class":642},[637,20094,750],{"class":646},[637,20096,669],{"class":642},[504,20098,18302],{"id":18301},[931,20100,20101,20111],{},[934,20102,20103],{},[937,20104,20105,20107,20109],{},[940,20106,8360],{"align":1001},[940,20108,6178],{},[940,20110,945],{},[950,20112,20113,20126,20139,20152,20164],{},[937,20114,20115,20119,20123],{},[955,20116,20117],{"align":1001},[1705,20118,15551],{},[955,20120,20121],{},[618,20122,4699],{},[955,20124,20125],{},"The loaded FBX model state",[937,20127,20128,20132,20136],{},[955,20129,20130],{"align":1001},[1705,20131,5323],{},[955,20133,20134],{},[618,20135,17176],{},[955,20137,20138],{},"Computed object containing all nodes in the scene",[937,20140,20141,20145,20149],{},[955,20142,20143],{"align":1001},[1705,20144,528],{},[955,20146,20147],{},[618,20148,17176],{},[955,20150,20151],{},"Computed object containing all materials in the scene",[937,20153,20154,20158,20162],{},[955,20155,20156],{"align":1001},[1705,20157,18368],{},[955,20159,20160],{},[618,20161,18466],{},[955,20163,18376],{},[937,20165,20166,20170,20175],{},[955,20167,20168],{"align":1001},[1705,20169,18428],{},[955,20171,20172],{},[618,20173,20174],{},"() => Promise\u003Cvoid>",[955,20176,20177],{},"Function to reload the model",[504,20179,14787],{"id":18439},[931,20181,20182,20192],{},[934,20183,20184],{},[937,20185,20186,20188,20190],{},[940,20187,8360],{"align":1001},[940,20189,6178],{},[940,20191,945],{},[950,20193,20194],{},[937,20195,20196,20200,20204],{},[955,20197,20198],{"align":1001},[1705,20199,18499],{},[955,20201,20202],{},[618,20203,12656],{},[955,20205,18508],{},[504,20207,18512],{"id":18511},[614,20209,18515],{},[626,20211,20213],{"className":1190,"code":20212,"language":664,"meta":576,"style":576},"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",[618,20214,20215,20244,20248,20252,20270,20274,20278],{"__ignoreMap":576},[637,20216,20217,20219,20221,20223,20225,20227,20229,20231,20233,20235,20237,20240,20242],{"class":639,"line":577},[637,20218,2487],{"class":650},[637,20220,680],{"class":642},[637,20222,11598],{"class":683},[637,20224,687],{"class":642},[637,20226,17890],{"class":683},[637,20228,2500],{"class":642},[637,20230,2503],{"class":642},[637,20232,19714],{"class":2506},[637,20234,2509],{"class":683},[637,20236,2512],{"class":642},[637,20238,20239],{"class":663},"\u002Fmodel.fbx",[637,20241,2512],{"class":642},[637,20243,2520],{"class":683},[637,20245,20246],{"class":639,"line":578},[637,20247,742],{"emptyLinePlaceholder":594},[637,20249,20250],{"class":639,"line":708},[637,20251,18558],{"class":1213},[637,20253,20254,20256,20258,20260,20262,20264,20266,20268],{"class":639,"line":729},[637,20255,2487],{"class":650},[637,20257,18565],{"class":683},[637,20259,657],{"class":642},[637,20261,11598],{"class":683},[637,20263,1150],{"class":642},[637,20265,3778],{"class":683},[637,20267,1150],{"class":642},[637,20269,18578],{"class":683},[637,20271,20272],{"class":639,"line":739},[637,20273,742],{"emptyLinePlaceholder":594},[637,20275,20276],{"class":639,"line":745},[637,20277,18587],{"class":1213},[637,20279,20280,20282,20284,20286,20288,20290,20292,20294],{"class":639,"line":755},[637,20281,2487],{"class":650},[637,20283,8675],{"class":683},[637,20285,657],{"class":642},[637,20287,18598],{"class":683},[637,20289,1150],{"class":642},[637,20291,3778],{"class":683},[637,20293,1150],{"class":642},[637,20295,18607],{"class":683},[614,20297,18610],{},[1331,20299,20300],{},"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":576,"searchDepth":577,"depth":578,"links":20302},[20303,20304,20305,20306],{"id":624,"depth":578,"text":15},{"id":18301,"depth":578,"text":18302},{"id":18439,"depth":578,"text":14787},{"id":18511,"depth":578,"text":18512},"A composable to load FBX models in TresJS scenes.",{},{"title":141,"description":20307},"Ml7CalZZP7vTD_Km9UnAkC8zYicejjQltMBSuV_vnkk",{"id":20312,"title":145,"body":20313,"description":20980,"extension":591,"links":592,"meta":20981,"navigation":594,"path":146,"seo":20982,"stem":147,"__hash__":20983},"docs\u002F2.api\u002F3.loaders\u002F4.fbx-model.md",{"type":501,"value":20314,"toc":20975},[20315,20319,20328,20330,20692,20694,20702,20915,20917,20972],[2367,20316,20317],{},[19668,20318],{},[614,20320,2867,20321,18872,20323,18878],{},[618,20322,145],{},[1144,20324,20326],{"href":20325},".\u002Fuse-fbx",[618,20327,141],{},[504,20329,15],{"id":624},[17805,20331,20332,20446],{},[626,20333,20336],{"className":628,"code":20334,"filename":17810,"highlights":20335,"language":633,"meta":576,"style":576},"\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",[578,778],[618,20337,20338,20358,20378,20382,20397,20405,20409,20417,20438],{"__ignoreMap":576},[637,20339,20340,20342,20344,20346,20348,20350,20352,20354,20356],{"class":639,"line":577},[637,20341,643],{"class":642},[637,20343,647],{"class":646},[637,20345,651],{"class":650},[637,20347,654],{"class":650},[637,20349,657],{"class":642},[637,20351,660],{"class":642},[637,20353,664],{"class":663},[637,20355,660],{"class":642},[637,20357,669],{"class":642},[637,20359,20361,20363,20365,20368,20370,20372,20374,20376],{"class":20360,"line":578},[639,673],[637,20362,677],{"class":676},[637,20364,680],{"class":642},[637,20366,20367],{"class":683}," FBXModel",[637,20369,693],{"class":642},[637,20371,696],{"class":676},[637,20373,699],{"class":642},[637,20375,702],{"class":663},[637,20377,705],{"class":642},[637,20379,20380],{"class":639,"line":708},[637,20381,742],{"emptyLinePlaceholder":594},[637,20383,20384,20386,20388,20390,20392,20395],{"class":639,"line":729},[637,20385,2487],{"class":650},[637,20387,17863],{"class":683},[637,20389,657],{"class":642},[637,20391,699],{"class":642},[637,20393,20394],{"class":663},".\u002Fsuv.fbx",[637,20396,705],{"class":642},[637,20398,20399,20401,20403],{"class":639,"line":739},[637,20400,732],{"class":642},[637,20402,647],{"class":646},[637,20404,669],{"class":642},[637,20406,20407],{"class":639,"line":745},[637,20408,742],{"emptyLinePlaceholder":594},[637,20410,20411,20413,20415],{"class":639,"line":755},[637,20412,643],{"class":642},[637,20414,750],{"class":646},[637,20416,669],{"class":642},[637,20418,20420,20422,20424,20426,20428,20430,20432,20434,20436],{"class":20419,"line":778},[639,673],[637,20421,758],{"class":642},[637,20423,145],{"class":646},[637,20425,813],{"class":642},[637,20427,18978],{"class":650},[637,20429,657],{"class":642},[637,20431,660],{"class":642},[637,20433,18978],{"class":683},[637,20435,660],{"class":642},[637,20437,787],{"class":642},[637,20439,20440,20442,20444],{"class":639,"line":790},[637,20441,732],{"class":642},[637,20443,750],{"class":646},[637,20445,669],{"class":642},[626,20447,20448],{"className":628,"code":17959,"filename":17960,"language":633,"meta":576,"style":576},[618,20449,20450,20470,20488,20506,20520,20528,20532,20540,20558,20590,20598,20606,20612,20626,20652,20656,20676,20684],{"__ignoreMap":576},[637,20451,20452,20454,20456,20458,20460,20462,20464,20466,20468],{"class":639,"line":577},[637,20453,643],{"class":642},[637,20455,647],{"class":646},[637,20457,651],{"class":650},[637,20459,654],{"class":650},[637,20461,657],{"class":642},[637,20463,660],{"class":642},[637,20465,664],{"class":663},[637,20467,660],{"class":642},[637,20469,669],{"class":642},[637,20471,20472,20474,20476,20478,20480,20482,20484,20486],{"class":639,"line":578},[637,20473,677],{"class":676},[637,20475,680],{"class":642},[637,20477,690],{"class":683},[637,20479,693],{"class":642},[637,20481,696],{"class":676},[637,20483,699],{"class":642},[637,20485,702],{"class":663},[637,20487,705],{"class":642},[637,20489,20490,20492,20494,20496,20498,20500,20502,20504],{"class":639,"line":708},[637,20491,677],{"class":676},[637,20493,680],{"class":642},[637,20495,715],{"class":683},[637,20497,693],{"class":642},[637,20499,696],{"class":676},[637,20501,699],{"class":642},[637,20503,724],{"class":663},[637,20505,705],{"class":642},[637,20507,20508,20510,20512,20514,20516,20518],{"class":639,"line":729},[637,20509,677],{"class":676},[637,20511,18025],{"class":683},[637,20513,8704],{"class":676},[637,20515,699],{"class":642},[637,20517,18032],{"class":663},[637,20519,705],{"class":642},[637,20521,20522,20524,20526],{"class":639,"line":739},[637,20523,732],{"class":642},[637,20525,647],{"class":646},[637,20527,669],{"class":642},[637,20529,20530],{"class":639,"line":745},[637,20531,742],{"emptyLinePlaceholder":594},[637,20533,20534,20536,20538],{"class":639,"line":755},[637,20535,643],{"class":642},[637,20537,750],{"class":646},[637,20539,669],{"class":642},[637,20541,20542,20544,20546,20548,20550,20552,20554,20556],{"class":639,"line":778},[637,20543,758],{"class":642},[637,20545,761],{"class":646},[637,20547,764],{"class":650},[637,20549,657],{"class":642},[637,20551,660],{"class":642},[637,20553,18069],{"class":663},[637,20555,660],{"class":642},[637,20557,669],{"class":642},[637,20559,20560,20562,20564,20566,20568,20570,20572,20574,20576,20578,20580,20582,20584,20586,20588],{"class":639,"line":790},[637,20561,781],{"class":642},[637,20563,784],{"class":646},[637,20565,813],{"class":642},[637,20567,1491],{"class":650},[637,20569,657],{"class":642},[637,20571,660],{"class":642},[637,20573,1498],{"class":642},[637,20575,2729],{"class":823},[637,20577,1503],{"class":642},[637,20579,824],{"class":823},[637,20581,1503],{"class":642},[637,20583,7666],{"class":823},[637,20585,1513],{"class":642},[637,20587,660],{"class":642},[637,20589,787],{"class":642},[637,20591,20592,20594,20596],{"class":639,"line":800},[637,20593,781],{"class":642},[637,20595,795],{"class":646},[637,20597,787],{"class":642},[637,20599,20600,20602,20604],{"class":639,"line":805},[637,20601,781],{"class":642},[637,20603,18120],{"class":646},[637,20605,787],{"class":642},[637,20607,20608,20610],{"class":639,"line":831},[637,20609,781],{"class":642},[637,20611,18129],{"class":646},[637,20613,20614,20616,20618,20620,20622,20624],{"class":639,"line":631},[637,20615,13000],{"class":642},[637,20617,1918],{"class":650},[637,20619,657],{"class":642},[637,20621,660],{"class":642},[637,20623,824],{"class":823},[637,20625,3224],{"class":642},[637,20627,20628,20630,20632,20634,20636,20638,20640,20642,20644,20646,20648,20650],{"class":639,"line":854},[637,20629,13000],{"class":642},[637,20631,1491],{"class":650},[637,20633,657],{"class":642},[637,20635,660],{"class":642},[637,20637,1498],{"class":642},[637,20639,2729],{"class":823},[637,20641,1503],{"class":642},[637,20643,2729],{"class":823},[637,20645,1503],{"class":642},[637,20647,2729],{"class":823},[637,20649,1513],{"class":642},[637,20651,3224],{"class":642},[637,20653,20654],{"class":639,"line":865},[637,20655,18174],{"class":642},[637,20657,20658,20660,20662,20664,20666,20668,20670,20672,20674],{"class":639,"line":876},[637,20659,781],{"class":642},[637,20661,10010],{"class":646},[637,20663,813],{"class":642},[637,20665,1918],{"class":650},[637,20667,657],{"class":642},[637,20669,660],{"class":642},[637,20671,1925],{"class":823},[637,20673,660],{"class":642},[637,20675,787],{"class":642},[637,20677,20678,20680,20682],{"class":639,"line":886},[637,20679,909],{"class":642},[637,20681,761],{"class":646},[637,20683,669],{"class":642},[637,20685,20686,20688,20690],{"class":639,"line":632},[637,20687,732],{"class":642},[637,20689,750],{"class":646},[637,20691,669],{"class":642},[504,20693,19246],{"id":19245},[614,20695,20696,20697,1712,20699,20701],{},"You can access the model reference by passing a ",[618,20698,6103],{},[618,20700,145],{}," component and then using it to get the object.",[626,20703,20705],{"className":628,"code":20704,"language":633,"meta":576,"style":576},"\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",[618,20706,20707,20727,20748,20766,20770,20789,20793,20813,20818,20845,20851,20859,20863,20871,20878,20890,20903,20907],{"__ignoreMap":576},[637,20708,20709,20711,20713,20715,20717,20719,20721,20723,20725],{"class":639,"line":577},[637,20710,643],{"class":642},[637,20712,647],{"class":646},[637,20714,651],{"class":650},[637,20716,654],{"class":650},[637,20718,657],{"class":642},[637,20720,660],{"class":642},[637,20722,664],{"class":663},[637,20724,660],{"class":642},[637,20726,669],{"class":642},[637,20728,20729,20731,20733,20735,20738,20740,20742,20744,20746],{"class":639,"line":578},[637,20730,677],{"class":676},[637,20732,3535],{"class":676},[637,20734,680],{"class":642},[637,20736,20737],{"class":683}," TresObject",[637,20739,693],{"class":642},[637,20741,696],{"class":676},[637,20743,699],{"class":642},[637,20745,724],{"class":663},[637,20747,705],{"class":642},[637,20749,20750,20752,20754,20756,20758,20760,20762,20764],{"class":639,"line":708},[637,20751,677],{"class":676},[637,20753,680],{"class":642},[637,20755,20367],{"class":683},[637,20757,693],{"class":642},[637,20759,696],{"class":676},[637,20761,699],{"class":642},[637,20763,702],{"class":663},[637,20765,705],{"class":642},[637,20767,20768],{"class":639,"line":729},[637,20769,742],{"emptyLinePlaceholder":594},[637,20771,20772,20774,20776,20778,20780,20782,20785,20787],{"class":639,"line":739},[637,20773,2487],{"class":650},[637,20775,19328],{"class":683},[637,20777,657],{"class":642},[637,20779,3591],{"class":2506},[637,20781,643],{"class":642},[637,20783,20784],{"class":1204},"TresObject",[637,20786,3744],{"class":642},[637,20788,6744],{"class":683},[637,20790,20791],{"class":639,"line":745},[637,20792,742],{"emptyLinePlaceholder":594},[637,20794,20795,20797,20800,20802,20804,20807,20809,20811],{"class":639,"line":755},[637,20796,12798],{"class":2506},[637,20798,20799],{"class":683},"(modelRef",[637,20801,687],{"class":642},[637,20803,3167],{"class":642},[637,20805,20806],{"class":7047},"model",[637,20808,3433],{"class":642},[637,20810,3770],{"class":650},[637,20812,1208],{"class":642},[637,20814,20815],{"class":639,"line":778},[637,20816,20817],{"class":1213}," \u002F\u002F Do something with the model\n",[637,20819,20820,20823,20825,20827,20829,20831,20833,20835,20837,20839,20841,20843],{"class":639,"line":790},[637,20821,20822],{"class":683}," model",[637,20824,1150],{"class":642},[637,20826,1491],{"class":683},[637,20828,1150],{"class":642},[637,20830,19408],{"class":2506},[637,20832,2509],{"class":646},[637,20834,969],{"class":823},[637,20836,687],{"class":642},[637,20838,2577],{"class":823},[637,20840,687],{"class":642},[637,20842,2577],{"class":823},[637,20844,2520],{"class":646},[637,20846,20847,20849],{"class":639,"line":800},[637,20848,2500],{"class":642},[637,20850,2520],{"class":683},[637,20852,20853,20855,20857],{"class":639,"line":805},[637,20854,732],{"class":642},[637,20856,647],{"class":646},[637,20858,669],{"class":642},[637,20860,20861],{"class":639,"line":831},[637,20862,742],{"emptyLinePlaceholder":594},[637,20864,20865,20867,20869],{"class":639,"line":631},[637,20866,643],{"class":642},[637,20868,750],{"class":646},[637,20870,669],{"class":642},[637,20872,20873,20875],{"class":639,"line":854},[637,20874,758],{"class":642},[637,20876,20877],{"class":646},"FBXModel\n",[637,20879,20880,20882,20884,20886,20888],{"class":639,"line":865},[637,20881,19460],{"class":650},[637,20883,657],{"class":642},[637,20885,660],{"class":642},[637,20887,19467],{"class":663},[637,20889,3224],{"class":642},[637,20891,20892,20894,20896,20898,20901],{"class":639,"line":876},[637,20893,19474],{"class":650},[637,20895,657],{"class":642},[637,20897,660],{"class":642},[637,20899,20900],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Fmodels\u002Ffbx\u002Fkenney-suv\u002Fsuv.fbx",[637,20902,3224],{"class":642},[637,20904,20905],{"class":639,"line":886},[637,20906,14760],{"class":642},[637,20908,20909,20911,20913],{"class":639,"line":632},[637,20910,732],{"class":642},[637,20912,750],{"class":646},[637,20914,669],{"class":642},[504,20916,926],{"id":925},[931,20918,20919,20929],{},[934,20920,20921],{},[937,20922,20923,20925,20927],{},[940,20924,942],{"align":1001},[940,20926,945],{"align":1001},[940,20928,948],{},[950,20930,20931,20944,20958],{},[937,20932,20933,20937,20940],{},[955,20934,20935],{"align":1001},[618,20936,18978],{},[955,20938,20939],{"align":1001},"Path to the model file.",[955,20941,20942],{},[618,20943,1183],{},[937,20945,20946,20950,20954],{},[955,20947,20948],{"align":1001},[618,20949,19565],{},[955,20951,19568,20952,19572],{"align":1001},[618,20953,19571],{},[955,20955,20956],{},[618,20957,975],{},[937,20959,20960,20964,20968],{},[955,20961,20962],{"align":1001},[618,20963,19583],{},[955,20965,19568,20966,19572],{"align":1001},[618,20967,19588],{},[955,20969,20970],{},[618,20971,975],{},[1331,20973,20974],{},"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":576,"searchDepth":577,"depth":578,"links":20976},[20977,20978,20979],{"id":624,"depth":578,"text":15},{"id":19245,"depth":578,"text":19246},{"id":925,"depth":578,"text":926},"A component based on useFBX to load models in TresJS scenes.",{},{"title":145,"description":20980},"WzwR4h_7CR1jYydbL8q5Z4yrZkbIT2SrPSYmy8Foh2A",{"id":20985,"title":149,"body":20986,"description":21631,"extension":591,"links":592,"meta":21632,"navigation":594,"path":150,"seo":21633,"stem":151,"__hash__":21634},"docs\u002F2.api\u002F3.loaders\u002F5.use-texture.md",{"type":501,"value":20987,"toc":21625},[20988,20993,21004,21006,21160,21162,21214,21216,21271,21275,21282,21622],[2367,20989,20990],{},[20991,20992],"loaders-use-texture",{},[614,20994,20995,20996,21001,21002,17801],{},"A composable that allows you to load textures using the ",[1144,20997,21000],{"href":20998,"rel":20999},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Floaders\u002FTextureLoader",[1148],"Three.js texture loader"," into your ",[1705,21003,17800],{},[504,21005,15],{"id":624},[626,21007,21010],{"className":628,"code":21008,"highlights":21009,"language":633,"meta":576,"style":576},"\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",[578,729,800],[618,21011,21012,21032,21051,21055,21087,21095,21099,21107,21115,21123,21144,21152],{"__ignoreMap":576},[637,21013,21014,21016,21018,21020,21022,21024,21026,21028,21030],{"class":639,"line":577},[637,21015,643],{"class":642},[637,21017,647],{"class":646},[637,21019,651],{"class":650},[637,21021,654],{"class":650},[637,21023,657],{"class":642},[637,21025,660],{"class":642},[637,21027,664],{"class":663},[637,21029,660],{"class":642},[637,21031,669],{"class":642},[637,21033,21035,21037,21039,21041,21043,21045,21047,21049],{"class":21034,"line":578},[639,673],[637,21036,677],{"class":676},[637,21038,680],{"class":642},[637,21040,2431],{"class":683},[637,21042,693],{"class":642},[637,21044,696],{"class":676},[637,21046,699],{"class":642},[637,21048,702],{"class":663},[637,21050,705],{"class":642},[637,21052,21053],{"class":639,"line":708},[637,21054,742],{"emptyLinePlaceholder":594},[637,21056,21058,21060,21062,21064,21066,21069,21071,21074,21076,21079,21081,21083,21085],{"class":21057,"line":729},[639,673],[637,21059,2487],{"class":650},[637,21061,680],{"class":642},[637,21063,2492],{"class":646},[637,21065,1222],{"class":642},[637,21067,21068],{"class":683}," texture",[637,21070,687],{"class":642},[637,21072,21073],{"class":683}," isLoading",[637,21075,687],{"class":642},[637,21077,21078],{"class":683}," error ",[637,21080,2500],{"class":642},[637,21082,2503],{"class":642},[637,21084,2431],{"class":2506},[637,21086,17899],{"class":683},[637,21088,21089,21091,21093],{"class":639,"line":739},[637,21090,732],{"class":642},[637,21092,647],{"class":646},[637,21094,669],{"class":642},[637,21096,21097],{"class":639,"line":745},[637,21098,742],{"emptyLinePlaceholder":594},[637,21100,21101,21103,21105],{"class":639,"line":755},[637,21102,643],{"class":642},[637,21104,750],{"class":646},[637,21106,669],{"class":642},[637,21108,21109,21111,21113],{"class":639,"line":778},[637,21110,758],{"class":642},[637,21112,860],{"class":646},[637,21114,669],{"class":642},[637,21116,21117,21119,21121],{"class":639,"line":790},[637,21118,781],{"class":642},[637,21120,4107],{"class":646},[637,21122,787],{"class":642},[637,21124,21126,21128,21130,21132,21134,21136,21138,21140,21142],{"class":21125,"line":800},[639,673],[637,21127,781],{"class":642},[637,21129,2770],{"class":646},[637,21131,813],{"class":642},[637,21133,2825],{"class":650},[637,21135,657],{"class":642},[637,21137,660],{"class":642},[637,21139,2801],{"class":683},[637,21141,660],{"class":642},[637,21143,787],{"class":642},[637,21145,21146,21148,21150],{"class":639,"line":805},[637,21147,909],{"class":642},[637,21149,860],{"class":646},[637,21151,669],{"class":642},[637,21153,21154,21156,21158],{"class":639,"line":831},[637,21155,732],{"class":642},[637,21157,750],{"class":646},[637,21159,669],{"class":642},[504,21161,14787],{"id":18439},[931,21163,21164,21176],{},[934,21165,21166],{},[937,21167,21168,21170,21172,21174],{},[940,21169,8360],{"align":1001},[940,21171,6178],{},[940,21173,948],{},[940,21175,945],{},[950,21177,21178,21195],{},[937,21179,21180,21184,21188,21192],{},[955,21181,21182],{"align":1001},[1705,21183,18978],{},[955,21185,21186],{},[618,21187,3665],{},[955,21189,21190],{},[618,21191,1183],{},[955,21193,21194],{},"The path to the texture.",[937,21196,21197,21202,21207,21211],{},[955,21198,21199],{"align":1001},[1705,21200,21201],{},"manager",[955,21203,21204],{},[618,21205,21206],{},"THREE.LoadingManager",[955,21208,21209],{},[618,21210,1183],{},[955,21212,21213],{},"The loading manager to use for the texture.",[504,21215,18302],{"id":18301},[931,21217,21218,21228],{},[934,21219,21220],{},[937,21221,21222,21224,21226],{},[940,21223,8360],{"align":1001},[940,21225,6178],{"align":1001},[940,21227,945],{"align":1001},[950,21229,21230,21244,21257],{},[937,21231,21232,21236,21241],{},[955,21233,21234],{"align":1001},[618,21235,15551],{},[955,21237,21238],{"align":1001},[618,21239,21240],{},"Texture | null",[955,21242,21243],{"align":1001},"The loaded texture",[937,21245,21246,21250,21254],{},[955,21247,21248],{"align":1001},[618,21249,18368],{},[955,21251,21252],{"align":1001},[618,21253,18466],{},[955,21255,21256],{"align":1001},"Whether the texture is loading",[937,21258,21259,21263,21268],{},[955,21260,21261],{"align":1001},[618,21262,18383],{},[955,21264,21265],{"align":1001},[618,21266,21267],{},"string | null",[955,21269,21270],{"align":1001},"Error message if loading failed",[504,21272,21274],{"id":21273},"component-usage","Component Usage",[614,21276,21277,21278,21281],{},"You can also use the ",[618,21279,21280],{},"UseTexture"," component directly in your template:",[626,21283,21286],{"className":628,"code":21284,"highlights":21285,"language":633,"meta":576,"style":576},"\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",[578,876,886,632,906,916,2695,2765],[618,21287,21288,21308,21328,21332,21347,21351,21375,21398,21402,21406,21430,21453,21457,21465,21469,21477,21485,21507,21522,21540,21556,21561,21569,21577,21597,21605,21614],{"__ignoreMap":576},[637,21289,21290,21292,21294,21296,21298,21300,21302,21304,21306],{"class":639,"line":577},[637,21291,643],{"class":642},[637,21293,647],{"class":646},[637,21295,651],{"class":650},[637,21297,654],{"class":650},[637,21299,657],{"class":642},[637,21301,660],{"class":642},[637,21303,664],{"class":663},[637,21305,660],{"class":642},[637,21307,669],{"class":642},[637,21309,21311,21313,21315,21318,21320,21322,21324,21326],{"class":21310,"line":578},[639,673],[637,21312,677],{"class":676},[637,21314,680],{"class":642},[637,21316,21317],{"class":683}," UseTexture",[637,21319,693],{"class":642},[637,21321,696],{"class":676},[637,21323,699],{"class":642},[637,21325,702],{"class":663},[637,21327,705],{"class":642},[637,21329,21330],{"class":639,"line":708},[637,21331,742],{"emptyLinePlaceholder":594},[637,21333,21334,21336,21338,21340,21342,21345],{"class":639,"line":729},[637,21335,2487],{"class":650},[637,21337,17863],{"class":683},[637,21339,657],{"class":642},[637,21341,699],{"class":642},[637,21343,21344],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fblack-rock\u002FRock035_2K_Color.jpg",[637,21346,705],{"class":642},[637,21348,21349],{"class":639,"line":739},[637,21350,742],{"emptyLinePlaceholder":594},[637,21352,21353,21355,21358,21360,21362,21364,21366,21369,21371,21373],{"class":639,"line":745},[637,21354,2487],{"class":650},[637,21356,21357],{"class":683}," handleLoaded ",[637,21359,657],{"class":642},[637,21361,3167],{"class":642},[637,21363,2801],{"class":7047},[637,21365,1222],{"class":642},[637,21367,21368],{"class":1204}," Texture",[637,21370,3433],{"class":642},[637,21372,3770],{"class":650},[637,21374,1208],{"class":642},[637,21376,21377,21379,21381,21383,21385,21387,21390,21392,21394,21396],{"class":639,"line":755},[637,21378,7063],{"class":683},[637,21380,1150],{"class":642},[637,21382,7068],{"class":2506},[637,21384,2509],{"class":646},[637,21386,2512],{"class":642},[637,21388,21389],{"class":663},"Loaded texture",[637,21391,2512],{"class":642},[637,21393,687],{"class":642},[637,21395,21068],{"class":683},[637,21397,2520],{"class":646},[637,21399,21400],{"class":639,"line":778},[637,21401,1329],{"class":642},[637,21403,21404],{"class":639,"line":790},[637,21405,742],{"emptyLinePlaceholder":594},[637,21407,21408,21410,21413,21415,21417,21419,21421,21424,21426,21428],{"class":639,"line":800},[637,21409,2487],{"class":650},[637,21411,21412],{"class":683}," handleError ",[637,21414,657],{"class":642},[637,21416,3167],{"class":642},[637,21418,18383],{"class":7047},[637,21420,1222],{"class":642},[637,21422,21423],{"class":1204}," unknown",[637,21425,3433],{"class":642},[637,21427,3770],{"class":650},[637,21429,1208],{"class":642},[637,21431,21432,21434,21436,21438,21440,21442,21444,21446,21448,21451],{"class":639,"line":805},[637,21433,7063],{"class":683},[637,21435,1150],{"class":642},[637,21437,18383],{"class":2506},[637,21439,2509],{"class":646},[637,21441,2512],{"class":642},[637,21443,18383],{"class":663},[637,21445,2512],{"class":642},[637,21447,687],{"class":642},[637,21449,21450],{"class":683}," error",[637,21452,2520],{"class":646},[637,21454,21455],{"class":639,"line":831},[637,21456,1329],{"class":642},[637,21458,21459,21461,21463],{"class":639,"line":631},[637,21460,732],{"class":642},[637,21462,647],{"class":646},[637,21464,669],{"class":642},[637,21466,21467],{"class":639,"line":854},[637,21468,742],{"emptyLinePlaceholder":594},[637,21470,21471,21473,21475],{"class":639,"line":865},[637,21472,643],{"class":642},[637,21474,750],{"class":646},[637,21476,669],{"class":642},[637,21478,21480,21482],{"class":21479,"line":876},[639,673],[637,21481,758],{"class":642},[637,21483,21484],{"class":646},"UseTexture\n",[637,21486,21488,21491,21493,21495,21497,21499,21501,21503,21505],{"class":21487,"line":886},[639,673],[637,21489,21490],{"class":650}," v-slot",[637,21492,657],{"class":642},[637,21494,660],{"class":642},[637,21496,11393],{"class":642},[637,21498,15551],{"class":646},[637,21500,11398],{"class":642},[637,21502,2801],{"class":683},[637,21504,693],{"class":642},[637,21506,3224],{"class":642},[637,21508,21510,21512,21514,21516,21518,21520],{"class":21509,"line":632},[639,673],[637,21511,5353],{"class":642},[637,21513,18978],{"class":650},[637,21515,657],{"class":642},[637,21517,660],{"class":642},[637,21519,18978],{"class":683},[637,21521,3224],{"class":642},[637,21523,21525,21528,21531,21533,21535,21538],{"class":21524,"line":906},[639,673],[637,21526,21527],{"class":642}," @",[637,21529,21530],{"class":650},"loaded",[637,21532,657],{"class":642},[637,21534,660],{"class":642},[637,21536,21537],{"class":683},"handleLoaded",[637,21539,3224],{"class":642},[637,21541,21543,21545,21547,21549,21551,21554],{"class":21542,"line":916},[639,673],[637,21544,21527],{"class":642},[637,21546,18383],{"class":650},[637,21548,657],{"class":642},[637,21550,660],{"class":642},[637,21552,21553],{"class":683},"handleError",[637,21555,3224],{"class":642},[637,21557,21559],{"class":21558,"line":2695},[639,673],[637,21560,5376],{"class":642},[637,21562,21563,21565,21567],{"class":639,"line":2704},[637,21564,781],{"class":642},[637,21566,860],{"class":646},[637,21568,669],{"class":642},[637,21570,21571,21573,21575],{"class":639,"line":2738},[637,21572,857],{"class":642},[637,21574,4107],{"class":646},[637,21576,787],{"class":642},[637,21578,21579,21581,21583,21585,21587,21589,21591,21593,21595],{"class":639,"line":2747},[637,21580,857],{"class":642},[637,21582,2770],{"class":646},[637,21584,813],{"class":642},[637,21586,2825],{"class":650},[637,21588,657],{"class":642},[637,21590,660],{"class":642},[637,21592,2801],{"class":683},[637,21594,660],{"class":642},[637,21596,787],{"class":642},[637,21598,21599,21601,21603],{"class":639,"line":2756},[637,21600,899],{"class":642},[637,21602,860],{"class":646},[637,21604,669],{"class":642},[637,21606,21608,21610,21612],{"class":21607,"line":2765},[639,673],[637,21609,909],{"class":642},[637,21611,21280],{"class":646},[637,21613,669],{"class":642},[637,21615,21616,21618,21620],{"class":639,"line":2787},[637,21617,732],{"class":642},[637,21619,750],{"class":646},[637,21621,669],{"class":642},[1331,21623,21624],{},"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":576,"searchDepth":577,"depth":578,"links":21626},[21627,21628,21629,21630],{"id":624,"depth":578,"text":15},{"id":18439,"depth":578,"text":14787},{"id":18301,"depth":578,"text":18302},{"id":21273,"depth":578,"text":21274},"A composable to load textures in TresJS scenes.",{},{"title":149,"description":21631},"eWpsm_0O2uskMZJ3Ht1Sb5JPGHO3WvELbtkQ2LoRQO0",{"id":21636,"title":153,"body":21637,"description":23144,"extension":591,"links":592,"meta":23145,"navigation":594,"path":154,"seo":23146,"stem":155,"__hash__":23147},"docs\u002F2.api\u002F3.loaders\u002F6.use-textures.md",{"type":501,"value":21638,"toc":23135},[21639,21644,21652,21654,21920,21924,21927,23001,23005,23009,23044,23048,23102,23106,23132],[2367,21640,21641],{},[21642,21643],"loaders-use-textures",{},[614,21645,21646,21647,21001,21650,17801],{},"A composable that allows you to load multiple textures at once using the ",[1144,21648,21000],{"href":20998,"rel":21649},[1148],[1705,21651,17800],{},[504,21653,15],{"id":624},[626,21655,21658],{"className":628,"code":21656,"highlights":21657,"language":633,"meta":576,"style":576},"\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",[578,831,906,916,2695],[618,21659,21660,21680,21699,21703,21708,21720,21731,21742,21751,21756,21760,21765,21792,21800,21804,21812,21820,21828,21835,21856,21878,21900,21904,21912],{"__ignoreMap":576},[637,21661,21662,21664,21666,21668,21670,21672,21674,21676,21678],{"class":639,"line":577},[637,21663,643],{"class":642},[637,21665,647],{"class":646},[637,21667,651],{"class":650},[637,21669,654],{"class":650},[637,21671,657],{"class":642},[637,21673,660],{"class":642},[637,21675,664],{"class":663},[637,21677,660],{"class":642},[637,21679,669],{"class":642},[637,21681,21683,21685,21687,21689,21691,21693,21695,21697],{"class":21682,"line":578},[639,673],[637,21684,677],{"class":676},[637,21686,680],{"class":642},[637,21688,2931],{"class":683},[637,21690,693],{"class":642},[637,21692,696],{"class":676},[637,21694,699],{"class":642},[637,21696,702],{"class":663},[637,21698,705],{"class":642},[637,21700,21701],{"class":639,"line":708},[637,21702,742],{"emptyLinePlaceholder":594},[637,21704,21705],{"class":639,"line":729},[637,21706,21707],{"class":1213},"\u002F\u002F Define an array of texture paths\n",[637,21709,21710,21712,21715,21717],{"class":639,"line":739},[637,21711,2487],{"class":650},[637,21713,21714],{"class":683}," texturePaths ",[637,21716,657],{"class":642},[637,21718,21719],{"class":683}," [\n",[637,21721,21722,21724,21727,21729],{"class":639,"line":745},[637,21723,2967],{"class":642},[637,21725,21726],{"class":663},"\u002Ftextures\u002Fcolor.jpg",[637,21728,2512],{"class":642},[637,21730,2560],{"class":642},[637,21732,21733,21735,21738,21740],{"class":639,"line":755},[637,21734,2967],{"class":642},[637,21736,21737],{"class":663},"\u002Ftextures\u002Fnormal.jpg",[637,21739,2512],{"class":642},[637,21741,2560],{"class":642},[637,21743,21744,21746,21749],{"class":639,"line":778},[637,21745,2967],{"class":642},[637,21747,21748],{"class":663},"\u002Ftextures\u002Froughness.jpg",[637,21750,705],{"class":642},[637,21752,21753],{"class":639,"line":790},[637,21754,21755],{"class":683},"]\n",[637,21757,21758],{"class":639,"line":800},[637,21759,742],{"emptyLinePlaceholder":594},[637,21761,21762],{"class":639,"line":805},[637,21763,21764],{"class":1213},"\u002F\u002F Load all textures at once\n",[637,21766,21768,21770,21772,21775,21777,21779,21781,21783,21785,21787,21789],{"class":21767,"line":831},[639,673],[637,21769,2487],{"class":650},[637,21771,680],{"class":642},[637,21773,21774],{"class":683}," textures",[637,21776,687],{"class":642},[637,21778,21073],{"class":683},[637,21780,687],{"class":642},[637,21782,21078],{"class":683},[637,21784,2500],{"class":642},[637,21786,2503],{"class":642},[637,21788,2931],{"class":2506},[637,21790,21791],{"class":683},"(texturePaths)\n",[637,21793,21794,21796,21798],{"class":639,"line":631},[637,21795,732],{"class":642},[637,21797,647],{"class":646},[637,21799,669],{"class":642},[637,21801,21802],{"class":639,"line":854},[637,21803,742],{"emptyLinePlaceholder":594},[637,21805,21806,21808,21810],{"class":639,"line":865},[637,21807,643],{"class":642},[637,21809,750],{"class":646},[637,21811,669],{"class":642},[637,21813,21814,21816,21818],{"class":639,"line":876},[637,21815,758],{"class":642},[637,21817,860],{"class":646},[637,21819,669],{"class":642},[637,21821,21822,21824,21826],{"class":639,"line":886},[637,21823,781],{"class":642},[637,21825,4107],{"class":646},[637,21827,787],{"class":642},[637,21829,21830,21832],{"class":639,"line":632},[637,21831,781],{"class":642},[637,21833,21834],{"class":646},"TresMeshStandardMaterial\n",[637,21836,21838,21840,21842,21844,21846,21848,21850,21852,21854],{"class":21837,"line":906},[639,673],[637,21839,13000],{"class":642},[637,21841,2825],{"class":650},[637,21843,657],{"class":642},[637,21845,660],{"class":642},[637,21847,3050],{"class":683},[637,21849,1498],{"class":642},[637,21851,969],{"class":823},[637,21853,1513],{"class":642},[637,21855,3224],{"class":642},[637,21857,21859,21861,21864,21866,21868,21870,21872,21874,21876],{"class":21858,"line":916},[639,673],[637,21860,13000],{"class":642},[637,21862,21863],{"class":650},"normal-map",[637,21865,657],{"class":642},[637,21867,660],{"class":642},[637,21869,3050],{"class":683},[637,21871,1498],{"class":642},[637,21873,1925],{"class":823},[637,21875,1513],{"class":642},[637,21877,3224],{"class":642},[637,21879,21881,21883,21886,21888,21890,21892,21894,21896,21898],{"class":21880,"line":2695},[639,673],[637,21882,13000],{"class":642},[637,21884,21885],{"class":650},"roughness-map",[637,21887,657],{"class":642},[637,21889,660],{"class":642},[637,21891,3050],{"class":683},[637,21893,1498],{"class":642},[637,21895,824],{"class":823},[637,21897,1513],{"class":642},[637,21899,3224],{"class":642},[637,21901,21902],{"class":639,"line":2704},[637,21903,18174],{"class":642},[637,21905,21906,21908,21910],{"class":639,"line":2738},[637,21907,909],{"class":642},[637,21909,860],{"class":646},[637,21911,669],{"class":642},[637,21913,21914,21916,21918],{"class":639,"line":2747},[637,21915,732],{"class":642},[637,21917,750],{"class":646},[637,21919,669],{"class":642},[504,21921,21923],{"id":21922},"pbr-textures-example","PBR Textures Example",[614,21925,21926],{},"Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:",[626,21928,21931],{"className":628,"code":21929,"filename":21930,"language":633,"meta":576,"style":576},"\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",[618,21932,21933,21953,21976,22007,22025,22029,22034,22075,22107,22138,22142,22147,22157,22168,22179,22190,22201,22210,22214,22218,22223,22247,22251,22256,22287,22324,22329,22348,22352,22357,22376,22395,22414,22433,22452,22456,22461,22475,22490,22505,22510,22517,22522,22528,22549,22555,22562,22567,22588,22601,22627,22632,22639,22648,22653,22662,22681,22691,22728,22737,22771,22780,22789,22810,22868,22925,22945,22974,22983,22992],{"__ignoreMap":576},[637,21934,21935,21937,21939,21941,21943,21945,21947,21949,21951],{"class":639,"line":577},[637,21936,643],{"class":642},[637,21938,647],{"class":646},[637,21940,651],{"class":650},[637,21942,654],{"class":650},[637,21944,657],{"class":642},[637,21946,660],{"class":642},[637,21948,664],{"class":663},[637,21950,660],{"class":642},[637,21952,669],{"class":642},[637,21954,21955,21957,21959,21961,21963,21966,21968,21970,21972,21974],{"class":639,"line":578},[637,21956,677],{"class":676},[637,21958,680],{"class":642},[637,21960,715],{"class":683},[637,21962,687],{"class":642},[637,21964,21965],{"class":683}," vLightHelper",[637,21967,693],{"class":642},[637,21969,696],{"class":676},[637,21971,699],{"class":642},[637,21973,724],{"class":663},[637,21975,705],{"class":642},[637,21977,21978,21980,21982,21985,21987,21989,21991,21993,21995,21997,21999,22001,22003,22005],{"class":639,"line":708},[637,21979,677],{"class":676},[637,21981,680],{"class":642},[637,21983,21984],{"class":683}," Environment",[637,21986,687],{"class":642},[637,21988,690],{"class":683},[637,21990,687],{"class":642},[637,21992,4510],{"class":683},[637,21994,687],{"class":642},[637,21996,2931],{"class":683},[637,21998,693],{"class":642},[637,22000,696],{"class":676},[637,22002,699],{"class":642},[637,22004,702],{"class":663},[637,22006,705],{"class":642},[637,22008,22009,22011,22013,22015,22017,22019,22021,22023],{"class":639,"line":729},[637,22010,677],{"class":676},[637,22012,680],{"class":642},[637,22014,8625],{"class":683},[637,22016,693],{"class":642},[637,22018,696],{"class":676},[637,22020,699],{"class":642},[637,22022,4799],{"class":663},[637,22024,705],{"class":642},[637,22026,22027],{"class":639,"line":739},[637,22028,742],{"emptyLinePlaceholder":594},[637,22030,22031],{"class":639,"line":745},[637,22032,22033],{"class":1213},"\u002F\u002F Load the 3D model\n",[637,22035,22036,22038,22040,22042,22044,22046,22048,22050,22052,22054,22056,22059,22061,22063,22065,22067,22069,22071,22073],{"class":639,"line":755},[637,22037,2487],{"class":650},[637,22039,680],{"class":642},[637,22041,2492],{"class":646},[637,22043,1222],{"class":642},[637,22045,5194],{"class":683},[637,22047,2500],{"class":642},[637,22049,2503],{"class":642},[637,22051,4510],{"class":2506},[637,22053,2509],{"class":683},[637,22055,2512],{"class":642},[637,22057,22058],{"class":663},"\u002Fblender-cube-draco.glb",[637,22060,2512],{"class":642},[637,22062,687],{"class":642},[637,22064,680],{"class":642},[637,22066,4555],{"class":646},[637,22068,1222],{"class":642},[637,22070,4561],{"class":4560},[637,22072,693],{"class":642},[637,22074,2520],{"class":683},[637,22076,22077,22079,22082,22084,22086,22088,22090,22092,22094,22096,22098,22100,22102,22104],{"class":639,"line":778},[637,22078,2487],{"class":650},[637,22080,22081],{"class":683}," cube ",[637,22083,657],{"class":642},[637,22085,3582],{"class":2506},[637,22087,2509],{"class":683},[637,22089,3767],{"class":642},[637,22091,3770],{"class":650},[637,22093,5233],{"class":683},[637,22095,1150],{"class":642},[637,22097,3778],{"class":683},[637,22099,3781],{"class":642},[637,22101,5323],{"class":683},[637,22103,3781],{"class":642},[637,22105,22106],{"class":683},"BlenderCube)\n",[637,22108,22109,22111,22113,22115,22117,22119,22121,22123,22125,22127,22129,22131,22133,22135],{"class":639,"line":790},[637,22110,2487],{"class":650},[637,22112,8675],{"class":683},[637,22114,657],{"class":642},[637,22116,3582],{"class":2506},[637,22118,2509],{"class":683},[637,22120,3767],{"class":642},[637,22122,3770],{"class":650},[637,22124,5233],{"class":683},[637,22126,1150],{"class":642},[637,22128,3778],{"class":683},[637,22130,3781],{"class":642},[637,22132,528],{"class":683},[637,22134,3781],{"class":642},[637,22136,22137],{"class":683},"Material)\n",[637,22139,22140],{"class":639,"line":800},[637,22141,742],{"emptyLinePlaceholder":594},[637,22143,22144],{"class":639,"line":805},[637,22145,22146],{"class":1213},"\u002F\u002F Define texture paths\n",[637,22148,22149,22151,22153,22155],{"class":639,"line":831},[637,22150,2487],{"class":650},[637,22152,21714],{"class":683},[637,22154,657],{"class":642},[637,22156,21719],{"class":683},[637,22158,22159,22161,22164,22166],{"class":639,"line":631},[637,22160,2967],{"class":642},[637,22162,22163],{"class":663},"\u002Ftextures\u002FMetal053C_4K-JPG\u002FMetal053C_4K-JPG_Color.jpg",[637,22165,2512],{"class":642},[637,22167,2560],{"class":642},[637,22169,22170,22172,22175,22177],{"class":639,"line":854},[637,22171,2967],{"class":642},[637,22173,22174],{"class":663},"\u002Ftextures\u002FMetal053C_4K-JPG\u002FMetal053C_4K-JPG_NormalGL.jpg",[637,22176,2512],{"class":642},[637,22178,2560],{"class":642},[637,22180,22181,22183,22186,22188],{"class":639,"line":865},[637,22182,2967],{"class":642},[637,22184,22185],{"class":663},"\u002Ftextures\u002FMetal053C_4K-JPG\u002FMetal053C_4K-JPG_Roughness.jpg",[637,22187,2512],{"class":642},[637,22189,2560],{"class":642},[637,22191,22192,22194,22197,22199],{"class":639,"line":876},[637,22193,2967],{"class":642},[637,22195,22196],{"class":663},"\u002Ftextures\u002FMetal053C_4K-JPG\u002FMetal053C_4K-JPG_Metalness.jpg",[637,22198,2512],{"class":642},[637,22200,2560],{"class":642},[637,22202,22203,22205,22208],{"class":639,"line":886},[637,22204,2967],{"class":642},[637,22206,22207],{"class":663},"\u002Ftextures\u002FMetal053C_4K-JPG\u002FMetal053C_4K-JPG_Displacement.jpg",[637,22209,705],{"class":642},[637,22211,22212],{"class":639,"line":632},[637,22213,21755],{"class":683},[637,22215,22216],{"class":639,"line":906},[637,22217,742],{"emptyLinePlaceholder":594},[637,22219,22220],{"class":639,"line":916},[637,22221,22222],{"class":1213},"\u002F\u002F Load all PBR textures at once\n",[637,22224,22225,22227,22229,22231,22233,22235,22237,22239,22241,22243,22245],{"class":639,"line":2695},[637,22226,2487],{"class":650},[637,22228,680],{"class":642},[637,22230,21774],{"class":683},[637,22232,687],{"class":642},[637,22234,21073],{"class":683},[637,22236,687],{"class":642},[637,22238,21078],{"class":683},[637,22240,2500],{"class":642},[637,22242,2503],{"class":642},[637,22244,2931],{"class":2506},[637,22246,21791],{"class":683},[637,22248,22249],{"class":639,"line":2704},[637,22250,742],{"emptyLinePlaceholder":594},[637,22252,22253],{"class":639,"line":2738},[637,22254,22255],{"class":1213},"\u002F\u002F Apply textures to material when loaded\n",[637,22257,22258,22260,22263,22265,22268,22270,22273,22276,22278,22280,22283,22285],{"class":639,"line":2747},[637,22259,12798],{"class":2506},[637,22261,22262],{"class":683},"([material",[637,22264,687],{"class":642},[637,22266,22267],{"class":683}," textures]",[637,22269,687],{"class":642},[637,22271,22272],{"class":642}," ([",[637,22274,22275],{"class":7047},"modelMaterial",[637,22277,687],{"class":642},[637,22279,21774],{"class":7047},[637,22281,22282],{"class":642},"])",[637,22284,3770],{"class":650},[637,22286,1208],{"class":642},[637,22288,22289,22292,22294,22296,22299,22301,22303,22305,22307,22310,22313,22316,22318,22320,22322],{"class":639,"line":2756},[637,22290,22291],{"class":676}," if",[637,22293,3167],{"class":646},[637,22295,22275],{"class":683},[637,22297,22298],{"class":642}," &&",[637,22300,21774],{"class":683},[637,22302,22298],{"class":642},[637,22304,21774],{"class":683},[637,22306,1150],{"class":642},[637,22308,22309],{"class":683},"length",[637,22311,22312],{"class":642}," ===",[637,22314,22315],{"class":683}," texturePaths",[637,22317,1150],{"class":642},[637,22319,22309],{"class":683},[637,22321,4907],{"class":646},[637,22323,3353],{"class":642},[637,22325,22326],{"class":639,"line":2765},[637,22327,22328],{"class":1213}," \u002F\u002F Cast to MeshStandardMaterial to access PBR properties\n",[637,22330,22331,22334,22337,22339,22342,22345],{"class":639,"line":2787},[637,22332,22333],{"class":650}," const",[637,22335,22336],{"class":683}," pbrMaterial",[637,22338,2503],{"class":642},[637,22340,22341],{"class":683}," modelMaterial",[637,22343,22344],{"class":676}," as",[637,22346,22347],{"class":1204}," MeshStandardMaterial\n",[637,22349,22350],{"class":639,"line":2838},[637,22351,742],{"emptyLinePlaceholder":594},[637,22353,22354],{"class":639,"line":2847},[637,22355,22356],{"class":1213}," \u002F\u002F Apply textures\n",[637,22358,22359,22362,22364,22366,22368,22370,22372,22374],{"class":639,"line":2856},[637,22360,22361],{"class":683}," pbrMaterial",[637,22363,1150],{"class":642},[637,22365,2825],{"class":683},[637,22367,2503],{"class":642},[637,22369,21774],{"class":683},[637,22371,1498],{"class":646},[637,22373,969],{"class":823},[637,22375,21755],{"class":646},[637,22377,22378,22380,22382,22385,22387,22389,22391,22393],{"class":639,"line":4058},[637,22379,22361],{"class":683},[637,22381,1150],{"class":642},[637,22383,22384],{"class":683},"normalMap",[637,22386,2503],{"class":642},[637,22388,21774],{"class":683},[637,22390,1498],{"class":646},[637,22392,1925],{"class":823},[637,22394,21755],{"class":646},[637,22396,22397,22399,22401,22404,22406,22408,22410,22412],{"class":639,"line":4102},[637,22398,22361],{"class":683},[637,22400,1150],{"class":642},[637,22402,22403],{"class":683},"roughnessMap",[637,22405,2503],{"class":642},[637,22407,21774],{"class":683},[637,22409,1498],{"class":646},[637,22411,824],{"class":823},[637,22413,21755],{"class":646},[637,22415,22416,22418,22420,22423,22425,22427,22429,22431],{"class":639,"line":4129},[637,22417,22361],{"class":683},[637,22419,1150],{"class":642},[637,22421,22422],{"class":683},"metalnessMap",[637,22424,2503],{"class":642},[637,22426,21774],{"class":683},[637,22428,1498],{"class":646},[637,22430,2729],{"class":823},[637,22432,21755],{"class":646},[637,22434,22435,22437,22439,22442,22444,22446,22448,22450],{"class":639,"line":4148},[637,22436,22361],{"class":683},[637,22438,1150],{"class":642},[637,22440,22441],{"class":683},"displacementMap",[637,22443,2503],{"class":642},[637,22445,21774],{"class":683},[637,22447,1498],{"class":646},[637,22449,3900],{"class":823},[637,22451,21755],{"class":646},[637,22453,22454],{"class":639,"line":4189},[637,22455,742],{"emptyLinePlaceholder":594},[637,22457,22458],{"class":639,"line":4198},[637,22459,22460],{"class":1213}," \u002F\u002F Set material properties\n",[637,22462,22463,22465,22467,22470,22472],{"class":639,"line":4207},[637,22464,22361],{"class":683},[637,22466,1150],{"class":642},[637,22468,22469],{"class":683},"displacementScale",[637,22471,2503],{"class":642},[637,22473,22474],{"class":823}," 0\n",[637,22476,22478,22480,22482,22485,22487],{"class":639,"line":22477},38,[637,22479,22361],{"class":683},[637,22481,1150],{"class":642},[637,22483,22484],{"class":683},"metalness",[637,22486,2503],{"class":642},[637,22488,22489],{"class":823}," 0.8\n",[637,22491,22493,22495,22497,22500,22502],{"class":639,"line":22492},39,[637,22494,22361],{"class":683},[637,22496,1150],{"class":642},[637,22498,22499],{"class":683},"roughness",[637,22501,2503],{"class":642},[637,22503,22504],{"class":823}," 0.2\n",[637,22506,22508],{"class":639,"line":22507},40,[637,22509,8080],{"class":642},[637,22511,22513,22515],{"class":639,"line":22512},41,[637,22514,2500],{"class":642},[637,22516,2520],{"class":683},[637,22518,22520],{"class":639,"line":22519},42,[637,22521,742],{"emptyLinePlaceholder":594},[637,22523,22525],{"class":639,"line":22524},43,[637,22526,22527],{"class":1213},"\u002F\u002F Handle loading state and errors\n",[637,22529,22531,22533,22536,22538,22540,22543,22545,22547],{"class":639,"line":22530},44,[637,22532,12798],{"class":2506},[637,22534,22535],{"class":683},"(isLoading",[637,22537,687],{"class":642},[637,22539,3167],{"class":642},[637,22541,22542],{"class":7047},"_loading",[637,22544,3433],{"class":642},[637,22546,3770],{"class":650},[637,22548,1208],{"class":642},[637,22550,22552],{"class":639,"line":22551},45,[637,22553,22554],{"class":1213}," \u002F\u002F Handle loading state\n",[637,22556,22558,22560],{"class":639,"line":22557},46,[637,22559,2500],{"class":642},[637,22561,2520],{"class":683},[637,22563,22565],{"class":639,"line":22564},47,[637,22566,742],{"emptyLinePlaceholder":594},[637,22568,22570,22572,22575,22577,22579,22582,22584,22586],{"class":639,"line":22569},48,[637,22571,12798],{"class":2506},[637,22573,22574],{"class":683},"(error",[637,22576,687],{"class":642},[637,22578,3167],{"class":642},[637,22580,22581],{"class":7047},"errs",[637,22583,3433],{"class":642},[637,22585,3770],{"class":650},[637,22587,1208],{"class":642},[637,22589,22591,22593,22595,22597,22599],{"class":639,"line":22590},49,[637,22592,22291],{"class":676},[637,22594,3167],{"class":646},[637,22596,22581],{"class":683},[637,22598,4907],{"class":646},[637,22600,3353],{"class":642},[637,22602,22604,22607,22609,22611,22613,22615,22618,22620,22622,22625],{"class":639,"line":22603},50,[637,22605,22606],{"class":683}," console",[637,22608,1150],{"class":642},[637,22610,18383],{"class":2506},[637,22612,2509],{"class":646},[637,22614,2512],{"class":642},[637,22616,22617],{"class":663},"Error loading textures:",[637,22619,2512],{"class":642},[637,22621,687],{"class":642},[637,22623,22624],{"class":683}," errs",[637,22626,2520],{"class":646},[637,22628,22630],{"class":639,"line":22629},51,[637,22631,8080],{"class":642},[637,22633,22635,22637],{"class":639,"line":22634},52,[637,22636,2500],{"class":642},[637,22638,2520],{"class":683},[637,22640,22642,22644,22646],{"class":639,"line":22641},53,[637,22643,732],{"class":642},[637,22645,647],{"class":646},[637,22647,669],{"class":642},[637,22649,22651],{"class":639,"line":22650},54,[637,22652,742],{"emptyLinePlaceholder":594},[637,22654,22656,22658,22660],{"class":639,"line":22655},55,[637,22657,643],{"class":642},[637,22659,750],{"class":646},[637,22661,669],{"class":642},[637,22663,22665,22667,22669,22671,22673,22675,22677,22679],{"class":639,"line":22664},56,[637,22666,758],{"class":642},[637,22668,761],{"class":646},[637,22670,764],{"class":650},[637,22672,657],{"class":642},[637,22674,660],{"class":642},[637,22676,10371],{"class":663},[637,22678,660],{"class":642},[637,22680,669],{"class":642},[637,22682,22684,22686,22689],{"class":639,"line":22683},57,[637,22685,781],{"class":642},[637,22687,22688],{"class":646},"Suspense",[637,22690,669],{"class":642},[637,22692,22694,22696,22698,22701,22703,22705,22708,22710,22713,22715,22718,22720,22722,22724,22726],{"class":639,"line":22693},58,[637,22695,857],{"class":642},[637,22697,375],{"class":646},[637,22699,22700],{"class":650}," preset",[637,22702,657],{"class":642},[637,22704,660],{"class":642},[637,22706,22707],{"class":663},"studio",[637,22709,660],{"class":642},[637,22711,22712],{"class":650}," background",[637,22714,813],{"class":642},[637,22716,22717],{"class":650},"blur",[637,22719,657],{"class":642},[637,22721,660],{"class":642},[637,22723,1925],{"class":823},[637,22725,660],{"class":642},[637,22727,787],{"class":642},[637,22729,22731,22733,22735],{"class":639,"line":22730},59,[637,22732,899],{"class":642},[637,22734,22688],{"class":646},[637,22736,669],{"class":642},[637,22738,22740,22742,22744,22746,22748,22750,22752,22754,22757,22759,22761,22763,22765,22767,22769],{"class":639,"line":22739},60,[637,22741,781],{"class":642},[637,22743,784],{"class":646},[637,22745,813],{"class":642},[637,22747,1491],{"class":650},[637,22749,657],{"class":642},[637,22751,660],{"class":642},[637,22753,1498],{"class":642},[637,22755,22756],{"class":823},"8",[637,22758,1503],{"class":642},[637,22760,22756],{"class":823},[637,22762,1503],{"class":642},[637,22764,22756],{"class":823},[637,22766,1513],{"class":642},[637,22768,660],{"class":642},[637,22770,787],{"class":642},[637,22772,22774,22776,22778],{"class":639,"line":22773},61,[637,22775,781],{"class":642},[637,22777,795],{"class":646},[637,22779,787],{"class":642},[637,22781,22783,22785,22787],{"class":639,"line":22782},62,[637,22784,781],{"class":642},[637,22786,8311],{"class":646},[637,22788,787],{"class":642},[637,22790,22792,22794,22796,22798,22800,22802,22804,22806,22808],{"class":639,"line":22791},63,[637,22793,781],{"class":642},[637,22795,10010],{"class":646},[637,22797,813],{"class":642},[637,22799,1918],{"class":650},[637,22801,657],{"class":642},[637,22803,660],{"class":642},[637,22805,824],{"class":823},[637,22807,660],{"class":642},[637,22809,787],{"class":642},[637,22811,22813,22815,22817,22820,22822,22824,22826,22828,22830,22832,22834,22836,22838,22840,22842,22844,22846,22848,22850,22852,22854,22856,22858,22860,22862,22864,22866],{"class":639,"line":22812},64,[637,22814,781],{"class":642},[637,22816,10031],{"class":646},[637,22818,22819],{"class":650}," v-light-helper",[637,22821,813],{"class":642},[637,22823,1491],{"class":650},[637,22825,657],{"class":642},[637,22827,660],{"class":642},[637,22829,1498],{"class":642},[637,22831,7666],{"class":823},[637,22833,1503],{"class":642},[637,22835,7666],{"class":823},[637,22837,1503],{"class":642},[637,22839,7666],{"class":823},[637,22841,1513],{"class":642},[637,22843,660],{"class":642},[637,22845,813],{"class":642},[637,22847,1918],{"class":650},[637,22849,657],{"class":642},[637,22851,660],{"class":642},[637,22853,1545],{"class":823},[637,22855,660],{"class":642},[637,22857,2773],{"class":650},[637,22859,657],{"class":642},[637,22861,660],{"class":642},[637,22863,7794],{"class":663},[637,22865,660],{"class":642},[637,22867,787],{"class":642},[637,22869,22871,22873,22875,22877,22879,22881,22883,22885,22887,22889,22891,22893,22895,22897,22899,22901,22903,22905,22907,22909,22911,22913,22915,22917,22919,22921,22923],{"class":639,"line":22870},65,[637,22872,781],{"class":642},[637,22874,10031],{"class":646},[637,22876,22819],{"class":650},[637,22878,813],{"class":642},[637,22880,1491],{"class":650},[637,22882,657],{"class":642},[637,22884,660],{"class":642},[637,22886,3947],{"class":642},[637,22888,7666],{"class":823},[637,22890,1503],{"class":642},[637,22892,824],{"class":823},[637,22894,1503],{"class":642},[637,22896,824],{"class":823},[637,22898,1513],{"class":642},[637,22900,660],{"class":642},[637,22902,813],{"class":642},[637,22904,1918],{"class":650},[637,22906,657],{"class":642},[637,22908,660],{"class":642},[637,22910,1545],{"class":823},[637,22912,660],{"class":642},[637,22914,2773],{"class":650},[637,22916,657],{"class":642},[637,22918,660],{"class":642},[637,22920,5953],{"class":663},[637,22922,660],{"class":642},[637,22924,787],{"class":642},[637,22926,22928,22930,22932,22935,22937,22939,22941,22943],{"class":639,"line":22927},66,[637,22929,781],{"class":642},[637,22931,10402],{"class":646},[637,22933,22934],{"class":650}," position-y",[637,22936,657],{"class":642},[637,22938,660],{"class":642},[637,22940,824],{"class":663},[637,22942,660],{"class":642},[637,22944,669],{"class":642},[637,22946,22948,22950,22952,22954,22956,22958,22960,22962,22964,22966,22968,22970,22972],{"class":639,"line":22947},67,[637,22949,857],{"class":642},[637,22951,4597],{"class":646},[637,22953,2794],{"class":650},[637,22955,657],{"class":642},[637,22957,660],{"class":642},[637,22959,3934],{"class":663},[637,22961,660],{"class":642},[637,22963,4611],{"class":650},[637,22965,657],{"class":642},[637,22967,660],{"class":642},[637,22969,3934],{"class":663},[637,22971,660],{"class":642},[637,22973,787],{"class":642},[637,22975,22977,22979,22981],{"class":639,"line":22976},68,[637,22978,899],{"class":642},[637,22980,10402],{"class":646},[637,22982,669],{"class":642},[637,22984,22986,22988,22990],{"class":639,"line":22985},69,[637,22987,909],{"class":642},[637,22989,761],{"class":646},[637,22991,669],{"class":642},[637,22993,22995,22997,22999],{"class":639,"line":22994},70,[637,22996,732],{"class":642},[637,22998,750],{"class":646},[637,23000,669],{"class":642},[504,23002,23004],{"id":23003},"api","API",[4215,23006,23008],{"id":23007},"parameters","Parameters",[931,23010,23011,23023],{},[934,23012,23013],{},[937,23014,23015,23017,23019,23021],{},[940,23016,8360],{"align":1001},[940,23018,6178],{},[940,23020,948],{},[940,23022,945],{},[950,23024,23025],{},[937,23026,23027,23032,23037,23041],{},[955,23028,23029],{"align":1001},[1705,23030,23031],{},"paths",[955,23033,23034],{},[618,23035,23036],{},"string[]",[955,23038,23039],{},[618,23040,1183],{},[955,23042,23043],{},"Array of paths to the textures.",[4215,23045,23047],{"id":23046},"returns","Returns",[931,23049,23050,23060],{},[934,23051,23052],{},[937,23053,23054,23056,23058],{},[940,23055,8360],{"align":1001},[940,23057,6178],{},[940,23059,945],{},[950,23061,23062,23075,23088],{},[937,23063,23064,23068,23072],{},[955,23065,23066],{"align":1001},[1705,23067,3050],{},[955,23069,23070],{},[618,23071,5805],{},[955,23073,23074],{},"Array of loaded textures.",[937,23076,23077,23081,23085],{},[955,23078,23079],{"align":1001},[1705,23080,18368],{},[955,23082,23083],{},[618,23084,18466],{},[955,23086,23087],{},"Whether any textures are still loading.",[937,23089,23090,23094,23099],{},[955,23091,23092],{"align":1001},[1705,23093,18383],{},[955,23095,23096],{},[618,23097,23098],{},"Error[] | null",[955,23100,23101],{},"Array of errors if any occurred during loading.",[504,23103,23105],{"id":23104},"benefits","Benefits",[2285,23107,23108,23114,23120,23126],{},[2288,23109,23110,23113],{},[1705,23111,23112],{},"Simplified API",": Load multiple textures with a single function call",[2288,23115,23116,23119],{},[1705,23117,23118],{},"Consolidated loading state",": Track loading state for all textures at once",[2288,23121,23122,23125],{},[1705,23123,23124],{},"Unified error handling",": Collect and report errors from all texture loads",[2288,23127,23128,23131],{},[1705,23129,23130],{},"Type safety",": Proper TypeScript typing throughout the implementation",[1331,23133,23134],{},"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":576,"searchDepth":577,"depth":578,"links":23136},[23137,23138,23139,23143],{"id":624,"depth":578,"text":15},{"id":21922,"depth":578,"text":21923},{"id":23003,"depth":578,"text":23004,"children":23140},[23141,23142],{"id":23007,"depth":708,"text":23008},{"id":23046,"depth":708,"text":23047},{"id":23104,"depth":578,"text":23105},"A composable to load multiple textures efficiently in TresJS scenes.",{},{"title":153,"description":23144},"13O6dDsAbNlkob6FkFEH-v27Sh8t6x6myfCOww3D5Co",{"id":23149,"title":157,"body":23150,"description":26149,"extension":591,"links":592,"meta":26150,"navigation":594,"path":158,"seo":26151,"stem":159,"__hash__":26152},"docs\u002F2.api\u002F3.loaders\u002F7.use-svg.md",{"type":501,"value":23151,"toc":26124},[23152,23157,23170,23174,23179,23181,23703,23708,23722,23726,23729,23841,23843,23912,23914,24022,24026,24031,24087,24092,24428,24432,24437,24443,24448,24454,24470,24476,24491,24538,24541,24546,24557,24562,24565,24610,24614,24619,24622,24627,24636,24681,24685,24690,24702,24707,24749,24753,24756,24884,24888,24892,25216,25220,25541,25545,25552,25765,25767,25933,25937,25944,25947,25951,25961,25965,25989,25997,26010,26014,26041,26045,26065,26075,26083,26100,26107,26121],[2367,23153,23154],{},[23155,23156],"loaders-use-svg",{},[614,23158,23159,23160,23162,23163,23165,23166,23169],{},"Load and display SVG elements in your ",[1705,23161,17800],{}," scene. This guide covers both the ",[618,23164,157],{}," composable for advanced use cases and the ",[618,23167,23168],{},"SVG"," component for simple declarative rendering.",[504,23171,23173],{"id":23172},"usesvg-composable","useSVG Composable",[614,23175,2867,23176,23178],{},[618,23177,157],{}," composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.",[4215,23180,15],{"id":624},[17805,23182,23183,23510],{},[626,23184,23187],{"className":628,"code":23185,"filename":17810,"highlights":23186,"language":633,"meta":576,"style":576},"\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",[578,739,745,755,778],[618,23188,23189,23209,23229,23233,23249,23285,23297,23326,23333,23341,23345,23353,23374,23380,23405,23427,23445,23460,23464,23486,23494,23502],{"__ignoreMap":576},[637,23190,23191,23193,23195,23197,23199,23201,23203,23205,23207],{"class":639,"line":577},[637,23192,643],{"class":642},[637,23194,647],{"class":646},[637,23196,651],{"class":650},[637,23198,654],{"class":650},[637,23200,657],{"class":642},[637,23202,660],{"class":642},[637,23204,664],{"class":663},[637,23206,660],{"class":642},[637,23208,669],{"class":642},[637,23210,23212,23214,23216,23219,23221,23223,23225,23227],{"class":23211,"line":578},[639,673],[637,23213,677],{"class":676},[637,23215,680],{"class":642},[637,23217,23218],{"class":683}," useSVG",[637,23220,693],{"class":642},[637,23222,696],{"class":676},[637,23224,699],{"class":642},[637,23226,702],{"class":663},[637,23228,705],{"class":642},[637,23230,23231],{"class":639,"line":708},[637,23232,742],{"emptyLinePlaceholder":594},[637,23234,23235,23237,23240,23242,23244,23247],{"class":639,"line":729},[637,23236,2487],{"class":650},[637,23238,23239],{"class":683}," svgPath ",[637,23241,657],{"class":642},[637,23243,699],{"class":642},[637,23245,23246],{"class":663},".\u002Flogo.svg",[637,23248,705],{"class":642},[637,23250,23252,23254,23256,23258,23260,23263,23265,23267,23269,23272,23274,23276,23278,23281,23283],{"class":23251,"line":739},[639,673],[637,23253,2487],{"class":650},[637,23255,680],{"class":642},[637,23257,2492],{"class":683},[637,23259,687],{"class":642},[637,23261,23262],{"class":683}," layers",[637,23264,687],{"class":642},[637,23266,21073],{"class":683},[637,23268,687],{"class":642},[637,23270,23271],{"class":683}," dispose ",[637,23273,2500],{"class":642},[637,23275,2503],{"class":642},[637,23277,23218],{"class":2506},[637,23279,23280],{"class":683},"(svgPath",[637,23282,687],{"class":642},[637,23284,1208],{"class":642},[637,23286,23288,23291,23293,23295],{"class":23287,"line":745},[639,673],[637,23289,23290],{"class":646}," skipFills",[637,23292,1222],{"class":642},[637,23294,6934],{"class":4560},[637,23296,2560],{"class":642},[637,23298,23300,23303,23305,23307,23310,23312,23314,23316,23319,23321,23324],{"class":23299,"line":755},[639,673],[637,23301,23302],{"class":646}," fillMaterial",[637,23304,1222],{"class":642},[637,23306,680],{"class":642},[637,23308,23309],{"class":646}," transparent",[637,23311,1222],{"class":642},[637,23313,4561],{"class":4560},[637,23315,687],{"class":642},[637,23317,23318],{"class":646}," opacity",[637,23320,1222],{"class":642},[637,23322,23323],{"class":823}," 0.8",[637,23325,18700],{"class":642},[637,23327,23329,23331],{"class":23328,"line":778},[639,673],[637,23330,2500],{"class":642},[637,23332,2520],{"class":683},[637,23334,23335,23337,23339],{"class":639,"line":790},[637,23336,732],{"class":642},[637,23338,647],{"class":646},[637,23340,669],{"class":642},[637,23342,23343],{"class":639,"line":800},[637,23344,742],{"emptyLinePlaceholder":594},[637,23346,23347,23349,23351],{"class":639,"line":805},[637,23348,643],{"class":642},[637,23350,750],{"class":646},[637,23352,669],{"class":642},[637,23354,23355,23357,23359,23361,23363,23365,23368,23370,23372],{"class":639,"line":831},[637,23356,758],{"class":642},[637,23358,10402],{"class":646},[637,23360,2794],{"class":676},[637,23362,657],{"class":642},[637,23364,660],{"class":642},[637,23366,23367],{"class":642},"!",[637,23369,18368],{"class":683},[637,23371,660],{"class":642},[637,23373,669],{"class":642},[637,23375,23376,23378],{"class":639,"line":631},[637,23377,781],{"class":642},[637,23379,5311],{"class":646},[637,23381,23382,23385,23387,23389,23391,23394,23396,23398,23400,23403],{"class":639,"line":854},[637,23383,23384],{"class":676}," v-for",[637,23386,657],{"class":642},[637,23388,660],{"class":642},[637,23390,2509],{"class":642},[637,23392,23393],{"class":683},"layer",[637,23395,1503],{"class":642},[637,23397,8228],{"class":683},[637,23399,8231],{"class":642},[637,23401,23402],{"class":683},"layers",[637,23404,3224],{"class":642},[637,23406,23407,23409,23411,23413,23416,23419,23422,23424],{"class":639,"line":865},[637,23408,13000],{"class":642},[637,23410,8244],{"class":650},[637,23412,657],{"class":642},[637,23414,23415],{"class":642},"\"`",[637,23417,23418],{"class":663},"layer-",[637,23420,23421],{"class":642},"${",[637,23423,8228],{"class":683},[637,23425,23426],{"class":642},"}`\"\n",[637,23428,23429,23431,23433,23435,23437,23439,23441,23443],{"class":639,"line":876},[637,23430,13000],{"class":642},[637,23432,5333],{"class":650},[637,23434,657],{"class":642},[637,23436,660],{"class":642},[637,23438,23393],{"class":683},[637,23440,1150],{"class":642},[637,23442,5333],{"class":683},[637,23444,3224],{"class":642},[637,23446,23447,23449,23452,23454,23456,23458],{"class":639,"line":886},[637,23448,13000],{"class":642},[637,23450,23451],{"class":650},"render-order",[637,23453,657],{"class":642},[637,23455,660],{"class":642},[637,23457,8228],{"class":683},[637,23459,3224],{"class":642},[637,23461,23462],{"class":639,"line":632},[637,23463,13020],{"class":642},[637,23465,23466,23468,23470,23472,23474,23476,23478,23480,23482,23484],{"class":639,"line":906},[637,23467,857],{"class":642},[637,23469,7695],{"class":646},[637,23471,10598],{"class":650},[637,23473,657],{"class":642},[637,23475,660],{"class":642},[637,23477,23393],{"class":683},[637,23479,1150],{"class":642},[637,23481,5403],{"class":683},[637,23483,660],{"class":642},[637,23485,787],{"class":642},[637,23487,23488,23490,23492],{"class":639,"line":916},[637,23489,899],{"class":642},[637,23491,860],{"class":646},[637,23493,669],{"class":642},[637,23495,23496,23498,23500],{"class":639,"line":2695},[637,23497,909],{"class":642},[637,23499,10402],{"class":646},[637,23501,669],{"class":642},[637,23503,23504,23506,23508],{"class":639,"line":2704},[637,23505,732],{"class":642},[637,23507,750],{"class":646},[637,23509,669],{"class":642},[626,23511,23513],{"className":628,"code":23512,"filename":17960,"language":633,"meta":576,"style":576},"\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",[618,23514,23515,23535,23553,23571,23585,23593,23597,23605,23623,23655,23663,23671,23679,23687,23695],{"__ignoreMap":576},[637,23516,23517,23519,23521,23523,23525,23527,23529,23531,23533],{"class":639,"line":577},[637,23518,643],{"class":642},[637,23520,647],{"class":646},[637,23522,651],{"class":650},[637,23524,654],{"class":650},[637,23526,657],{"class":642},[637,23528,660],{"class":642},[637,23530,664],{"class":663},[637,23532,660],{"class":642},[637,23534,669],{"class":642},[637,23536,23537,23539,23541,23543,23545,23547,23549,23551],{"class":639,"line":578},[637,23538,677],{"class":676},[637,23540,680],{"class":642},[637,23542,690],{"class":683},[637,23544,693],{"class":642},[637,23546,696],{"class":676},[637,23548,699],{"class":642},[637,23550,702],{"class":663},[637,23552,705],{"class":642},[637,23554,23555,23557,23559,23561,23563,23565,23567,23569],{"class":639,"line":708},[637,23556,677],{"class":676},[637,23558,680],{"class":642},[637,23560,715],{"class":683},[637,23562,693],{"class":642},[637,23564,696],{"class":676},[637,23566,699],{"class":642},[637,23568,724],{"class":663},[637,23570,705],{"class":642},[637,23572,23573,23575,23577,23579,23581,23583],{"class":639,"line":729},[637,23574,677],{"class":676},[637,23576,18025],{"class":683},[637,23578,8704],{"class":676},[637,23580,699],{"class":642},[637,23582,18032],{"class":663},[637,23584,705],{"class":642},[637,23586,23587,23589,23591],{"class":639,"line":739},[637,23588,732],{"class":642},[637,23590,647],{"class":646},[637,23592,669],{"class":642},[637,23594,23595],{"class":639,"line":745},[637,23596,742],{"emptyLinePlaceholder":594},[637,23598,23599,23601,23603],{"class":639,"line":755},[637,23600,643],{"class":642},[637,23602,750],{"class":646},[637,23604,669],{"class":642},[637,23606,23607,23609,23611,23613,23615,23617,23619,23621],{"class":639,"line":778},[637,23608,758],{"class":642},[637,23610,761],{"class":646},[637,23612,764],{"class":650},[637,23614,657],{"class":642},[637,23616,660],{"class":642},[637,23618,13628],{"class":663},[637,23620,660],{"class":642},[637,23622,669],{"class":642},[637,23624,23625,23627,23629,23631,23633,23635,23637,23639,23641,23643,23645,23647,23649,23651,23653],{"class":639,"line":790},[637,23626,781],{"class":642},[637,23628,784],{"class":646},[637,23630,813],{"class":642},[637,23632,1491],{"class":650},[637,23634,657],{"class":642},[637,23636,660],{"class":642},[637,23638,1498],{"class":642},[637,23640,969],{"class":823},[637,23642,1503],{"class":642},[637,23644,824],{"class":823},[637,23646,1503],{"class":642},[637,23648,1510],{"class":823},[637,23650,1513],{"class":642},[637,23652,660],{"class":642},[637,23654,787],{"class":642},[637,23656,23657,23659,23661],{"class":639,"line":800},[637,23658,781],{"class":642},[637,23660,795],{"class":646},[637,23662,787],{"class":642},[637,23664,23665,23667,23669],{"class":639,"line":805},[637,23666,781],{"class":642},[637,23668,18120],{"class":646},[637,23670,787],{"class":642},[637,23672,23673,23675,23677],{"class":639,"line":831},[637,23674,781],{"class":642},[637,23676,10010],{"class":646},[637,23678,787],{"class":642},[637,23680,23681,23683,23685],{"class":639,"line":631},[637,23682,781],{"class":642},[637,23684,10031],{"class":646},[637,23686,787],{"class":642},[637,23688,23689,23691,23693],{"class":639,"line":854},[637,23690,909],{"class":642},[637,23692,761],{"class":646},[637,23694,669],{"class":642},[637,23696,23697,23699,23701],{"class":639,"line":865},[637,23698,732],{"class":642},[637,23700,750],{"class":646},[637,23702,669],{"class":642},[614,23704,2867,23705,23707],{},[618,23706,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:",[2285,23709,23710,23713,23716,23719],{},[2288,23711,23712],{},"Manually control layer rendering",[2288,23714,23715],{},"Apply custom animations to individual layers",[2288,23717,23718],{},"Access geometry data programmatically",[2288,23720,23721],{},"Implement complex material logic",[4215,23723,23725],{"id":23724},"svg-data-sources","SVG Data Sources",[614,23727,23728],{},"The composable accepts both file paths and inline SVG strings:",[626,23730,23732],{"className":1190,"code":23731,"language":664,"meta":576,"style":576},"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",[618,23733,23734,23752,23756,23761,23787,23791,23796,23811,23816,23824],{"__ignoreMap":576},[637,23735,23736,23738,23740,23742,23744,23746,23748,23750],{"class":639,"line":577},[637,23737,677],{"class":676},[637,23739,680],{"class":642},[637,23741,23218],{"class":683},[637,23743,693],{"class":642},[637,23745,696],{"class":676},[637,23747,699],{"class":642},[637,23749,702],{"class":663},[637,23751,705],{"class":642},[637,23753,23754],{"class":639,"line":578},[637,23755,742],{"emptyLinePlaceholder":594},[637,23757,23758],{"class":639,"line":708},[637,23759,23760],{"class":1213},"\u002F\u002F From file\n",[637,23762,23763,23765,23767,23770,23772,23774,23776,23778,23780,23783,23785],{"class":639,"line":729},[637,23764,2487],{"class":650},[637,23766,680],{"class":642},[637,23768,23769],{"class":683}," layers ",[637,23771,2500],{"class":642},[637,23773,2503],{"class":642},[637,23775,23218],{"class":2506},[637,23777,2509],{"class":683},[637,23779,2512],{"class":642},[637,23781,23782],{"class":663},"\u002Fpath\u002Fto\u002Ffile.svg",[637,23784,2512],{"class":642},[637,23786,2520],{"class":683},[637,23788,23789],{"class":639,"line":739},[637,23790,742],{"emptyLinePlaceholder":594},[637,23792,23793],{"class":639,"line":745},[637,23794,23795],{"class":1213},"\u002F\u002F Inline SVG string\n",[637,23797,23798,23800,23803,23805,23808],{"class":639,"line":755},[637,23799,2487],{"class":650},[637,23801,23802],{"class":683}," svgString ",[637,23804,657],{"class":642},[637,23806,23807],{"class":642}," `",[637,23809,23810],{"class":663},"\u003Csvg viewBox=\"0 0 100 100\">\n",[637,23812,23813],{"class":639,"line":778},[637,23814,23815],{"class":663}," \u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" \u002F>\n",[637,23817,23818,23821],{"class":639,"line":790},[637,23819,23820],{"class":663},"\u003C\u002Fsvg>",[637,23822,23823],{"class":642},"`\n",[637,23825,23826,23828,23830,23832,23834,23836,23838],{"class":639,"line":800},[637,23827,2487],{"class":650},[637,23829,680],{"class":642},[637,23831,23769],{"class":683},[637,23833,2500],{"class":642},[637,23835,2503],{"class":642},[637,23837,23218],{"class":2506},[637,23839,23840],{"class":683},"(svgString)\n",[4215,23842,18302],{"id":18301},[931,23844,23845,23855],{},[934,23846,23847],{},[937,23848,23849,23851,23853],{},[940,23850,8360],{"align":1001},[940,23852,6178],{},[940,23854,945],{},[950,23856,23857,23871,23885,23898],{},[937,23858,23859,23863,23868],{},[955,23860,23861],{"align":1001},[1705,23862,15551],{},[955,23864,23865],{},[618,23866,23867],{},"SVGResult",[955,23869,23870],{},"The loaded SVG state from SVGLoader",[937,23872,23873,23877,23882],{},[955,23874,23875],{"align":1001},[1705,23876,23402],{},[955,23878,23879],{},[618,23880,23881],{},"SVGLayer[]",[955,23883,23884],{},"Computed array of processed geometries and materials",[937,23886,23887,23891,23895],{},[955,23888,23889],{"align":1001},[1705,23890,18368],{},[955,23892,23893],{},[618,23894,18466],{},[955,23896,23897],{},"Whether the SVG is currently loading",[937,23899,23900,23905,23909],{},[955,23901,23902],{"align":1001},[1705,23903,23904],{},"dispose",[955,23906,23907],{},[618,23908,6230],{},[955,23910,23911],{},"Function to dispose of all geometries",[4215,23913,14787],{"id":18439},[931,23915,23916,23928],{},[934,23917,23918],{},[937,23919,23920,23922,23924,23926],{},[940,23921,8360],{"align":1001},[940,23923,6178],{},[940,23925,948],{},[940,23927,945],{},[950,23929,23930,23948,23966,23985,24003],{},[937,23931,23932,23937,23941,23945],{},[955,23933,23934],{"align":1001},[1705,23935,23936],{},"skipStrokes",[955,23938,23939],{},[618,23940,18466],{},[955,23942,23943],{},[618,23944,975],{},[955,23946,23947],{},"Whether to skip rendering strokes",[937,23949,23950,23955,23959,23963],{},[955,23951,23952],{"align":1001},[1705,23953,23954],{},"skipFills",[955,23956,23957],{},[618,23958,18466],{},[955,23960,23961],{},[618,23962,975],{},[955,23964,23965],{},"Whether to skip rendering fills",[937,23967,23968,23973,23978,23982],{},[955,23969,23970],{"align":1001},[1705,23971,23972],{},"fillMaterial",[955,23974,23975],{},[618,23976,23977],{},"MeshBasicMaterialParameters",[955,23979,23980],{},[618,23981,6334],{},[955,23983,23984],{},"Material properties for fill layers",[937,23986,23987,23992,23996,24000],{},[955,23988,23989],{"align":1001},[1705,23990,23991],{},"strokeMaterial",[955,23993,23994],{},[618,23995,23977],{},[955,23997,23998],{},[618,23999,6334],{},[955,24001,24002],{},"Material properties for stroke layers",[937,24004,24005,24009,24014,24019],{},[955,24006,24007],{"align":1001},[1705,24008,13664],{},[955,24010,24011],{},[618,24012,24013],{},"'renderOrder' | 'flat' | 'offsetZ' | number",[955,24015,24016],{},[618,24017,24018],{},"'renderOrder'",[955,24020,24021],{},"How layers should be rendered in 3D space",[4215,24023,24025],{"id":24024},"working-with-layers","Working with Layers",[614,24027,2867,24028,24030],{},[618,24029,23402],{}," computed property returns an array of processed SVG elements, each containing:",[626,24032,24034],{"className":1190,"code":24033,"language":664,"meta":576,"style":576},"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",[618,24035,24036,24045,24058,24071,24083],{"__ignoreMap":576},[637,24037,24038,24040,24043],{"class":639,"line":577},[637,24039,5535],{"class":650},[637,24041,24042],{"class":1204}," SVGLayer",[637,24044,1208],{"class":642},[637,24046,24047,24050,24052,24055],{"class":639,"line":578},[637,24048,24049],{"class":646}," geometry",[637,24051,1222],{"class":642},[637,24053,24054],{"class":1204}," BufferGeometry",[637,24056,24057],{"class":1213}," \u002F\u002F Three.js geometry for the layer\n",[637,24059,24060,24063,24065,24068],{"class":639,"line":708},[637,24061,24062],{"class":646}," material",[637,24064,1222],{"class":642},[637,24066,24067],{"class":1204}," MeshBasicMaterialParameters",[637,24069,24070],{"class":1213}," \u002F\u002F Material properties\n",[637,24072,24073,24076,24078,24080],{"class":639,"line":729},[637,24074,24075],{"class":646}," isStroke",[637,24077,1222],{"class":642},[637,24079,5666],{"class":1204},[637,24081,24082],{"class":1213}," \u002F\u002F Whether this layer is a stroke or fill\n",[637,24084,24085],{"class":639,"line":739},[637,24086,1329],{"class":642},[24088,24089,24091],"h4",{"id":24090},"accessing-individual-layers","Accessing Individual Layers",[626,24093,24096],{"className":628,"code":24094,"highlights":24095,"language":633,"meta":576,"style":576},"\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",[578,729],[618,24097,24098,24118,24137,24141,24167,24171,24176,24208,24255,24259,24267,24271,24279,24287,24293,24315,24329,24347,24351,24358,24375,24400,24404,24412,24420],{"__ignoreMap":576},[637,24099,24100,24102,24104,24106,24108,24110,24112,24114,24116],{"class":639,"line":577},[637,24101,643],{"class":642},[637,24103,647],{"class":646},[637,24105,651],{"class":650},[637,24107,654],{"class":650},[637,24109,657],{"class":642},[637,24111,660],{"class":642},[637,24113,664],{"class":663},[637,24115,660],{"class":642},[637,24117,669],{"class":642},[637,24119,24121,24123,24125,24127,24129,24131,24133,24135],{"class":24120,"line":578},[639,673],[637,24122,677],{"class":676},[637,24124,680],{"class":642},[637,24126,23218],{"class":683},[637,24128,693],{"class":642},[637,24130,696],{"class":676},[637,24132,699],{"class":642},[637,24134,702],{"class":663},[637,24136,705],{"class":642},[637,24138,24139],{"class":639,"line":708},[637,24140,742],{"emptyLinePlaceholder":594},[637,24142,24144,24146,24148,24150,24152,24154,24156,24158,24160,24163,24165],{"class":24143,"line":729},[639,673],[637,24145,2487],{"class":650},[637,24147,680],{"class":642},[637,24149,23769],{"class":683},[637,24151,2500],{"class":642},[637,24153,2503],{"class":642},[637,24155,23218],{"class":2506},[637,24157,2509],{"class":683},[637,24159,2512],{"class":642},[637,24161,24162],{"class":663},"\u002Fcomplex-icon.svg",[637,24164,2512],{"class":642},[637,24166,2520],{"class":683},[637,24168,24169],{"class":639,"line":739},[637,24170,742],{"emptyLinePlaceholder":594},[637,24172,24173],{"class":639,"line":745},[637,24174,24175],{"class":1213},"\u002F\u002F Apply different materials based on layer type\n",[637,24177,24178,24180,24183,24185,24187,24189,24191,24193,24195,24198,24200,24202,24204,24206],{"class":639,"line":755},[637,24179,2487],{"class":650},[637,24181,24182],{"class":683}," getFillColor ",[637,24184,657],{"class":642},[637,24186,3167],{"class":642},[637,24188,23393],{"class":7047},[637,24190,1222],{"class":642},[637,24192,24042],{"class":1204},[637,24194,687],{"class":642},[637,24196,24197],{"class":7047}," index",[637,24199,1222],{"class":642},[637,24201,5569],{"class":1204},[637,24203,3433],{"class":642},[637,24205,3770],{"class":650},[637,24207,1208],{"class":642},[637,24209,24210,24213,24216,24218,24221,24224,24226,24229,24231,24233,24235,24238,24240,24243,24246,24248,24250,24253],{"class":639,"line":778},[637,24211,24212],{"class":676}," return",[637,24214,24215],{"class":683}," layer",[637,24217,1150],{"class":642},[637,24219,24220],{"class":683},"isStroke",[637,24222,24223],{"class":642}," ?",[637,24225,699],{"class":642},[637,24227,24228],{"class":663},"#000000",[637,24230,2512],{"class":642},[637,24232,813],{"class":642},[637,24234,23807],{"class":642},[637,24236,24237],{"class":663},"hsl(",[637,24239,23421],{"class":642},[637,24241,24242],{"class":683},"index ",[637,24244,24245],{"class":642},"*",[637,24247,8743],{"class":823},[637,24249,2500],{"class":642},[637,24251,24252],{"class":663},", 70%, 50%)",[637,24254,23823],{"class":642},[637,24256,24257],{"class":639,"line":790},[637,24258,1329],{"class":642},[637,24260,24261,24263,24265],{"class":639,"line":800},[637,24262,732],{"class":642},[637,24264,647],{"class":646},[637,24266,669],{"class":642},[637,24268,24269],{"class":639,"line":805},[637,24270,742],{"emptyLinePlaceholder":594},[637,24272,24273,24275,24277],{"class":639,"line":831},[637,24274,643],{"class":642},[637,24276,750],{"class":646},[637,24278,669],{"class":642},[637,24280,24281,24283,24285],{"class":639,"line":631},[637,24282,758],{"class":642},[637,24284,10402],{"class":646},[637,24286,669],{"class":642},[637,24288,24289,24291],{"class":639,"line":854},[637,24290,781],{"class":642},[637,24292,5311],{"class":646},[637,24294,24295,24297,24299,24301,24303,24305,24307,24309,24311,24313],{"class":639,"line":865},[637,24296,23384],{"class":676},[637,24298,657],{"class":642},[637,24300,660],{"class":642},[637,24302,2509],{"class":642},[637,24304,23393],{"class":683},[637,24306,1503],{"class":642},[637,24308,8228],{"class":683},[637,24310,8231],{"class":642},[637,24312,23402],{"class":683},[637,24314,3224],{"class":642},[637,24316,24317,24319,24321,24323,24325,24327],{"class":639,"line":876},[637,24318,13000],{"class":642},[637,24320,8244],{"class":650},[637,24322,657],{"class":642},[637,24324,660],{"class":642},[637,24326,8228],{"class":683},[637,24328,3224],{"class":642},[637,24330,24331,24333,24335,24337,24339,24341,24343,24345],{"class":639,"line":886},[637,24332,13000],{"class":642},[637,24334,5333],{"class":650},[637,24336,657],{"class":642},[637,24338,660],{"class":642},[637,24340,23393],{"class":683},[637,24342,1150],{"class":642},[637,24344,5333],{"class":683},[637,24346,3224],{"class":642},[637,24348,24349],{"class":639,"line":632},[637,24350,13020],{"class":642},[637,24352,24353,24355],{"class":639,"line":906},[637,24354,857],{"class":642},[637,24356,24357],{"class":646},"TresMeshBasicMaterial\n",[637,24359,24360,24363,24365,24367,24369,24371,24373],{"class":639,"line":916},[637,24361,24362],{"class":650}," v-bind",[637,24364,657],{"class":642},[637,24366,660],{"class":642},[637,24368,23393],{"class":683},[637,24370,1150],{"class":642},[637,24372,5403],{"class":683},[637,24374,3224],{"class":642},[637,24376,24377,24379,24381,24383,24385,24388,24390,24392,24394,24396,24398],{"class":639,"line":2695},[637,24378,8241],{"class":642},[637,24380,7770],{"class":650},[637,24382,657],{"class":642},[637,24384,660],{"class":642},[637,24386,24387],{"class":2506},"getFillColor",[637,24389,2509],{"class":642},[637,24391,23393],{"class":683},[637,24393,1503],{"class":642},[637,24395,8228],{"class":683},[637,24397,3433],{"class":642},[637,24399,3224],{"class":642},[637,24401,24402],{"class":639,"line":2704},[637,24403,8295],{"class":642},[637,24405,24406,24408,24410],{"class":639,"line":2738},[637,24407,899],{"class":642},[637,24409,860],{"class":646},[637,24411,669],{"class":642},[637,24413,24414,24416,24418],{"class":639,"line":2747},[637,24415,909],{"class":642},[637,24417,10402],{"class":646},[637,24419,669],{"class":642},[637,24421,24422,24424,24426],{"class":639,"line":2756},[637,24423,732],{"class":642},[637,24425,750],{"class":646},[637,24427,669],{"class":642},[4215,24429,24431],{"id":24430},"depth-handling","Depth Handling",[614,24433,2867,24434,24436],{},[618,24435,13664],{}," option controls how SVG layers are rendered in 3D space. It accepts the following values:",[24088,24438,24440,24442],{"id":24439},"renderorder-default",[618,24441,24018],{}," (Default)",[614,24444,24445],{},[1705,24446,24447],{},"Use case: Lone SVGs or applications that don't rely on stacked SVGs",[614,24449,24450,24451,24453],{},"This is the default ",[618,24452,13664],{}," option.",[614,24455,24456,24457,2322,24459,24461,24462,24469],{},"This value sets the materials' ",[618,24458,10812],{},[618,24460,975],{}," and increments the mesh layers ",[1144,24463,24466],{"href":24464,"rel":24465},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=mesh#api\u002Fen\u002Fcore\u002FObject3D.renderOrder",[1148],[618,24467,24468],{},"renderOrder",". This makes the SVG layers render dependably regardless of perspective.",[614,24471,24472,24475],{},[1705,24473,24474],{},"Disadvantage",": Scene objects may render out of order.",[614,24477,24478,24479,24484,24485,24490],{},"SVG layers with higher ",[1144,24480,24482],{"href":24464,"rel":24481},[1148],[618,24483,24468],{}," will be rendered after (i.e., sometimes \"on top of\") other objects in the scene graph with a lower ",[1144,24486,24488],{"href":24464,"rel":24487},[1148],[618,24489,24468],{},". Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.",[626,24492,24494],{"className":1190,"code":24493,"language":664,"meta":576,"style":576},"const { layers } = useSVG('\u002Ficon.svg', { depth: 'renderOrder' })\n",[618,24495,24496],{"__ignoreMap":576},[637,24497,24498,24500,24502,24504,24506,24508,24510,24512,24514,24517,24519,24521,24523,24526,24528,24530,24532,24534,24536],{"class":639,"line":577},[637,24499,2487],{"class":650},[637,24501,680],{"class":642},[637,24503,23769],{"class":683},[637,24505,2500],{"class":642},[637,24507,2503],{"class":642},[637,24509,23218],{"class":2506},[637,24511,2509],{"class":683},[637,24513,2512],{"class":642},[637,24515,24516],{"class":663},"\u002Ficon.svg",[637,24518,2512],{"class":642},[637,24520,687],{"class":642},[637,24522,680],{"class":642},[637,24524,24525],{"class":646}," depth",[637,24527,1222],{"class":642},[637,24529,699],{"class":642},[637,24531,24468],{"class":663},[637,24533,2512],{"class":642},[637,24535,693],{"class":642},[637,24537,2520],{"class":683},[24088,24539,24540],{"id":24540},"flat",[614,24542,24543],{},[1705,24544,24545],{},"Use case: simple SVGs",[614,24547,24548,24549,2322,24555,1150],{},"This option sets the materials ",[1144,24550,24553],{"href":24551,"rel":24552},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=mesh#api\u002Fen\u002Fmaterials\u002FMaterial.depthWrite",[1148],[618,24554,10812],{},[618,24556,975],{},[614,24558,24559,24561],{},[1705,24560,24474],{},": SVG layers may render out of order.",[614,24563,24564],{},"Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.",[626,24566,24568],{"className":1190,"code":24567,"language":664,"meta":576,"style":576},"const { layers } = useSVG('\u002Ficon.svg', { depth: 'flat' })\n",[618,24569,24570],{"__ignoreMap":576},[637,24571,24572,24574,24576,24578,24580,24582,24584,24586,24588,24590,24592,24594,24596,24598,24600,24602,24604,24606,24608],{"class":639,"line":577},[637,24573,2487],{"class":650},[637,24575,680],{"class":642},[637,24577,23769],{"class":683},[637,24579,2500],{"class":642},[637,24581,2503],{"class":642},[637,24583,23218],{"class":2506},[637,24585,2509],{"class":683},[637,24587,2512],{"class":642},[637,24589,24516],{"class":663},[637,24591,2512],{"class":642},[637,24593,687],{"class":642},[637,24595,680],{"class":642},[637,24597,24525],{"class":646},[637,24599,1222],{"class":642},[637,24601,699],{"class":642},[637,24603,24540],{"class":663},[637,24605,2512],{"class":642},[637,24607,693],{"class":642},[637,24609,2520],{"class":683},[24088,24611,24613],{"id":24612},"offsetz","offsetZ",[614,24615,24616],{},[1705,24617,24618],{},"Use case: unscaled SVGs seen from the front",[614,24620,24621],{},"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\".",[614,24623,24624,24626],{},[1705,24625,24474],{},": \"Bottom\" of the \"stack\" is visible; layers may z-fight.",[614,24628,24629,24630,24635],{},"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 ",[1144,24631,24634],{"href":24632,"rel":24633},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FZ-fighting",[1148],"z-fight",", particularly if the SVG is scaled down.",[626,24637,24639],{"className":1190,"code":24638,"language":664,"meta":576,"style":576},"const { layers } = useSVG('\u002Ficon.svg', { depth: 'offsetZ' })\n",[618,24640,24641],{"__ignoreMap":576},[637,24642,24643,24645,24647,24649,24651,24653,24655,24657,24659,24661,24663,24665,24667,24669,24671,24673,24675,24677,24679],{"class":639,"line":577},[637,24644,2487],{"class":650},[637,24646,680],{"class":642},[637,24648,23769],{"class":683},[637,24650,2500],{"class":642},[637,24652,2503],{"class":642},[637,24654,23218],{"class":2506},[637,24656,2509],{"class":683},[637,24658,2512],{"class":642},[637,24660,24516],{"class":663},[637,24662,2512],{"class":642},[637,24664,687],{"class":642},[637,24666,680],{"class":642},[637,24668,24525],{"class":646},[637,24670,1222],{"class":642},[637,24672,699],{"class":642},[637,24674,24613],{"class":663},[637,24676,2512],{"class":642},[637,24678,693],{"class":642},[637,24680,2520],{"class":683},[24088,24682,24683],{"id":5564},[618,24684,5564],{},[614,24686,24687],{},[1705,24688,24689],{},"Use case: SVGs seen from the front",[614,24691,24692,24693,24696,24697,24701],{},"This is the same as ",[618,24694,24695],{},"'offsetZ'"," but allows you to specify how much space is added between each layer, in order to eliminate ",[1144,24698,24700],{"href":24632,"rel":24699},[1148],"z-fighting",". For most use cases, this should be a value greater than 0.025 and less than 1.",[614,24703,24704,24706],{},[1705,24705,24474],{},": \"Bottom\" of the \"stack\" is visible.",[626,24708,24710],{"className":1190,"code":24709,"language":664,"meta":576,"style":576},"const { layers } = useSVG('\u002Ficon.svg', { depth: 0.1 })\n",[618,24711,24712],{"__ignoreMap":576},[637,24713,24714,24716,24718,24720,24722,24724,24726,24728,24730,24732,24734,24736,24738,24740,24742,24745,24747],{"class":639,"line":577},[637,24715,2487],{"class":650},[637,24717,680],{"class":642},[637,24719,23769],{"class":683},[637,24721,2500],{"class":642},[637,24723,2503],{"class":642},[637,24725,23218],{"class":2506},[637,24727,2509],{"class":683},[637,24729,2512],{"class":642},[637,24731,24516],{"class":663},[637,24733,2512],{"class":642},[637,24735,687],{"class":642},[637,24737,680],{"class":642},[637,24739,24525],{"class":646},[637,24741,1222],{"class":642},[637,24743,24744],{"class":823}," 0.1",[637,24746,693],{"class":642},[637,24748,2520],{"class":683},[4215,24750,24752],{"id":24751},"memory-management","Memory Management",[614,24754,24755],{},"Always dispose of geometries when the component unmounts:",[626,24757,24759],{"className":628,"code":24758,"language":633,"meta":576,"style":576},"\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",[618,24760,24761,24781,24799,24818,24822,24846,24850,24863,24870,24876],{"__ignoreMap":576},[637,24762,24763,24765,24767,24769,24771,24773,24775,24777,24779],{"class":639,"line":577},[637,24764,643],{"class":642},[637,24766,647],{"class":646},[637,24768,651],{"class":650},[637,24770,654],{"class":650},[637,24772,657],{"class":642},[637,24774,660],{"class":642},[637,24776,664],{"class":663},[637,24778,660],{"class":642},[637,24780,669],{"class":642},[637,24782,24783,24785,24787,24789,24791,24793,24795,24797],{"class":639,"line":578},[637,24784,677],{"class":676},[637,24786,680],{"class":642},[637,24788,23218],{"class":683},[637,24790,693],{"class":642},[637,24792,696],{"class":676},[637,24794,699],{"class":642},[637,24796,702],{"class":663},[637,24798,705],{"class":642},[637,24800,24801,24803,24805,24808,24810,24812,24814,24816],{"class":639,"line":708},[637,24802,677],{"class":676},[637,24804,680],{"class":642},[637,24806,24807],{"class":683}," onUnmounted",[637,24809,693],{"class":642},[637,24811,696],{"class":676},[637,24813,699],{"class":642},[637,24815,633],{"class":663},[637,24817,705],{"class":642},[637,24819,24820],{"class":639,"line":729},[637,24821,742],{"emptyLinePlaceholder":594},[637,24823,24824,24826,24828,24830,24832,24834,24836,24838,24840,24842,24844],{"class":639,"line":739},[637,24825,2487],{"class":650},[637,24827,680],{"class":642},[637,24829,23271],{"class":683},[637,24831,2500],{"class":642},[637,24833,2503],{"class":642},[637,24835,23218],{"class":2506},[637,24837,2509],{"class":683},[637,24839,2512],{"class":642},[637,24841,24516],{"class":663},[637,24843,2512],{"class":642},[637,24845,2520],{"class":683},[637,24847,24848],{"class":639,"line":745},[637,24849,742],{"emptyLinePlaceholder":594},[637,24851,24852,24855,24857,24859,24861],{"class":639,"line":755},[637,24853,24854],{"class":2506},"onUnmounted",[637,24856,2509],{"class":683},[637,24858,3767],{"class":642},[637,24860,3770],{"class":650},[637,24862,1208],{"class":642},[637,24864,24865,24868],{"class":639,"line":778},[637,24866,24867],{"class":2506}," dispose",[637,24869,6744],{"class":646},[637,24871,24872,24874],{"class":639,"line":790},[637,24873,2500],{"class":642},[637,24875,2520],{"class":683},[637,24877,24878,24880,24882],{"class":639,"line":800},[637,24879,732],{"class":642},[637,24881,647],{"class":646},[637,24883,669],{"class":642},[4215,24885,24887],{"id":24886},"advanced-usage","Advanced Usage",[24088,24889,24891],{"id":24890},"conditional-layer-rendering","Conditional Layer Rendering",[626,24893,24895],{"className":628,"code":24894,"language":633,"meta":576,"style":576},"\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",[618,24896,24897,24917,24935,24953,24957,24974,24999,25003,25021,25031,25042,25073,25077,25085,25089,25097,25105,25111,25134,25148,25166,25170,25192,25200,25208],{"__ignoreMap":576},[637,24898,24899,24901,24903,24905,24907,24909,24911,24913,24915],{"class":639,"line":577},[637,24900,643],{"class":642},[637,24902,647],{"class":646},[637,24904,651],{"class":650},[637,24906,654],{"class":650},[637,24908,657],{"class":642},[637,24910,660],{"class":642},[637,24912,664],{"class":663},[637,24914,660],{"class":642},[637,24916,669],{"class":642},[637,24918,24919,24921,24923,24925,24927,24929,24931,24933],{"class":639,"line":578},[637,24920,677],{"class":676},[637,24922,680],{"class":642},[637,24924,23218],{"class":683},[637,24926,693],{"class":642},[637,24928,696],{"class":676},[637,24930,699],{"class":642},[637,24932,702],{"class":663},[637,24934,705],{"class":642},[637,24936,24937,24939,24941,24943,24945,24947,24949,24951],{"class":639,"line":708},[637,24938,677],{"class":676},[637,24940,680],{"class":642},[637,24942,3582],{"class":683},[637,24944,693],{"class":642},[637,24946,696],{"class":676},[637,24948,699],{"class":642},[637,24950,633],{"class":663},[637,24952,705],{"class":642},[637,24954,24955],{"class":639,"line":729},[637,24956,742],{"emptyLinePlaceholder":594},[637,24958,24959,24961,24964,24966,24968,24970,24972],{"class":639,"line":739},[637,24960,2487],{"class":650},[637,24962,24963],{"class":683}," showDetails ",[637,24965,657],{"class":642},[637,24967,3999],{"class":2506},[637,24969,2509],{"class":683},[637,24971,965],{"class":4560},[637,24973,2520],{"class":683},[637,24975,24976,24978,24980,24982,24984,24986,24988,24990,24992,24995,24997],{"class":639,"line":745},[637,24977,2487],{"class":650},[637,24979,680],{"class":642},[637,24981,23769],{"class":683},[637,24983,2500],{"class":642},[637,24985,2503],{"class":642},[637,24987,23218],{"class":2506},[637,24989,2509],{"class":683},[637,24991,2512],{"class":642},[637,24993,24994],{"class":663},"\u002Fdetailed-icon.svg",[637,24996,2512],{"class":642},[637,24998,2520],{"class":683},[637,25000,25001],{"class":639,"line":755},[637,25002,742],{"emptyLinePlaceholder":594},[637,25004,25005,25007,25010,25012,25014,25016,25018],{"class":639,"line":778},[637,25006,2487],{"class":650},[637,25008,25009],{"class":683}," visibleLayers ",[637,25011,657],{"class":642},[637,25013,3582],{"class":2506},[637,25015,2509],{"class":683},[637,25017,3767],{"class":642},[637,25019,25020],{"class":650}," =>\n",[637,25022,25023,25026,25028],{"class":639,"line":790},[637,25024,25025],{"class":683}," showDetails",[637,25027,1150],{"class":642},[637,25029,25030],{"class":683},"value\n",[637,25032,25033,25036,25038,25040],{"class":639,"line":800},[637,25034,25035],{"class":642}," ?",[637,25037,23262],{"class":683},[637,25039,1150],{"class":642},[637,25041,25030],{"class":683},[637,25043,25044,25046,25048,25050,25052,25054,25057,25059,25061,25063,25066,25068,25070],{"class":639,"line":805},[637,25045,5353],{"class":642},[637,25047,23262],{"class":683},[637,25049,1150],{"class":642},[637,25051,3778],{"class":683},[637,25053,1150],{"class":642},[637,25055,25056],{"class":2506},"filter",[637,25058,2509],{"class":683},[637,25060,23393],{"class":7047},[637,25062,3770],{"class":650},[637,25064,25065],{"class":642}," !",[637,25067,23393],{"class":683},[637,25069,1150],{"class":642},[637,25071,25072],{"class":683},"isStroke)\n",[637,25074,25075],{"class":639,"line":831},[637,25076,2520],{"class":683},[637,25078,25079,25081,25083],{"class":639,"line":631},[637,25080,732],{"class":642},[637,25082,647],{"class":646},[637,25084,669],{"class":642},[637,25086,25087],{"class":639,"line":854},[637,25088,742],{"emptyLinePlaceholder":594},[637,25090,25091,25093,25095],{"class":639,"line":865},[637,25092,643],{"class":642},[637,25094,750],{"class":646},[637,25096,669],{"class":642},[637,25098,25099,25101,25103],{"class":639,"line":876},[637,25100,758],{"class":642},[637,25102,10402],{"class":646},[637,25104,669],{"class":642},[637,25106,25107,25109],{"class":639,"line":886},[637,25108,781],{"class":642},[637,25110,5311],{"class":646},[637,25112,25113,25115,25117,25119,25121,25123,25125,25127,25129,25132],{"class":639,"line":632},[637,25114,23384],{"class":676},[637,25116,657],{"class":642},[637,25118,660],{"class":642},[637,25120,2509],{"class":642},[637,25122,23393],{"class":683},[637,25124,1503],{"class":642},[637,25126,8228],{"class":683},[637,25128,8231],{"class":642},[637,25130,25131],{"class":683},"visibleLayers",[637,25133,3224],{"class":642},[637,25135,25136,25138,25140,25142,25144,25146],{"class":639,"line":906},[637,25137,13000],{"class":642},[637,25139,8244],{"class":650},[637,25141,657],{"class":642},[637,25143,660],{"class":642},[637,25145,8228],{"class":683},[637,25147,3224],{"class":642},[637,25149,25150,25152,25154,25156,25158,25160,25162,25164],{"class":639,"line":916},[637,25151,13000],{"class":642},[637,25153,5333],{"class":650},[637,25155,657],{"class":642},[637,25157,660],{"class":642},[637,25159,23393],{"class":683},[637,25161,1150],{"class":642},[637,25163,5333],{"class":683},[637,25165,3224],{"class":642},[637,25167,25168],{"class":639,"line":2695},[637,25169,13020],{"class":642},[637,25171,25172,25174,25176,25178,25180,25182,25184,25186,25188,25190],{"class":639,"line":2704},[637,25173,857],{"class":642},[637,25175,7695],{"class":646},[637,25177,10598],{"class":650},[637,25179,657],{"class":642},[637,25181,660],{"class":642},[637,25183,23393],{"class":683},[637,25185,1150],{"class":642},[637,25187,5403],{"class":683},[637,25189,660],{"class":642},[637,25191,787],{"class":642},[637,25193,25194,25196,25198],{"class":639,"line":2738},[637,25195,899],{"class":642},[637,25197,860],{"class":646},[637,25199,669],{"class":642},[637,25201,25202,25204,25206],{"class":639,"line":2747},[637,25203,909],{"class":642},[637,25205,10402],{"class":646},[637,25207,669],{"class":642},[637,25209,25210,25212,25214],{"class":639,"line":2756},[637,25211,732],{"class":642},[637,25213,750],{"class":646},[637,25215,669],{"class":642},[24088,25217,25219],{"id":25218},"material-customization-per-layer","Material Customization per Layer",[626,25221,25223],{"className":628,"code":25222,"language":633,"meta":576,"style":576},"\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",[618,25224,25225,25245,25263,25267,25294,25302,25313,25323,25327,25336,25346,25357,25370,25374,25380,25388,25392,25400,25408,25414,25436,25450,25468,25472,25478,25494,25513,25517,25525,25533],{"__ignoreMap":576},[637,25226,25227,25229,25231,25233,25235,25237,25239,25241,25243],{"class":639,"line":577},[637,25228,643],{"class":642},[637,25230,647],{"class":646},[637,25232,651],{"class":650},[637,25234,654],{"class":650},[637,25236,657],{"class":642},[637,25238,660],{"class":642},[637,25240,664],{"class":663},[637,25242,660],{"class":642},[637,25244,669],{"class":642},[637,25246,25247,25249,25251,25253,25255,25257,25259,25261],{"class":639,"line":578},[637,25248,677],{"class":676},[637,25250,680],{"class":642},[637,25252,23218],{"class":683},[637,25254,693],{"class":642},[637,25256,696],{"class":676},[637,25258,699],{"class":642},[637,25260,702],{"class":663},[637,25262,705],{"class":642},[637,25264,25265],{"class":639,"line":708},[637,25266,742],{"emptyLinePlaceholder":594},[637,25268,25269,25271,25273,25275,25277,25279,25281,25283,25285,25288,25290,25292],{"class":639,"line":729},[637,25270,2487],{"class":650},[637,25272,680],{"class":642},[637,25274,23769],{"class":683},[637,25276,2500],{"class":642},[637,25278,2503],{"class":642},[637,25280,23218],{"class":2506},[637,25282,2509],{"class":683},[637,25284,2512],{"class":642},[637,25286,25287],{"class":663},"\u002Flogo.svg",[637,25289,2512],{"class":642},[637,25291,687],{"class":642},[637,25293,1208],{"class":642},[637,25295,25296,25298,25300],{"class":639,"line":739},[637,25297,23302],{"class":646},[637,25299,1222],{"class":642},[637,25301,1208],{"class":642},[637,25303,25304,25307,25309,25311],{"class":639,"line":745},[637,25305,25306],{"class":646}," transparent",[637,25308,1222],{"class":642},[637,25310,4561],{"class":4560},[637,25312,2560],{"class":642},[637,25314,25315,25318,25320],{"class":639,"line":755},[637,25316,25317],{"class":646}," opacity",[637,25319,1222],{"class":642},[637,25321,25322],{"class":823}," 0.9\n",[637,25324,25325],{"class":639,"line":778},[637,25326,2667],{"class":642},[637,25328,25329,25332,25334],{"class":639,"line":790},[637,25330,25331],{"class":646}," strokeMaterial",[637,25333,1222],{"class":642},[637,25335,1208],{"class":642},[637,25337,25338,25340,25342,25344],{"class":639,"line":800},[637,25339,25306],{"class":646},[637,25341,1222],{"class":642},[637,25343,4561],{"class":4560},[637,25345,2560],{"class":642},[637,25347,25348,25350,25352,25355],{"class":639,"line":805},[637,25349,25317],{"class":646},[637,25351,1222],{"class":642},[637,25353,25354],{"class":823}," 1.0",[637,25356,2560],{"class":642},[637,25358,25359,25362,25364,25366,25368],{"class":639,"line":831},[637,25360,25361],{"class":646}," color",[637,25363,1222],{"class":642},[637,25365,699],{"class":642},[637,25367,24228],{"class":663},[637,25369,705],{"class":642},[637,25371,25372],{"class":639,"line":631},[637,25373,8080],{"class":642},[637,25375,25376,25378],{"class":639,"line":854},[637,25377,2500],{"class":642},[637,25379,2520],{"class":683},[637,25381,25382,25384,25386],{"class":639,"line":865},[637,25383,732],{"class":642},[637,25385,647],{"class":646},[637,25387,669],{"class":642},[637,25389,25390],{"class":639,"line":876},[637,25391,742],{"emptyLinePlaceholder":594},[637,25393,25394,25396,25398],{"class":639,"line":886},[637,25395,643],{"class":642},[637,25397,750],{"class":646},[637,25399,669],{"class":642},[637,25401,25402,25404,25406],{"class":639,"line":632},[637,25403,758],{"class":642},[637,25405,10402],{"class":646},[637,25407,669],{"class":642},[637,25409,25410,25412],{"class":639,"line":906},[637,25411,781],{"class":642},[637,25413,5311],{"class":646},[637,25415,25416,25418,25420,25422,25424,25426,25428,25430,25432,25434],{"class":639,"line":916},[637,25417,23384],{"class":676},[637,25419,657],{"class":642},[637,25421,660],{"class":642},[637,25423,2509],{"class":642},[637,25425,23393],{"class":683},[637,25427,1503],{"class":642},[637,25429,8228],{"class":683},[637,25431,8231],{"class":642},[637,25433,23402],{"class":683},[637,25435,3224],{"class":642},[637,25437,25438,25440,25442,25444,25446,25448],{"class":639,"line":2695},[637,25439,13000],{"class":642},[637,25441,8244],{"class":650},[637,25443,657],{"class":642},[637,25445,660],{"class":642},[637,25447,8228],{"class":683},[637,25449,3224],{"class":642},[637,25451,25452,25454,25456,25458,25460,25462,25464,25466],{"class":639,"line":2704},[637,25453,13000],{"class":642},[637,25455,5333],{"class":650},[637,25457,657],{"class":642},[637,25459,660],{"class":642},[637,25461,23393],{"class":683},[637,25463,1150],{"class":642},[637,25465,5333],{"class":683},[637,25467,3224],{"class":642},[637,25469,25470],{"class":639,"line":2738},[637,25471,13020],{"class":642},[637,25473,25474,25476],{"class":639,"line":2747},[637,25475,857],{"class":642},[637,25477,24357],{"class":646},[637,25479,25480,25482,25484,25486,25488,25490,25492],{"class":639,"line":2756},[637,25481,24362],{"class":650},[637,25483,657],{"class":642},[637,25485,660],{"class":642},[637,25487,23393],{"class":683},[637,25489,1150],{"class":642},[637,25491,5403],{"class":683},[637,25493,3224],{"class":642},[637,25495,25496,25498,25501,25503,25505,25507,25509,25511],{"class":639,"line":2765},[637,25497,8241],{"class":642},[637,25499,25500],{"class":650},"wireframe",[637,25502,657],{"class":642},[637,25504,660],{"class":642},[637,25506,23393],{"class":683},[637,25508,1150],{"class":642},[637,25510,24220],{"class":683},[637,25512,3224],{"class":642},[637,25514,25515],{"class":639,"line":2787},[637,25516,8295],{"class":642},[637,25518,25519,25521,25523],{"class":639,"line":2838},[637,25520,899],{"class":642},[637,25522,860],{"class":646},[637,25524,669],{"class":642},[637,25526,25527,25529,25531],{"class":639,"line":2847},[637,25528,909],{"class":642},[637,25530,10402],{"class":646},[637,25532,669],{"class":642},[637,25534,25535,25537,25539],{"class":639,"line":2856},[637,25536,732],{"class":642},[637,25538,750],{"class":646},[637,25540,669],{"class":642},[504,25542,25544],{"id":25543},"usesvg-component","UseSVG Component",[614,25546,25547,25548,25551],{},"For simple, declarative SVG rendering without the need for programmatic control, you can use the ",[618,25549,25550],{},"UseSVG"," component:",[626,25553,25555],{"className":628,"code":25554,"language":633,"meta":576,"style":576},"\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",[618,25556,25557,25577,25596,25604,25608,25616,25661,25668,25682,25697,25718,25732,25745,25749,25757],{"__ignoreMap":576},[637,25558,25559,25561,25563,25565,25567,25569,25571,25573,25575],{"class":639,"line":577},[637,25560,643],{"class":642},[637,25562,647],{"class":646},[637,25564,651],{"class":650},[637,25566,654],{"class":650},[637,25568,657],{"class":642},[637,25570,660],{"class":642},[637,25572,664],{"class":663},[637,25574,660],{"class":642},[637,25576,669],{"class":642},[637,25578,25579,25581,25583,25586,25588,25590,25592,25594],{"class":639,"line":578},[637,25580,677],{"class":676},[637,25582,680],{"class":642},[637,25584,25585],{"class":683}," UseSVG",[637,25587,693],{"class":642},[637,25589,696],{"class":676},[637,25591,699],{"class":642},[637,25593,702],{"class":663},[637,25595,705],{"class":642},[637,25597,25598,25600,25602],{"class":639,"line":708},[637,25599,732],{"class":642},[637,25601,647],{"class":646},[637,25603,669],{"class":642},[637,25605,25606],{"class":639,"line":729},[637,25607,742],{"emptyLinePlaceholder":594},[637,25609,25610,25612,25614],{"class":639,"line":739},[637,25611,643],{"class":642},[637,25613,750],{"class":646},[637,25615,669],{"class":642},[637,25617,25618,25620,25622,25624,25626,25628,25630,25632,25634,25636,25638,25640,25642,25644,25647,25649,25651,25653,25655,25657,25659],{"class":639,"line":745},[637,25619,758],{"class":642},[637,25621,10402],{"class":646},[637,25623,813],{"class":642},[637,25625,816],{"class":650},[637,25627,657],{"class":642},[637,25629,660],{"class":642},[637,25631,1939],{"class":823},[637,25633,660],{"class":642},[637,25635,813],{"class":642},[637,25637,1491],{"class":650},[637,25639,657],{"class":642},[637,25641,660],{"class":642},[637,25643,3947],{"class":642},[637,25645,25646],{"class":823},"2.1",[637,25648,1503],{"class":642},[637,25650,1925],{"class":823},[637,25652,1503],{"class":642},[637,25654,969],{"class":823},[637,25656,1513],{"class":642},[637,25658,660],{"class":642},[637,25660,669],{"class":642},[637,25662,25663,25665],{"class":639,"line":755},[637,25664,781],{"class":642},[637,25666,25667],{"class":646},"UseSVG\n",[637,25669,25670,25673,25675,25677,25680],{"class":639,"line":778},[637,25671,25672],{"class":650}," src",[637,25674,657],{"class":642},[637,25676,660],{"class":642},[637,25678,25679],{"class":663},"\u002Fpath\u002Fto\u002Flogo.svg",[637,25681,3224],{"class":642},[637,25683,25684,25686,25689,25691,25693,25695],{"class":639,"line":790},[637,25685,13000],{"class":642},[637,25687,25688],{"class":650},"skip-fills",[637,25690,657],{"class":642},[637,25692,660],{"class":642},[637,25694,975],{"class":4560},[637,25696,3224],{"class":642},[637,25698,25699,25701,25704,25706,25708,25710,25712,25714,25716],{"class":639,"line":800},[637,25700,13000],{"class":642},[637,25702,25703],{"class":650},"fill-material",[637,25705,657],{"class":642},[637,25707,660],{"class":642},[637,25709,11393],{"class":642},[637,25711,12191],{"class":646},[637,25713,11398],{"class":642},[637,25715,965],{"class":4560},[637,25717,2560],{"class":642},[637,25719,25720,25723,25725,25728,25730],{"class":639,"line":805},[637,25721,25722],{"class":646}," opacity",[637,25724,11398],{"class":642},[637,25726,25727],{"class":823},"0.8",[637,25729,693],{"class":642},[637,25731,3224],{"class":642},[637,25733,25734,25737,25739,25741,25743],{"class":639,"line":831},[637,25735,25736],{"class":650}," depth",[637,25738,657],{"class":642},[637,25740,660],{"class":642},[637,25742,24468],{"class":663},[637,25744,3224],{"class":642},[637,25746,25747],{"class":639,"line":631},[637,25748,18174],{"class":642},[637,25750,25751,25753,25755],{"class":639,"line":854},[637,25752,909],{"class":642},[637,25754,10402],{"class":646},[637,25756,669],{"class":642},[637,25758,25759,25761,25763],{"class":639,"line":865},[637,25760,732],{"class":642},[637,25762,750],{"class":646},[637,25764,669],{"class":642},[4215,25766,926],{"id":925},[931,25768,25769,25781],{},[934,25770,25771],{},[937,25772,25773,25775,25777,25779],{},[940,25774,942],{"align":1001},[940,25776,6178],{},[940,25778,945],{"align":1001},[940,25780,948],{},[950,25782,25783,25803,25822,25841,25858,25875,25894,25912],{},[937,25784,25785,25790,25794,25801],{},[955,25786,25787],{"align":1001},[1705,25788,25789],{},"src",[955,25791,25792],{},[618,25793,3665],{},[955,25795,25796,25797,25800],{"align":1001},"Either a path to an SVG ",[1709,25798,25799],{},"or"," an SVG string",[955,25802],{},[937,25804,25805,25809,25813,25818],{},[955,25806,25807],{"align":1001},[1705,25808,23936],{},[955,25810,25811],{},[618,25812,18466],{},[955,25814,962,25815,25817],{"align":1001},[618,25816,965],{},", the SVG strokes will not be rendered.",[955,25819,25820],{},[618,25821,975],{},[937,25823,25824,25828,25832,25837],{},[955,25825,25826],{"align":1001},[1705,25827,23954],{},[955,25829,25830],{},[618,25831,18466],{},[955,25833,962,25834,25836],{"align":1001},[618,25835,965],{},", the SVG fills will not be rendered.",[955,25838,25839],{},[618,25840,975],{},[937,25842,25843,25847,25851,25854],{},[955,25844,25845],{"align":1001},[1705,25846,23991],{},[955,25848,25849],{},[618,25850,23977],{},[955,25852,25853],{"align":1001},"Props to assign to the stroke materials of the resulting meshes.",[955,25855,25856],{},[618,25857,1183],{},[937,25859,25860,25864,25868,25871],{},[955,25861,25862],{"align":1001},[1705,25863,23972],{},[955,25865,25866],{},[618,25867,23977],{},[955,25869,25870],{"align":1001},"Props to assign to the fill materials of the resulting meshes.",[955,25872,25873],{},[618,25874,1183],{},[937,25876,25877,25882,25887,25890],{},[955,25878,25879],{"align":1001},[1705,25880,25881],{},"strokeMeshProps",[955,25883,25884],{},[618,25885,25886],{},"TresOptions",[955,25888,25889],{"align":1001},"Props to assign to the resulting stroke meshes.",[955,25891,25892],{},[618,25893,1183],{},[937,25895,25896,25901,25905,25908],{},[955,25897,25898],{"align":1001},[1705,25899,25900],{},"fillMeshProps",[955,25902,25903],{},[618,25904,25886],{},[955,25906,25907],{"align":1001},"Props to assign to the resulting fill meshes.",[955,25909,25910],{},[618,25911,1183],{},[937,25913,25914,25918,25922,25929],{},[955,25915,25916],{"align":1001},[1705,25917,13664],{},[955,25919,25920],{},[618,25921,24013],{},[955,25923,25924,25925,3433],{"align":1001},"Specify how SVG layers are to be rendered. (",[1144,25926,25928],{"href":25927},"#depth-handling","See \"Depth\"",[955,25930,25931],{},[618,25932,24468],{},[504,25934,25936],{"id":25935},"troubleshooting","Troubleshooting",[25938,25939,25941],"alert",{"type":25940},"warning",[614,25942,25943],{},"This is not a general-purpose SVG renderer. Many SVG features are unsupported.",[614,25945,25946],{},"Here are some things to try if you run into problems:",[4215,25948,25950],{"id":25949},"error-xml-parsing-error-unclosed-token","Error: \"XML Parsing Error: unclosed token\"",[2285,25952,25953],{},[2288,25954,25955,25956,2322,25958,1150],{},"In the SVG source, convert hex colors to rgb, e.g., convert ",[618,25957,7794],{},[618,25959,25960],{},"rgb(255, 0, 0)",[4215,25962,25964],{"id":25963},"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",[2285,25966,25967,25979],{},[2288,25968,25969,25970,25972,25973,1150],{},"In your ",[618,25971,157],{}," options, ",[1144,25974,25975,25976,25978],{"href":25927},"change the ",[618,25977,13664],{}," option",[2288,25980,25981,25982,25985,25986,1150],{},"In the SVG source, use ",[618,25983,25984],{},"fill=\"none\""," rather than ",[618,25987,25988],{},"fill-opacity=\"0\"",[4215,25990,25992,25993],{"id":25991},"parts-of-the-svg-z-fight","Parts of the SVG ",[1144,25994,25996],{"href":24632,"rel":25995},[1148],"\"z-fight\"",[2285,25998,25999,26007],{},[2288,26000,25969,26001,25972,26003,1150],{},[618,26002,157],{},[1144,26004,25975,26005,25978],{"href":25927},[618,26006,13664],{},[2288,26008,26009],{},"Increase the distance between the SVG and other on-screen elements.",[4215,26011,26013],{"id":26012},"the-svg-is-not-visible","The SVG is not visible",[2285,26015,26016,26019,26028,26034],{},[2288,26017,26018],{},"If importing an SVG, make sure the path is correct – check the console for loading errors.",[2288,26020,26021,26022,26024,26025,1150],{},"Try scaling the SVG down, e.g., wrap it in a ",[618,26023,10402],{}," with ",[618,26026,26027],{},":scale=\"0.01\"",[2288,26029,26030,26031,1150],{},"Try moving the SVG up (+y), e.g., ",[618,26032,26033],{},":position=\"[0,2,0]\"",[2288,26035,26036,26037,26040],{},"Check that ",[618,26038,26039],{},"layers.length > 0"," before rendering.",[4215,26042,26044],{"id":26043},"performance-issues-with-many-layers","Performance issues with many layers",[2285,26046,26047,26054,26062],{},[2288,26048,26049,26050,26053],{},"Use the ",[618,26051,26052],{},"dispose()"," function when components unmount to clean up geometries.",[2288,26055,26056,26057,5822,26059,26061],{},"Consider using ",[618,26058,23936],{},[618,26060,23954],{}," to reduce the number of rendered layers.",[2288,26063,26064],{},"For complex SVGs with many layers, consider simplifying the SVG source.",[504,26066,26068,26069,26071,26072,26074],{"id":26067},"when-to-use-usesvg-vs-svg-component","When to Use ",[618,26070,157],{}," vs ",[618,26073,23168],{}," Component",[614,26076,26077],{},[1705,26078,26079,26080,26082],{},"Use ",[618,26081,157],{}," when you need:",[2285,26084,26085,26088,26091,26094,26097],{},[2288,26086,26087],{},"Direct access to individual SVG layers",[2288,26089,26090],{},"Custom rendering logic",[2288,26092,26093],{},"Layer-specific animations",[2288,26095,26096],{},"Programmatic geometry manipulation",[2288,26098,26099],{},"Advanced material customization per layer",[614,26101,26102],{},[1705,26103,26049,26104,26106],{},[618,26105,23168],{}," component when you need:",[2285,26108,26109,26112,26115,26118],{},[2288,26110,26111],{},"Simple, declarative SVG rendering",[2288,26113,26114],{},"Quick prototyping",[2288,26116,26117],{},"Standard SVG display without custom logic",[2288,26119,26120],{},"Less code and setup",[1331,26122,26123],{},"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":576,"searchDepth":577,"depth":578,"links":26125},[26126,26136,26139,26147],{"id":23172,"depth":578,"text":23173,"children":26127},[26128,26129,26130,26131,26132,26133,26134,26135],{"id":624,"depth":708,"text":15},{"id":23724,"depth":708,"text":23725},{"id":18301,"depth":708,"text":18302},{"id":18439,"depth":708,"text":14787},{"id":24024,"depth":708,"text":24025},{"id":24430,"depth":708,"text":24431},{"id":24751,"depth":708,"text":24752},{"id":24886,"depth":708,"text":24887},{"id":25543,"depth":578,"text":25544,"children":26137},[26138],{"id":925,"depth":708,"text":926},{"id":25935,"depth":578,"text":25936,"children":26140},[26141,26142,26143,26145,26146],{"id":25949,"depth":708,"text":25950},{"id":25963,"depth":708,"text":25964},{"id":25991,"depth":708,"text":26144},"Parts of the SVG \"z-fight\"",{"id":26012,"depth":708,"text":26013},{"id":26043,"depth":708,"text":26044},{"id":26067,"depth":578,"text":26148},"When to Use useSVG vs SVG Component","A composable to load and render SVG files as 3D geometry in TresJS scenes.",{},{"title":157,"description":26149},"Bpey5SMrTLv2yytWL0t_9C4cqa_4Vc__F5o4YEN3jZA",{"id":26154,"title":161,"body":26155,"description":26640,"extension":591,"links":592,"meta":26641,"navigation":594,"path":162,"seo":26642,"stem":163,"__hash__":26643},"docs\u002F2.api\u002F3.loaders\u002Fuse-progress.md",{"type":501,"value":26156,"toc":26636},[26157,26164,26167,26169,26227,26233,26548,26559,26561,26617,26633],[614,26158,26159,26160,26163],{},"A composable to convenience wrap ",[618,26161,26162],{},"THREE.DefaultLoadingManager"," and returns the progress of the loading assets into the scene.",[614,26165,26166],{},"This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.",[504,26168,15],{"id":624},[626,26170,26172],{"className":1190,"code":26171,"language":664,"meta":576,"style":576},"import { useProgress } from '@tresjs\u002Fcientos'\n\nconst { hasFinishLoading, progress, items } = await useProgress()\n",[618,26173,26174,26193,26197],{"__ignoreMap":576},[637,26175,26176,26178,26180,26183,26185,26187,26189,26191],{"class":639,"line":577},[637,26177,677],{"class":676},[637,26179,680],{"class":642},[637,26181,26182],{"class":683}," useProgress",[637,26184,693],{"class":642},[637,26186,696],{"class":676},[637,26188,699],{"class":642},[637,26190,702],{"class":663},[637,26192,705],{"class":642},[637,26194,26195],{"class":639,"line":578},[637,26196,742],{"emptyLinePlaceholder":594},[637,26198,26199,26201,26203,26206,26208,26211,26213,26216,26218,26220,26223,26225],{"class":639,"line":708},[637,26200,2487],{"class":650},[637,26202,680],{"class":642},[637,26204,26205],{"class":683}," hasFinishLoading",[637,26207,687],{"class":642},[637,26209,26210],{"class":683}," progress",[637,26212,687],{"class":642},[637,26214,26215],{"class":683}," items ",[637,26217,2500],{"class":642},[637,26219,2503],{"class":642},[637,26221,26222],{"class":676}," await",[637,26224,26182],{"class":2506},[637,26226,6744],{"class":683},[614,26228,26229,26230,26232],{},"Then you can use the ",[618,26231,18398],{}," value to show a loading bar or a spinner:",[626,26234,26236],{"className":628,"code":26235,"language":633,"meta":576,"style":576},"\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",[618,26237,26238,26246,26253,26266,26280,26294,26298,26305,26319,26333,26337,26357,26362,26386,26394,26402,26411,26430,26462,26470,26478,26485,26490,26506,26520,26524,26532,26540],{"__ignoreMap":576},[637,26239,26240,26242,26244],{"class":639,"line":577},[637,26241,643],{"class":642},[637,26243,750],{"class":646},[637,26245,669],{"class":642},[637,26247,26248,26250],{"class":639,"line":578},[637,26249,758],{"class":642},[637,26251,26252],{"class":646},"Transition\n",[637,26254,26255,26257,26259,26261,26264],{"class":639,"line":708},[637,26256,5340],{"class":650},[637,26258,657],{"class":642},[637,26260,660],{"class":642},[637,26262,26263],{"class":663},"fade-overlay",[637,26265,3224],{"class":642},[637,26267,26268,26271,26273,26275,26278],{"class":639,"line":729},[637,26269,26270],{"class":650}," enter-active-class",[637,26272,657],{"class":642},[637,26274,660],{"class":642},[637,26276,26277],{"class":663},"opacity-1 transition-opacity duration-200",[637,26279,3224],{"class":642},[637,26281,26282,26285,26287,26289,26292],{"class":639,"line":739},[637,26283,26284],{"class":650}," leave-active-class",[637,26286,657],{"class":642},[637,26288,660],{"class":642},[637,26290,26291],{"class":663},"opacity-0 transition-opacity duration-200",[637,26293,3224],{"class":642},[637,26295,26296],{"class":639,"line":745},[637,26297,5376],{"class":642},[637,26299,26300,26302],{"class":639,"line":755},[637,26301,781],{"class":642},[637,26303,26304],{"class":646},"div\n",[637,26306,26307,26310,26312,26314,26317],{"class":639,"line":778},[637,26308,26309],{"class":650}," v-show",[637,26311,657],{"class":642},[637,26313,660],{"class":642},[637,26315,26316],{"class":663},"!hasFinishLoading",[637,26318,3224],{"class":642},[637,26320,26321,26324,26326,26328,26331],{"class":639,"line":790},[637,26322,26323],{"class":650}," class",[637,26325,657],{"class":642},[637,26327,660],{"class":642},[637,26329,26330],{"class":663},"absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono",[637,26332,3224],{"class":642},[637,26334,26335],{"class":639,"line":800},[637,26336,13020],{"class":642},[637,26338,26339,26341,26343,26346,26348,26350,26353,26355],{"class":639,"line":805},[637,26340,857],{"class":642},[637,26342,4283],{"class":646},[637,26344,26345],{"class":650}," class",[637,26347,657],{"class":642},[637,26349,660],{"class":642},[637,26351,26352],{"class":663},"w-200px",[637,26354,660],{"class":642},[637,26356,669],{"class":642},[637,26358,26359],{"class":639,"line":831},[637,26360,26361],{"class":683}," Loading... {{ progress }} %\n",[637,26363,26364,26366,26368,26370,26372,26374,26377,26379,26382,26384],{"class":639,"line":631},[637,26365,868],{"class":642},[637,26367,8900],{"class":646},[637,26369,26345],{"class":650},[637,26371,657],{"class":642},[637,26373,660],{"class":642},[637,26375,26376],{"class":663},"i-ic-twotone-catching-pokemon animate-rotate-in",[637,26378,660],{"class":642},[637,26380,26381],{"class":642},">\u003C\u002F",[637,26383,8900],{"class":646},[637,26385,669],{"class":642},[637,26387,26388,26390,26392],{"class":639,"line":854},[637,26389,889],{"class":642},[637,26391,4283],{"class":646},[637,26393,669],{"class":642},[637,26395,26396,26398,26400],{"class":639,"line":865},[637,26397,899],{"class":642},[637,26399,4283],{"class":646},[637,26401,669],{"class":642},[637,26403,26404,26406,26409],{"class":639,"line":876},[637,26405,909],{"class":642},[637,26407,26408],{"class":646},"Transition",[637,26410,669],{"class":642},[637,26412,26413,26415,26417,26419,26421,26423,26426,26428],{"class":639,"line":886},[637,26414,758],{"class":642},[637,26416,761],{"class":646},[637,26418,22700],{"class":650},[637,26420,657],{"class":642},[637,26422,660],{"class":642},[637,26424,26425],{"class":663},"realistic",[637,26427,660],{"class":642},[637,26429,669],{"class":642},[637,26431,26432,26434,26436,26438,26440,26442,26444,26446,26448,26450,26452,26454,26456,26458,26460],{"class":639,"line":632},[637,26433,781],{"class":642},[637,26435,784],{"class":646},[637,26437,813],{"class":642},[637,26439,1491],{"class":650},[637,26441,657],{"class":642},[637,26443,660],{"class":642},[637,26445,1498],{"class":642},[637,26447,19980],{"class":823},[637,26449,1503],{"class":642},[637,26451,19980],{"class":823},[637,26453,1503],{"class":642},[637,26455,19980],{"class":823},[637,26457,1513],{"class":642},[637,26459,660],{"class":642},[637,26461,787],{"class":642},[637,26463,26464,26466,26468],{"class":639,"line":906},[637,26465,781],{"class":642},[637,26467,795],{"class":646},[637,26469,787],{"class":642},[637,26471,26472,26474,26476],{"class":639,"line":916},[637,26473,781],{"class":642},[637,26475,22688],{"class":646},[637,26477,669],{"class":642},[637,26479,26480,26482],{"class":639,"line":2695},[637,26481,857],{"class":642},[637,26483,26484],{"class":646},"Environment\n",[637,26486,26487],{"class":639,"line":2704},[637,26488,26489],{"class":650}," background\n",[637,26491,26492,26494,26497,26499,26501,26504],{"class":639,"line":2738},[637,26493,8241],{"class":642},[637,26495,26496],{"class":650},"files",[637,26498,657],{"class":642},[637,26500,660],{"class":642},[637,26502,26503],{"class":683},"environmentFiles",[637,26505,3224],{"class":642},[637,26507,26508,26511,26513,26515,26518],{"class":639,"line":2747},[637,26509,26510],{"class":650}," path",[637,26512,657],{"class":642},[637,26514,660],{"class":642},[637,26516,26517],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002FenvironmentMap",[637,26519,3224],{"class":642},[637,26521,26522],{"class":639,"line":2756},[637,26523,8295],{"class":642},[637,26525,26526,26528,26530],{"class":639,"line":2765},[637,26527,899],{"class":642},[637,26529,22688],{"class":646},[637,26531,669],{"class":642},[637,26533,26534,26536,26538],{"class":639,"line":2787},[637,26535,909],{"class":642},[637,26537,761],{"class":646},[637,26539,669],{"class":642},[637,26541,26542,26544,26546],{"class":639,"line":2838},[637,26543,732],{"class":642},[637,26545,750],{"class":646},[637,26547,669],{"class":642},[25938,26549,26550],{"type":25940},[614,26551,26552,26553,26558],{},"This component use top level await. Please check the ",[1144,26554,26557],{"href":26555,"rel":26556},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Fsuspense.html#suspense",[1148],"Suspense API"," for more info",[504,26560,18302],{"id":18301},[931,26562,26563,26573],{},[934,26564,26565],{},[937,26566,26567,26569,26571],{},[940,26568,8360],{"align":1001},[940,26570,6178],{"align":1001},[940,26572,945],{"align":1001},[950,26574,26575,26589,26602],{},[937,26576,26577,26582,26586],{},[955,26578,26579],{"align":1001},[618,26580,26581],{},"hasFinishLoading",[955,26583,26584],{"align":1001},[618,26585,18466],{},[955,26587,26588],{"align":1001},"Whether all items have finished loading",[937,26590,26591,26595,26599],{},[955,26592,26593],{"align":1001},[618,26594,18398],{},[955,26596,26597],{"align":1001},[618,26598,5564],{},[955,26600,26601],{"align":1001},"Loading progress as percentage (0-100)",[937,26603,26604,26609,26614],{},[955,26605,26606],{"align":1001},[618,26607,26608],{},"items",[955,26610,26611],{"align":1001},[618,26612,26613],{},"Array",[955,26615,26616],{"align":1001},"Array of loading items with their status",[3292,26618,26619],{},[614,26620,26621,26622,26627,26628,26558],{},"This component use top level await it needs to be wrapped on a ",[1144,26623,26625],{"href":26555,"rel":26624},[1148],[618,26626,22688],{},". Please check the ",[1144,26629,26631],{"href":26555,"rel":26630},[1148],[618,26632,26557],{},[1331,26634,26635],{},"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":576,"searchDepth":577,"depth":578,"links":26637},[26638,26639],{"id":624,"depth":578,"text":15},{"id":18301,"depth":578,"text":18302},"A composable to track loading progress of assets in TresJS scenes.",{},{"title":161,"description":26640},"mwyVbPiX73AgKfjwHB9fn25qZIajrAP49pvgjU909nE",{"id":26645,"title":165,"body":26646,"description":27263,"extension":591,"links":592,"meta":27264,"navigation":594,"path":166,"seo":27265,"stem":167,"__hash__":27266},"docs\u002F2.api\u002F3.loaders\u002Fuse-video-texture.md",{"type":501,"value":26647,"toc":27259},[26648,26653,26656,26663,26665,27142,27144,27247,27256],[2367,26649,26650],{},[26651,26652],"loaders-use-video-texture",{},[614,26654,26655],{},"A composable to easily use videos as textures in your meshes.",[614,26657,26658,26659],{},"This composable is based on the Drei ",[1144,26660,165],{"href":26661,"rel":26662},"https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fdrei\u002Ftree\u002Fmaster#usevideotexture",[1148],[504,26664,15],{"id":624},[17805,26666,26667,26907],{},[626,26668,26670],{"className":628,"code":26669,"filename":17960,"language":633,"meta":576,"style":576},"\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",[618,26671,26672,26692,26710,26728,26742,26750,26754,26762,26780,26787,26813,26839,26843,26851,26859,26867,26875,26883,26891,26899],{"__ignoreMap":576},[637,26673,26674,26676,26678,26680,26682,26684,26686,26688,26690],{"class":639,"line":577},[637,26675,643],{"class":642},[637,26677,647],{"class":646},[637,26679,651],{"class":650},[637,26681,654],{"class":650},[637,26683,657],{"class":642},[637,26685,660],{"class":642},[637,26687,664],{"class":663},[637,26689,660],{"class":642},[637,26691,669],{"class":642},[637,26693,26694,26696,26698,26700,26702,26704,26706,26708],{"class":639,"line":578},[637,26695,677],{"class":676},[637,26697,680],{"class":642},[637,26699,690],{"class":683},[637,26701,693],{"class":642},[637,26703,696],{"class":676},[637,26705,699],{"class":642},[637,26707,702],{"class":663},[637,26709,705],{"class":642},[637,26711,26712,26714,26716,26718,26720,26722,26724,26726],{"class":639,"line":708},[637,26713,677],{"class":676},[637,26715,680],{"class":642},[637,26717,715],{"class":683},[637,26719,693],{"class":642},[637,26721,696],{"class":676},[637,26723,699],{"class":642},[637,26725,724],{"class":663},[637,26727,705],{"class":642},[637,26729,26730,26732,26734,26736,26738,26740],{"class":639,"line":729},[637,26731,677],{"class":676},[637,26733,18025],{"class":683},[637,26735,8704],{"class":676},[637,26737,699],{"class":642},[637,26739,18032],{"class":663},[637,26741,705],{"class":642},[637,26743,26744,26746,26748],{"class":639,"line":739},[637,26745,732],{"class":642},[637,26747,647],{"class":646},[637,26749,669],{"class":642},[637,26751,26752],{"class":639,"line":745},[637,26753,742],{"emptyLinePlaceholder":594},[637,26755,26756,26758,26760],{"class":639,"line":755},[637,26757,643],{"class":642},[637,26759,750],{"class":646},[637,26761,669],{"class":642},[637,26763,26764,26766,26768,26770,26772,26774,26776,26778],{"class":639,"line":778},[637,26765,758],{"class":642},[637,26767,761],{"class":646},[637,26769,764],{"class":650},[637,26771,657],{"class":642},[637,26773,660],{"class":642},[637,26775,13628],{"class":663},[637,26777,660],{"class":642},[637,26779,669],{"class":642},[637,26781,26782,26784],{"class":639,"line":790},[637,26783,781],{"class":642},[637,26785,26786],{"class":646},"TresPerspectiveCamera\n",[637,26788,26789,26791,26793,26795,26797,26799,26801,26803,26805,26807,26809,26811],{"class":639,"line":800},[637,26790,13000],{"class":642},[637,26792,1491],{"class":650},[637,26794,657],{"class":642},[637,26796,660],{"class":642},[637,26798,1498],{"class":642},[637,26800,969],{"class":823},[637,26802,1503],{"class":642},[637,26804,7666],{"class":823},[637,26806,1503],{"class":642},[637,26808,11364],{"class":823},[637,26810,1513],{"class":642},[637,26812,3224],{"class":642},[637,26814,26815,26817,26819,26821,26823,26825,26827,26829,26831,26833,26835,26837],{"class":639,"line":805},[637,26816,13000],{"class":642},[637,26818,9933],{"class":650},[637,26820,657],{"class":642},[637,26822,660],{"class":642},[637,26824,1498],{"class":642},[637,26826,969],{"class":823},[637,26828,1503],{"class":642},[637,26830,1925],{"class":823},[637,26832,1503],{"class":642},[637,26834,969],{"class":823},[637,26836,1513],{"class":642},[637,26838,3224],{"class":642},[637,26840,26841],{"class":639,"line":831},[637,26842,18174],{"class":642},[637,26844,26845,26847,26849],{"class":639,"line":631},[637,26846,781],{"class":642},[637,26848,795],{"class":646},[637,26850,787],{"class":642},[637,26852,26853,26855,26857],{"class":639,"line":854},[637,26854,781],{"class":642},[637,26856,22688],{"class":646},[637,26858,669],{"class":642},[637,26860,26861,26863,26865],{"class":639,"line":865},[637,26862,857],{"class":642},[637,26864,18120],{"class":646},[637,26866,787],{"class":642},[637,26868,26869,26871,26873],{"class":639,"line":876},[637,26870,899],{"class":642},[637,26872,22688],{"class":646},[637,26874,669],{"class":642},[637,26876,26877,26879,26881],{"class":639,"line":886},[637,26878,781],{"class":642},[637,26880,8311],{"class":646},[637,26882,787],{"class":642},[637,26884,26885,26887,26889],{"class":639,"line":632},[637,26886,781],{"class":642},[637,26888,10010],{"class":646},[637,26890,787],{"class":642},[637,26892,26893,26895,26897],{"class":639,"line":906},[637,26894,909],{"class":642},[637,26896,761],{"class":646},[637,26898,669],{"class":642},[637,26900,26901,26903,26905],{"class":639,"line":916},[637,26902,732],{"class":642},[637,26904,750],{"class":646},[637,26906,669],{"class":642},[626,26908,26912],{"className":628,"code":26909,"filename":26910,"highlights":26911,"language":633,"meta":576,"style":576},"\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",[708,778,631],[618,26913,26914,26934,26952,26977,26981,26996,27007,27019,27052,27060,27064,27072,27105,27126,27134],{"__ignoreMap":576},[637,26915,26916,26918,26920,26922,26924,26926,26928,26930,26932],{"class":639,"line":577},[637,26917,643],{"class":642},[637,26919,647],{"class":646},[637,26921,651],{"class":650},[637,26923,654],{"class":650},[637,26925,657],{"class":642},[637,26927,660],{"class":642},[637,26929,664],{"class":663},[637,26931,660],{"class":642},[637,26933,669],{"class":642},[637,26935,26936,26938,26940,26942,26944,26946,26948,26950],{"class":639,"line":578},[637,26937,677],{"class":676},[637,26939,680],{"class":642},[637,26941,3999],{"class":683},[637,26943,693],{"class":642},[637,26945,696],{"class":676},[637,26947,699],{"class":642},[637,26949,633],{"class":663},[637,26951,705],{"class":642},[637,26953,26955,26957,26959,26962,26964,26967,26969,26971,26973,26975],{"class":26954,"line":708},[639,673],[637,26956,677],{"class":676},[637,26958,680],{"class":642},[637,26960,26961],{"class":683}," Sphere",[637,26963,687],{"class":642},[637,26965,26966],{"class":683}," useVideoTexture",[637,26968,693],{"class":642},[637,26970,696],{"class":676},[637,26972,699],{"class":642},[637,26974,702],{"class":663},[637,26976,705],{"class":642},[637,26978,26979],{"class":639,"line":729},[637,26980,742],{"emptyLinePlaceholder":594},[637,26982,26983,26985,26988,26990,26992,26994],{"class":639,"line":739},[637,26984,2487],{"class":650},[637,26986,26987],{"class":683}," videoPath ",[637,26989,657],{"class":642},[637,26991,699],{"class":642},[637,26993,19741],{"class":663},[637,26995,705],{"class":642},[637,26997,26998,27000,27002,27005],{"class":639,"line":745},[637,26999,19748],{"class":642},[637,27001,699],{"class":642},[637,27003,27004],{"class":663},"Tresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fvideo-textures\u002FuseVideoTexture.mp4",[637,27006,705],{"class":642},[637,27008,27009,27011,27013,27015,27017],{"class":639,"line":755},[637,27010,2487],{"class":650},[637,27012,2497],{"class":683},[637,27014,657],{"class":642},[637,27016,3999],{"class":2506},[637,27018,6744],{"class":683},[637,27020,27022,27024,27026,27028,27030,27032,27034,27037,27039,27041,27044,27046,27048,27050],{"class":27021,"line":778},[639,673],[637,27023,2801],{"class":683},[637,27025,1150],{"class":642},[637,27027,7179],{"class":683},[637,27029,657],{"class":642},[637,27031,26222],{"class":676},[637,27033,26966],{"class":2506},[637,27035,27036],{"class":683},"(videoPath",[637,27038,687],{"class":642},[637,27040,680],{"class":642},[637,27042,27043],{"class":646}," loop",[637,27045,1222],{"class":642},[637,27047,6934],{"class":4560},[637,27049,693],{"class":642},[637,27051,2520],{"class":683},[637,27053,27054,27056,27058],{"class":639,"line":790},[637,27055,732],{"class":642},[637,27057,647],{"class":646},[637,27059,669],{"class":642},[637,27061,27062],{"class":639,"line":800},[637,27063,742],{"emptyLinePlaceholder":594},[637,27065,27066,27068,27070],{"class":639,"line":805},[637,27067,643],{"class":642},[637,27069,750],{"class":646},[637,27071,669],{"class":642},[637,27073,27074,27077,27079,27081,27083,27085,27087,27089,27091,27093,27095,27097,27099,27101,27103],{"class":639,"line":831},[637,27075,27076],{"class":642}," \u003C",[637,27078,285],{"class":646},[637,27080,813],{"class":642},[637,27082,1491],{"class":650},[637,27084,657],{"class":642},[637,27086,660],{"class":642},[637,27088,1498],{"class":642},[637,27090,969],{"class":823},[637,27092,1503],{"class":642},[637,27094,824],{"class":823},[637,27096,1503],{"class":642},[637,27098,969],{"class":823},[637,27100,1513],{"class":642},[637,27102,660],{"class":642},[637,27104,669],{"class":642},[637,27106,27108,27110,27112,27114,27116,27118,27120,27122,27124],{"class":27107,"line":631},[639,673],[637,27109,857],{"class":642},[637,27111,7695],{"class":646},[637,27113,813],{"class":642},[637,27115,2825],{"class":650},[637,27117,657],{"class":642},[637,27119,660],{"class":642},[637,27121,2801],{"class":683},[637,27123,660],{"class":642},[637,27125,787],{"class":642},[637,27127,27128,27130,27132],{"class":639,"line":854},[637,27129,899],{"class":642},[637,27131,285],{"class":646},[637,27133,669],{"class":642},[637,27135,27136,27138,27140],{"class":639,"line":865},[637,27137,732],{"class":642},[637,27139,750],{"class":646},[637,27141,669],{"class":642},[504,27143,926],{"id":925},[931,27145,27146,27156],{},[934,27147,27148],{},[937,27149,27150,27152,27154],{},[940,27151,942],{"align":1001},[940,27153,945],{"align":1001},[940,27155,948],{},[950,27157,27158,27171,27185,27200,27212,27224,27235],{},[937,27159,27160,27164,27167],{},[955,27161,27162],{"align":1001},[618,27163,25789],{},[955,27165,27166],{"align":1001},"Path to the video.",[955,27168,27169],{},[618,27170,1183],{},[937,27172,27173,27178,27180],{},[955,27174,27175],{"align":1001},[618,27176,27177],{},"unsuspend",[955,27179,20939],{"align":1001},[955,27181,27182],{},[618,27183,27184],{},"loadedmetadata",[937,27186,27187,27192,27195],{},[955,27188,27189],{"align":1001},[618,27190,27191],{},"crossOrigin",[955,27193,27194],{"align":1001},"Whether to use CORS to fetch the related video.",[955,27196,27197],{},[618,27198,27199],{},"Anonymous",[937,27201,27202,27207,27210],{},[955,27203,27204],{"align":1001},[618,27205,27206],{},"muted",[955,27208,27209],{"align":1001},"Whether to set the audio silenced.",[955,27211,965],{},[937,27213,27214,27219,27222],{},[955,27215,27216],{"align":1001},[618,27217,27218],{},"loop",[955,27220,27221],{"align":1001},"Automatically seek back to the start upon reaching the end of the video.",[955,27223,965],{},[937,27225,27226,27230,27233],{},[955,27227,27228],{"align":1001},[618,27229,15072],{},[955,27231,27232],{"align":1001},"To play to the video once loaded or not.",[955,27234,965],{},[937,27236,27237,27242,27245],{},[955,27238,27239],{"align":1001},[618,27240,27241],{},"playsInline",[955,27243,27244],{"align":1001},"To be play the video inline or not.",[955,27246,965],{},[2285,27248,27249],{},[2288,27250,27251,27252,27255],{},"Any other attribute for a ",[618,27253,27254],{},"\u003Cvideo>"," tag is accepted and will automatically set",[1331,27257,27258],{},"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":576,"searchDepth":577,"depth":578,"links":27260},[27261,27262],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"A composable to load video textures in TresJS scenes.",{},{"title":165,"description":27263},"B0IudWGxB6H8-Wl16oRdCL8g07LFjZcBL6tZkeTIFLM",[27268,27761,28401,28868,29040,29709,30535,31338,31660],{"id":27269,"title":175,"body":27270,"description":27757,"extension":591,"links":592,"meta":27758,"navigation":594,"path":176,"seo":27759,"stem":177,"__hash__":27760},"docs\u002F2.api\u002F4.materials\u002Fcustom-shader-material.md",{"type":501,"value":27271,"toc":27753},[27272,27277,27297,27299,27734,27736,27750],[2367,27273,27274],{},[27275,27276],"materials-custom-shader-material",{},[614,27278,2867,27279,27281,27282,27285,27286,27293,27294,1150],{},[618,27280,7526],{}," package provides ",[618,27283,27284],{},"\u003CTresCustomShaderMaterial \u002F>"," component which is a wrapper around the ",[1144,27287,27290],{"href":27288,"rel":27289},"https:\u002F\u002Fgithub.com\u002FFarazzShaikh\u002FTHREE-CustomShaderMaterial",[1148],[618,27291,27292],{},"three-custom-shader-material"," class. As states in the repo, it ",[1709,27295,27296],{},"\"lets you extend Three.js' material library with your own Vertex and Fragment shaders\"",[504,27298,15],{"id":624},[626,27300,27303],{"className":628,"code":27301,"highlights":27302,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCustomShaderMaterial } from '@tresjs\u002Fcientos'\nimport { shallowRef } from 'vue'\n\nconst customShaderMaterialRef = shallowRef()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CTresMesh>\n \u003CTresBoxGeometry \u002F>\n \u003CTresCustomShaderMaterial\n ref=\"customShaderMaterialRef\"\n :vertex-shader=\"vertexShader\"\n :fragment-shader=\"fragmentShader\"\n :uniforms=\"{\n u_time: { value: 0 },\n u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },\n u_resolution: { value: new THREE.Vector2() }\n }\"\n :transparent=\"true\"\n :side=\"THREE.DoubleSide\"\n base-material=\"MeshLambertMaterial\"\n silent\n :map=\"texture\"\n :color=\"0xff0000\"\n \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,631,854,865,876,886,632,906,916,2695,2704,2738,2747,2756,2765,2787],[618,27304,27305,27325,27345,27363,27367,27380,27388,27392,27400,27408,27440,27448,27456,27464,27479,27496,27513,27527,27544,27580,27602,27610,27625,27646,27661,27667,27682,27698,27702,27710,27718,27726],{"__ignoreMap":576},[637,27306,27307,27309,27311,27313,27315,27317,27319,27321,27323],{"class":639,"line":577},[637,27308,643],{"class":642},[637,27310,647],{"class":646},[637,27312,651],{"class":650},[637,27314,654],{"class":650},[637,27316,657],{"class":642},[637,27318,660],{"class":642},[637,27320,664],{"class":663},[637,27322,660],{"class":642},[637,27324,669],{"class":642},[637,27326,27328,27330,27332,27335,27337,27339,27341,27343],{"class":27327,"line":578},[639,673],[637,27329,677],{"class":676},[637,27331,680],{"class":642},[637,27333,27334],{"class":683}," TresCustomShaderMaterial",[637,27336,693],{"class":642},[637,27338,696],{"class":676},[637,27340,699],{"class":642},[637,27342,702],{"class":663},[637,27344,705],{"class":642},[637,27346,27347,27349,27351,27353,27355,27357,27359,27361],{"class":639,"line":708},[637,27348,677],{"class":676},[637,27350,680],{"class":642},[637,27352,3591],{"class":683},[637,27354,693],{"class":642},[637,27356,696],{"class":676},[637,27358,699],{"class":642},[637,27360,633],{"class":663},[637,27362,705],{"class":642},[637,27364,27365],{"class":639,"line":729},[637,27366,742],{"emptyLinePlaceholder":594},[637,27368,27369,27371,27374,27376,27378],{"class":639,"line":739},[637,27370,2487],{"class":650},[637,27372,27373],{"class":683}," customShaderMaterialRef ",[637,27375,657],{"class":642},[637,27377,3591],{"class":2506},[637,27379,6744],{"class":683},[637,27381,27382,27384,27386],{"class":639,"line":745},[637,27383,732],{"class":642},[637,27385,647],{"class":646},[637,27387,669],{"class":642},[637,27389,27390],{"class":639,"line":755},[637,27391,742],{"emptyLinePlaceholder":594},[637,27393,27394,27396,27398],{"class":639,"line":778},[637,27395,643],{"class":642},[637,27397,750],{"class":646},[637,27399,669],{"class":642},[637,27401,27402,27404,27406],{"class":639,"line":790},[637,27403,758],{"class":642},[637,27405,761],{"class":646},[637,27407,669],{"class":642},[637,27409,27410,27412,27414,27416,27418,27420,27422,27424,27426,27428,27430,27432,27434,27436,27438],{"class":639,"line":800},[637,27411,781],{"class":642},[637,27413,784],{"class":646},[637,27415,813],{"class":642},[637,27417,1491],{"class":650},[637,27419,657],{"class":642},[637,27421,660],{"class":642},[637,27423,1498],{"class":642},[637,27425,2729],{"class":823},[637,27427,1503],{"class":642},[637,27429,2729],{"class":823},[637,27431,1503],{"class":642},[637,27433,2729],{"class":823},[637,27435,1513],{"class":642},[637,27437,660],{"class":642},[637,27439,787],{"class":642},[637,27441,27442,27444,27446],{"class":639,"line":805},[637,27443,781],{"class":642},[637,27445,860],{"class":646},[637,27447,669],{"class":642},[637,27449,27450,27452,27454],{"class":639,"line":831},[637,27451,857],{"class":642},[637,27453,871],{"class":646},[637,27455,787],{"class":642},[637,27457,27459,27461],{"class":27458,"line":631},[639,673],[637,27460,857],{"class":642},[637,27462,27463],{"class":646},"TresCustomShaderMaterial\n",[637,27465,27467,27470,27472,27474,27477],{"class":27466,"line":854},[639,673],[637,27468,27469],{"class":650}," ref",[637,27471,657],{"class":642},[637,27473,660],{"class":642},[637,27475,27476],{"class":663},"customShaderMaterialRef",[637,27478,3224],{"class":642},[637,27480,27482,27484,27487,27489,27491,27494],{"class":27481,"line":865},[639,673],[637,27483,8241],{"class":642},[637,27485,27486],{"class":650},"vertex-shader",[637,27488,657],{"class":642},[637,27490,660],{"class":642},[637,27492,27493],{"class":683},"vertexShader",[637,27495,3224],{"class":642},[637,27497,27499,27501,27504,27506,27508,27511],{"class":27498,"line":876},[639,673],[637,27500,8241],{"class":642},[637,27502,27503],{"class":650},"fragment-shader",[637,27505,657],{"class":642},[637,27507,660],{"class":642},[637,27509,27510],{"class":683},"fragmentShader",[637,27512,3224],{"class":642},[637,27514,27516,27518,27521,27523,27525],{"class":27515,"line":886},[639,673],[637,27517,8241],{"class":642},[637,27519,27520],{"class":650},"uniforms",[637,27522,657],{"class":642},[637,27524,660],{"class":642},[637,27526,3353],{"class":642},[637,27528,27530,27533,27536,27538,27540,27542],{"class":27529,"line":632},[639,673],[637,27531,27532],{"class":646}," u_time",[637,27534,27535],{"class":642},": { ",[637,27537,3778],{"class":646},[637,27539,11398],{"class":642},[637,27541,969],{"class":823},[637,27543,7298],{"class":642},[637,27545,27547,27550,27552,27554,27557,27560,27562,27565,27567,27569,27571,27573,27575,27577],{"class":27546,"line":906},[639,673],[637,27548,27549],{"class":646}," u_color",[637,27551,27535],{"class":642},[637,27553,3778],{"class":646},[637,27555,27556],{"class":642},": new ",[637,27558,27559],{"class":683},"THREE",[637,27561,1150],{"class":642},[637,27563,27564],{"class":2506},"Color",[637,27566,2509],{"class":642},[637,27568,5938],{"class":823},[637,27570,1503],{"class":642},[637,27572,14513],{"class":823},[637,27574,1503],{"class":642},[637,27576,2235],{"class":823},[637,27578,27579],{"class":642},") },\n",[637,27581,27583,27586,27588,27590,27592,27594,27596,27599],{"class":27582,"line":916},[639,673],[637,27584,27585],{"class":646}," u_resolution",[637,27587,27535],{"class":642},[637,27589,3778],{"class":646},[637,27591,27556],{"class":642},[637,27593,27559],{"class":683},[637,27595,1150],{"class":642},[637,27597,27598],{"class":2506},"Vector2",[637,27600,27601],{"class":642},"() }\n",[637,27603,27605,27608],{"class":27604,"line":2695},[639,673],[637,27606,27607],{"class":642}," }",[637,27609,3224],{"class":642},[637,27611,27613,27615,27617,27619,27621,27623],{"class":27612,"line":2704},[639,673],[637,27614,8241],{"class":642},[637,27616,12191],{"class":650},[637,27618,657],{"class":642},[637,27620,660],{"class":642},[637,27622,965],{"class":4560},[637,27624,3224],{"class":642},[637,27626,27628,27630,27633,27635,27637,27639,27641,27644],{"class":27627,"line":2738},[639,673],[637,27629,8241],{"class":642},[637,27631,27632],{"class":650},"side",[637,27634,657],{"class":642},[637,27636,660],{"class":642},[637,27638,27559],{"class":683},[637,27640,1150],{"class":642},[637,27642,27643],{"class":683},"DoubleSide",[637,27645,3224],{"class":642},[637,27647,27649,27652,27654,27656,27659],{"class":27648,"line":2747},[639,673],[637,27650,27651],{"class":650}," base-material",[637,27653,657],{"class":642},[637,27655,660],{"class":642},[637,27657,27658],{"class":663},"MeshLambertMaterial",[637,27660,3224],{"class":642},[637,27662,27664],{"class":27663,"line":2756},[639,673],[637,27665,27666],{"class":650}," silent\n",[637,27668,27670,27672,27674,27676,27678,27680],{"class":27669,"line":2765},[639,673],[637,27671,8241],{"class":642},[637,27673,2825],{"class":650},[637,27675,657],{"class":642},[637,27677,660],{"class":642},[637,27679,2801],{"class":683},[637,27681,3224],{"class":642},[637,27683,27685,27687,27689,27691,27693,27696],{"class":27684,"line":2787},[639,673],[637,27686,8241],{"class":642},[637,27688,7770],{"class":650},[637,27690,657],{"class":642},[637,27692,660],{"class":642},[637,27694,27695],{"class":823},"0xff0000",[637,27697,3224],{"class":642},[637,27699,27700],{"class":639,"line":2838},[637,27701,8295],{"class":642},[637,27703,27704,27706,27708],{"class":639,"line":2847},[637,27705,899],{"class":642},[637,27707,860],{"class":646},[637,27709,669],{"class":642},[637,27711,27712,27714,27716],{"class":639,"line":2856},[637,27713,781],{"class":642},[637,27715,10010],{"class":646},[637,27717,787],{"class":642},[637,27719,27720,27722,27724],{"class":639,"line":4058},[637,27721,909],{"class":642},[637,27723,761],{"class":646},[637,27725,669],{"class":642},[637,27727,27728,27730,27732],{"class":639,"line":4102},[637,27729,732],{"class":642},[637,27731,750],{"class":646},[637,27733,669],{"class":642},[504,27735,926],{"id":925},[614,27737,27738,27739,27742,27743,27745,27746,1150],{},"Being a wrapper around the ",[618,27740,27741],{},"CustomShaderMaterial"," class, the ",[618,27744,27284],{}," component accepts all the props that the class does. You can find the full list of props in the ",[1144,27747,27749],{"href":27288,"rel":27748},[1148],"official repo",[1331,27751,27752],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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);}",{"title":576,"searchDepth":577,"depth":578,"links":27754},[27755,27756],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Extends Three.js' material library with your own Vertex and Fragment shaders.",{},{"title":175,"description":27757},"WirW-L7fmUIEqDL1ownbJUS8vqN1Ie6ubq6WxZ9mH-o",{"id":27762,"title":179,"body":27763,"description":28397,"extension":591,"links":592,"meta":28398,"navigation":594,"path":180,"seo":28399,"stem":181,"__hash__":28400},"docs\u002F2.api\u002F4.materials\u002Fglass-material.md",{"type":501,"value":27764,"toc":28388},[27765,27770,27781,27783,27787,28025,28027,28034,28038,28373,28377,28385],[2367,27766,27767],{},[27768,27769],"materials-glass-material",{},[614,27771,2867,27772,27774,27775,27778,27779,1150],{},[618,27773,7526],{}," package provides a new",[618,27776,27777],{},"\u003CMeshGlassMaterial \u002F>"," component that makes a geometry look like glass. This is achieved by re-defining the ",[618,27780,3094],{},[504,27782,15],{"id":624},[4215,27784,27786],{"id":27785},"you-can-use-it-like-you-normally-do-with-tresjs","You can use it like you normally do with TresJs",[626,27788,27791],{"className":628,"code":27789,"highlights":27790,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshGlassMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003CMeshGlassMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,800],[618,27792,27793,27813,27832,27851,27859,27863,27871,27879,27935,27943,27952,27961,27969,27977,28009,28017],{"__ignoreMap":576},[637,27794,27795,27797,27799,27801,27803,27805,27807,27809,27811],{"class":639,"line":577},[637,27796,643],{"class":642},[637,27798,647],{"class":646},[637,27800,651],{"class":650},[637,27802,654],{"class":650},[637,27804,657],{"class":642},[637,27806,660],{"class":642},[637,27808,664],{"class":663},[637,27810,660],{"class":642},[637,27812,669],{"class":642},[637,27814,27816,27818,27820,27822,27824,27826,27828,27830],{"class":27815,"line":578},[639,673],[637,27817,677],{"class":676},[637,27819,680],{"class":642},[637,27821,715],{"class":683},[637,27823,693],{"class":642},[637,27825,696],{"class":676},[637,27827,699],{"class":642},[637,27829,724],{"class":663},[637,27831,705],{"class":642},[637,27833,27834,27836,27838,27841,27843,27845,27847,27849],{"class":639,"line":708},[637,27835,677],{"class":676},[637,27837,680],{"class":642},[637,27839,27840],{"class":683}," MeshGlassMaterial",[637,27842,693],{"class":642},[637,27844,696],{"class":676},[637,27846,699],{"class":642},[637,27848,702],{"class":663},[637,27850,705],{"class":642},[637,27852,27853,27855,27857],{"class":639,"line":729},[637,27854,732],{"class":642},[637,27856,647],{"class":646},[637,27858,669],{"class":642},[637,27860,27861],{"class":639,"line":739},[637,27862,742],{"emptyLinePlaceholder":594},[637,27864,27865,27867,27869],{"class":639,"line":745},[637,27866,643],{"class":642},[637,27868,750],{"class":646},[637,27870,669],{"class":642},[637,27872,27873,27875,27877],{"class":639,"line":755},[637,27874,758],{"class":642},[637,27876,761],{"class":646},[637,27878,669],{"class":642},[637,27880,27881,27883,27885,27887,27889,27891,27893,27895,27897,27899,27901,27903,27905,27907,27909,27911,27913,27915,27917,27919,27921,27923,27925,27927,27929,27931,27933],{"class":639,"line":778},[637,27882,781],{"class":642},[637,27884,784],{"class":646},[637,27886,813],{"class":642},[637,27888,1491],{"class":650},[637,27890,657],{"class":642},[637,27892,660],{"class":642},[637,27894,1498],{"class":642},[637,27896,2729],{"class":823},[637,27898,1503],{"class":642},[637,27900,2729],{"class":823},[637,27902,1503],{"class":642},[637,27904,2729],{"class":823},[637,27906,1513],{"class":642},[637,27908,660],{"class":642},[637,27910,813],{"class":642},[637,27912,9933],{"class":650},[637,27914,657],{"class":642},[637,27916,660],{"class":642},[637,27918,1498],{"class":642},[637,27920,969],{"class":823},[637,27922,1503],{"class":642},[637,27924,969],{"class":823},[637,27926,1503],{"class":642},[637,27928,969],{"class":823},[637,27930,1513],{"class":642},[637,27932,660],{"class":642},[637,27934,787],{"class":642},[637,27936,27937,27939,27941],{"class":639,"line":790},[637,27938,781],{"class":642},[637,27940,860],{"class":646},[637,27942,669],{"class":642},[637,27944,27946,27948,27950],{"class":27945,"line":800},[639,673],[637,27947,857],{"class":642},[637,27949,12445],{"class":646},[637,27951,787],{"class":642},[637,27953,27954,27956,27959],{"class":639,"line":805},[637,27955,857],{"class":642},[637,27957,27958],{"class":646},"MeshGlassMaterial",[637,27960,787],{"class":642},[637,27962,27963,27965,27967],{"class":639,"line":831},[637,27964,899],{"class":642},[637,27966,860],{"class":646},[637,27968,669],{"class":642},[637,27970,27971,27973,27975],{"class":639,"line":631},[637,27972,781],{"class":642},[637,27974,10010],{"class":646},[637,27976,787],{"class":642},[637,27978,27979,27981,27983,27985,27987,27989,27991,27993,27995,27997,27999,28001,28003,28005,28007],{"class":639,"line":854},[637,27980,781],{"class":642},[637,27982,10031],{"class":646},[637,27984,813],{"class":642},[637,27986,1491],{"class":650},[637,27988,657],{"class":642},[637,27990,660],{"class":642},[637,27992,1498],{"class":642},[637,27994,969],{"class":823},[637,27996,1503],{"class":642},[637,27998,824],{"class":823},[637,28000,1503],{"class":642},[637,28002,3900],{"class":823},[637,28004,1513],{"class":642},[637,28006,660],{"class":642},[637,28008,787],{"class":642},[637,28010,28011,28013,28015],{"class":639,"line":865},[637,28012,909],{"class":642},[637,28014,761],{"class":646},[637,28016,669],{"class":642},[637,28018,28019,28021,28023],{"class":639,"line":876},[637,28020,732],{"class":642},[637,28022,750],{"class":646},[637,28024,669],{"class":642},[504,28026,926],{"id":925},[614,28028,28029,28030,28033],{},"No props are required. The component extends ",[618,28031,28032],{},"THREE.MeshPhysicalMaterial"," and accepts all the same props plus additional reflection-specific properties.",[4215,28035,28037],{"id":28036},"you-can-also-replace-the-material-of-an-existing-mesh-like-this","You can also replace the material of an existing mesh like this:",[626,28039,28042],{"className":628,"code":28040,"highlights":28041,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef, watch } from 'vue'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshGlassMaterial, Box } from '@tresjs\u002Fcientos'\n\nconst glassMaterialRef = shallowRef()\nconst boxRef = shallowRef()\n\nwatch(glassMaterialRef, value => {\n \u002F\u002F For good practice we dispose the old material\n boxRef.value.instance.material.dispose()\n\n \u002F\u002F We assign the new MeshGlassMaterialClass\n boxRef.value.instance.material = value.MeshGlassMaterialClass\n})\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003CMeshGlassMaterial ref=\"glassMaterialRef\" \u002F>\n \u003C\u002FTresMesh>\n \u003C!-- Mesh to be replaced -->\n \u003CTresMesh ref=\"boxRef\">\n \u003CTresBoxGeometry \u002F>\n \u003CMeshBasicMaterial \u002F>\n \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n",[729,745,755,778,790,800,805,831,631,854,865,916],[618,28043,28044,28064,28090,28108,28131,28135,28149,28162,28167,28184,28190,28214,28219,28225,28251,28258,28266,28274,28282,28290,28310,28318,28323,28341,28349,28357,28365],{"__ignoreMap":576},[637,28045,28046,28048,28050,28052,28054,28056,28058,28060,28062],{"class":639,"line":577},[637,28047,643],{"class":642},[637,28049,647],{"class":646},[637,28051,651],{"class":650},[637,28053,654],{"class":650},[637,28055,657],{"class":642},[637,28057,660],{"class":642},[637,28059,664],{"class":663},[637,28061,660],{"class":642},[637,28063,669],{"class":642},[637,28065,28066,28068,28070,28072,28074,28076,28078,28080,28082,28084,28086,28088],{"class":639,"line":578},[637,28067,677],{"class":676},[637,28069,680],{"class":642},[637,28071,3999],{"class":683},[637,28073,687],{"class":642},[637,28075,3591],{"class":683},[637,28077,687],{"class":642},[637,28079,12749],{"class":683},[637,28081,693],{"class":642},[637,28083,696],{"class":676},[637,28085,699],{"class":642},[637,28087,633],{"class":663},[637,28089,705],{"class":642},[637,28091,28092,28094,28096,28098,28100,28102,28104,28106],{"class":639,"line":708},[637,28093,677],{"class":676},[637,28095,680],{"class":642},[637,28097,715],{"class":683},[637,28099,693],{"class":642},[637,28101,696],{"class":676},[637,28103,699],{"class":642},[637,28105,724],{"class":663},[637,28107,705],{"class":642},[637,28109,28111,28113,28115,28117,28119,28121,28123,28125,28127,28129],{"class":28110,"line":729},[639,673],[637,28112,677],{"class":676},[637,28114,680],{"class":642},[637,28116,27840],{"class":683},[637,28118,687],{"class":642},[637,28120,1401],{"class":683},[637,28122,693],{"class":642},[637,28124,696],{"class":676},[637,28126,699],{"class":642},[637,28128,702],{"class":663},[637,28130,705],{"class":642},[637,28132,28133],{"class":639,"line":739},[637,28134,742],{"emptyLinePlaceholder":594},[637,28136,28138,28140,28143,28145,28147],{"class":28137,"line":745},[639,673],[637,28139,2487],{"class":650},[637,28141,28142],{"class":683}," glassMaterialRef ",[637,28144,657],{"class":642},[637,28146,3591],{"class":2506},[637,28148,6744],{"class":683},[637,28150,28152,28154,28156,28158,28160],{"class":28151,"line":755},[639,673],[637,28153,2487],{"class":650},[637,28155,17086],{"class":683},[637,28157,657],{"class":642},[637,28159,3591],{"class":2506},[637,28161,6744],{"class":683},[637,28163,28165],{"class":28164,"line":778},[639,673],[637,28166,742],{"emptyLinePlaceholder":594},[637,28168,28170,28172,28175,28177,28180,28182],{"class":28169,"line":790},[639,673],[637,28171,12798],{"class":2506},[637,28173,28174],{"class":683},"(glassMaterialRef",[637,28176,687],{"class":642},[637,28178,28179],{"class":7047}," value",[637,28181,3770],{"class":650},[637,28183,1208],{"class":642},[637,28185,28187],{"class":28186,"line":800},[639,673],[637,28188,28189],{"class":1213}," \u002F\u002F For good practice we dispose the old material\n",[637,28191,28193,28196,28198,28200,28202,28204,28206,28208,28210,28212],{"class":28192,"line":805},[639,673],[637,28194,28195],{"class":683}," boxRef",[637,28197,1150],{"class":642},[637,28199,3778],{"class":683},[637,28201,1150],{"class":642},[637,28203,9626],{"class":683},[637,28205,1150],{"class":642},[637,28207,5403],{"class":683},[637,28209,1150],{"class":642},[637,28211,23904],{"class":2506},[637,28213,6744],{"class":646},[637,28215,28217],{"class":28216,"line":831},[639,673],[637,28218,742],{"emptyLinePlaceholder":594},[637,28220,28222],{"class":28221,"line":631},[639,673],[637,28223,28224],{"class":1213}," \u002F\u002F We assign the new MeshGlassMaterialClass\n",[637,28226,28228,28230,28232,28234,28236,28238,28240,28242,28244,28246,28248],{"class":28227,"line":854},[639,673],[637,28229,28195],{"class":683},[637,28231,1150],{"class":642},[637,28233,3778],{"class":683},[637,28235,1150],{"class":642},[637,28237,9626],{"class":683},[637,28239,1150],{"class":642},[637,28241,5403],{"class":683},[637,28243,2503],{"class":642},[637,28245,28179],{"class":683},[637,28247,1150],{"class":642},[637,28249,28250],{"class":683},"MeshGlassMaterialClass\n",[637,28252,28254,28256],{"class":28253,"line":865},[639,673],[637,28255,2500],{"class":642},[637,28257,2520],{"class":683},[637,28259,28260,28262,28264],{"class":639,"line":876},[637,28261,732],{"class":642},[637,28263,647],{"class":646},[637,28265,669],{"class":642},[637,28267,28268,28270,28272],{"class":639,"line":886},[637,28269,643],{"class":642},[637,28271,750],{"class":646},[637,28273,669],{"class":642},[637,28275,28276,28278,28280],{"class":639,"line":632},[637,28277,758],{"class":642},[637,28279,860],{"class":646},[637,28281,669],{"class":642},[637,28283,28284,28286,28288],{"class":639,"line":906},[637,28285,781],{"class":642},[637,28287,12445],{"class":646},[637,28289,787],{"class":642},[637,28291,28293,28295,28297,28299,28301,28303,28306,28308],{"class":28292,"line":916},[639,673],[637,28294,781],{"class":642},[637,28296,27958],{"class":646},[637,28298,3999],{"class":650},[637,28300,657],{"class":642},[637,28302,660],{"class":642},[637,28304,28305],{"class":663},"glassMaterialRef",[637,28307,660],{"class":642},[637,28309,787],{"class":642},[637,28311,28312,28314,28316],{"class":639,"line":2695},[637,28313,909],{"class":642},[637,28315,860],{"class":646},[637,28317,669],{"class":642},[637,28319,28320],{"class":639,"line":2704},[637,28321,28322],{"class":1213}," \u003C!-- Mesh to be replaced -->\n",[637,28324,28325,28327,28329,28331,28333,28335,28337,28339],{"class":639,"line":2738},[637,28326,758],{"class":642},[637,28328,860],{"class":646},[637,28330,3999],{"class":650},[637,28332,657],{"class":642},[637,28334,660],{"class":642},[637,28336,17183],{"class":663},[637,28338,660],{"class":642},[637,28340,669],{"class":642},[637,28342,28343,28345,28347],{"class":639,"line":2747},[637,28344,781],{"class":642},[637,28346,871],{"class":646},[637,28348,787],{"class":642},[637,28350,28351,28353,28355],{"class":639,"line":2756},[637,28352,781],{"class":642},[637,28354,3087],{"class":646},[637,28356,14760],{"class":642},[637,28358,28359,28361,28363],{"class":639,"line":2765},[637,28360,909],{"class":642},[637,28362,860],{"class":646},[637,28364,669],{"class":642},[637,28366,28367,28369,28371],{"class":639,"line":2787},[637,28368,732],{"class":642},[637,28370,750],{"class":646},[637,28372,669],{"class":642},[504,28374,28376],{"id":28375},"tips","Tips",[2285,28378,28379,28382],{},[2288,28380,28381],{},"For more fine tuning effects you can provide an environment map texture as an envMap and play with the intensity to achieve a more realistic effect",[2288,28383,28384],{},"Another good option is to provide a normal texture as clearcoatNormalMap to add different results",[1331,28386,28387],{},"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 .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":576,"searchDepth":577,"depth":578,"links":28389},[28390,28393,28396],{"id":624,"depth":578,"text":15,"children":28391},[28392],{"id":27785,"depth":708,"text":27786},{"id":925,"depth":578,"text":926,"children":28394},[28395],{"id":28036,"depth":708,"text":28037},{"id":28375,"depth":578,"text":28376},"Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.",{},{"title":179,"description":28397},"XeLIOrrqO5hF6DK2JnTAyGusif0o80_d6hTc8m5QJQE",{"id":28402,"title":183,"body":28403,"description":28864,"extension":591,"links":592,"meta":28865,"navigation":594,"path":184,"seo":28866,"stem":185,"__hash__":28867},"docs\u002F2.api\u002F4.materials\u002Fholographic-material.md",{"type":501,"value":28404,"toc":28859},[28405,28410,28414,28417,28420,28425,28427,28635,28637,28857],[608,28406,28407],{},[28408,28409],"materials-holographic-material",{},[504,28411,28413],{"id":28412},"a-simple-to-use-holographic-material-for-tresjs","A simple to use holographic material for TresJS",[614,28415,28416],{},"Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla Three.js. This enchanting Three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.",[614,28418,28419],{},"While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.",[2078,28421,28422],{},[614,28423,28424],{},"This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.",[504,28426,15],{"id":624},[626,28428,28431],{"className":628,"code":28429,"highlights":28430,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { HolographicMaterial, Sphere } from '@tresjs\u002Fcientos'\n\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=[0,0,0] \u002F>\n \u003CSphere :scale=\"0.5\">\n \u003CHolographicMaterial \u002F>\n \u003C\u002FSphere>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800],[618,28432,28433,28453,28471,28495,28499,28507,28515,28523,28573,28593,28603,28611,28619,28627],{"__ignoreMap":576},[637,28434,28435,28437,28439,28441,28443,28445,28447,28449,28451],{"class":639,"line":577},[637,28436,643],{"class":642},[637,28438,647],{"class":646},[637,28440,651],{"class":650},[637,28442,654],{"class":650},[637,28444,657],{"class":642},[637,28446,660],{"class":642},[637,28448,664],{"class":663},[637,28450,660],{"class":642},[637,28452,669],{"class":642},[637,28454,28455,28457,28459,28461,28463,28465,28467,28469],{"class":639,"line":578},[637,28456,677],{"class":676},[637,28458,680],{"class":642},[637,28460,715],{"class":683},[637,28462,693],{"class":642},[637,28464,696],{"class":676},[637,28466,699],{"class":642},[637,28468,724],{"class":663},[637,28470,705],{"class":642},[637,28472,28474,28476,28478,28481,28483,28485,28487,28489,28491,28493],{"class":28473,"line":708},[639,673],[637,28475,677],{"class":676},[637,28477,680],{"class":642},[637,28479,28480],{"class":683}," HolographicMaterial",[637,28482,687],{"class":642},[637,28484,26961],{"class":683},[637,28486,693],{"class":642},[637,28488,696],{"class":676},[637,28490,699],{"class":642},[637,28492,702],{"class":663},[637,28494,705],{"class":642},[637,28496,28497],{"class":639,"line":729},[637,28498,742],{"emptyLinePlaceholder":594},[637,28500,28501,28503,28505],{"class":639,"line":739},[637,28502,732],{"class":642},[637,28504,647],{"class":646},[637,28506,669],{"class":642},[637,28508,28509,28511,28513],{"class":639,"line":745},[637,28510,643],{"class":642},[637,28512,750],{"class":646},[637,28514,669],{"class":642},[637,28516,28517,28519,28521],{"class":639,"line":755},[637,28518,758],{"class":642},[637,28520,761],{"class":646},[637,28522,669],{"class":642},[637,28524,28525,28527,28529,28531,28533,28535,28537,28539,28541,28543,28545,28547,28549,28551,28553,28555,28557,28560,28562,28564,28566,28568,28570],{"class":639,"line":778},[637,28526,781],{"class":642},[637,28528,784],{"class":646},[637,28530,813],{"class":642},[637,28532,1491],{"class":650},[637,28534,657],{"class":642},[637,28536,660],{"class":642},[637,28538,1498],{"class":642},[637,28540,2729],{"class":823},[637,28542,1503],{"class":642},[637,28544,2729],{"class":823},[637,28546,1503],{"class":642},[637,28548,2729],{"class":823},[637,28550,1513],{"class":642},[637,28552,660],{"class":642},[637,28554,813],{"class":642},[637,28556,9933],{"class":650},[637,28558,28559],{"class":642},"=[",[637,28561,969],{"class":823},[637,28563,687],{"class":642},[637,28565,969],{"class":823},[637,28567,687],{"class":642},[637,28569,969],{"class":823},[637,28571,28572],{"class":642},"] \u002F>\n",[637,28574,28575,28577,28579,28581,28583,28585,28587,28589,28591],{"class":639,"line":790},[637,28576,781],{"class":642},[637,28578,285],{"class":646},[637,28580,813],{"class":642},[637,28582,816],{"class":650},[637,28584,657],{"class":642},[637,28586,660],{"class":642},[637,28588,1545],{"class":823},[637,28590,660],{"class":642},[637,28592,669],{"class":642},[637,28594,28596,28598,28601],{"class":28595,"line":800},[639,673],[637,28597,857],{"class":642},[637,28599,28600],{"class":646},"HolographicMaterial",[637,28602,787],{"class":642},[637,28604,28605,28607,28609],{"class":639,"line":805},[637,28606,899],{"class":642},[637,28608,285],{"class":646},[637,28610,669],{"class":642},[637,28612,28613,28615,28617],{"class":639,"line":831},[637,28614,781],{"class":642},[637,28616,10010],{"class":646},[637,28618,787],{"class":642},[637,28620,28621,28623,28625],{"class":639,"line":631},[637,28622,909],{"class":642},[637,28624,761],{"class":646},[637,28626,669],{"class":642},[637,28628,28629,28631,28633],{"class":639,"line":854},[637,28630,732],{"class":642},[637,28632,750],{"class":646},[637,28634,669],{"class":642},[504,28636,926],{"id":925},[931,28638,28639,28652],{},[934,28640,28641],{},[937,28642,28643,28645,28647,28649],{},[940,28644,942],{"align":1001},[940,28646,945],{"align":1001},[940,28648,6178],{},[940,28650,28651],{},"default",[950,28653,28654,28673,28691,28710,28728,28746,28765,28784,28802,28820,28838],{},[937,28655,28656,28661,28664,28668],{},[955,28657,28658],{"align":1001},[1705,28659,28660],{},"fresnelAmount",[955,28662,28663],{"align":1001},"Value of the Fresnel effect. Ranges from 0.0 to 1.0.",[955,28665,28666],{},[618,28667,12623],{},[955,28669,28670],{},[618,28671,28672],{},"0.45",[937,28674,28675,28680,28683,28687],{},[955,28676,28677],{"align":1001},[1705,28678,28679],{},"fresnelOpacity",[955,28681,28682],{"align":1001},"Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.",[955,28684,28685],{},[618,28686,12623],{},[955,28688,28689],{},[618,28690,14391],{},[937,28692,28693,28698,28701,28705],{},[955,28694,28695],{"align":1001},[1705,28696,28697],{},"scanlineSize",[955,28699,28700],{"align":1001},"Size of the scanlines. Ranges from 1 to 15.",[955,28702,28703],{},[618,28704,12623],{},[955,28706,28707],{},[618,28708,28709],{},"8.0",[937,28711,28712,28717,28720,28724],{},[955,28713,28714],{"align":1001},[1705,28715,28716],{},"hologramBrightness",[955,28718,28719],{"align":1001},"Brightness of the hologram. Ranges from 0.0 to 2.0.",[955,28721,28722],{},[618,28723,12623],{},[955,28725,28726],{},[618,28727,3950],{},[937,28729,28730,28735,28738,28742],{},[955,28731,28732],{"align":1001},[1705,28733,28734],{},"signalSpeed",[955,28736,28737],{"align":1001},"Speed of the signal effect. Ranges from 0.0 to 2.0.",[955,28739,28740],{},[618,28741,12623],{},[955,28743,28744],{},[618,28745,28672],{},[937,28747,28748,28753,28756,28760],{},[955,28749,28750],{"align":1001},[1705,28751,28752],{},"hologramColor",[955,28754,28755],{"align":1001},"Specifies the color of the hologram.",[955,28757,28758],{},[618,28759,12645],{},[955,28761,28762],{},[618,28763,28764],{},"\"#00d5ff\"",[937,28766,28767,28772,28775,28780],{},[955,28768,28769],{"align":1001},[1705,28770,28771],{},"enableBlinking",[955,28773,28774],{"align":1001},"Enables or disables the blinking effect.",[955,28776,28777],{},[618,28778,28779],{},"Boolean",[955,28781,28782],{},[618,28783,965],{},[937,28785,28786,28791,28794,28798],{},[955,28787,28788],{"align":1001},[1705,28789,28790],{},"hologramOpacity",[955,28792,28793],{"align":1001},"Specifies the opacity of the hologram.",[955,28795,28796],{},[618,28797,12623],{},[955,28799,28800],{},[618,28801,14391],{},[937,28803,28804,28809,28812,28816],{},[955,28805,28806],{"align":1001},[1705,28807,28808],{},"blinkFresnelOnly",[955,28810,28811],{"align":1001},"Enables or disables the blinking effect for the Fresnel only.",[955,28813,28814],{},[618,28815,28779],{},[955,28817,28818],{},[618,28819,965],{},[937,28821,28822,28827,28830,28834],{},[955,28823,28824],{"align":1001},[1705,28825,28826],{},"enableAdditive",[955,28828,28829],{"align":1001},"Enables or disables the Additive Blend Mode.",[955,28831,28832],{},[618,28833,28779],{},[955,28835,28836],{},[618,28837,965],{},[937,28839,28840,28844,28847,28852],{},[955,28841,28842],{"align":1001},[1705,28843,27632],{},[955,28845,28846],{"align":1001},"Specifies side for the material, as String.",[955,28848,28849],{},[618,28850,28851],{},"THREE.FrontSide, THREE.BackSide, THREE.DoubleSide",[955,28853,28854],{},[618,28855,28856],{},"FrontSide",[1331,28858,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":28860},[28861,28862,28863],{"id":28412,"depth":578,"text":28413},{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.",{},{"title":183,"description":28864},"qI6m7jV8AEZ5_Ruhn6hSlmpTi7LrcHgetMD_vYArm8Y",{"id":28869,"title":187,"body":28870,"description":29036,"extension":591,"links":592,"meta":29037,"navigation":594,"path":188,"seo":29038,"stem":189,"__hash__":29039},"docs\u002F2.api\u002F4.materials\u002Fmesh-discard-material.md",{"type":501,"value":28871,"toc":29033},[28872,28878,28880,29030],[614,28873,28874,28877],{},[618,28875,28876],{},"\u003CMeshDiscardMaterial \u002F>"," hides the object it's attached to. The object's shadows and children will be rendered.",[504,28879,15],{"id":624},[626,28881,28884],{"className":628,"code":28882,"highlights":28883,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshDiscardMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera \u002F>\n \u003CTresMesh>\n \u003CTresBoxGeometry \u002F>\n \u003CMeshDiscardMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,805],[618,28885,28886,28906,28924,28944,28952,28956,28964,28972,28980,28988,28996,29006,29014,29022],{"__ignoreMap":576},[637,28887,28888,28890,28892,28894,28896,28898,28900,28902,28904],{"class":639,"line":577},[637,28889,643],{"class":642},[637,28891,647],{"class":646},[637,28893,651],{"class":650},[637,28895,654],{"class":650},[637,28897,657],{"class":642},[637,28899,660],{"class":642},[637,28901,664],{"class":663},[637,28903,660],{"class":642},[637,28905,669],{"class":642},[637,28907,28908,28910,28912,28914,28916,28918,28920,28922],{"class":639,"line":578},[637,28909,677],{"class":676},[637,28911,680],{"class":642},[637,28913,715],{"class":683},[637,28915,693],{"class":642},[637,28917,696],{"class":676},[637,28919,699],{"class":642},[637,28921,724],{"class":663},[637,28923,705],{"class":642},[637,28925,28927,28929,28931,28934,28936,28938,28940,28942],{"class":28926,"line":708},[639,673],[637,28928,677],{"class":676},[637,28930,680],{"class":642},[637,28932,28933],{"class":683}," MeshDiscardMaterial",[637,28935,693],{"class":642},[637,28937,696],{"class":676},[637,28939,699],{"class":642},[637,28941,702],{"class":663},[637,28943,705],{"class":642},[637,28945,28946,28948,28950],{"class":639,"line":729},[637,28947,732],{"class":642},[637,28949,647],{"class":646},[637,28951,669],{"class":642},[637,28953,28954],{"class":639,"line":739},[637,28955,742],{"emptyLinePlaceholder":594},[637,28957,28958,28960,28962],{"class":639,"line":745},[637,28959,643],{"class":642},[637,28961,750],{"class":646},[637,28963,669],{"class":642},[637,28965,28966,28968,28970],{"class":639,"line":755},[637,28967,758],{"class":642},[637,28969,761],{"class":646},[637,28971,669],{"class":642},[637,28973,28974,28976,28978],{"class":639,"line":778},[637,28975,781],{"class":642},[637,28977,784],{"class":646},[637,28979,787],{"class":642},[637,28981,28982,28984,28986],{"class":639,"line":790},[637,28983,781],{"class":642},[637,28985,860],{"class":646},[637,28987,669],{"class":642},[637,28989,28990,28992,28994],{"class":639,"line":800},[637,28991,857],{"class":642},[637,28993,871],{"class":646},[637,28995,787],{"class":642},[637,28997,28999,29001,29004],{"class":28998,"line":805},[639,673],[637,29000,857],{"class":642},[637,29002,29003],{"class":646},"MeshDiscardMaterial",[637,29005,787],{"class":642},[637,29007,29008,29010,29012],{"class":639,"line":831},[637,29009,899],{"class":642},[637,29011,860],{"class":646},[637,29013,669],{"class":642},[637,29015,29016,29018,29020],{"class":639,"line":631},[637,29017,909],{"class":642},[637,29019,761],{"class":646},[637,29021,669],{"class":642},[637,29023,29024,29026,29028],{"class":639,"line":854},[637,29025,732],{"class":642},[637,29027,750],{"class":646},[637,29029,669],{"class":642},[1331,29031,29032],{},"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);}",{"title":576,"searchDepth":577,"depth":578,"links":29034},[29035],{"id":624,"depth":578,"text":15},"Hides the object it's attached to while keeping shadows and children visible.",{},{"title":187,"description":29036},"ivSz3UBTzifkzor3XvoS_5CUJD_0d-7Dh7JvwBwFh80",{"id":29041,"title":191,"body":29042,"description":29705,"extension":591,"links":592,"meta":29706,"navigation":594,"path":192,"seo":29707,"stem":193,"__hash__":29708},"docs\u002F2.api\u002F4.materials\u002Fmesh-portal-material.md",{"type":501,"value":29043,"toc":29700},[29044,29049,29057,29073,29085,29087,29434,29436,29529,29533,29543,29619,29663,29687,29697],[608,29045,29046],{},[29047,29048],"materials-mesh-portal-material",{},[614,29050,2867,29051,9768,29053,29056],{},[618,29052,7526],{},[618,29054,29055],{},"\u003CMeshPortalMaterial \u002F>"," component that renders its\ndeclarative children into a private off-main scene and projects that scene onto the\nhost mesh as a perspective-correct window.",[614,29058,29059,29060,29063,29064,29067,29068,29070,29071,5786],{},"Children declared inside the component render into the ",[1705,29061,29062],{},"portal scene",", not the main\nscene. The portal scene is rendered to a frame buffer each frame using the active\ncamera, so contents sit in world-space (move the camera and you get parallax through\nthe surface, not a flat decal). The mesh geometry masks the result, and ",[618,29065,29066],{},"blend","\ncross-fades between the world (",[618,29069,969],{},") and the portal (",[618,29072,1925],{},[2078,29074,29075],{},[614,29076,29077,29078,29084],{},"This component is a port of the ",[1144,29079,29083],{"href":29080,"rel":29081,"target":29082},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fportals\u002Fmesh-portal-material",[1148],"_blank","drei MeshPortalMaterial",". All credit goes to the original authors.",[504,29086,15],{"id":624},[626,29088,29090],{"className":628,"code":29089,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshPortalMaterial, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CTresMesh>\n \u003CTresPlaneGeometry :args=\"[3, 4]\" \u002F>\n \u003CMeshPortalMaterial :blend=\"0\">\n \u003C!-- children render INTO the portal scene -->\n \u003CTresAmbientLight :intensity=\"0.5\" \u002F>\n \u003CTresMesh :position=\"[0, 0, -1]\">\n \u003CTresTorusKnotGeometry :args=\"[0.6, 0.25, 128, 32]\" \u002F>\n \u003CTresMeshStandardMaterial color=\"#fbb03b\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FMeshPortalMaterial>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,29091,29092,29112,29130,29153,29161,29165,29173,29181,29213,29221,29229,29258,29279,29284,29304,29336,29375,29393,29402,29410,29418,29426],{"__ignoreMap":576},[637,29093,29094,29096,29098,29100,29102,29104,29106,29108,29110],{"class":639,"line":577},[637,29095,643],{"class":642},[637,29097,647],{"class":646},[637,29099,651],{"class":650},[637,29101,654],{"class":650},[637,29103,657],{"class":642},[637,29105,660],{"class":642},[637,29107,664],{"class":663},[637,29109,660],{"class":642},[637,29111,669],{"class":642},[637,29113,29114,29116,29118,29120,29122,29124,29126,29128],{"class":639,"line":578},[637,29115,677],{"class":676},[637,29117,680],{"class":642},[637,29119,715],{"class":683},[637,29121,693],{"class":642},[637,29123,696],{"class":676},[637,29125,699],{"class":642},[637,29127,724],{"class":663},[637,29129,705],{"class":642},[637,29131,29132,29134,29136,29139,29141,29143,29145,29147,29149,29151],{"class":639,"line":708},[637,29133,677],{"class":676},[637,29135,680],{"class":642},[637,29137,29138],{"class":683}," MeshPortalMaterial",[637,29140,687],{"class":642},[637,29142,690],{"class":683},[637,29144,693],{"class":642},[637,29146,696],{"class":676},[637,29148,699],{"class":642},[637,29150,702],{"class":663},[637,29152,705],{"class":642},[637,29154,29155,29157,29159],{"class":639,"line":729},[637,29156,732],{"class":642},[637,29158,647],{"class":646},[637,29160,669],{"class":642},[637,29162,29163],{"class":639,"line":739},[637,29164,742],{"emptyLinePlaceholder":594},[637,29166,29167,29169,29171],{"class":639,"line":745},[637,29168,643],{"class":642},[637,29170,750],{"class":646},[637,29172,669],{"class":642},[637,29174,29175,29177,29179],{"class":639,"line":755},[637,29176,758],{"class":642},[637,29178,761],{"class":646},[637,29180,669],{"class":642},[637,29182,29183,29185,29187,29189,29191,29193,29195,29197,29199,29201,29203,29205,29207,29209,29211],{"class":639,"line":778},[637,29184,781],{"class":642},[637,29186,784],{"class":646},[637,29188,813],{"class":642},[637,29190,1491],{"class":650},[637,29192,657],{"class":642},[637,29194,660],{"class":642},[637,29196,1498],{"class":642},[637,29198,969],{"class":823},[637,29200,1503],{"class":642},[637,29202,969],{"class":823},[637,29204,1503],{"class":642},[637,29206,1885],{"class":823},[637,29208,1513],{"class":642},[637,29210,660],{"class":642},[637,29212,787],{"class":642},[637,29214,29215,29217,29219],{"class":639,"line":790},[637,29216,781],{"class":642},[637,29218,795],{"class":646},[637,29220,787],{"class":642},[637,29222,29223,29225,29227],{"class":639,"line":800},[637,29224,781],{"class":642},[637,29226,860],{"class":646},[637,29228,669],{"class":642},[637,29230,29231,29233,29236,29238,29240,29242,29244,29246,29248,29250,29252,29254,29256],{"class":639,"line":805},[637,29232,857],{"class":642},[637,29234,29235],{"class":646},"TresPlaneGeometry",[637,29237,813],{"class":642},[637,29239,2021],{"class":650},[637,29241,657],{"class":642},[637,29243,660],{"class":642},[637,29245,1498],{"class":642},[637,29247,2729],{"class":823},[637,29249,1503],{"class":642},[637,29251,3900],{"class":823},[637,29253,1513],{"class":642},[637,29255,660],{"class":642},[637,29257,787],{"class":642},[637,29259,29260,29262,29265,29267,29269,29271,29273,29275,29277],{"class":639,"line":831},[637,29261,857],{"class":642},[637,29263,29264],{"class":646},"MeshPortalMaterial",[637,29266,813],{"class":642},[637,29268,29066],{"class":650},[637,29270,657],{"class":642},[637,29272,660],{"class":642},[637,29274,969],{"class":823},[637,29276,660],{"class":642},[637,29278,669],{"class":642},[637,29280,29281],{"class":639,"line":631},[637,29282,29283],{"class":1213}," \u003C!-- children render INTO the portal scene -->\n",[637,29285,29286,29288,29290,29292,29294,29296,29298,29300,29302],{"class":639,"line":854},[637,29287,868],{"class":642},[637,29289,10010],{"class":646},[637,29291,813],{"class":642},[637,29293,1918],{"class":650},[637,29295,657],{"class":642},[637,29297,660],{"class":642},[637,29299,1545],{"class":823},[637,29301,660],{"class":642},[637,29303,787],{"class":642},[637,29305,29306,29308,29310,29312,29314,29316,29318,29320,29322,29324,29326,29328,29330,29332,29334],{"class":639,"line":865},[637,29307,868],{"class":642},[637,29309,860],{"class":646},[637,29311,813],{"class":642},[637,29313,1491],{"class":650},[637,29315,657],{"class":642},[637,29317,660],{"class":642},[637,29319,1498],{"class":642},[637,29321,969],{"class":823},[637,29323,1503],{"class":642},[637,29325,969],{"class":823},[637,29327,10090],{"class":642},[637,29329,1925],{"class":823},[637,29331,1513],{"class":642},[637,29333,660],{"class":642},[637,29335,669],{"class":642},[637,29337,29338,29341,29344,29346,29348,29350,29352,29354,29356,29358,29360,29362,29365,29367,29369,29371,29373],{"class":639,"line":876},[637,29339,29340],{"class":642}," \u003C",[637,29342,29343],{"class":646},"TresTorusKnotGeometry",[637,29345,813],{"class":642},[637,29347,2021],{"class":650},[637,29349,657],{"class":642},[637,29351,660],{"class":642},[637,29353,1498],{"class":642},[637,29355,11028],{"class":823},[637,29357,1503],{"class":642},[637,29359,14347],{"class":823},[637,29361,1503],{"class":642},[637,29363,29364],{"class":823},"128",[637,29366,1503],{"class":642},[637,29368,13043],{"class":823},[637,29370,1513],{"class":642},[637,29372,660],{"class":642},[637,29374,787],{"class":642},[637,29376,29377,29379,29381,29383,29385,29387,29389,29391],{"class":639,"line":886},[637,29378,29340],{"class":642},[637,29380,2770],{"class":646},[637,29382,2773],{"class":650},[637,29384,657],{"class":642},[637,29386,660],{"class":642},[637,29388,10533],{"class":663},[637,29390,660],{"class":642},[637,29392,787],{"class":642},[637,29394,29395,29398,29400],{"class":639,"line":632},[637,29396,29397],{"class":642}," \u003C\u002F",[637,29399,860],{"class":646},[637,29401,669],{"class":642},[637,29403,29404,29406,29408],{"class":639,"line":906},[637,29405,889],{"class":642},[637,29407,29264],{"class":646},[637,29409,669],{"class":642},[637,29411,29412,29414,29416],{"class":639,"line":916},[637,29413,899],{"class":642},[637,29415,860],{"class":646},[637,29417,669],{"class":642},[637,29419,29420,29422,29424],{"class":639,"line":2695},[637,29421,909],{"class":642},[637,29423,761],{"class":646},[637,29425,669],{"class":642},[637,29427,29428,29430,29432],{"class":639,"line":2704},[637,29429,732],{"class":642},[637,29431,750],{"class":646},[637,29433,669],{"class":642},[504,29435,926],{"id":925},[931,29437,29438,29450],{},[934,29439,29440],{},[937,29441,29442,29444,29446,29448],{},[940,29443,942],{},[940,29445,6178],{},[940,29447,948],{},[940,29449,945],{},[950,29451,29452,29474,29493,29511],{},[937,29453,29454,29458,29462,29466],{},[955,29455,29456],{},[618,29457,29066],{},[955,29459,29460],{},[618,29461,5564],{},[955,29463,29464],{},[618,29465,969],{},[955,29467,29468,29470,29471,29473],{},[618,29469,969],{}," = world only, ",[618,29472,1925],{}," = portal only; cross-fades between.",[937,29475,29476,29481,29485,29490],{},[955,29477,29478],{},[618,29479,29480],{},"resolution",[955,29482,29483],{},[618,29484,5564],{},[955,29486,29487],{},[618,29488,29489],{},"512",[955,29491,29492],{},"Frame buffer resolution for the portal render.",[937,29494,29495,29500,29504,29508],{},[955,29496,29497],{},[618,29498,29499],{},"worldUnits",[955,29501,29502],{},[618,29503,18466],{},[955,29505,29506],{},[618,29507,975],{},[955,29509,29510],{},"Keep portal contents in world units instead of host-relative.",[937,29512,29513,29518,29522,29526],{},[955,29514,29515],{},[618,29516,29517],{},"renderPriority",[955,29519,29520],{},[618,29521,5564],{},[955,29523,29524],{},[618,29525,969],{},[955,29527,29528],{},"Render-loop priority for the blend takeover. Applied at mount — changing it later requires a remount.",[504,29530,29532],{"id":29531},"setting-the-portals-background-or-environment","Setting the portal's background or environment",[614,29534,29535,29538,29539,29542],{},[618,29536,29537],{},"\u003CMeshPortalMaterial>"," overrides the injected scene context for its children, so\nhelpers that target \"the scene\" affect the ",[1705,29540,29541],{},"portal"," scene, not the world. Both of\nthese give the portal its own look, independent of the main scene:",[626,29544,29546],{"className":628,"code":29545,"language":633,"meta":576,"style":576},"\u003CMeshPortalMaterial :blend=\"blend\">\n \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n \u003CSuspense>\n \u003CEnvironment preset=\"dawn\" :background=\"true\" \u002F>\n \u003C\u002FSuspense>\n\n \u003C!-- Or declarative attach (also lands on the portal scene) -->\n \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" \u002F>\n\n \u003C!-- ...portal scene contents... -->\n\u003C\u002FMeshPortalMaterial>\n",[618,29547,29548,29568,29573,29578,29583,29588,29592,29597,29602,29606,29611],{"__ignoreMap":576},[637,29549,29550,29552,29554,29556,29558,29560,29562,29564,29566],{"class":639,"line":577},[637,29551,643],{"class":642},[637,29553,29264],{"class":646},[637,29555,813],{"class":642},[637,29557,29066],{"class":650},[637,29559,657],{"class":642},[637,29561,660],{"class":642},[637,29563,29066],{"class":683},[637,29565,660],{"class":642},[637,29567,669],{"class":642},[637,29569,29570],{"class":639,"line":578},[637,29571,29572],{"class":683}," \u003C!-- Imperative helper — works because the injected scene is the portal scene -->\n",[637,29574,29575],{"class":639,"line":708},[637,29576,29577],{"class":683}," \u003CSuspense>\n",[637,29579,29580],{"class":639,"line":729},[637,29581,29582],{"class":683}," \u003CEnvironment preset=\"dawn\" :background=\"true\" \u002F>\n",[637,29584,29585],{"class":639,"line":739},[637,29586,29587],{"class":683}," \u003C\u002FSuspense>\n",[637,29589,29590],{"class":639,"line":745},[637,29591,742],{"emptyLinePlaceholder":594},[637,29593,29594],{"class":639,"line":755},[637,29595,29596],{"class":683}," \u003C!-- Or declarative attach (also lands on the portal scene) -->\n",[637,29598,29599],{"class":639,"line":778},[637,29600,29601],{"class":683}," \u003CTresColor attach=\"background\" :args=\"[0.1, 0.1, 0.18]\" \u002F>\n",[637,29603,29604],{"class":639,"line":790},[637,29605,742],{"emptyLinePlaceholder":594},[637,29607,29608],{"class":639,"line":800},[637,29609,29610],{"class":683}," \u003C!-- ...portal scene contents... -->\n",[637,29612,29613,29615,29617],{"class":639,"line":805},[637,29614,732],{"class":642},[637,29616,29264],{"class":646},[637,29618,669],{"class":642},[2078,29620,29621],{},[614,29622,29623,29626,29627,29630,29631,29633,29634,8769,29637,29640,29641,8769,29644,29647,29648,29651,29652,29655,29656,29659,29660,29662],{},[1705,29624,29625],{},"How it works:"," the component ",[618,29628,29629],{},"provide()","s a context whose ",[618,29632,19399],{}," points at the\nprivate portal scene. Vue's ",[618,29635,29636],{},"provide",[618,29638,29639],{},"inject"," follows the mounted tree (it reaches\nslot content through the internal ",[618,29642,29643],{},"\u003CTresPortal>",[618,29645,29646],{},"\u003CTeleport>","), so both imperative\nhelpers (",[618,29649,29650],{},"useTres().scene",", e.g. ",[618,29653,29654],{},"\u003CEnvironment>",") and declarative ",[618,29657,29658],{},"attach"," configure\nthe portal scene. Only the ",[618,29661,19399],{}," is swapped — renderer, camera and sizes are shared.",[3292,29664,29665],{},[614,29666,29667,29670,29671,29673,29674,29677,29678,29680,29681,29686],{},[1705,29668,29669],{},"On-demand rendering:"," the portal renders its scene to a frame buffer on every\nframe so the window keeps tracking animated contents and the ",[618,29672,29066],{}," takeover stays\nin sync. To do this it calls ",[618,29675,29676],{},"invalidate()"," each frame, which keeps the render loop\nrunning continuously — a mesh using ",[618,29679,29537],{}," effectively opts out of\n",[1144,29682,29685],{"href":29683,"rel":29684,"target":29082},"https:\u002F\u002Fdocs.tresjs.org\u002Fapi\u002Fadvanced\u002Fperformance#mode-on-demand",[1148],"on-demand rendering"," while mounted.",[2078,29688,29689],{},[614,29690,29691,3287,29694,29696],{},[1705,29692,29693],{},"Limitations (MVP):",[618,29695,22717],{}," (edge fade) and pointer-event forwarding into the\nportal scene are not yet implemented. WebGPU is not yet supported.",[1331,29698,29699],{},"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 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 .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);}",{"title":576,"searchDepth":577,"depth":578,"links":29701},[29702,29703,29704],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":29531,"depth":578,"text":29532},"Render a separate child scene into a portal surface, perspective-correct and masked by the mesh. Ported from drei.",{},{"title":191,"description":29705},"7zD0xygyddUlqsFxPuRB8bQ94GVfdpStKa3D_zel7Fo",{"id":29710,"title":195,"body":29711,"description":30531,"extension":591,"links":592,"meta":30532,"navigation":594,"path":196,"seo":30533,"stem":197,"__hash__":30534},"docs\u002F2.api\u002F4.materials\u002Fmesh-reflection-material.md",{"type":501,"value":29712,"toc":30527},[29713,29718,29729,29738,29745,29747,30232,30234,30504,30525],[608,29714,29715],{},[29716,29717],"materials-mesh-reflection-material",{},[614,29719,2867,29720,9768,29722,29725,29726,1150],{},[618,29721,7526],{},[618,29723,29724],{},"\u003CMeshReflectionMaterial \u002F>"," component for making floors or walls that reflect the objects in your ",[618,29727,29728],{},"Scene",[614,29730,29731,29732,29737],{},"The component is based on the excellent ",[1144,29733,29736],{"href":29734,"rel":29735},"https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fdrei",[1148],"Drei"," component of the same name.",[614,29739,29740,29741,29744],{},"It extends ",[618,29742,29743],{},"THREE.MeshStandardMaterial"," and accepts all the same props.",[504,29746,15],{"id":624},[626,29748,29751],{"className":628,"code":29749,"highlights":29750,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshReflectionMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n \u003CTresMesh :rotation=\"[-Math.PI \u002F 2, 0, 0]\">\n \u003CTresPlaneGeometry :args=\"[10, 10]\" \u002F>\n \u003CMeshReflectionMaterial\n :blur=\"[300, 100]\"\n :mixBlur=\"30\"\n :mixStrength=\"80\"\n :mixContrast=\"1\"\n color=\"#a0a0a0\"\n metalness=\"0.5\"\n roughness=\"1\"\n mirror=\"0\"\n \u002F>\n \u003C\u002FTresMesh>\n \u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,876,886,632,906],[618,29752,29753,29773,29791,29811,29819,29823,29831,29839,29895,29937,29965,29972,29995,30011,30027,30042,30056,30070,30084,30098,30102,30110,30142,30150,30168,30176,30184,30216,30224],{"__ignoreMap":576},[637,29754,29755,29757,29759,29761,29763,29765,29767,29769,29771],{"class":639,"line":577},[637,29756,643],{"class":642},[637,29758,647],{"class":646},[637,29760,651],{"class":650},[637,29762,654],{"class":650},[637,29764,657],{"class":642},[637,29766,660],{"class":642},[637,29768,664],{"class":663},[637,29770,660],{"class":642},[637,29772,669],{"class":642},[637,29774,29775,29777,29779,29781,29783,29785,29787,29789],{"class":639,"line":578},[637,29776,677],{"class":676},[637,29778,680],{"class":642},[637,29780,715],{"class":683},[637,29782,693],{"class":642},[637,29784,696],{"class":676},[637,29786,699],{"class":642},[637,29788,724],{"class":663},[637,29790,705],{"class":642},[637,29792,29794,29796,29798,29801,29803,29805,29807,29809],{"class":29793,"line":708},[639,673],[637,29795,677],{"class":676},[637,29797,680],{"class":642},[637,29799,29800],{"class":683}," MeshReflectionMaterial",[637,29802,693],{"class":642},[637,29804,696],{"class":676},[637,29806,699],{"class":642},[637,29808,702],{"class":663},[637,29810,705],{"class":642},[637,29812,29813,29815,29817],{"class":639,"line":729},[637,29814,732],{"class":642},[637,29816,647],{"class":646},[637,29818,669],{"class":642},[637,29820,29821],{"class":639,"line":739},[637,29822,742],{"emptyLinePlaceholder":594},[637,29824,29825,29827,29829],{"class":639,"line":745},[637,29826,643],{"class":642},[637,29828,750],{"class":646},[637,29830,669],{"class":642},[637,29832,29833,29835,29837],{"class":639,"line":755},[637,29834,758],{"class":642},[637,29836,761],{"class":646},[637,29838,669],{"class":642},[637,29840,29841,29843,29845,29847,29849,29851,29853,29855,29857,29859,29861,29863,29865,29867,29869,29871,29873,29875,29877,29879,29881,29883,29885,29887,29889,29891,29893],{"class":639,"line":778},[637,29842,781],{"class":642},[637,29844,784],{"class":646},[637,29846,813],{"class":642},[637,29848,1491],{"class":650},[637,29850,657],{"class":642},[637,29852,660],{"class":642},[637,29854,1498],{"class":642},[637,29856,2729],{"class":823},[637,29858,1503],{"class":642},[637,29860,2729],{"class":823},[637,29862,1503],{"class":642},[637,29864,2729],{"class":823},[637,29866,1513],{"class":642},[637,29868,660],{"class":642},[637,29870,813],{"class":642},[637,29872,9933],{"class":650},[637,29874,657],{"class":642},[637,29876,660],{"class":642},[637,29878,1498],{"class":642},[637,29880,969],{"class":823},[637,29882,1503],{"class":642},[637,29884,969],{"class":823},[637,29886,1503],{"class":642},[637,29888,969],{"class":823},[637,29890,1513],{"class":642},[637,29892,660],{"class":642},[637,29894,787],{"class":642},[637,29896,29897,29899,29901,29903,29905,29907,29909,29911,29914,29916,29919,29921,29923,29925,29927,29929,29931,29933,29935],{"class":639,"line":790},[637,29898,781],{"class":642},[637,29900,860],{"class":646},[637,29902,813],{"class":642},[637,29904,5838],{"class":650},[637,29906,657],{"class":642},[637,29908,660],{"class":642},[637,29910,3947],{"class":642},[637,29912,29913],{"class":683},"Math",[637,29915,1150],{"class":642},[637,29917,29918],{"class":683},"PI",[637,29920,3429],{"class":642},[637,29922,824],{"class":823},[637,29924,1503],{"class":642},[637,29926,969],{"class":823},[637,29928,1503],{"class":642},[637,29930,969],{"class":823},[637,29932,1513],{"class":642},[637,29934,660],{"class":642},[637,29936,669],{"class":642},[637,29938,29939,29941,29943,29945,29947,29949,29951,29953,29955,29957,29959,29961,29963],{"class":639,"line":800},[637,29940,857],{"class":642},[637,29942,29235],{"class":646},[637,29944,813],{"class":642},[637,29946,2021],{"class":650},[637,29948,657],{"class":642},[637,29950,660],{"class":642},[637,29952,1498],{"class":642},[637,29954,1510],{"class":823},[637,29956,1503],{"class":642},[637,29958,1510],{"class":823},[637,29960,1513],{"class":642},[637,29962,660],{"class":642},[637,29964,787],{"class":642},[637,29966,29967,29969],{"class":639,"line":805},[637,29968,857],{"class":642},[637,29970,29971],{"class":646},"MeshReflectionMaterial\n",[637,29973,29974,29976,29978,29980,29982,29984,29987,29989,29991,29993],{"class":639,"line":831},[637,29975,8241],{"class":642},[637,29977,22717],{"class":650},[637,29979,657],{"class":642},[637,29981,660],{"class":642},[637,29983,1498],{"class":642},[637,29985,29986],{"class":823},"300",[637,29988,1503],{"class":642},[637,29990,11706],{"class":823},[637,29992,1513],{"class":642},[637,29994,3224],{"class":642},[637,29996,29997,29999,30002,30004,30006,30009],{"class":639,"line":631},[637,29998,8241],{"class":642},[637,30000,30001],{"class":650},"mixBlur",[637,30003,657],{"class":642},[637,30005,660],{"class":642},[637,30007,30008],{"class":823},"30",[637,30010,3224],{"class":642},[637,30012,30013,30015,30018,30020,30022,30025],{"class":639,"line":854},[637,30014,8241],{"class":642},[637,30016,30017],{"class":650},"mixStrength",[637,30019,657],{"class":642},[637,30021,660],{"class":642},[637,30023,30024],{"class":823},"80",[637,30026,3224],{"class":642},[637,30028,30029,30031,30034,30036,30038,30040],{"class":639,"line":865},[637,30030,8241],{"class":642},[637,30032,30033],{"class":650},"mixContrast",[637,30035,657],{"class":642},[637,30037,660],{"class":642},[637,30039,1925],{"class":823},[637,30041,3224],{"class":642},[637,30043,30045,30047,30049,30051,30054],{"class":30044,"line":876},[639,673],[637,30046,8943],{"class":650},[637,30048,657],{"class":642},[637,30050,660],{"class":642},[637,30052,30053],{"class":663},"#a0a0a0",[637,30055,3224],{"class":642},[637,30057,30059,30062,30064,30066,30068],{"class":30058,"line":886},[639,673],[637,30060,30061],{"class":650}," metalness",[637,30063,657],{"class":642},[637,30065,660],{"class":642},[637,30067,1545],{"class":663},[637,30069,3224],{"class":642},[637,30071,30073,30076,30078,30080,30082],{"class":30072,"line":632},[639,673],[637,30074,30075],{"class":650}," roughness",[637,30077,657],{"class":642},[637,30079,660],{"class":642},[637,30081,1925],{"class":663},[637,30083,3224],{"class":642},[637,30085,30087,30090,30092,30094,30096],{"class":30086,"line":906},[639,673],[637,30088,30089],{"class":650}," mirror",[637,30091,657],{"class":642},[637,30093,660],{"class":642},[637,30095,969],{"class":663},[637,30097,3224],{"class":642},[637,30099,30100],{"class":639,"line":916},[637,30101,8295],{"class":642},[637,30103,30104,30106,30108],{"class":639,"line":2695},[637,30105,899],{"class":642},[637,30107,860],{"class":646},[637,30109,669],{"class":642},[637,30111,30112,30114,30116,30118,30120,30122,30124,30126,30128,30130,30132,30134,30136,30138,30140],{"class":639,"line":2704},[637,30113,781],{"class":642},[637,30115,860],{"class":646},[637,30117,813],{"class":642},[637,30119,1491],{"class":650},[637,30121,657],{"class":642},[637,30123,660],{"class":642},[637,30125,1498],{"class":642},[637,30127,969],{"class":823},[637,30129,1503],{"class":642},[637,30131,1925],{"class":823},[637,30133,1503],{"class":642},[637,30135,969],{"class":823},[637,30137,1513],{"class":642},[637,30139,660],{"class":642},[637,30141,669],{"class":642},[637,30143,30144,30146,30148],{"class":639,"line":2738},[637,30145,857],{"class":642},[637,30147,871],{"class":646},[637,30149,787],{"class":642},[637,30151,30152,30154,30156,30158,30160,30162,30164,30166],{"class":639,"line":2747},[637,30153,857],{"class":642},[637,30155,2770],{"class":646},[637,30157,2773],{"class":650},[637,30159,657],{"class":642},[637,30161,660],{"class":642},[637,30163,14044],{"class":663},[637,30165,660],{"class":642},[637,30167,787],{"class":642},[637,30169,30170,30172,30174],{"class":639,"line":2756},[637,30171,899],{"class":642},[637,30173,860],{"class":646},[637,30175,669],{"class":642},[637,30177,30178,30180,30182],{"class":639,"line":2765},[637,30179,781],{"class":642},[637,30181,10010],{"class":646},[637,30183,787],{"class":642},[637,30185,30186,30188,30190,30192,30194,30196,30198,30200,30202,30204,30206,30208,30210,30212,30214],{"class":639,"line":2787},[637,30187,781],{"class":642},[637,30189,10031],{"class":646},[637,30191,813],{"class":642},[637,30193,1491],{"class":650},[637,30195,657],{"class":642},[637,30197,660],{"class":642},[637,30199,1498],{"class":642},[637,30201,969],{"class":823},[637,30203,1503],{"class":642},[637,30205,824],{"class":823},[637,30207,1503],{"class":642},[637,30209,3900],{"class":823},[637,30211,1513],{"class":642},[637,30213,660],{"class":642},[637,30215,787],{"class":642},[637,30217,30218,30220,30222],{"class":639,"line":2838},[637,30219,909],{"class":642},[637,30221,761],{"class":646},[637,30223,669],{"class":642},[637,30225,30226,30228,30230],{"class":639,"line":2847},[637,30227,732],{"class":642},[637,30229,750],{"class":646},[637,30231,669],{"class":642},[504,30233,926],{"id":925},[931,30235,30236,30246],{},[934,30237,30238],{},[937,30239,30240,30242,30244],{},[940,30241,8360],{"align":1001},[940,30243,945],{"align":1001},[940,30245,948],{},[950,30247,30248,30262,30276,30290,30307,30321,30335,30349,30363,30377,30394,30408,30422,30436,30460,30474,30490],{},[937,30249,30250,30254,30257],{},[955,30251,30252],{"align":1001},[618,30253,29480],{},[955,30255,30256],{"align":1001},"Length in pixels of one side of the square reflective textures",[955,30258,30259],{},[618,30260,30261],{},"256",[937,30263,30264,30269,30272],{},[955,30265,30266],{"align":1001},[618,30267,30268],{},"mix",[955,30270,30271],{"align":1001},"Overall strength of the reflection",[955,30273,30274],{},[618,30275,1925],{},[937,30277,30278,30283,30286],{},[955,30279,30280],{"align":1001},[618,30281,30282],{},"sharpMix",[955,30284,30285],{"align":1001},"Strength of the sharp reflection on smooth surfaces",[955,30287,30288],{},[618,30289,1925],{},[937,30291,30292,30297,30303],{},[955,30293,30294],{"align":1001},[618,30295,30296],{},"sharpDepthScale",[955,30298,30299,30300,30302],{"align":1001},"Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[618,30301,969],{},", a depth texture will be created",[955,30304,30305],{},[618,30306,1925],{},[937,30308,30309,30314,30317],{},[955,30310,30311],{"align":1001},[618,30312,30313],{},"sharpDepthBias",[955,30315,30316],{"align":1001},"Sharp reflection depth falloff bias",[955,30318,30319],{},[618,30320,969],{},[937,30322,30323,30328,30331],{},[955,30324,30325],{"align":1001},[618,30326,30327],{},"sharpDepthEdgeMin",[955,30329,30330],{"align":1001},"Sharp reflection depth falloff start",[955,30332,30333],{},[618,30334,969],{},[937,30336,30337,30342,30345],{},[955,30338,30339],{"align":1001},[618,30340,30341],{},"sharpDepthEdgeMax",[955,30343,30344],{"align":1001},"Sharp reflection depth falloff end",[955,30346,30347],{},[618,30348,5938],{},[937,30350,30351,30356,30359],{},[955,30352,30353],{"align":1001},[618,30354,30355],{},"blurMixSmooth",[955,30357,30358],{"align":1001},"Strength of the blurred reflection on smooth surfaces",[955,30360,30361],{},[618,30362,1925],{},[937,30364,30365,30370,30373],{},[955,30366,30367],{"align":1001},[618,30368,30369],{},"blurMixRough",[955,30371,30372],{"align":1001},"Strength of the blurred reflection on rough surfaces",[955,30374,30375],{},[618,30376,1925],{},[937,30378,30379,30384,30390],{},[955,30380,30381],{"align":1001},[618,30382,30383],{},"blurDepthScale",[955,30385,30386,30387,30389],{"align":1001},"Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than ",[618,30388,969],{},", depth texture will be rendered",[955,30391,30392],{},[618,30393,1925],{},[937,30395,30396,30401,30404],{},[955,30397,30398],{"align":1001},[618,30399,30400],{},"blurDepthBias",[955,30402,30403],{"align":1001},"Blurred reflection depth spread bias",[955,30405,30406],{},[618,30407,969],{},[937,30409,30410,30415,30418],{},[955,30411,30412],{"align":1001},[618,30413,30414],{},"blurDepthEdgeMin",[955,30416,30417],{"align":1001},"Blurred reflection depth spread start",[955,30419,30420],{},[618,30421,969],{},[937,30423,30424,30429,30432],{},[955,30425,30426],{"align":1001},[618,30427,30428],{},"blurDepthEdgeMax",[955,30430,30431],{"align":1001},"Blurred reflection depth spread end",[955,30433,30434],{},[618,30435,5938],{},[937,30437,30438,30443,30456],{},[955,30439,30440],{"align":1001},[618,30441,30442],{},"blurSize",[955,30444,30445,30446,30449,30450,5822,30453,30455],{"align":1001},"Size of the blur. If ",[618,30447,30448],{},"[number, number]",", first number is width, second is height. Performance note: if other than ",[618,30451,30452],{},"[0, 0]",[618,30454,969],{},", a blur texture will be rendered",[955,30457,30458],{},[618,30459,30452],{},[937,30461,30462,30467,30470],{},[955,30463,30464],{"align":1001},[618,30465,30466],{},"distortionMap",[955,30468,30469],{"align":1001},"Texture for offsetting the reflection",[955,30471,30472],{},[618,30473,1183],{},[937,30475,30476,30481,30486],{},[955,30477,30478],{"align":1001},[618,30479,30480],{},"distortion",[955,30482,30483,30484],{"align":1001},"Influence of ",[618,30485,30466],{},[955,30487,30488],{},[618,30489,969],{},[937,30491,30492,30497,30500],{},[955,30493,30494],{"align":1001},[618,30495,30496],{},"reflectorOffset",[955,30498,30499],{"align":1001},"Offsets the reflection",[955,30501,30502],{},[618,30503,969],{},[614,30505,30506,30507,30509,30510,1503,30512,1503,30514,1503,30516,1503,30518,1503,30520,1503,30522,30524],{},"Additionally, the component extends ",[618,30508,29743],{}," and accepts all the same props including ",[618,30511,7770],{},[618,30513,22499],{},[618,30515,22484],{},[618,30517,2825],{},[618,30519,22384],{},[618,30521,22403],{},[618,30523,22422],{},", and more.",[1331,30526,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":30528},[30529,30530],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Makes floors or walls that reflect the objects in your Scene.",{},{"title":195,"description":30531},"SmQ10ERsYJAK7ytDjV3ZCr9APJRPR6MGXbpwBm6D2G8",{"id":30536,"title":199,"body":30537,"description":31334,"extension":591,"links":592,"meta":31335,"navigation":594,"path":200,"seo":31336,"stem":201,"__hash__":31337},"docs\u002F2.api\u002F4.materials\u002Fmesh-transmission-material.md",{"type":501,"value":30538,"toc":31329},[30539,30544,30552,30559,30568,30570,30863,30865,31286,31291,31293,31327],[608,30540,30541],{},[30542,30543],"materials-mesh-transmission-material",{},[614,30545,2867,30546,9768,30548,30551],{},[618,30547,7526],{},[618,30549,30550],{},"\u003CMeshTransmissionMaterial \u002F>"," component that produces high-quality glass and transmission effects.",[614,30553,30554,30555,30558],{},"The material renders the scene into a buffer texture each frame to simulate refraction, chromatic aberration, distortion, and anisotropic blur, effects that ",[618,30556,30557],{},"\u003CTresMeshPhysicalMaterial>"," alone cannot achieve.",[2078,30560,30561],{},[614,30562,29077,30563,29084],{},[1144,30564,30567],{"href":30565,"rel":30566,"target":29082},"https:\u002F\u002Fdrei.docs.pmnd.rs\u002Fshaders\u002Fmesh-transmission-material",[1148],"drei MeshTransmissionMaterial",[504,30569,15],{"id":624},[626,30571,30574],{"className":628,"code":30572,"highlights":30573,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshTransmissionMaterial, Environment } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" \u002F>\n \u003CEnvironment preset=\"city\" \u002F>\n \u003CTresMesh>\n \u003CTresTorusKnotGeometry :args=\"[1, 0.3, 128, 32]\" \u002F>\n \u003CMeshTransmissionMaterial\n :transmission=\"1\"\n :thickness=\"0.5\"\n :chromatic-aberration=\"0.03\"\n :resolution=\"512\"\n \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800,805,831,631,854,865,876],[618,30575,30576,30596,30614,30638,30646,30650,30658,30666,30698,30717,30726,30764,30772,30788,30803,30820,30835,30839,30847,30855],{"__ignoreMap":576},[637,30577,30578,30580,30582,30584,30586,30588,30590,30592,30594],{"class":639,"line":577},[637,30579,643],{"class":642},[637,30581,647],{"class":646},[637,30583,651],{"class":650},[637,30585,654],{"class":650},[637,30587,657],{"class":642},[637,30589,660],{"class":642},[637,30591,664],{"class":663},[637,30593,660],{"class":642},[637,30595,669],{"class":642},[637,30597,30598,30600,30602,30604,30606,30608,30610,30612],{"class":639,"line":578},[637,30599,677],{"class":676},[637,30601,680],{"class":642},[637,30603,715],{"class":683},[637,30605,693],{"class":642},[637,30607,696],{"class":676},[637,30609,699],{"class":642},[637,30611,724],{"class":663},[637,30613,705],{"class":642},[637,30615,30617,30619,30621,30624,30626,30628,30630,30632,30634,30636],{"class":30616,"line":708},[639,673],[637,30618,677],{"class":676},[637,30620,680],{"class":642},[637,30622,30623],{"class":683}," MeshTransmissionMaterial",[637,30625,687],{"class":642},[637,30627,21984],{"class":683},[637,30629,693],{"class":642},[637,30631,696],{"class":676},[637,30633,699],{"class":642},[637,30635,702],{"class":663},[637,30637,705],{"class":642},[637,30639,30640,30642,30644],{"class":639,"line":729},[637,30641,732],{"class":642},[637,30643,647],{"class":646},[637,30645,669],{"class":642},[637,30647,30648],{"class":639,"line":739},[637,30649,742],{"emptyLinePlaceholder":594},[637,30651,30652,30654,30656],{"class":639,"line":745},[637,30653,643],{"class":642},[637,30655,750],{"class":646},[637,30657,669],{"class":642},[637,30659,30660,30662,30664],{"class":639,"line":755},[637,30661,758],{"class":642},[637,30663,761],{"class":646},[637,30665,669],{"class":642},[637,30667,30668,30670,30672,30674,30676,30678,30680,30682,30684,30686,30688,30690,30692,30694,30696],{"class":639,"line":778},[637,30669,781],{"class":642},[637,30671,784],{"class":646},[637,30673,813],{"class":642},[637,30675,1491],{"class":650},[637,30677,657],{"class":642},[637,30679,660],{"class":642},[637,30681,1498],{"class":642},[637,30683,969],{"class":823},[637,30685,1503],{"class":642},[637,30687,969],{"class":823},[637,30689,1503],{"class":642},[637,30691,7666],{"class":823},[637,30693,1513],{"class":642},[637,30695,660],{"class":642},[637,30697,787],{"class":642},[637,30699,30700,30702,30704,30706,30708,30710,30713,30715],{"class":639,"line":790},[637,30701,781],{"class":642},[637,30703,375],{"class":646},[637,30705,22700],{"class":650},[637,30707,657],{"class":642},[637,30709,660],{"class":642},[637,30711,30712],{"class":663},"city",[637,30714,660],{"class":642},[637,30716,787],{"class":642},[637,30718,30720,30722,30724],{"class":30719,"line":800},[639,673],[637,30721,781],{"class":642},[637,30723,860],{"class":646},[637,30725,669],{"class":642},[637,30727,30729,30731,30733,30735,30737,30739,30741,30743,30745,30747,30750,30752,30754,30756,30758,30760,30762],{"class":30728,"line":805},[639,673],[637,30730,857],{"class":642},[637,30732,29343],{"class":646},[637,30734,813],{"class":642},[637,30736,2021],{"class":650},[637,30738,657],{"class":642},[637,30740,660],{"class":642},[637,30742,1498],{"class":642},[637,30744,1925],{"class":823},[637,30746,1503],{"class":642},[637,30748,30749],{"class":823},"0.3",[637,30751,1503],{"class":642},[637,30753,29364],{"class":823},[637,30755,1503],{"class":642},[637,30757,13043],{"class":823},[637,30759,1513],{"class":642},[637,30761,660],{"class":642},[637,30763,787],{"class":642},[637,30765,30767,30769],{"class":30766,"line":831},[639,673],[637,30768,857],{"class":642},[637,30770,30771],{"class":646},"MeshTransmissionMaterial\n",[637,30773,30775,30777,30780,30782,30784,30786],{"class":30774,"line":631},[639,673],[637,30776,8241],{"class":642},[637,30778,30779],{"class":650},"transmission",[637,30781,657],{"class":642},[637,30783,660],{"class":642},[637,30785,1925],{"class":823},[637,30787,3224],{"class":642},[637,30789,30791,30793,30795,30797,30799,30801],{"class":30790,"line":854},[639,673],[637,30792,8241],{"class":642},[637,30794,11997],{"class":650},[637,30796,657],{"class":642},[637,30798,660],{"class":642},[637,30800,1545],{"class":823},[637,30802,3224],{"class":642},[637,30804,30806,30808,30811,30813,30815,30818],{"class":30805,"line":865},[639,673],[637,30807,8241],{"class":642},[637,30809,30810],{"class":650},"chromatic-aberration",[637,30812,657],{"class":642},[637,30814,660],{"class":642},[637,30816,30817],{"class":823},"0.03",[637,30819,3224],{"class":642},[637,30821,30823,30825,30827,30829,30831,30833],{"class":30822,"line":876},[639,673],[637,30824,8241],{"class":642},[637,30826,29480],{"class":650},[637,30828,657],{"class":642},[637,30830,660],{"class":642},[637,30832,29489],{"class":823},[637,30834,3224],{"class":642},[637,30836,30837],{"class":639,"line":886},[637,30838,8295],{"class":642},[637,30840,30841,30843,30845],{"class":639,"line":632},[637,30842,899],{"class":642},[637,30844,860],{"class":646},[637,30846,669],{"class":642},[637,30848,30849,30851,30853],{"class":639,"line":906},[637,30850,909],{"class":642},[637,30852,761],{"class":646},[637,30854,669],{"class":642},[637,30856,30857,30859,30861],{"class":639,"line":916},[637,30858,732],{"class":642},[637,30860,750],{"class":646},[637,30862,669],{"class":642},[504,30864,926],{"id":925},[931,30866,30867,30880],{},[934,30868,30869],{},[937,30870,30871,30873,30875,30877],{},[940,30872,942],{"align":1001},[940,30874,945],{"align":1001},[940,30876,6178],{"align":1001},[940,30878,948],{"align":30879},"center",[950,30881,30882,30903,30920,30937,30955,30973,30990,31008,31026,31044,31061,31079,31097,31115,31133,31151,31169,31186,31206,31225,31244,31265],{},[937,30883,30884,30888,30895,30899],{},[955,30885,30886],{"align":1001},[618,30887,30779],{},[955,30889,30890,30891,30894],{"align":1001},"Glass opacity (maps to the internal ",[618,30892,30893],{},"_transmission"," uniform)",[955,30896,30897],{"align":1001},[618,30898,5564],{},[955,30900,30901],{"align":30879},[618,30902,1925],{},[937,30904,30905,30909,30912,30916],{},[955,30906,30907],{"align":1001},[618,30908,11997],{},[955,30910,30911],{"align":1001},"Thickness of the glass volume",[955,30913,30914],{"align":1001},[618,30915,5564],{},[955,30917,30918],{"align":30879},[618,30919,969],{},[937,30921,30922,30926,30929,30933],{},[955,30923,30924],{"align":1001},[618,30925,22499],{},[955,30927,30928],{"align":1001},"Surface roughness",[955,30930,30931],{"align":1001},[618,30932,5564],{},[955,30934,30935],{"align":30879},[618,30936,969],{},[937,30938,30939,30944,30947,30951],{},[955,30940,30941],{"align":1001},[618,30942,30943],{},"chromaticAberration",[955,30945,30946],{"align":1001},"Chromatic aberration intensity",[955,30948,30949],{"align":1001},[618,30950,5564],{},[955,30952,30953],{"align":30879},[618,30954,30817],{},[937,30956,30957,30962,30965,30969],{},[955,30958,30959],{"align":1001},[618,30960,30961],{},"anisotropicBlur",[955,30963,30964],{"align":1001},"Anisotropic blur amount",[955,30966,30967],{"align":1001},[618,30968,5564],{},[955,30970,30971],{"align":30879},[618,30972,2235],{},[937,30974,30975,30979,30982,30986],{},[955,30976,30977],{"align":1001},[618,30978,30480],{},[955,30980,30981],{"align":1001},"Distortion amount",[955,30983,30984],{"align":1001},[618,30985,5564],{},[955,30987,30988],{"align":30879},[618,30989,969],{},[937,30991,30992,30997,31000,31004],{},[955,30993,30994],{"align":1001},[618,30995,30996],{},"distortionScale",[955,30998,30999],{"align":1001},"Scale of the distortion noise",[955,31001,31002],{"align":1001},[618,31003,5564],{},[955,31005,31006],{"align":30879},[618,31007,1545],{},[937,31009,31010,31015,31018,31022],{},[955,31011,31012],{"align":1001},[618,31013,31014],{},"temporalDistortion",[955,31016,31017],{"align":1001},"Animates the distortion over time",[955,31019,31020],{"align":1001},[618,31021,5564],{},[955,31023,31024],{"align":30879},[618,31025,969],{},[937,31027,31028,31033,31036,31040],{},[955,31029,31030],{"align":1001},[618,31031,31032],{},"ior",[955,31034,31035],{"align":1001},"Index of refraction",[955,31037,31038],{"align":1001},[618,31039,5564],{},[955,31041,31042],{"align":30879},[618,31043,17251],{},[937,31045,31046,31050,31053,31057],{},[955,31047,31048],{"align":1001},[618,31049,7770],{},[955,31051,31052],{"align":1001},"Base color of the glass",[955,31054,31055],{"align":1001},[618,31056,7785],{},[955,31058,31059],{"align":30879},[618,31060,2780],{},[937,31062,31063,31068,31071,31075],{},[955,31064,31065],{"align":1001},[618,31066,31067],{},"clearcoat",[955,31069,31070],{"align":1001},"Clearcoat layer intensity",[955,31072,31073],{"align":1001},[618,31074,5564],{},[955,31076,31077],{"align":30879},[618,31078,969],{},[937,31080,31081,31086,31089,31093],{},[955,31082,31083],{"align":1001},[618,31084,31085],{},"clearcoatRoughness",[955,31087,31088],{"align":1001},"Clearcoat roughness",[955,31090,31091],{"align":1001},[618,31092,5564],{},[955,31094,31095],{"align":30879},[618,31096,969],{},[937,31098,31099,31104,31107,31111],{},[955,31100,31101],{"align":1001},[618,31102,31103],{},"attenuationDistance",[955,31105,31106],{"align":1001},"Distance at which light is attenuated through the volume",[955,31108,31109],{"align":1001},[618,31110,5564],{},[955,31112,31113],{"align":30879},[618,31114,14244],{},[937,31116,31117,31122,31125,31129],{},[955,31118,31119],{"align":1001},[618,31120,31121],{},"attenuationColor",[955,31123,31124],{"align":1001},"Color the light shifts to as it passes through the volume",[955,31126,31127],{"align":1001},[618,31128,7785],{},[955,31130,31131],{"align":30879},[618,31132,2780],{},[937,31134,31135,31140,31143,31147],{},[955,31136,31137],{"align":1001},[618,31138,31139],{},"backside",[955,31141,31142],{"align":1001},"Render back faces into a separate buffer for proper glass thickness",[955,31144,31145],{"align":1001},[618,31146,18466],{},[955,31148,31149],{"align":30879},[618,31150,975],{},[937,31152,31153,31158,31161,31165],{},[955,31154,31155],{"align":1001},[618,31156,31157],{},"backsideThickness",[955,31159,31160],{"align":1001},"Thickness used during the backside pass",[955,31162,31163],{"align":1001},[618,31164,5564],{},[955,31166,31167],{"align":30879},[618,31168,969],{},[937,31170,31171,31175,31178,31182],{},[955,31172,31173],{"align":1001},[618,31174,29480],{},[955,31176,31177],{"align":1001},"Resolution of the FBO render target in pixels",[955,31179,31180],{"align":1001},[618,31181,5564],{},[955,31183,31184],{"align":30879},[618,31185,30261],{},[937,31187,31188,31193,31198,31202],{},[955,31189,31190],{"align":1001},[618,31191,31192],{},"backsideResolution",[955,31194,31195,31196],{"align":1001},"Resolution of the backside FBO. Defaults to ",[618,31197,29480],{},[955,31199,31200],{"align":1001},[618,31201,5564],{},[955,31203,31204],{"align":30879},[618,31205,29480],{},[937,31207,31208,31213,31216,31221],{},[955,31209,31210],{"align":1001},[618,31211,31212],{},"background",[955,31214,31215],{"align":1001},"Override the scene background during the FBO pass",[955,31217,31218],{"align":1001},[618,31219,31220],{},"THREE.Color | null",[955,31222,31223],{"align":30879},[618,31224,1183],{},[937,31226,31227,31232,31235,31240],{},[955,31228,31229],{"align":1001},[618,31230,31231],{},"buffer",[955,31233,31234],{"align":1001},"Supply your own render-target texture, skipping the internal FBO pass",[955,31236,31237],{"align":1001},[618,31238,31239],{},"THREE.Texture | null",[955,31241,31242],{"align":30879},[618,31243,1183],{},[937,31245,31246,31251,31257,31261],{},[955,31247,31248],{"align":1001},[618,31249,31250],{},"samples",[955,31252,31253,31254],{"align":1001},"Number of refraction samples. ",[1705,31255,31256],{},"Baked at compile time — changing requires remount.",[955,31258,31259],{"align":1001},[618,31260,5564],{},[955,31262,31263],{"align":30879},[618,31264,1885],{},[937,31266,31267,31272,31278,31282],{},[955,31268,31269],{"align":1001},[618,31270,31271],{},"transmissionSampler",[955,31273,31274,31275],{"align":1001},"Use THREE's built-in transmission sampler instead of an FBO pass. ",[1705,31276,31277],{},"Baked at compile time.",[955,31279,31280],{"align":1001},[618,31281,18466],{},[955,31283,31284],{"align":30879},[618,31285,975],{},[614,31287,31288,31289,29744],{},"The component extends ",[618,31290,28032],{},[504,31292,28376],{"id":28375},[2285,31294,31295,31303,31310,31318],{},[2288,31296,8527,31297,5822,31299,31302],{},[618,31298,29654],{},[618,31300,31301],{},"envMap"," on the scene is strongly recommended. Without one, the material will render dark.",[2288,31304,31305,3156,31307,31309],{},[618,31306,31250],{},[618,31308,31271],{}," are baked into the shader at compile time. Changing them at runtime triggers a remount automatically.",[2288,31311,19536,31312,31314,31315,31317],{},[618,31313,31139],{}," with a non-zero ",[618,31316,31157],{}," for more convincing thick-glass effects.",[2288,31319,31320,31321,31323,31324,31326],{},"Lower ",[618,31322,29480],{}," (e.g. ",[618,31325,29364],{},") improves performance at the cost of refraction sharpness.",[1331,31328,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":31330},[31331,31332,31333],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":28375,"depth":578,"text":28376},"A glass-like transmission material with chromatic aberration, distortion, and backside support. Ported from drei.",{},{"title":199,"description":31334},"JXXQY2ymiMvhSZOeVYtoqrgWJNCIjgEE1iuIN4xyLPI",{"id":31339,"title":203,"body":31340,"description":31656,"extension":591,"links":592,"meta":31657,"navigation":594,"path":204,"seo":31658,"stem":205,"__hash__":31659},"docs\u002F2.api\u002F4.materials\u002Fpoint-material.md",{"type":501,"value":31341,"toc":31652},[31342,31347,31357,31362,31364,31634,31636,31650],[2367,31343,31344],{},[31345,31346],"materials-point-material",{},[614,31348,31349,31352,31353,31356],{},[618,31350,31351],{},"\u003CPointMaterial \u002F>"," extends ",[618,31354,31355],{},"THREE.PointsMaterial",". It renders the points as dots, rather than the default squares.",[3292,31358,31359],{},[614,31360,31361],{},"N.B., stacking order and transparency of objects using THREE.PointsMaterial and by extension PointMaterial can be somewhat unintuitive, especially when combined with other on-screen objects. Please see discussions at threejs.org for more infomation.",[504,31363,15],{"id":624},[626,31365,31368],{"className":628,"code":31366,"highlights":31367,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { PointMaterial, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CTresPoints>\n \u003CTresIcosahedronGeometry :args=\"[1, 4]\" \u002F>\n \u003CPointMaterial\n :size=\"5\"\n color=\"orange\"\n \u002F>\n \u003C\u002FTresPoints>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,831,631,854],[618,31369,31370,31390,31408,31432,31440,31444,31452,31460,31516,31524,31533,31562,31570,31585,31598,31602,31610,31618,31626],{"__ignoreMap":576},[637,31371,31372,31374,31376,31378,31380,31382,31384,31386,31388],{"class":639,"line":577},[637,31373,643],{"class":642},[637,31375,647],{"class":646},[637,31377,651],{"class":650},[637,31379,654],{"class":650},[637,31381,657],{"class":642},[637,31383,660],{"class":642},[637,31385,664],{"class":663},[637,31387,660],{"class":642},[637,31389,669],{"class":642},[637,31391,31392,31394,31396,31398,31400,31402,31404,31406],{"class":639,"line":578},[637,31393,677],{"class":676},[637,31395,680],{"class":642},[637,31397,715],{"class":683},[637,31399,693],{"class":642},[637,31401,696],{"class":676},[637,31403,699],{"class":642},[637,31405,724],{"class":663},[637,31407,705],{"class":642},[637,31409,31411,31413,31415,31418,31420,31422,31424,31426,31428,31430],{"class":31410,"line":708},[639,673],[637,31412,677],{"class":676},[637,31414,680],{"class":642},[637,31416,31417],{"class":683}," PointMaterial",[637,31419,687],{"class":642},[637,31421,690],{"class":683},[637,31423,693],{"class":642},[637,31425,696],{"class":676},[637,31427,699],{"class":642},[637,31429,702],{"class":663},[637,31431,705],{"class":642},[637,31433,31434,31436,31438],{"class":639,"line":729},[637,31435,732],{"class":642},[637,31437,647],{"class":646},[637,31439,669],{"class":642},[637,31441,31442],{"class":639,"line":739},[637,31443,742],{"emptyLinePlaceholder":594},[637,31445,31446,31448,31450],{"class":639,"line":745},[637,31447,643],{"class":642},[637,31449,750],{"class":646},[637,31451,669],{"class":642},[637,31453,31454,31456,31458],{"class":639,"line":755},[637,31455,758],{"class":642},[637,31457,761],{"class":646},[637,31459,669],{"class":642},[637,31461,31462,31464,31466,31468,31470,31472,31474,31476,31478,31480,31482,31484,31486,31488,31490,31492,31494,31496,31498,31500,31502,31504,31506,31508,31510,31512,31514],{"class":639,"line":778},[637,31463,781],{"class":642},[637,31465,784],{"class":646},[637,31467,813],{"class":642},[637,31469,1491],{"class":650},[637,31471,657],{"class":642},[637,31473,660],{"class":642},[637,31475,1498],{"class":642},[637,31477,2729],{"class":823},[637,31479,1503],{"class":642},[637,31481,2729],{"class":823},[637,31483,1503],{"class":642},[637,31485,2729],{"class":823},[637,31487,1513],{"class":642},[637,31489,660],{"class":642},[637,31491,813],{"class":642},[637,31493,9933],{"class":650},[637,31495,657],{"class":642},[637,31497,660],{"class":642},[637,31499,1498],{"class":642},[637,31501,969],{"class":823},[637,31503,1503],{"class":642},[637,31505,969],{"class":823},[637,31507,1503],{"class":642},[637,31509,969],{"class":823},[637,31511,1513],{"class":642},[637,31513,660],{"class":642},[637,31515,787],{"class":642},[637,31517,31518,31520,31522],{"class":639,"line":790},[637,31519,781],{"class":642},[637,31521,795],{"class":646},[637,31523,787],{"class":642},[637,31525,31526,31528,31531],{"class":639,"line":800},[637,31527,781],{"class":642},[637,31529,31530],{"class":646},"TresPoints",[637,31532,669],{"class":642},[637,31534,31535,31537,31540,31542,31544,31546,31548,31550,31552,31554,31556,31558,31560],{"class":639,"line":805},[637,31536,857],{"class":642},[637,31538,31539],{"class":646},"TresIcosahedronGeometry",[637,31541,813],{"class":642},[637,31543,2021],{"class":650},[637,31545,657],{"class":642},[637,31547,660],{"class":642},[637,31549,1498],{"class":642},[637,31551,1925],{"class":823},[637,31553,1503],{"class":642},[637,31555,3900],{"class":823},[637,31557,1513],{"class":642},[637,31559,660],{"class":642},[637,31561,787],{"class":642},[637,31563,31565,31567],{"class":31564,"line":831},[639,673],[637,31566,857],{"class":642},[637,31568,31569],{"class":646},"PointMaterial\n",[637,31571,31573,31575,31577,31579,31581,31583],{"class":31572,"line":631},[639,673],[637,31574,8241],{"class":642},[637,31576,17604],{"class":650},[637,31578,657],{"class":642},[637,31580,660],{"class":642},[637,31582,7666],{"class":823},[637,31584,3224],{"class":642},[637,31586,31588,31590,31592,31594,31596],{"class":31587,"line":854},[639,673],[637,31589,8943],{"class":650},[637,31591,657],{"class":642},[637,31593,660],{"class":642},[637,31595,14044],{"class":663},[637,31597,3224],{"class":642},[637,31599,31600],{"class":639,"line":865},[637,31601,8295],{"class":642},[637,31603,31604,31606,31608],{"class":639,"line":876},[637,31605,899],{"class":642},[637,31607,31530],{"class":646},[637,31609,669],{"class":642},[637,31611,31612,31614,31616],{"class":639,"line":886},[637,31613,781],{"class":642},[637,31615,10010],{"class":646},[637,31617,787],{"class":642},[637,31619,31620,31622,31624],{"class":639,"line":632},[637,31621,909],{"class":642},[637,31623,761],{"class":646},[637,31625,669],{"class":642},[637,31627,31628,31630,31632],{"class":639,"line":906},[637,31629,732],{"class":642},[637,31631,750],{"class":646},[637,31633,669],{"class":642},[504,31635,926],{"id":925},[614,31637,31638,31639,31646,31647,1150],{},"All ",[1144,31640,31643,31645],{"href":31641,"rel":31642},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FPointsMaterial",[1148],[618,31644,31355],{}," properties"," are inherited by ",[618,31648,31649],{},"PointMaterial",[1331,31651,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":31653},[31654,31655],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Extends THREE.PointsMaterial to render points as dots rather than squares.",{},{"title":203,"description":31656},"Aajs-h_7UFOgfUg69Q5QfqvfyKDHM1UKxS8GfRKzI2U",{"id":31661,"title":207,"body":31662,"description":32018,"extension":591,"links":592,"meta":32019,"navigation":594,"path":208,"seo":32020,"stem":209,"__hash__":32021},"docs\u002F2.api\u002F4.materials\u002Fwobble-material.md",{"type":501,"value":31663,"toc":32014},[31664,31669,31677,31679,31965,31967,32007,32012],[608,31665,31666],{},[31667,31668],"materials-wobble-material",{},[614,31670,2867,31671,9768,31673,31676],{},[618,31672,7526],{},[618,31674,31675],{},"\u003CMeshWobbleMaterial \u002F>"," component that makes a geometry wobble and wave around.",[504,31678,15],{"id":624},[626,31680,31683],{"className":628,"code":31681,"highlights":31682,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { MeshWobbleMaterial } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" \u002F>\n \u003CTresMesh>\n \u003CTresTorusGeometry \u002F>\n \u003CMeshWobbleMaterial\n color=\"#f25042\"\n :speed=\"1\"\n :factor=\"0.6\"\n \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,805,831,631,854,865],[618,31684,31685,31705,31723,31743,31751,31755,31763,31771,31827,31835,31843,31851,31865,31880,31896,31901,31909,31917,31949,31957],{"__ignoreMap":576},[637,31686,31687,31689,31691,31693,31695,31697,31699,31701,31703],{"class":639,"line":577},[637,31688,643],{"class":642},[637,31690,647],{"class":646},[637,31692,651],{"class":650},[637,31694,654],{"class":650},[637,31696,657],{"class":642},[637,31698,660],{"class":642},[637,31700,664],{"class":663},[637,31702,660],{"class":642},[637,31704,669],{"class":642},[637,31706,31707,31709,31711,31713,31715,31717,31719,31721],{"class":639,"line":578},[637,31708,677],{"class":676},[637,31710,680],{"class":642},[637,31712,715],{"class":683},[637,31714,693],{"class":642},[637,31716,696],{"class":676},[637,31718,699],{"class":642},[637,31720,724],{"class":663},[637,31722,705],{"class":642},[637,31724,31726,31728,31730,31733,31735,31737,31739,31741],{"class":31725,"line":708},[639,673],[637,31727,677],{"class":676},[637,31729,680],{"class":642},[637,31731,31732],{"class":683}," MeshWobbleMaterial",[637,31734,693],{"class":642},[637,31736,696],{"class":676},[637,31738,699],{"class":642},[637,31740,702],{"class":663},[637,31742,705],{"class":642},[637,31744,31745,31747,31749],{"class":639,"line":729},[637,31746,732],{"class":642},[637,31748,647],{"class":646},[637,31750,669],{"class":642},[637,31752,31753],{"class":639,"line":739},[637,31754,742],{"emptyLinePlaceholder":594},[637,31756,31757,31759,31761],{"class":639,"line":745},[637,31758,643],{"class":642},[637,31760,750],{"class":646},[637,31762,669],{"class":642},[637,31764,31765,31767,31769],{"class":639,"line":755},[637,31766,758],{"class":642},[637,31768,761],{"class":646},[637,31770,669],{"class":642},[637,31772,31773,31775,31777,31779,31781,31783,31785,31787,31789,31791,31793,31795,31797,31799,31801,31803,31805,31807,31809,31811,31813,31815,31817,31819,31821,31823,31825],{"class":639,"line":778},[637,31774,781],{"class":642},[637,31776,784],{"class":646},[637,31778,813],{"class":642},[637,31780,1491],{"class":650},[637,31782,657],{"class":642},[637,31784,660],{"class":642},[637,31786,1498],{"class":642},[637,31788,2729],{"class":823},[637,31790,1503],{"class":642},[637,31792,2729],{"class":823},[637,31794,1503],{"class":642},[637,31796,2729],{"class":823},[637,31798,1513],{"class":642},[637,31800,660],{"class":642},[637,31802,813],{"class":642},[637,31804,9933],{"class":650},[637,31806,657],{"class":642},[637,31808,660],{"class":642},[637,31810,1498],{"class":642},[637,31812,969],{"class":823},[637,31814,1503],{"class":642},[637,31816,969],{"class":823},[637,31818,1503],{"class":642},[637,31820,969],{"class":823},[637,31822,1513],{"class":642},[637,31824,660],{"class":642},[637,31826,787],{"class":642},[637,31828,31829,31831,31833],{"class":639,"line":790},[637,31830,781],{"class":642},[637,31832,860],{"class":646},[637,31834,669],{"class":642},[637,31836,31837,31839,31841],{"class":639,"line":800},[637,31838,857],{"class":642},[637,31840,12445],{"class":646},[637,31842,787],{"class":642},[637,31844,31846,31848],{"class":31845,"line":805},[639,673],[637,31847,857],{"class":642},[637,31849,31850],{"class":646},"MeshWobbleMaterial\n",[637,31852,31854,31856,31858,31860,31863],{"class":31853,"line":831},[639,673],[637,31855,8943],{"class":650},[637,31857,657],{"class":642},[637,31859,660],{"class":642},[637,31861,31862],{"class":663},"#f25042",[637,31864,3224],{"class":642},[637,31866,31868,31870,31872,31874,31876,31878],{"class":31867,"line":631},[639,673],[637,31869,8241],{"class":642},[637,31871,9976],{"class":650},[637,31873,657],{"class":642},[637,31875,660],{"class":642},[637,31877,1925],{"class":823},[637,31879,3224],{"class":642},[637,31881,31883,31885,31888,31890,31892,31894],{"class":31882,"line":854},[639,673],[637,31884,8241],{"class":642},[637,31886,31887],{"class":650},"factor",[637,31889,657],{"class":642},[637,31891,660],{"class":642},[637,31893,11028],{"class":823},[637,31895,3224],{"class":642},[637,31897,31899],{"class":31898,"line":865},[639,673],[637,31900,8295],{"class":642},[637,31902,31903,31905,31907],{"class":639,"line":876},[637,31904,899],{"class":642},[637,31906,860],{"class":646},[637,31908,669],{"class":642},[637,31910,31911,31913,31915],{"class":639,"line":886},[637,31912,781],{"class":642},[637,31914,10010],{"class":646},[637,31916,787],{"class":642},[637,31918,31919,31921,31923,31925,31927,31929,31931,31933,31935,31937,31939,31941,31943,31945,31947],{"class":639,"line":632},[637,31920,781],{"class":642},[637,31922,10031],{"class":646},[637,31924,813],{"class":642},[637,31926,1491],{"class":650},[637,31928,657],{"class":642},[637,31930,660],{"class":642},[637,31932,1498],{"class":642},[637,31934,969],{"class":823},[637,31936,1503],{"class":642},[637,31938,824],{"class":823},[637,31940,1503],{"class":642},[637,31942,3900],{"class":823},[637,31944,1513],{"class":642},[637,31946,660],{"class":642},[637,31948,787],{"class":642},[637,31950,31951,31953,31955],{"class":639,"line":906},[637,31952,909],{"class":642},[637,31954,761],{"class":646},[637,31956,669],{"class":642},[637,31958,31959,31961,31963],{"class":639,"line":916},[637,31960,732],{"class":642},[637,31962,750],{"class":646},[637,31964,669],{"class":642},[504,31966,926],{"id":925},[931,31968,31969,31979],{},[934,31970,31971],{},[937,31972,31973,31975,31977],{},[940,31974,942],{"align":1001},[940,31976,945],{"align":1001},[940,31978,948],{},[950,31980,31981,31994],{},[937,31982,31983,31987,31990],{},[955,31984,31985],{"align":1001},[1705,31986,9976],{},[955,31988,31989],{"align":1001},"how fast the wobble effect would be.",[955,31991,31992],{},[618,31993,1925],{},[937,31995,31996,32000,32003],{},[955,31997,31998],{"align":1001},[1705,31999,31887],{},[955,32001,32002],{"align":1001},"how strong the wobble effect will deform the geometry",[955,32004,32005],{},[618,32006,1925],{},[614,32008,32009,32010,28033],{},"This material extends ",[618,32011,29743],{},[1331,32013,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":32015},[32016,32017],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Makes a geometry wobble and wave around with customizable speed and factor.",{},{"title":207,"description":32018},"FCaNs3jjWImwSxNZzcx1r_CPKoNz27JGUgdcUzvQ1Ys",[32023,32206,32782,32952,33130,33600,33836,34005,34587,34755,35418,35585,35759,36189,36366,36528,36689,36883,37059,37511,37679,37869,38058],{"id":32024,"title":217,"body":32025,"description":32202,"extension":591,"links":592,"meta":32203,"navigation":594,"path":218,"seo":32204,"stem":219,"__hash__":32205},"docs\u002F2.api\u002F5.shapes\u002Fbox.md",{"type":501,"value":32026,"toc":32199},[32027,32032,32043,32051,32058,32060,32196],[608,32028,32029],{},[32030,32031],"shapes-box",{},[614,32033,2867,32034,9768,32036,32039,32040,1150],{},[618,32035,7526],{},[618,32037,32038],{},"\u003CBox \u002F>"," component that serves as a short-cut for a ",[618,32041,32042],{},"BoxGeometry",[626,32044,32049],{"className":32045,"code":32047,"language":32048},[32046],"language-text","args: [\n width: number,\n height: number,\n depth: number,\n widthSegments: number,\n heightSegments: number,\n depthSegments: number\n]\n","text",[618,32050,32047],{"__ignoreMap":576},[614,32052,32053,32054],{},"Reference: ",[1144,32055,32042],{"href":32056,"rel":32057},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=box#api\u002Fen\u002Fgeometries\u002FBoxGeometry",[1148],[504,32059,15],{"id":624},[626,32061,32063],{"className":628,"code":32062,"language":633,"meta":576,"style":576},"\u003CBox :args=\"[1, 1, 1]\" color=\"orange\" \u002F>\n\n\u002F\u002F Box with a custom material transformations\n\u003CBox ref=\"boxRef\" :args=\"[1, 1, 1]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FBox>\n",[618,32064,32065,32107,32111,32116,32183,32188],{"__ignoreMap":576},[637,32066,32067,32069,32071,32073,32075,32077,32079,32081,32083,32085,32087,32089,32091,32093,32095,32097,32099,32101,32103,32105],{"class":639,"line":577},[637,32068,643],{"class":642},[637,32070,217],{"class":646},[637,32072,813],{"class":642},[637,32074,2021],{"class":650},[637,32076,657],{"class":642},[637,32078,660],{"class":642},[637,32080,1498],{"class":683},[637,32082,1925],{"class":823},[637,32084,687],{"class":642},[637,32086,2631],{"class":823},[637,32088,687],{"class":642},[637,32090,2631],{"class":823},[637,32092,1513],{"class":683},[637,32094,660],{"class":642},[637,32096,2773],{"class":650},[637,32098,657],{"class":642},[637,32100,660],{"class":642},[637,32102,14044],{"class":663},[637,32104,660],{"class":642},[637,32106,787],{"class":642},[637,32108,32109],{"class":639,"line":578},[637,32110,742],{"emptyLinePlaceholder":594},[637,32112,32113],{"class":639,"line":708},[637,32114,32115],{"class":683},"\u002F\u002F Box with a custom material transformations\n",[637,32117,32118,32120,32122,32124,32126,32128,32130,32132,32134,32136,32138,32140,32142,32144,32146,32148,32150,32152,32154,32156,32158,32160,32162,32164,32166,32168,32170,32173,32175,32177,32179,32181],{"class":639,"line":729},[637,32119,643],{"class":642},[637,32121,217],{"class":646},[637,32123,3999],{"class":650},[637,32125,657],{"class":642},[637,32127,660],{"class":642},[637,32129,17183],{"class":663},[637,32131,660],{"class":642},[637,32133,813],{"class":642},[637,32135,2021],{"class":650},[637,32137,657],{"class":642},[637,32139,660],{"class":642},[637,32141,1498],{"class":683},[637,32143,1925],{"class":823},[637,32145,687],{"class":642},[637,32147,2631],{"class":823},[637,32149,687],{"class":642},[637,32151,2631],{"class":823},[637,32153,1513],{"class":683},[637,32155,660],{"class":642},[637,32157,813],{"class":642},[637,32159,1491],{"class":650},[637,32161,657],{"class":642},[637,32163,660],{"class":642},[637,32165,1498],{"class":683},[637,32167,969],{"class":823},[637,32169,687],{"class":642},[637,32171,32172],{"class":823}," 4",[637,32174,687],{"class":642},[637,32176,2577],{"class":823},[637,32178,1513],{"class":683},[637,32180,660],{"class":642},[637,32182,669],{"class":642},[637,32184,32185],{"class":639,"line":739},[637,32186,32187],{"class":683}," \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n",[637,32189,32190,32192,32194],{"class":639,"line":745},[637,32191,732],{"class":642},[637,32193,217],{"class":646},[637,32195,669],{"class":642},[1331,32197,32198],{},"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 .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 pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":576,"searchDepth":577,"depth":578,"links":32200},[32201],{"id":624,"depth":578,"text":15},"Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":217,"description":32202},"EvaXEC2iSPj1-74ZRQEV-iGoScGBI5kq_mAZQoDjltE",{"id":32207,"title":221,"body":32208,"description":32778,"extension":591,"links":592,"meta":32779,"navigation":594,"path":222,"seo":32780,"stem":223,"__hash__":32781},"docs\u002F2.api\u002F5.shapes\u002Fcatmullromcurve3.md",{"type":501,"value":32209,"toc":32774},[32210,32215,32223,32246,32248,32541,32543,32771],[2367,32211,32212],{},[32213,32214],"shapes-catmull-rom-curve3",{},[614,32216,2867,32217,9768,32219,32222],{},[618,32218,7526],{},[618,32220,32221],{},"\u003CCatmullRomCurve3 \u002F>"," component that allows you to make smooth(ish) 3D lines.",[614,32224,32225,32227,32228,32235,32236,32239,32240],{},[618,32226,32221],{}," wraps ",[1144,32229,32232,32233],{"href":32230,"rel":32231},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=catmu#api\u002Fen\u002Fextras\u002Fcurves\u002FCatmullRomCurve3",[1148],"Three.js's ",[618,32234,221],{}," functionality, but applies it to Cientos' ",[618,32237,32238],{},"\u003CLine2 \u002F>"," under the hood, meaning you can use ",[1144,32241,32243,32244,1150],{"href":32242},"line2#props","all the props from ",[618,32245,32238],{},[504,32247,15],{"id":624},[626,32249,32252],{"className":628,"code":32250,"highlights":32251,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { CatmullRomCurve3 } from '@tresjs\u002Fcientos'\nimport { Vector3 } from 'three'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CCatmullRomCurve3\n :points=\"[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]\"\n :segments=\"50\"\n color=\"orange\"\n :line-width=\"3\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800,805,831,631,854],[618,32253,32254,32274,32292,32312,32331,32339,32343,32351,32359,32391,32399,32467,32483,32497,32513,32517,32525,32533],{"__ignoreMap":576},[637,32255,32256,32258,32260,32262,32264,32266,32268,32270,32272],{"class":639,"line":577},[637,32257,643],{"class":642},[637,32259,647],{"class":646},[637,32261,651],{"class":650},[637,32263,654],{"class":650},[637,32265,657],{"class":642},[637,32267,660],{"class":642},[637,32269,664],{"class":663},[637,32271,660],{"class":642},[637,32273,669],{"class":642},[637,32275,32276,32278,32280,32282,32284,32286,32288,32290],{"class":639,"line":578},[637,32277,677],{"class":676},[637,32279,680],{"class":642},[637,32281,715],{"class":683},[637,32283,693],{"class":642},[637,32285,696],{"class":676},[637,32287,699],{"class":642},[637,32289,724],{"class":663},[637,32291,705],{"class":642},[637,32293,32295,32297,32299,32302,32304,32306,32308,32310],{"class":32294,"line":708},[639,673],[637,32296,677],{"class":676},[637,32298,680],{"class":642},[637,32300,32301],{"class":683}," CatmullRomCurve3",[637,32303,693],{"class":642},[637,32305,696],{"class":676},[637,32307,699],{"class":642},[637,32309,702],{"class":663},[637,32311,705],{"class":642},[637,32313,32314,32316,32318,32321,32323,32325,32327,32329],{"class":639,"line":729},[637,32315,677],{"class":676},[637,32317,680],{"class":642},[637,32319,32320],{"class":683}," Vector3",[637,32322,693],{"class":642},[637,32324,696],{"class":676},[637,32326,699],{"class":642},[637,32328,4799],{"class":663},[637,32330,705],{"class":642},[637,32332,32333,32335,32337],{"class":639,"line":739},[637,32334,732],{"class":642},[637,32336,647],{"class":646},[637,32338,669],{"class":642},[637,32340,32341],{"class":639,"line":745},[637,32342,742],{"emptyLinePlaceholder":594},[637,32344,32345,32347,32349],{"class":639,"line":755},[637,32346,643],{"class":642},[637,32348,750],{"class":646},[637,32350,669],{"class":642},[637,32352,32353,32355,32357],{"class":639,"line":778},[637,32354,758],{"class":642},[637,32356,761],{"class":646},[637,32358,669],{"class":642},[637,32360,32361,32363,32365,32367,32369,32371,32373,32375,32377,32379,32381,32383,32385,32387,32389],{"class":639,"line":790},[637,32362,781],{"class":642},[637,32364,784],{"class":646},[637,32366,813],{"class":642},[637,32368,1491],{"class":650},[637,32370,657],{"class":642},[637,32372,660],{"class":642},[637,32374,1498],{"class":642},[637,32376,2729],{"class":823},[637,32378,1503],{"class":642},[637,32380,2729],{"class":823},[637,32382,1503],{"class":642},[637,32384,2729],{"class":823},[637,32386,1513],{"class":642},[637,32388,660],{"class":642},[637,32390,787],{"class":642},[637,32392,32394,32396],{"class":32393,"line":800},[639,673],[637,32395,781],{"class":642},[637,32397,32398],{"class":646},"CatmullRomCurve3\n",[637,32400,32402,32404,32407,32409,32411,32414,32416,32419,32421,32423,32425,32427,32429,32432,32434,32436,32438,32440,32442,32444,32446,32448,32450,32452,32454,32456,32458,32460,32462,32465],{"class":32401,"line":805},[639,673],[637,32403,13000],{"class":642},[637,32405,32406],{"class":650},"points",[637,32408,657],{"class":642},[637,32410,660],{"class":642},[637,32412,32413],{"class":642},"[new ",[637,32415,8411],{"class":2506},[637,32417,32418],{"class":642},"(-",[637,32420,1925],{"class":823},[637,32422,1503],{"class":642},[637,32424,969],{"class":823},[637,32426,1503],{"class":642},[637,32428,969],{"class":823},[637,32430,32431],{"class":642},"), new ",[637,32433,8411],{"class":2506},[637,32435,2509],{"class":642},[637,32437,969],{"class":823},[637,32439,1503],{"class":642},[637,32441,1925],{"class":823},[637,32443,1503],{"class":642},[637,32445,969],{"class":823},[637,32447,32431],{"class":642},[637,32449,8411],{"class":2506},[637,32451,2509],{"class":642},[637,32453,1925],{"class":823},[637,32455,1503],{"class":642},[637,32457,969],{"class":823},[637,32459,1503],{"class":642},[637,32461,969],{"class":823},[637,32463,32464],{"class":642},")]",[637,32466,3224],{"class":642},[637,32468,32470,32472,32475,32477,32479,32481],{"class":32469,"line":831},[639,673],[637,32471,13000],{"class":642},[637,32473,32474],{"class":650},"segments",[637,32476,657],{"class":642},[637,32478,660],{"class":642},[637,32480,11917],{"class":823},[637,32482,3224],{"class":642},[637,32484,32486,32489,32491,32493,32495],{"class":32485,"line":631},[639,673],[637,32487,32488],{"class":650}," color",[637,32490,657],{"class":642},[637,32492,660],{"class":642},[637,32494,14044],{"class":663},[637,32496,3224],{"class":642},[637,32498,32500,32502,32505,32507,32509,32511],{"class":32499,"line":854},[639,673],[637,32501,13000],{"class":642},[637,32503,32504],{"class":650},"line-width",[637,32506,657],{"class":642},[637,32508,660],{"class":642},[637,32510,2729],{"class":823},[637,32512,3224],{"class":642},[637,32514,32515],{"class":639,"line":865},[637,32516,18174],{"class":642},[637,32518,32519,32521,32523],{"class":639,"line":876},[637,32520,781],{"class":642},[637,32522,10010],{"class":646},[637,32524,787],{"class":642},[637,32526,32527,32529,32531],{"class":639,"line":886},[637,32528,909],{"class":642},[637,32530,761],{"class":646},[637,32532,669],{"class":642},[637,32534,32535,32537,32539],{"class":639,"line":632},[637,32536,732],{"class":642},[637,32538,750],{"class":646},[637,32540,669],{"class":642},[504,32542,926],{"id":925},[931,32544,32545,32557],{},[934,32546,32547],{},[937,32548,32549,32551,32553,32555],{},[940,32550,942],{},[940,32552,6178],{},[940,32554,945],{},[940,32556,948],{},[950,32558,32559,32573,32587,32601,32617,32631,32646,32660,32674,32687,32701,32715,32729,32743,32757],{},[937,32560,32561,32563,32568,32571],{},[955,32562,32406],{},[955,32564,32565],{},[618,32566,32567],{},"Array\u003CVector3 | [number, number, number]>",[955,32569,32570],{},"Curve's control points",[955,32572],{},[937,32574,32575,32577,32581,32584],{},[955,32576,32474],{},[955,32578,32579],{},[618,32580,5564],{},[955,32582,32583],{},"Number of segments in the resulting curve (higher = smoother)",[955,32585,32586],{},"20",[937,32588,32589,32592,32596,32599],{},[955,32590,32591],{},"closed",[955,32593,32594],{},[618,32595,18466],{},[955,32597,32598],{},"The curve will loop back onto itself when this is true.",[955,32600,975],{},[937,32602,32603,32606,32611,32614],{},[955,32604,32605],{},"curveType",[955,32607,32608],{},[618,32609,32610],{},"'centripetal' | 'chordal' | 'catmullrom'",[955,32612,32613],{},"Curve type",[955,32615,32616],{},"'centripetal'",[937,32618,32619,32622,32626,32629],{},[955,32620,32621],{},"tension",[955,32623,32624],{},[618,32625,5564],{},[955,32627,32628],{},"Catmullrom's tension, when curveType is 'catmullrom'",[955,32630,1545],{},[937,32632,32633,32636,32641,32644],{},[955,32634,32635],{},"vertexColors",[955,32637,32638],{},[618,32639,32640],{},"TresColor[]",[955,32642,32643],{},"Vertex colors, if using",[955,32645,3749],{},[937,32647,32648,32650,32654,32657],{},[955,32649,7770],{},[955,32651,32652],{},[618,32653,7785],{},[955,32655,32656],{},"Color for the line – multiplies vertex colors",[955,32658,32659],{},"'white'",[937,32661,32662,32665,32669,32672],{},[955,32663,32664],{},"lineWidth",[955,32666,32667],{},[618,32668,5564],{},[955,32670,32671],{},"Width of the line – in world units with size attenuation, pixels otherwise",[955,32673,1925],{},[937,32675,32676,32678,32682,32685],{},[955,32677,29499],{},[955,32679,32680],{},[618,32681,18466],{},[955,32683,32684],{},"Whether the line width is in world units or pixels",[955,32686,975],{},[937,32688,32689,32692,32696,32699],{},[955,32690,32691],{},"alphaToCoverage",[955,32693,32694],{},[618,32695,18466],{},[955,32697,32698],{},"Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).",[955,32700,975],{},[937,32702,32703,32706,32710,32713],{},[955,32704,32705],{},"dashed",[955,32707,32708],{},[618,32709,18466],{},[955,32711,32712],{},"Whether the line is dashed",[955,32714,975],{},[937,32716,32717,32720,32724,32727],{},[955,32718,32719],{},"dashSize",[955,32721,32722],{},[618,32723,5564],{},[955,32725,32726],{},"Dash size",[955,32728,1925],{},[937,32730,32731,32734,32738,32741],{},[955,32732,32733],{},"gapSize",[955,32735,32736],{},[618,32737,5564],{},[955,32739,32740],{},"Gap size in dashed line",[955,32742,1925],{},[937,32744,32745,32748,32752,32755],{},[955,32746,32747],{},"dashScale",[955,32749,32750],{},[618,32751,5564],{},[955,32753,32754],{},"Scale of the dashes\u002Fgaps",[955,32756,1925],{},[937,32758,32759,32762,32766,32769],{},[955,32760,32761],{},"dashOffset",[955,32763,32764],{},[618,32765,5564],{},[955,32767,32768],{},"Dash offset",[955,32770,969],{},[1331,32772,32773],{},"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 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);}",{"title":576,"searchDepth":577,"depth":578,"links":32775},[32776,32777],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Allows you to make smooth 3D lines using Catmull-Rom curves.",{},{"title":221,"description":32778},"pYOe6asnxM2yBwZJgT-M4NxxwDh-pE8XXsD--fBVLqo",{"id":32783,"title":225,"body":32784,"description":32948,"extension":591,"links":592,"meta":32949,"navigation":594,"path":226,"seo":32950,"stem":227,"__hash__":32951},"docs\u002F2.api\u002F5.shapes\u002Fcircle.md",{"type":501,"value":32785,"toc":32945},[32786,32791,32801,32807,32813,32815,32943],[608,32787,32788],{},[32789,32790],"shapes-circle",{},[614,32792,2867,32793,9768,32795,32039,32798,1150],{},[618,32794,7526],{},[618,32796,32797],{},"\u003CCircle \u002F>",[618,32799,32800],{},"CircleGeometry",[626,32802,32805],{"className":32803,"code":32804,"language":32048},[32046],"args: [radius: number, segments: number, thetaStart: number, thetaLength: number]\n",[618,32806,32804],{"__ignoreMap":576},[614,32808,32053,32809],{},[1144,32810,32800],{"href":32811,"rel":32812},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=circle#api\u002Fen\u002Fgeometries\u002FCircleGeometry",[1148],[504,32814,15],{"id":624},[626,32816,32818],{"className":628,"code":32817,"language":633,"meta":576,"style":576},"\u003CCircle :args=\"[1, 32]\" color=\"orange\" \u002F>\n\n\u002F\u002F Circle with a custom material transformations\n\u003CCircle ref=\"circleRef\" :args=\"[1, 32]\" :position=\"[0, 0, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FCircle>\n",[618,32819,32820,32859,32863,32868,32931,32935],{"__ignoreMap":576},[637,32821,32822,32824,32826,32828,32830,32832,32834,32836,32838,32840,32843,32845,32847,32849,32851,32853,32855,32857],{"class":639,"line":577},[637,32823,643],{"class":642},[637,32825,225],{"class":646},[637,32827,813],{"class":642},[637,32829,2021],{"class":650},[637,32831,657],{"class":642},[637,32833,660],{"class":642},[637,32835,1498],{"class":683},[637,32837,1925],{"class":823},[637,32839,687],{"class":642},[637,32841,32842],{"class":823}," 32",[637,32844,1513],{"class":683},[637,32846,660],{"class":642},[637,32848,2773],{"class":650},[637,32850,657],{"class":642},[637,32852,660],{"class":642},[637,32854,14044],{"class":663},[637,32856,660],{"class":642},[637,32858,787],{"class":642},[637,32860,32861],{"class":639,"line":578},[637,32862,742],{"emptyLinePlaceholder":594},[637,32864,32865],{"class":639,"line":708},[637,32866,32867],{"class":683},"\u002F\u002F Circle with a custom material transformations\n",[637,32869,32870,32872,32874,32876,32878,32880,32883,32885,32887,32889,32891,32893,32895,32897,32899,32901,32903,32905,32907,32909,32911,32913,32915,32917,32919,32921,32923,32925,32927,32929],{"class":639,"line":729},[637,32871,643],{"class":642},[637,32873,225],{"class":646},[637,32875,3999],{"class":650},[637,32877,657],{"class":642},[637,32879,660],{"class":642},[637,32881,32882],{"class":663},"circleRef",[637,32884,660],{"class":642},[637,32886,813],{"class":642},[637,32888,2021],{"class":650},[637,32890,657],{"class":642},[637,32892,660],{"class":642},[637,32894,1498],{"class":683},[637,32896,1925],{"class":823},[637,32898,687],{"class":642},[637,32900,32842],{"class":823},[637,32902,1513],{"class":683},[637,32904,660],{"class":642},[637,32906,813],{"class":642},[637,32908,1491],{"class":650},[637,32910,657],{"class":642},[637,32912,660],{"class":642},[637,32914,1498],{"class":683},[637,32916,969],{"class":823},[637,32918,687],{"class":642},[637,32920,2577],{"class":823},[637,32922,687],{"class":642},[637,32924,2577],{"class":823},[637,32926,1513],{"class":683},[637,32928,660],{"class":642},[637,32930,669],{"class":642},[637,32932,32933],{"class":639,"line":739},[637,32934,32187],{"class":683},[637,32936,32937,32939,32941],{"class":639,"line":745},[637,32938,732],{"class":642},[637,32940,225],{"class":646},[637,32942,669],{"class":642},[1331,32944,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":32946},[32947],{"id":624,"depth":578,"text":15},"Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":225,"description":32948},"wQLfnhseui4b7Q0fQxQzwX-2D_yemIZgwYA9Cpmtxvo",{"id":32953,"title":229,"body":32954,"description":33126,"extension":591,"links":592,"meta":33127,"navigation":594,"path":230,"seo":33128,"stem":231,"__hash__":33129},"docs\u002F2.api\u002F5.shapes\u002Fcone.md",{"type":501,"value":32955,"toc":33123},[32956,32961,32971,32977,32983,32985,33121],[608,32957,32958],{},[32959,32960],"shapes-cone",{},[614,32962,2867,32963,9768,32965,32039,32968,1150],{},[618,32964,7526],{},[618,32966,32967],{},"\u003CCone \u002F>",[618,32969,32970],{},"ConeGeometry",[626,32972,32975],{"className":32973,"code":32974,"language":32048},[32046],"args: [\n radius: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[618,32976,32974],{"__ignoreMap":576},[614,32978,32053,32979],{},[1144,32980,32970],{"href":32981,"rel":32982},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=cone#api\u002Fen\u002Fgeometries\u002FConeGeometry",[1148],[504,32984,15],{"id":624},[626,32986,32988],{"className":628,"code":32987,"language":633,"meta":576,"style":576},"\u003CCone :args=\"[1, 1, 8]\" color=\"orange\" \u002F>\n\n\u002F\u002F Cone with a custom material transformations\n\u003CCone ref=\"coneRef\" :args=\"[1, 1, 8]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FCone>\n",[618,32989,32990,33033,33037,33042,33109,33113],{"__ignoreMap":576},[637,32991,32992,32994,32996,32998,33000,33002,33004,33006,33008,33010,33012,33014,33017,33019,33021,33023,33025,33027,33029,33031],{"class":639,"line":577},[637,32993,643],{"class":642},[637,32995,229],{"class":646},[637,32997,813],{"class":642},[637,32999,2021],{"class":650},[637,33001,657],{"class":642},[637,33003,660],{"class":642},[637,33005,1498],{"class":683},[637,33007,1925],{"class":823},[637,33009,687],{"class":642},[637,33011,2631],{"class":823},[637,33013,687],{"class":642},[637,33015,33016],{"class":823}," 8",[637,33018,1513],{"class":683},[637,33020,660],{"class":642},[637,33022,2773],{"class":650},[637,33024,657],{"class":642},[637,33026,660],{"class":642},[637,33028,14044],{"class":663},[637,33030,660],{"class":642},[637,33032,787],{"class":642},[637,33034,33035],{"class":639,"line":578},[637,33036,742],{"emptyLinePlaceholder":594},[637,33038,33039],{"class":639,"line":708},[637,33040,33041],{"class":683},"\u002F\u002F Cone with a custom material transformations\n",[637,33043,33044,33046,33048,33050,33052,33054,33057,33059,33061,33063,33065,33067,33069,33071,33073,33075,33077,33079,33081,33083,33085,33087,33089,33091,33093,33095,33097,33099,33101,33103,33105,33107],{"class":639,"line":729},[637,33045,643],{"class":642},[637,33047,229],{"class":646},[637,33049,3999],{"class":650},[637,33051,657],{"class":642},[637,33053,660],{"class":642},[637,33055,33056],{"class":663},"coneRef",[637,33058,660],{"class":642},[637,33060,813],{"class":642},[637,33062,2021],{"class":650},[637,33064,657],{"class":642},[637,33066,660],{"class":642},[637,33068,1498],{"class":683},[637,33070,1925],{"class":823},[637,33072,687],{"class":642},[637,33074,2631],{"class":823},[637,33076,687],{"class":642},[637,33078,33016],{"class":823},[637,33080,1513],{"class":683},[637,33082,660],{"class":642},[637,33084,813],{"class":642},[637,33086,1491],{"class":650},[637,33088,657],{"class":642},[637,33090,660],{"class":642},[637,33092,1498],{"class":683},[637,33094,969],{"class":823},[637,33096,687],{"class":642},[637,33098,32172],{"class":823},[637,33100,687],{"class":642},[637,33102,2577],{"class":823},[637,33104,1513],{"class":683},[637,33106,660],{"class":642},[637,33108,669],{"class":642},[637,33110,33111],{"class":639,"line":739},[637,33112,32187],{"class":683},[637,33114,33115,33117,33119],{"class":639,"line":745},[637,33116,732],{"class":642},[637,33118,229],{"class":646},[637,33120,669],{"class":642},[1331,33122,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":33124},[33125],{"id":624,"depth":578,"text":15},"Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":229,"description":33126},"LobanFD68GY4U45rEkqMogA7guX1DZi5E6MMnCuki0k",{"id":33131,"title":233,"body":33132,"description":33596,"extension":591,"links":592,"meta":33597,"navigation":594,"path":234,"seo":33598,"stem":235,"__hash__":33599},"docs\u002F2.api\u002F5.shapes\u002Fcubic-bezier-line.md",{"type":501,"value":33133,"toc":33592},[33134,33139,33148,33150,33488,33490,33499,33590],[2367,33135,33136],{},[33137,33138],"shapes-cubic-bezier-line",{},[614,33140,33141,33144,33145,33147],{},[618,33142,33143],{},"\u003CCubicBezierLine \u002F>"," renders a ",[618,33146,32238],{}," between start and end points, with additional 2 control points.",[504,33149,15],{"id":624},[626,33151,33153],{"className":628,"code":33152,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { CubicBezierLine } from '@tresjs\u002Fcientos'\nimport { Vector3 } from 'three'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CCubicBezierLine\n :start=\"new Vector3(-1, 0, 0)\"\n :end=\"new Vector3(1, 0, 0)\"\n :midA=\"new Vector3(-0.5, 1, 0)\"\n :midB=\"new Vector3(0.5, 1, 0)\"\n :segments=\"50\"\n color=\"orange\"\n :line-width=\"3\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,33154,33155,33175,33193,33212,33230,33238,33242,33250,33258,33290,33297,33328,33358,33389,33420,33434,33446,33460,33464,33472,33480],{"__ignoreMap":576},[637,33156,33157,33159,33161,33163,33165,33167,33169,33171,33173],{"class":639,"line":577},[637,33158,643],{"class":642},[637,33160,647],{"class":646},[637,33162,651],{"class":650},[637,33164,654],{"class":650},[637,33166,657],{"class":642},[637,33168,660],{"class":642},[637,33170,664],{"class":663},[637,33172,660],{"class":642},[637,33174,669],{"class":642},[637,33176,33177,33179,33181,33183,33185,33187,33189,33191],{"class":639,"line":578},[637,33178,677],{"class":676},[637,33180,680],{"class":642},[637,33182,715],{"class":683},[637,33184,693],{"class":642},[637,33186,696],{"class":676},[637,33188,699],{"class":642},[637,33190,724],{"class":663},[637,33192,705],{"class":642},[637,33194,33195,33197,33199,33202,33204,33206,33208,33210],{"class":639,"line":708},[637,33196,677],{"class":676},[637,33198,680],{"class":642},[637,33200,33201],{"class":683}," CubicBezierLine",[637,33203,693],{"class":642},[637,33205,696],{"class":676},[637,33207,699],{"class":642},[637,33209,702],{"class":663},[637,33211,705],{"class":642},[637,33213,33214,33216,33218,33220,33222,33224,33226,33228],{"class":639,"line":729},[637,33215,677],{"class":676},[637,33217,680],{"class":642},[637,33219,32320],{"class":683},[637,33221,693],{"class":642},[637,33223,696],{"class":676},[637,33225,699],{"class":642},[637,33227,4799],{"class":663},[637,33229,705],{"class":642},[637,33231,33232,33234,33236],{"class":639,"line":739},[637,33233,732],{"class":642},[637,33235,647],{"class":646},[637,33237,669],{"class":642},[637,33239,33240],{"class":639,"line":745},[637,33241,742],{"emptyLinePlaceholder":594},[637,33243,33244,33246,33248],{"class":639,"line":755},[637,33245,643],{"class":642},[637,33247,750],{"class":646},[637,33249,669],{"class":642},[637,33251,33252,33254,33256],{"class":639,"line":778},[637,33253,758],{"class":642},[637,33255,761],{"class":646},[637,33257,669],{"class":642},[637,33259,33260,33262,33264,33266,33268,33270,33272,33274,33276,33278,33280,33282,33284,33286,33288],{"class":639,"line":790},[637,33261,781],{"class":642},[637,33263,784],{"class":646},[637,33265,813],{"class":642},[637,33267,1491],{"class":650},[637,33269,657],{"class":642},[637,33271,660],{"class":642},[637,33273,1498],{"class":642},[637,33275,2729],{"class":823},[637,33277,1503],{"class":642},[637,33279,2729],{"class":823},[637,33281,1503],{"class":642},[637,33283,2729],{"class":823},[637,33285,1513],{"class":642},[637,33287,660],{"class":642},[637,33289,787],{"class":642},[637,33291,33292,33294],{"class":639,"line":800},[637,33293,781],{"class":642},[637,33295,33296],{"class":646},"CubicBezierLine\n",[637,33298,33299,33301,33303,33305,33307,33310,33312,33314,33316,33318,33320,33322,33324,33326],{"class":639,"line":805},[637,33300,13000],{"class":642},[637,33302,15072],{"class":650},[637,33304,657],{"class":642},[637,33306,660],{"class":642},[637,33308,33309],{"class":642},"new ",[637,33311,8411],{"class":2506},[637,33313,32418],{"class":642},[637,33315,1925],{"class":823},[637,33317,1503],{"class":642},[637,33319,969],{"class":823},[637,33321,1503],{"class":642},[637,33323,969],{"class":823},[637,33325,3433],{"class":642},[637,33327,3224],{"class":642},[637,33329,33330,33332,33334,33336,33338,33340,33342,33344,33346,33348,33350,33352,33354,33356],{"class":639,"line":831},[637,33331,13000],{"class":642},[637,33333,15086],{"class":650},[637,33335,657],{"class":642},[637,33337,660],{"class":642},[637,33339,33309],{"class":642},[637,33341,8411],{"class":2506},[637,33343,2509],{"class":642},[637,33345,1925],{"class":823},[637,33347,1503],{"class":642},[637,33349,969],{"class":823},[637,33351,1503],{"class":642},[637,33353,969],{"class":823},[637,33355,3433],{"class":642},[637,33357,3224],{"class":642},[637,33359,33360,33362,33365,33367,33369,33371,33373,33375,33377,33379,33381,33383,33385,33387],{"class":639,"line":631},[637,33361,13000],{"class":642},[637,33363,33364],{"class":650},"midA",[637,33366,657],{"class":642},[637,33368,660],{"class":642},[637,33370,33309],{"class":642},[637,33372,8411],{"class":2506},[637,33374,32418],{"class":642},[637,33376,1545],{"class":823},[637,33378,1503],{"class":642},[637,33380,1925],{"class":823},[637,33382,1503],{"class":642},[637,33384,969],{"class":823},[637,33386,3433],{"class":642},[637,33388,3224],{"class":642},[637,33390,33391,33393,33396,33398,33400,33402,33404,33406,33408,33410,33412,33414,33416,33418],{"class":639,"line":854},[637,33392,13000],{"class":642},[637,33394,33395],{"class":650},"midB",[637,33397,657],{"class":642},[637,33399,660],{"class":642},[637,33401,33309],{"class":642},[637,33403,8411],{"class":2506},[637,33405,2509],{"class":642},[637,33407,1545],{"class":823},[637,33409,1503],{"class":642},[637,33411,1925],{"class":823},[637,33413,1503],{"class":642},[637,33415,969],{"class":823},[637,33417,3433],{"class":642},[637,33419,3224],{"class":642},[637,33421,33422,33424,33426,33428,33430,33432],{"class":639,"line":865},[637,33423,13000],{"class":642},[637,33425,32474],{"class":650},[637,33427,657],{"class":642},[637,33429,660],{"class":642},[637,33431,11917],{"class":823},[637,33433,3224],{"class":642},[637,33435,33436,33438,33440,33442,33444],{"class":639,"line":876},[637,33437,32488],{"class":650},[637,33439,657],{"class":642},[637,33441,660],{"class":642},[637,33443,14044],{"class":663},[637,33445,3224],{"class":642},[637,33447,33448,33450,33452,33454,33456,33458],{"class":639,"line":886},[637,33449,13000],{"class":642},[637,33451,32504],{"class":650},[637,33453,657],{"class":642},[637,33455,660],{"class":642},[637,33457,2729],{"class":823},[637,33459,3224],{"class":642},[637,33461,33462],{"class":639,"line":632},[637,33463,18174],{"class":642},[637,33465,33466,33468,33470],{"class":639,"line":906},[637,33467,781],{"class":642},[637,33469,10010],{"class":646},[637,33471,787],{"class":642},[637,33473,33474,33476,33478],{"class":639,"line":916},[637,33475,909],{"class":642},[637,33477,761],{"class":646},[637,33479,669],{"class":642},[637,33481,33482,33484,33486],{"class":639,"line":2695},[637,33483,732],{"class":642},[637,33485,750],{"class":646},[637,33487,669],{"class":642},[504,33489,926],{"id":925},[614,33491,33492,33494,33495,7428,33497,1150],{},[618,33493,33143],{}," inherits all props but ",[618,33496,32406],{},[618,33498,32238],{},[931,33500,33501,33513],{},[934,33502,33503],{},[937,33504,33505,33507,33509,33511],{},[940,33506,942],{},[940,33508,6178],{},[940,33510,945],{},[940,33512,948],{},[950,33514,33515,33531,33546,33561,33576],{},[937,33516,33517,33521,33526,33529],{},[955,33518,33519],{},[618,33520,15072],{},[955,33522,33523],{},[618,33524,33525],{},"Vector3 | [number, number, number]",[955,33527,33528],{},"Starting point",[955,33530],{},[937,33532,33533,33537,33541,33544],{},[955,33534,33535],{},[618,33536,15086],{},[955,33538,33539],{},[618,33540,33525],{},[955,33542,33543],{},"Ending point",[955,33545],{},[937,33547,33548,33552,33556,33559],{},[955,33549,33550],{},[618,33551,33364],{},[955,33553,33554],{},[618,33555,33525],{},[955,33557,33558],{},"First control point",[955,33560],{},[937,33562,33563,33567,33571,33574],{},[955,33564,33565],{},[618,33566,33395],{},[955,33568,33569],{},[618,33570,33525],{},[955,33572,33573],{},"Second control point",[955,33575],{},[937,33577,33578,33582,33586,33588],{},[955,33579,33580],{},[618,33581,32474],{},[955,33583,33584],{},[618,33585,5564],{},[955,33587,32583],{},[955,33589,32586],{},[1331,33591,32773],{},{"title":576,"searchDepth":577,"depth":578,"links":33593},[33594,33595],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Renders a Line2 between start and end points with two control points.",{},{"title":233,"description":33596},"gORWQkfn3pEx_Pr7x_kzEjd_CQoTYM445mILoeX4qjQ",{"id":33601,"title":237,"body":33602,"description":33832,"extension":591,"links":592,"meta":33833,"navigation":594,"path":238,"seo":33834,"stem":239,"__hash__":33835},"docs\u002F2.api\u002F5.shapes\u002Fcylinder.md",{"type":501,"value":33603,"toc":33829},[33604,33609,33619,33625,33631,33633,33826],[608,33605,33606],{},[33607,33608],"shapes-cylinder",{},[614,33610,2867,33611,9768,33613,32039,33616,1150],{},[618,33612,7526],{},[618,33614,33615],{},"\u003CCylinder \u002F>",[618,33617,33618],{},"CylinderGeometry",[626,33620,33623],{"className":33621,"code":33622,"language":32048},[32046],"args: [\n radiusTop: number,\n radiusBottom: number,\n height: number,\n radialSegments: number,\n heightSegments: number,\n openEnded: boolean,\n thetaStart: number,\n thetaLength: number\n]\n",[618,33624,33622],{"__ignoreMap":576},[614,33626,32053,33627],{},[1144,33628,33618],{"href":33629,"rel":33630},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=cylinder#api\u002Fen\u002Fgeometries\u002FCylinderGeometry",[1148],[504,33632,15],{"id":624},[626,33634,33636],{"className":628,"code":33635,"language":633,"meta":576,"style":576},"\u003CCylinder :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" color=\"orange\" \u002F>\n\n\u002F\u002F Cylinder with a custom material transformations\n\u003CCylinder ref=\"cylinderRef\" :args=\"[1, 1, 1, 32, 1, false, 0, Math.PI * 2]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FCylinder>\n",[618,33637,33638,33710,33714,33719,33814,33818],{"__ignoreMap":576},[637,33639,33640,33642,33644,33646,33648,33650,33652,33654,33656,33658,33660,33662,33664,33666,33668,33670,33672,33674,33676,33678,33680,33682,33684,33686,33689,33691,33694,33696,33698,33700,33702,33704,33706,33708],{"class":639,"line":577},[637,33641,643],{"class":642},[637,33643,237],{"class":646},[637,33645,813],{"class":642},[637,33647,2021],{"class":650},[637,33649,657],{"class":642},[637,33651,660],{"class":642},[637,33653,1498],{"class":683},[637,33655,1925],{"class":823},[637,33657,687],{"class":642},[637,33659,2631],{"class":823},[637,33661,687],{"class":642},[637,33663,2631],{"class":823},[637,33665,687],{"class":642},[637,33667,32842],{"class":823},[637,33669,687],{"class":642},[637,33671,2631],{"class":823},[637,33673,687],{"class":642},[637,33675,6934],{"class":4560},[637,33677,687],{"class":642},[637,33679,2577],{"class":823},[637,33681,687],{"class":642},[637,33683,8758],{"class":683},[637,33685,1150],{"class":642},[637,33687,33688],{"class":683},"PI ",[637,33690,24245],{"class":642},[637,33692,33693],{"class":823}," 2",[637,33695,1513],{"class":683},[637,33697,660],{"class":642},[637,33699,2773],{"class":650},[637,33701,657],{"class":642},[637,33703,660],{"class":642},[637,33705,14044],{"class":663},[637,33707,660],{"class":642},[637,33709,787],{"class":642},[637,33711,33712],{"class":639,"line":578},[637,33713,742],{"emptyLinePlaceholder":594},[637,33715,33716],{"class":639,"line":708},[637,33717,33718],{"class":683},"\u002F\u002F Cylinder with a custom material transformations\n",[637,33720,33721,33723,33725,33727,33729,33731,33734,33736,33738,33740,33742,33744,33746,33748,33750,33752,33754,33756,33758,33760,33762,33764,33766,33768,33770,33772,33774,33776,33778,33780,33782,33784,33786,33788,33790,33792,33794,33796,33798,33800,33802,33804,33806,33808,33810,33812],{"class":639,"line":729},[637,33722,643],{"class":642},[637,33724,237],{"class":646},[637,33726,3999],{"class":650},[637,33728,657],{"class":642},[637,33730,660],{"class":642},[637,33732,33733],{"class":663},"cylinderRef",[637,33735,660],{"class":642},[637,33737,813],{"class":642},[637,33739,2021],{"class":650},[637,33741,657],{"class":642},[637,33743,660],{"class":642},[637,33745,1498],{"class":683},[637,33747,1925],{"class":823},[637,33749,687],{"class":642},[637,33751,2631],{"class":823},[637,33753,687],{"class":642},[637,33755,2631],{"class":823},[637,33757,687],{"class":642},[637,33759,32842],{"class":823},[637,33761,687],{"class":642},[637,33763,2631],{"class":823},[637,33765,687],{"class":642},[637,33767,6934],{"class":4560},[637,33769,687],{"class":642},[637,33771,2577],{"class":823},[637,33773,687],{"class":642},[637,33775,8758],{"class":683},[637,33777,1150],{"class":642},[637,33779,33688],{"class":683},[637,33781,24245],{"class":642},[637,33783,33693],{"class":823},[637,33785,1513],{"class":683},[637,33787,660],{"class":642},[637,33789,813],{"class":642},[637,33791,1491],{"class":650},[637,33793,657],{"class":642},[637,33795,660],{"class":642},[637,33797,1498],{"class":683},[637,33799,969],{"class":823},[637,33801,687],{"class":642},[637,33803,32172],{"class":823},[637,33805,687],{"class":642},[637,33807,2577],{"class":823},[637,33809,1513],{"class":683},[637,33811,660],{"class":642},[637,33813,669],{"class":642},[637,33815,33816],{"class":639,"line":739},[637,33817,32187],{"class":683},[637,33819,33820,33822,33824],{"class":639,"line":745},[637,33821,732],{"class":642},[637,33823,237],{"class":646},[637,33825,669],{"class":642},[1331,33827,33828],{},"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 .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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}",{"title":576,"searchDepth":577,"depth":578,"links":33830},[33831],{"id":624,"depth":578,"text":15},"Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":237,"description":33832},"YTuULikIuPOFc-aN9KEgAYGN8T0QxNG4817fqzStsM0",{"id":33837,"title":241,"body":33838,"description":34001,"extension":591,"links":592,"meta":34002,"navigation":594,"path":242,"seo":34003,"stem":243,"__hash__":34004},"docs\u002F2.api\u002F5.shapes\u002Fdodecahedron.md",{"type":501,"value":33839,"toc":33998},[33840,33845,33855,33861,33867,33869,33996],[608,33841,33842],{},[33843,33844],"shapes-dodecahedron",{},[614,33846,2867,33847,9768,33849,32039,33852,1150],{},[618,33848,7526],{},[618,33850,33851],{},"\u003CDodecahedron \u002F>",[618,33853,33854],{},"DodecahedronGeometry",[626,33856,33859],{"className":33857,"code":33858,"language":32048},[32046],"args: [radius: number, detail: number]\n",[618,33860,33858],{"__ignoreMap":576},[614,33862,32053,33863],{},[1144,33864,33854],{"href":33865,"rel":33866},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=dode#api\u002Fen\u002Fgeometries\u002FDodecahedronGeometry",[1148],[504,33868,15],{"id":624},[626,33870,33872],{"className":628,"code":33871,"language":633,"meta":576,"style":576},"\u003CDodecahedron :args=\"[1, 0]\" color=\"orange\" \u002F>\n\n\u002F\u002F Dodecahedron with a custom material transformations\n\u003CDodecahedron ref=\"dodecahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FDodecahedron>\n",[618,33873,33874,33912,33916,33921,33984,33988],{"__ignoreMap":576},[637,33875,33876,33878,33880,33882,33884,33886,33888,33890,33892,33894,33896,33898,33900,33902,33904,33906,33908,33910],{"class":639,"line":577},[637,33877,643],{"class":642},[637,33879,241],{"class":646},[637,33881,813],{"class":642},[637,33883,2021],{"class":650},[637,33885,657],{"class":642},[637,33887,660],{"class":642},[637,33889,1498],{"class":683},[637,33891,1925],{"class":823},[637,33893,687],{"class":642},[637,33895,2577],{"class":823},[637,33897,1513],{"class":683},[637,33899,660],{"class":642},[637,33901,2773],{"class":650},[637,33903,657],{"class":642},[637,33905,660],{"class":642},[637,33907,14044],{"class":663},[637,33909,660],{"class":642},[637,33911,787],{"class":642},[637,33913,33914],{"class":639,"line":578},[637,33915,742],{"emptyLinePlaceholder":594},[637,33917,33918],{"class":639,"line":708},[637,33919,33920],{"class":683},"\u002F\u002F Dodecahedron with a custom material transformations\n",[637,33922,33923,33925,33927,33929,33931,33933,33936,33938,33940,33942,33944,33946,33948,33950,33952,33954,33956,33958,33960,33962,33964,33966,33968,33970,33972,33974,33976,33978,33980,33982],{"class":639,"line":729},[637,33924,643],{"class":642},[637,33926,241],{"class":646},[637,33928,3999],{"class":650},[637,33930,657],{"class":642},[637,33932,660],{"class":642},[637,33934,33935],{"class":663},"dodecahedronRef",[637,33937,660],{"class":642},[637,33939,813],{"class":642},[637,33941,2021],{"class":650},[637,33943,657],{"class":642},[637,33945,660],{"class":642},[637,33947,1498],{"class":683},[637,33949,1925],{"class":823},[637,33951,687],{"class":642},[637,33953,2577],{"class":823},[637,33955,1513],{"class":683},[637,33957,660],{"class":642},[637,33959,813],{"class":642},[637,33961,1491],{"class":650},[637,33963,657],{"class":642},[637,33965,660],{"class":642},[637,33967,1498],{"class":683},[637,33969,824],{"class":823},[637,33971,687],{"class":642},[637,33973,32172],{"class":823},[637,33975,687],{"class":642},[637,33977,2577],{"class":823},[637,33979,1513],{"class":683},[637,33981,660],{"class":642},[637,33983,669],{"class":642},[637,33985,33986],{"class":639,"line":739},[637,33987,32187],{"class":683},[637,33989,33990,33992,33994],{"class":639,"line":745},[637,33991,732],{"class":642},[637,33993,241],{"class":646},[637,33995,669],{"class":642},[1331,33997,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":33999},[34000],{"id":624,"depth":578,"text":15},"Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":241,"description":34001},"9Gw9CLOluoUzozbppxnr0DGwqvfyqgSPCC05IqHhr00",{"id":34006,"title":245,"body":34007,"description":34583,"extension":591,"links":592,"meta":34584,"navigation":594,"path":246,"seo":34585,"stem":247,"__hash__":34586},"docs\u002F2.api\u002F5.shapes\u002Fgrid.md",{"type":501,"value":34008,"toc":34579},[34009,34014,34020,34022,34392,34394,34576],[608,34010,34011],{},[34012,34013],"shapes-grid",{},[614,34015,34016,34019],{},[618,34017,34018],{},"\u003CGrid \u002F>"," creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.",[504,34021,15],{"id":624},[626,34023,34026],{"className":628,"code":34024,"highlights":34025,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Grid, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222222\">\n \u003CTresPerspectiveCamera :position=\"[8, 10, 10]\" :fov=\"25\" \u002F>\n \u003COrbitControls \u002F>\n \u003CGrid\n :args=\"[10.5, 10.5]\"\n cell-color=\"#82dbc5\"\n :cell-size=\"0.6\"\n :cell-thickness=\"0.5\"\n section-color=\"#fbb03b\"\n :section-size=\"2\"\n :section-thickness=\"1.3\"\n :infinite-grid=\"true\"\n :fade-from=\"0\"\n :fade-distance=\"12\"\n :fade-strength=\"1\"\n \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,800,805,831,631,854,865,876,886,632,906,916,2695],[618,34027,34028,34048,34072,34090,34098,34102,34110,34129,34175,34183,34191,34215,34229,34245,34261,34275,34291,34308,34324,34340,34356,34372,34376,34384],{"__ignoreMap":576},[637,34029,34030,34032,34034,34036,34038,34040,34042,34044,34046],{"class":639,"line":577},[637,34031,643],{"class":642},[637,34033,647],{"class":646},[637,34035,651],{"class":650},[637,34037,654],{"class":650},[637,34039,657],{"class":642},[637,34041,660],{"class":642},[637,34043,664],{"class":663},[637,34045,660],{"class":642},[637,34047,669],{"class":642},[637,34049,34051,34053,34055,34058,34060,34062,34064,34066,34068,34070],{"class":34050,"line":578},[639,673],[637,34052,677],{"class":676},[637,34054,680],{"class":642},[637,34056,34057],{"class":683}," Grid",[637,34059,687],{"class":642},[637,34061,690],{"class":683},[637,34063,693],{"class":642},[637,34065,696],{"class":676},[637,34067,699],{"class":642},[637,34069,702],{"class":663},[637,34071,705],{"class":642},[637,34073,34074,34076,34078,34080,34082,34084,34086,34088],{"class":639,"line":708},[637,34075,677],{"class":676},[637,34077,680],{"class":642},[637,34079,715],{"class":683},[637,34081,693],{"class":642},[637,34083,696],{"class":676},[637,34085,699],{"class":642},[637,34087,724],{"class":663},[637,34089,705],{"class":642},[637,34091,34092,34094,34096],{"class":639,"line":729},[637,34093,732],{"class":642},[637,34095,647],{"class":646},[637,34097,669],{"class":642},[637,34099,34100],{"class":639,"line":739},[637,34101,742],{"emptyLinePlaceholder":594},[637,34103,34104,34106,34108],{"class":639,"line":745},[637,34105,643],{"class":642},[637,34107,750],{"class":646},[637,34109,669],{"class":642},[637,34111,34112,34114,34116,34118,34120,34122,34125,34127],{"class":639,"line":755},[637,34113,758],{"class":642},[637,34115,761],{"class":646},[637,34117,764],{"class":650},[637,34119,657],{"class":642},[637,34121,660],{"class":642},[637,34123,34124],{"class":663},"#222222",[637,34126,660],{"class":642},[637,34128,669],{"class":642},[637,34130,34131,34133,34135,34137,34139,34141,34143,34145,34147,34149,34151,34153,34155,34157,34159,34161,34164,34166,34168,34171,34173],{"class":639,"line":778},[637,34132,781],{"class":642},[637,34134,784],{"class":646},[637,34136,813],{"class":642},[637,34138,1491],{"class":650},[637,34140,657],{"class":642},[637,34142,660],{"class":642},[637,34144,1498],{"class":642},[637,34146,22756],{"class":823},[637,34148,1503],{"class":642},[637,34150,1510],{"class":823},[637,34152,1503],{"class":642},[637,34154,1510],{"class":823},[637,34156,1513],{"class":642},[637,34158,660],{"class":642},[637,34160,813],{"class":642},[637,34162,34163],{"class":650},"fov",[637,34165,657],{"class":642},[637,34167,660],{"class":642},[637,34169,34170],{"class":823},"25",[637,34172,660],{"class":642},[637,34174,787],{"class":642},[637,34176,34177,34179,34181],{"class":639,"line":790},[637,34178,781],{"class":642},[637,34180,795],{"class":646},[637,34182,787],{"class":642},[637,34184,34186,34188],{"class":34185,"line":800},[639,673],[637,34187,781],{"class":642},[637,34189,34190],{"class":646},"Grid\n",[637,34192,34194,34196,34198,34200,34202,34204,34207,34209,34211,34213],{"class":34193,"line":805},[639,673],[637,34195,13000],{"class":642},[637,34197,2021],{"class":650},[637,34199,657],{"class":642},[637,34201,660],{"class":642},[637,34203,1498],{"class":642},[637,34205,34206],{"class":823},"10.5",[637,34208,1503],{"class":642},[637,34210,34206],{"class":823},[637,34212,1513],{"class":642},[637,34214,3224],{"class":642},[637,34216,34218,34221,34223,34225,34227],{"class":34217,"line":831},[639,673],[637,34219,34220],{"class":650}," cell-color",[637,34222,657],{"class":642},[637,34224,660],{"class":642},[637,34226,12015],{"class":663},[637,34228,3224],{"class":642},[637,34230,34232,34234,34237,34239,34241,34243],{"class":34231,"line":631},[639,673],[637,34233,13000],{"class":642},[637,34235,34236],{"class":650},"cell-size",[637,34238,657],{"class":642},[637,34240,660],{"class":642},[637,34242,11028],{"class":823},[637,34244,3224],{"class":642},[637,34246,34248,34250,34253,34255,34257,34259],{"class":34247,"line":854},[639,673],[637,34249,13000],{"class":642},[637,34251,34252],{"class":650},"cell-thickness",[637,34254,657],{"class":642},[637,34256,660],{"class":642},[637,34258,1545],{"class":823},[637,34260,3224],{"class":642},[637,34262,34264,34267,34269,34271,34273],{"class":34263,"line":865},[639,673],[637,34265,34266],{"class":650}," section-color",[637,34268,657],{"class":642},[637,34270,660],{"class":642},[637,34272,10533],{"class":663},[637,34274,3224],{"class":642},[637,34276,34278,34280,34283,34285,34287,34289],{"class":34277,"line":876},[639,673],[637,34279,13000],{"class":642},[637,34281,34282],{"class":650},"section-size",[637,34284,657],{"class":642},[637,34286,660],{"class":642},[637,34288,824],{"class":823},[637,34290,3224],{"class":642},[637,34292,34294,34296,34299,34301,34303,34306],{"class":34293,"line":886},[639,673],[637,34295,13000],{"class":642},[637,34297,34298],{"class":650},"section-thickness",[637,34300,657],{"class":642},[637,34302,660],{"class":642},[637,34304,34305],{"class":823},"1.3",[637,34307,3224],{"class":642},[637,34309,34311,34313,34316,34318,34320,34322],{"class":34310,"line":632},[639,673],[637,34312,13000],{"class":642},[637,34314,34315],{"class":650},"infinite-grid",[637,34317,657],{"class":642},[637,34319,660],{"class":642},[637,34321,965],{"class":4560},[637,34323,3224],{"class":642},[637,34325,34327,34329,34332,34334,34336,34338],{"class":34326,"line":906},[639,673],[637,34328,13000],{"class":642},[637,34330,34331],{"class":650},"fade-from",[637,34333,657],{"class":642},[637,34335,660],{"class":642},[637,34337,969],{"class":823},[637,34339,3224],{"class":642},[637,34341,34343,34345,34348,34350,34352,34354],{"class":34342,"line":916},[639,673],[637,34344,13000],{"class":642},[637,34346,34347],{"class":650},"fade-distance",[637,34349,657],{"class":642},[637,34351,660],{"class":642},[637,34353,11359],{"class":823},[637,34355,3224],{"class":642},[637,34357,34359,34361,34364,34366,34368,34370],{"class":34358,"line":2695},[639,673],[637,34360,13000],{"class":642},[637,34362,34363],{"class":650},"fade-strength",[637,34365,657],{"class":642},[637,34367,660],{"class":642},[637,34369,1925],{"class":823},[637,34371,3224],{"class":642},[637,34373,34374],{"class":639,"line":2704},[637,34375,18174],{"class":642},[637,34377,34378,34380,34382],{"class":639,"line":2738},[637,34379,909],{"class":642},[637,34381,761],{"class":646},[637,34383,669],{"class":642},[637,34385,34386,34388,34390],{"class":639,"line":2747},[637,34387,732],{"class":642},[637,34389,750],{"class":646},[637,34391,669],{"class":642},[504,34393,926],{"id":925},[931,34395,34396,34406],{},[934,34397,34398],{},[937,34399,34400,34402,34404],{},[940,34401,942],{"align":1001},[940,34403,945],{"align":1001},[940,34405,948],{},[950,34407,34408,34422,34436,34450,34464,34478,34492,34506,34520,34534,34548,34562],{},[937,34409,34410,34415,34418],{},[955,34411,34412],{"align":1001},[1705,34413,34414],{},"cellSize",[955,34416,34417],{"align":1001},"Cell size",[955,34419,34420],{},[618,34421,1545],{},[937,34423,34424,34429,34432],{},[955,34425,34426],{"align":1001},[1705,34427,34428],{},"cellThickness",[955,34430,34431],{"align":1001},"Thickness of cell lines",[955,34433,34434],{},[618,34435,1545],{},[937,34437,34438,34443,34446],{},[955,34439,34440],{"align":1001},[1705,34441,34442],{},"cellColor",[955,34444,34445],{"align":1001},"Color of cell lines",[955,34447,34448],{},[618,34449,12162],{},[937,34451,34452,34457,34460],{},[955,34453,34454],{"align":1001},[1705,34455,34456],{},"sectionSize",[955,34458,34459],{"align":1001},"Section size",[955,34461,34462],{},[618,34463,1925],{},[937,34465,34466,34471,34474],{},[955,34467,34468],{"align":1001},[1705,34469,34470],{},"sectionThickness",[955,34472,34473],{"align":1001},"Thickness of section lines",[955,34475,34476],{},[618,34477,1925],{},[937,34479,34480,34485,34487],{},[955,34481,34482],{"align":1001},[1705,34483,34484],{},"sectionColor",[955,34486,34445],{"align":1001},[955,34488,34489],{},[618,34490,34491],{},"'blue'",[937,34493,34494,34499,34502],{},[955,34495,34496],{"align":1001},[1705,34497,34498],{},"followCamera",[955,34500,34501],{"align":1001},"Whether to follow camera",[955,34503,34504],{},[618,34505,975],{},[937,34507,34508,34513,34516],{},[955,34509,34510],{"align":1001},[1705,34511,34512],{},"infiniteGrid",[955,34514,34515],{"align":1001},"Whether to display an infinite grid",[955,34517,34518],{},[618,34519,975],{},[937,34521,34522,34527,34530],{},[955,34523,34524],{"align":1001},[1705,34525,34526],{},"fadeDistance",[955,34528,34529],{"align":1001},"Fade distance",[955,34531,34532],{},[618,34533,11706],{},[937,34535,34536,34541,34544],{},[955,34537,34538],{"align":1001},[1705,34539,34540],{},"fadeStrength",[955,34542,34543],{"align":1001},"Fade strength",[955,34545,34546],{},[618,34547,1925],{},[937,34549,34550,34555,34558],{},[955,34551,34552],{"align":1001},[1705,34553,34554],{},"fadeFrom",[955,34556,34557],{"align":1001},"Fade from camera (1) or origin (0) or in between",[955,34559,34560],{},[618,34561,1925],{},[937,34563,34564,34568,34571],{},[955,34565,34566],{"align":1001},[1705,34567,27632],{},[955,34569,34570],{"align":1001},"Material side",[955,34572,34573],{},[618,34574,34575],{},"THREE.BackSide",[1331,34577,34578],{},"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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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);}",{"title":576,"searchDepth":577,"depth":578,"links":34580},[34581,34582],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Shader-based grid plane with customizable cell and section lines.",{},{"title":245,"description":34583},"v8vI4rVYVnvvadMij1GMf3y8EqHb2jEVQK1i_UillkQ",{"id":34588,"title":249,"body":34589,"description":34751,"extension":591,"links":592,"meta":34752,"navigation":594,"path":250,"seo":34753,"stem":251,"__hash__":34754},"docs\u002F2.api\u002F5.shapes\u002Ficosahedron.md",{"type":501,"value":34590,"toc":34748},[34591,34596,34606,34611,34617,34619,34746],[608,34592,34593],{},[34594,34595],"shapes-icosahedron",{},[614,34597,2867,34598,9768,34600,32039,34603,1150],{},[618,34599,7526],{},[618,34601,34602],{},"\u003CIcosahedron \u002F>",[618,34604,34605],{},"IcosahedronGeometry",[626,34607,34609],{"className":34608,"code":33858,"language":32048},[32046],[618,34610,33858],{"__ignoreMap":576},[614,34612,32053,34613],{},[1144,34614,34605],{"href":34615,"rel":34616},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=ico#api\u002Fen\u002Fgeometries\u002FIcosahedronGeometry",[1148],[504,34618,15],{"id":624},[626,34620,34622],{"className":628,"code":34621,"language":633,"meta":576,"style":576},"\u003CIcosahedron :args=\"[1, 0]\" color=\"orange\" \u002F>\n\n\u002F\u002F Icosahedron with a custom material transformations\n\u003CIcosahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FIcosahedron>\n",[618,34623,34624,34662,34666,34671,34734,34738],{"__ignoreMap":576},[637,34625,34626,34628,34630,34632,34634,34636,34638,34640,34642,34644,34646,34648,34650,34652,34654,34656,34658,34660],{"class":639,"line":577},[637,34627,643],{"class":642},[637,34629,249],{"class":646},[637,34631,813],{"class":642},[637,34633,2021],{"class":650},[637,34635,657],{"class":642},[637,34637,660],{"class":642},[637,34639,1498],{"class":683},[637,34641,1925],{"class":823},[637,34643,687],{"class":642},[637,34645,2577],{"class":823},[637,34647,1513],{"class":683},[637,34649,660],{"class":642},[637,34651,2773],{"class":650},[637,34653,657],{"class":642},[637,34655,660],{"class":642},[637,34657,14044],{"class":663},[637,34659,660],{"class":642},[637,34661,787],{"class":642},[637,34663,34664],{"class":639,"line":578},[637,34665,742],{"emptyLinePlaceholder":594},[637,34667,34668],{"class":639,"line":708},[637,34669,34670],{"class":683},"\u002F\u002F Icosahedron with a custom material transformations\n",[637,34672,34673,34675,34677,34679,34681,34683,34686,34688,34690,34692,34694,34696,34698,34700,34702,34704,34706,34708,34710,34712,34714,34716,34718,34720,34722,34724,34726,34728,34730,34732],{"class":639,"line":729},[637,34674,643],{"class":642},[637,34676,249],{"class":646},[637,34678,3999],{"class":650},[637,34680,657],{"class":642},[637,34682,660],{"class":642},[637,34684,34685],{"class":663},"icosahedronRef",[637,34687,660],{"class":642},[637,34689,813],{"class":642},[637,34691,2021],{"class":650},[637,34693,657],{"class":642},[637,34695,660],{"class":642},[637,34697,1498],{"class":683},[637,34699,1925],{"class":823},[637,34701,687],{"class":642},[637,34703,2577],{"class":823},[637,34705,1513],{"class":683},[637,34707,660],{"class":642},[637,34709,813],{"class":642},[637,34711,1491],{"class":650},[637,34713,657],{"class":642},[637,34715,660],{"class":642},[637,34717,1498],{"class":683},[637,34719,824],{"class":823},[637,34721,687],{"class":642},[637,34723,32172],{"class":823},[637,34725,687],{"class":642},[637,34727,2577],{"class":823},[637,34729,1513],{"class":683},[637,34731,660],{"class":642},[637,34733,669],{"class":642},[637,34735,34736],{"class":639,"line":739},[637,34737,32187],{"class":683},[637,34739,34740,34742,34744],{"class":639,"line":745},[637,34741,732],{"class":642},[637,34743,249],{"class":646},[637,34745,669],{"class":642},[1331,34747,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":34749},[34750],{"id":624,"depth":578,"text":15},"Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":249,"description":34751},"8yFEbasoREduB_hHH4IqpVmHiF3zCgvuXNtzkba_4Jg",{"id":34756,"title":253,"body":34757,"description":35414,"extension":591,"links":592,"meta":35415,"navigation":594,"path":254,"seo":35416,"stem":255,"__hash__":35417},"docs\u002F2.api\u002F5.shapes\u002Fline2.md",{"type":501,"value":34758,"toc":35408},[34759,34764,34777,34779,35034,35036,35187,35190,35193,35198,35205,35267,35272,35402,35405],[2367,34760,34761],{},[34762,34763],"shapes-line2",{},[614,34765,2867,34766,9768,34768,34770,34771,1150],{},[618,34767,7526],{},[618,34769,32238],{}," component for creating 3-D lines. It wraps ",[1144,34772,32232,34775],{"href":34773,"rel":34774},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fblob\u002Fe2bcdfff6427c2f106cb819b18d88d1e13aa508a\u002Fexamples\u002Fjsm\u002Flines\u002FLine2.js",[1148],[618,34776,253],{},[504,34778,15],{"id":624},[626,34780,34783],{"className":628,"code":34781,"highlights":34782,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Line2 } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CLine2\n :points=\"[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]\"\n color=\"orange\"\n :line-width=\"3\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,778,790,800,805,831],[618,34784,34785,34805,34823,34843,34851,34855,34863,34871,34904,34912,34978,34991,35006,35010,35018,35026],{"__ignoreMap":576},[637,34786,34787,34789,34791,34793,34795,34797,34799,34801,34803],{"class":639,"line":577},[637,34788,643],{"class":642},[637,34790,647],{"class":646},[637,34792,651],{"class":650},[637,34794,654],{"class":650},[637,34796,657],{"class":642},[637,34798,660],{"class":642},[637,34800,664],{"class":663},[637,34802,660],{"class":642},[637,34804,669],{"class":642},[637,34806,34807,34809,34811,34813,34815,34817,34819,34821],{"class":639,"line":578},[637,34808,677],{"class":676},[637,34810,680],{"class":642},[637,34812,715],{"class":683},[637,34814,693],{"class":642},[637,34816,696],{"class":676},[637,34818,699],{"class":642},[637,34820,724],{"class":663},[637,34822,705],{"class":642},[637,34824,34826,34828,34830,34833,34835,34837,34839,34841],{"class":34825,"line":708},[639,673],[637,34827,677],{"class":676},[637,34829,680],{"class":642},[637,34831,34832],{"class":683}," Line2",[637,34834,693],{"class":642},[637,34836,696],{"class":676},[637,34838,699],{"class":642},[637,34840,702],{"class":663},[637,34842,705],{"class":642},[637,34844,34845,34847,34849],{"class":639,"line":729},[637,34846,732],{"class":642},[637,34848,647],{"class":646},[637,34850,669],{"class":642},[637,34852,34853],{"class":639,"line":739},[637,34854,742],{"emptyLinePlaceholder":594},[637,34856,34857,34859,34861],{"class":639,"line":745},[637,34858,643],{"class":642},[637,34860,750],{"class":646},[637,34862,669],{"class":642},[637,34864,34865,34867,34869],{"class":639,"line":755},[637,34866,758],{"class":642},[637,34868,761],{"class":646},[637,34870,669],{"class":642},[637,34872,34874,34876,34878,34880,34882,34884,34886,34888,34890,34892,34894,34896,34898,34900,34902],{"class":34873,"line":778},[639,673],[637,34875,781],{"class":642},[637,34877,784],{"class":646},[637,34879,813],{"class":642},[637,34881,1491],{"class":650},[637,34883,657],{"class":642},[637,34885,660],{"class":642},[637,34887,1498],{"class":642},[637,34889,2729],{"class":823},[637,34891,1503],{"class":642},[637,34893,2729],{"class":823},[637,34895,1503],{"class":642},[637,34897,2729],{"class":823},[637,34899,1513],{"class":642},[637,34901,660],{"class":642},[637,34903,787],{"class":642},[637,34905,34907,34909],{"class":34906,"line":790},[639,673],[637,34908,781],{"class":642},[637,34910,34911],{"class":646},"Line2\n",[637,34913,34915,34917,34919,34921,34923,34926,34928,34930,34932,34934,34936,34939,34941,34943,34945,34947,34949,34951,34953,34955,34957,34959,34961,34963,34965,34967,34969,34971,34973,34976],{"class":34914,"line":800},[639,673],[637,34916,13000],{"class":642},[637,34918,32406],{"class":650},[637,34920,657],{"class":642},[637,34922,660],{"class":642},[637,34924,34925],{"class":642},"[[",[637,34927,969],{"class":823},[637,34929,1503],{"class":642},[637,34931,969],{"class":823},[637,34933,1503],{"class":642},[637,34935,969],{"class":823},[637,34937,34938],{"class":642},"], [",[637,34940,1925],{"class":823},[637,34942,1503],{"class":642},[637,34944,1925],{"class":823},[637,34946,1503],{"class":642},[637,34948,969],{"class":823},[637,34950,34938],{"class":642},[637,34952,1925],{"class":823},[637,34954,1503],{"class":642},[637,34956,1925],{"class":823},[637,34958,1503],{"class":642},[637,34960,1925],{"class":823},[637,34962,34938],{"class":642},[637,34964,969],{"class":823},[637,34966,1503],{"class":642},[637,34968,969],{"class":823},[637,34970,1503],{"class":642},[637,34972,1925],{"class":823},[637,34974,34975],{"class":642},"]]",[637,34977,3224],{"class":642},[637,34979,34981,34983,34985,34987,34989],{"class":34980,"line":805},[639,673],[637,34982,32488],{"class":650},[637,34984,657],{"class":642},[637,34986,660],{"class":642},[637,34988,14044],{"class":663},[637,34990,3224],{"class":642},[637,34992,34994,34996,34998,35000,35002,35004],{"class":34993,"line":831},[639,673],[637,34995,13000],{"class":642},[637,34997,32504],{"class":650},[637,34999,657],{"class":642},[637,35001,660],{"class":642},[637,35003,2729],{"class":823},[637,35005,3224],{"class":642},[637,35007,35008],{"class":639,"line":631},[637,35009,18174],{"class":642},[637,35011,35012,35014,35016],{"class":639,"line":854},[637,35013,781],{"class":642},[637,35015,10010],{"class":646},[637,35017,787],{"class":642},[637,35019,35020,35022,35024],{"class":639,"line":865},[637,35021,909],{"class":642},[637,35023,761],{"class":646},[637,35025,669],{"class":642},[637,35027,35028,35030,35032],{"class":639,"line":876},[637,35029,732],{"class":642},[637,35031,750],{"class":646},[637,35033,669],{"class":642},[504,35035,926],{"id":925},[931,35037,35038,35050],{},[934,35039,35040],{},[937,35041,35042,35044,35046,35048],{},[940,35043,942],{},[940,35045,6178],{},[940,35047,945],{},[940,35049,948],{},[950,35051,35052,35067,35079,35091,35103,35115,35127,35139,35151,35163,35175],{},[937,35053,35054,35056,35062,35065],{},[955,35055,32406],{},[955,35057,35058],{},[1144,35059,35061],{"href":35060},"#points","See below",[955,35063,35064],{},"Points representing the line",[955,35066],{},[937,35068,35069,35071,35075,35077],{},[955,35070,32635],{},[955,35072,35073],{},[618,35074,32640],{},[955,35076,32643],{},[955,35078,3749],{},[937,35080,35081,35083,35087,35089],{},[955,35082,7770],{},[955,35084,35085],{},[618,35086,7785],{},[955,35088,32656],{},[955,35090,32659],{},[937,35092,35093,35095,35099,35101],{},[955,35094,32664],{},[955,35096,35097],{},[618,35098,5564],{},[955,35100,32671],{},[955,35102,1925],{},[937,35104,35105,35107,35111,35113],{},[955,35106,29499],{},[955,35108,35109],{},[618,35110,18466],{},[955,35112,32684],{},[955,35114,975],{},[937,35116,35117,35119,35123,35125],{},[955,35118,32691],{},[955,35120,35121],{},[618,35122,18466],{},[955,35124,32698],{},[955,35126,975],{},[937,35128,35129,35131,35135,35137],{},[955,35130,32705],{},[955,35132,35133],{},[618,35134,18466],{},[955,35136,32712],{},[955,35138,975],{},[937,35140,35141,35143,35147,35149],{},[955,35142,32719],{},[955,35144,35145],{},[618,35146,5564],{},[955,35148,32726],{},[955,35150,1925],{},[937,35152,35153,35155,35159,35161],{},[955,35154,32733],{},[955,35156,35157],{},[618,35158,5564],{},[955,35160,32740],{},[955,35162,1925],{},[937,35164,35165,35167,35171,35173],{},[955,35166,32747],{},[955,35168,35169],{},[618,35170,5564],{},[955,35172,32754],{},[955,35174,1925],{},[937,35176,35177,35179,35183,35185],{},[955,35178,32761],{},[955,35180,35181],{},[618,35182,5564],{},[955,35184,32768],{},[955,35186,969],{},[4215,35188,35189],{"id":32406},"Points",[614,35191,35192],{},"The points prop has the following type:",[614,35194,35195],{},[618,35196,35197],{},"Array\u003CVector3 | Vector2 | [number, number, number] | [number, number] | number>",[614,35199,35200,35201,35204],{},"The passed array is converted to ",[618,35202,35203],{},"Array\u003Cnumber>"," – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:",[931,35206,35207,35217],{},[934,35208,35209],{},[937,35210,35211,35214],{},[940,35212,35213],{},"Entry type",[940,35215,35216],{},"Interpretation",[950,35218,35219,35228,35240,35249,35258],{},[937,35220,35221,35225],{},[955,35222,35223],{},[618,35224,8411],{},[955,35226,35227],{},"Insert the vector's x, y, z into the result array",[937,35229,35230,35237],{},[955,35231,35232],{},[35233,35234,35235],"nobr",{},[618,35236,8408],{},[955,35238,35239],{},"Insert the array values into the result array",[937,35241,35242,35246],{},[955,35243,35244],{},[618,35245,27598],{},[955,35247,35248],{},"Insert the vector's x, y, then 0 into the result array",[937,35250,35251,35255],{},[955,35252,35253],{},[618,35254,30448],{},[955,35256,35257],{},"Insert the array values, then 0 into the result array",[937,35259,35260,35264],{},[955,35261,35262],{},[618,35263,5564],{},[955,35265,35266],{},"Insert the number into the result array",[3292,35268,35269],{},[614,35270,35271],{},"If you pass bare numbers in the points array, ensure that you pass triplets – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.",[626,35273,35275],{"className":628,"code":35274,"language":633,"meta":576,"style":576},"\u003C!-- Wrong -->\n\u003CLine2 :points=\"[[1,1], 2, 2, [3,3]]\" \u002F>\n\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n\n\u003C!-- Right -->\n\u003CLine2 :points=\"[[1, 1], 2, 2, 0, [3, 3]]\" \u002F>\n\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[618,35276,35277,35282,35330,35335,35339,35344,35397],{"__ignoreMap":576},[637,35278,35279],{"class":639,"line":577},[637,35280,35281],{"class":1213},"\u003C!-- Wrong -->\n",[637,35283,35284,35286,35288,35290,35292,35294,35296,35298,35300,35302,35304,35306,35308,35310,35312,35314,35316,35318,35320,35322,35324,35326,35328],{"class":639,"line":578},[637,35285,643],{"class":642},[637,35287,253],{"class":646},[637,35289,813],{"class":642},[637,35291,32406],{"class":650},[637,35293,657],{"class":642},[637,35295,660],{"class":642},[637,35297,34925],{"class":683},[637,35299,1925],{"class":823},[637,35301,687],{"class":642},[637,35303,1925],{"class":823},[637,35305,1513],{"class":683},[637,35307,687],{"class":642},[637,35309,33693],{"class":823},[637,35311,687],{"class":642},[637,35313,33693],{"class":823},[637,35315,687],{"class":642},[637,35317,2570],{"class":683},[637,35319,2729],{"class":823},[637,35321,687],{"class":642},[637,35323,2729],{"class":823},[637,35325,34975],{"class":683},[637,35327,660],{"class":642},[637,35329,787],{"class":642},[637,35331,35332],{"class":639,"line":708},[637,35333,35334],{"class":1213},"\u003C!-- result: (1,1,0) (2,2,3) (3,0,❌) -->\n",[637,35336,35337],{"class":639,"line":729},[637,35338,742],{"emptyLinePlaceholder":594},[637,35340,35341],{"class":639,"line":739},[637,35342,35343],{"class":1213},"\u003C!-- Right -->\n",[637,35345,35346,35348,35350,35352,35354,35356,35358,35360,35362,35364,35366,35368,35370,35372,35374,35376,35378,35380,35382,35384,35386,35388,35391,35393,35395],{"class":639,"line":745},[637,35347,643],{"class":642},[637,35349,253],{"class":646},[637,35351,813],{"class":642},[637,35353,32406],{"class":650},[637,35355,657],{"class":642},[637,35357,660],{"class":642},[637,35359,34925],{"class":683},[637,35361,1925],{"class":823},[637,35363,687],{"class":642},[637,35365,2631],{"class":823},[637,35367,1513],{"class":683},[637,35369,687],{"class":642},[637,35371,33693],{"class":823},[637,35373,687],{"class":642},[637,35375,33693],{"class":823},[637,35377,687],{"class":642},[637,35379,2577],{"class":823},[637,35381,687],{"class":642},[637,35383,2570],{"class":683},[637,35385,2729],{"class":823},[637,35387,687],{"class":642},[637,35389,35390],{"class":823}," 3",[637,35392,34975],{"class":683},[637,35394,660],{"class":642},[637,35396,787],{"class":642},[637,35398,35399],{"class":639,"line":755},[637,35400,35401],{"class":1213},"\u003C!-- result: (1,1,0) (2,2,0) (3,3,0) -->\n",[614,35403,35404],{},"The component, like Three.js, will not keep you from shooting yourself in the foot.",[1331,35406,35407],{},"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 .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":576,"searchDepth":577,"depth":578,"links":35409},[35410,35411],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926,"children":35412},[35413],{"id":32406,"depth":708,"text":35189},"Component for creating 3D lines using Three.js's Line2.",{},{"title":253,"description":35414},"YTuT8KgQYLHeyqqWlrzJw6EHsHroohvx3OSFmnm7qB8",{"id":35419,"title":257,"body":35420,"description":35581,"extension":591,"links":592,"meta":35582,"navigation":594,"path":258,"seo":35583,"stem":259,"__hash__":35584},"docs\u002F2.api\u002F5.shapes\u002Foctahedron.md",{"type":501,"value":35421,"toc":35578},[35422,35427,35437,35442,35448,35450,35576],[608,35423,35424],{},[35425,35426],"shapes-octahedron",{},[614,35428,2867,35429,9768,35431,32039,35434,1150],{},[618,35430,7526],{},[618,35432,35433],{},"\u003COctahedron \u002F>",[618,35435,35436],{},"OctahedronGeometry",[626,35438,35440],{"className":35439,"code":33858,"language":32048},[32046],[618,35441,33858],{"__ignoreMap":576},[614,35443,32053,35444],{},[1144,35445,35436],{"href":35446,"rel":35447},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=octa#api\u002Fen\u002Fgeometries\u002FOctahedronGeometry",[1148],[504,35449,15],{"id":624},[626,35451,35453],{"className":628,"code":35452,"language":633,"meta":576,"style":576},"\u003COctahedron :args=\"[1, 0]\" color=\"orange\" \u002F>\n\n\u002F\u002F Octahedron with a custom material transformations\n\u003COctahedron ref=\"icosahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FOctahedron>\n",[618,35454,35455,35493,35497,35502,35564,35568],{"__ignoreMap":576},[637,35456,35457,35459,35461,35463,35465,35467,35469,35471,35473,35475,35477,35479,35481,35483,35485,35487,35489,35491],{"class":639,"line":577},[637,35458,643],{"class":642},[637,35460,257],{"class":646},[637,35462,813],{"class":642},[637,35464,2021],{"class":650},[637,35466,657],{"class":642},[637,35468,660],{"class":642},[637,35470,1498],{"class":683},[637,35472,1925],{"class":823},[637,35474,687],{"class":642},[637,35476,2577],{"class":823},[637,35478,1513],{"class":683},[637,35480,660],{"class":642},[637,35482,2773],{"class":650},[637,35484,657],{"class":642},[637,35486,660],{"class":642},[637,35488,14044],{"class":663},[637,35490,660],{"class":642},[637,35492,787],{"class":642},[637,35494,35495],{"class":639,"line":578},[637,35496,742],{"emptyLinePlaceholder":594},[637,35498,35499],{"class":639,"line":708},[637,35500,35501],{"class":683},"\u002F\u002F Octahedron with a custom material transformations\n",[637,35503,35504,35506,35508,35510,35512,35514,35516,35518,35520,35522,35524,35526,35528,35530,35532,35534,35536,35538,35540,35542,35544,35546,35548,35550,35552,35554,35556,35558,35560,35562],{"class":639,"line":729},[637,35505,643],{"class":642},[637,35507,257],{"class":646},[637,35509,3999],{"class":650},[637,35511,657],{"class":642},[637,35513,660],{"class":642},[637,35515,34685],{"class":663},[637,35517,660],{"class":642},[637,35519,813],{"class":642},[637,35521,2021],{"class":650},[637,35523,657],{"class":642},[637,35525,660],{"class":642},[637,35527,1498],{"class":683},[637,35529,1925],{"class":823},[637,35531,687],{"class":642},[637,35533,2577],{"class":823},[637,35535,1513],{"class":683},[637,35537,660],{"class":642},[637,35539,813],{"class":642},[637,35541,1491],{"class":650},[637,35543,657],{"class":642},[637,35545,660],{"class":642},[637,35547,1498],{"class":683},[637,35549,824],{"class":823},[637,35551,687],{"class":642},[637,35553,32172],{"class":823},[637,35555,687],{"class":642},[637,35557,2577],{"class":823},[637,35559,1513],{"class":683},[637,35561,660],{"class":642},[637,35563,669],{"class":642},[637,35565,35566],{"class":639,"line":739},[637,35567,32187],{"class":683},[637,35569,35570,35572,35574],{"class":639,"line":745},[637,35571,732],{"class":642},[637,35573,257],{"class":646},[637,35575,669],{"class":642},[1331,35577,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":35579},[35580],{"id":624,"depth":578,"text":15},"Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":257,"description":35581},"Oz79qfy3nukSma4rHutQfO-XwSxFFirqgE7OHz_8-MQ",{"id":35586,"title":261,"body":35587,"description":35755,"extension":591,"links":592,"meta":35756,"navigation":594,"path":262,"seo":35757,"stem":263,"__hash__":35758},"docs\u002F2.api\u002F5.shapes\u002Fplane.md",{"type":501,"value":35588,"toc":35752},[35589,35594,35604,35610,35616,35621,35623,35750],[608,35590,35591],{},[35592,35593],"shapes-plane",{},[614,35595,2867,35596,9768,35598,32039,35601,1150],{},[618,35597,7526],{},[618,35599,35600],{},"\u003CPlane \u002F>",[618,35602,35603],{},"PlaneGeometry",[626,35605,35608],{"className":35606,"code":35607,"language":32048},[32046],"args: [width: number, height: number, widthSegments: number, heightSegments: number]\n",[618,35609,35607],{"__ignoreMap":576},[614,35611,32053,35612],{},[1144,35613,35603],{"href":35614,"rel":35615},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=plane#api\u002Fen\u002Fgeometries\u002FPlaneGeometry",[1148],[2078,35617,35618],{},[614,35619,35620],{},"A convenient default rotation is applied to the x-axis of the plane (-Math.PI \u002F 2), so that it is facing up (along the Y axis).",[504,35622,15],{"id":624},[626,35624,35626],{"className":628,"code":35625,"language":633,"meta":576,"style":576},"\u003CPlane :args=\"[1, 1]\" color=\"orange\" \u002F>\n\n\u002F\u002F Plane with a custom material transformations\n\u003CPlane ref=\"planeRef\" :args=\"[8, 8]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FPlane>\n",[618,35627,35628,35666,35670,35675,35738,35742],{"__ignoreMap":576},[637,35629,35630,35632,35634,35636,35638,35640,35642,35644,35646,35648,35650,35652,35654,35656,35658,35660,35662,35664],{"class":639,"line":577},[637,35631,643],{"class":642},[637,35633,261],{"class":646},[637,35635,813],{"class":642},[637,35637,2021],{"class":650},[637,35639,657],{"class":642},[637,35641,660],{"class":642},[637,35643,1498],{"class":683},[637,35645,1925],{"class":823},[637,35647,687],{"class":642},[637,35649,2631],{"class":823},[637,35651,1513],{"class":683},[637,35653,660],{"class":642},[637,35655,2773],{"class":650},[637,35657,657],{"class":642},[637,35659,660],{"class":642},[637,35661,14044],{"class":663},[637,35663,660],{"class":642},[637,35665,787],{"class":642},[637,35667,35668],{"class":639,"line":578},[637,35669,742],{"emptyLinePlaceholder":594},[637,35671,35672],{"class":639,"line":708},[637,35673,35674],{"class":683},"\u002F\u002F Plane with a custom material transformations\n",[637,35676,35677,35679,35681,35683,35685,35687,35690,35692,35694,35696,35698,35700,35702,35704,35706,35708,35710,35712,35714,35716,35718,35720,35722,35724,35726,35728,35730,35732,35734,35736],{"class":639,"line":729},[637,35678,643],{"class":642},[637,35680,261],{"class":646},[637,35682,3999],{"class":650},[637,35684,657],{"class":642},[637,35686,660],{"class":642},[637,35688,35689],{"class":663},"planeRef",[637,35691,660],{"class":642},[637,35693,813],{"class":642},[637,35695,2021],{"class":650},[637,35697,657],{"class":642},[637,35699,660],{"class":642},[637,35701,1498],{"class":683},[637,35703,22756],{"class":823},[637,35705,687],{"class":642},[637,35707,33016],{"class":823},[637,35709,1513],{"class":683},[637,35711,660],{"class":642},[637,35713,813],{"class":642},[637,35715,1491],{"class":650},[637,35717,657],{"class":642},[637,35719,660],{"class":642},[637,35721,1498],{"class":683},[637,35723,969],{"class":823},[637,35725,687],{"class":642},[637,35727,32172],{"class":823},[637,35729,687],{"class":642},[637,35731,2577],{"class":823},[637,35733,1513],{"class":683},[637,35735,660],{"class":642},[637,35737,669],{"class":642},[637,35739,35740],{"class":639,"line":739},[637,35741,32187],{"class":683},[637,35743,35744,35746,35748],{"class":639,"line":745},[637,35745,732],{"class":642},[637,35747,261],{"class":646},[637,35749,669],{"class":642},[1331,35751,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":35753},[35754],{"id":624,"depth":578,"text":15},"Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":261,"description":35755},"5OBrHmZXTQoZvxuG3DLZ3euGfAYR51mvVTntqkflx80",{"id":35760,"title":265,"body":35761,"description":36185,"extension":591,"links":592,"meta":36186,"navigation":594,"path":266,"seo":36187,"stem":267,"__hash__":36188},"docs\u002F2.api\u002F5.shapes\u002Fquadratic-bezier-line.md",{"type":501,"value":35762,"toc":36181},[35763,35768,35776,35778,36084,36086,36094,36179],[2367,35764,35765],{},[35766,35767],"shapes-quadratic-bezier-line",{},[614,35769,35770,33144,35773,35775],{},[618,35771,35772],{},"\u003CQuadraticBezierLine \u002F>",[618,35774,32238],{}," between start and end points, with an optional control point.",[504,35777,15],{"id":624},[626,35779,35781],{"className":628,"code":35780,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { QuadraticBezierLine } from '@tresjs\u002Fcientos'\nimport { Vector3 } from 'three'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CQuadraticBezierLine\n :start=\"new Vector3(-1, 0, 0)\"\n :end=\"new Vector3(1, 0, 0)\"\n :mid=\"new Vector3(0, 1, 0)\"\n :segments=\"50\"\n color=\"orange\"\n :line-width=\"3\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,35782,35783,35803,35821,35840,35858,35866,35870,35878,35886,35918,35925,35955,35985,36016,36030,36042,36056,36060,36068,36076],{"__ignoreMap":576},[637,35784,35785,35787,35789,35791,35793,35795,35797,35799,35801],{"class":639,"line":577},[637,35786,643],{"class":642},[637,35788,647],{"class":646},[637,35790,651],{"class":650},[637,35792,654],{"class":650},[637,35794,657],{"class":642},[637,35796,660],{"class":642},[637,35798,664],{"class":663},[637,35800,660],{"class":642},[637,35802,669],{"class":642},[637,35804,35805,35807,35809,35811,35813,35815,35817,35819],{"class":639,"line":578},[637,35806,677],{"class":676},[637,35808,680],{"class":642},[637,35810,715],{"class":683},[637,35812,693],{"class":642},[637,35814,696],{"class":676},[637,35816,699],{"class":642},[637,35818,724],{"class":663},[637,35820,705],{"class":642},[637,35822,35823,35825,35827,35830,35832,35834,35836,35838],{"class":639,"line":708},[637,35824,677],{"class":676},[637,35826,680],{"class":642},[637,35828,35829],{"class":683}," QuadraticBezierLine",[637,35831,693],{"class":642},[637,35833,696],{"class":676},[637,35835,699],{"class":642},[637,35837,702],{"class":663},[637,35839,705],{"class":642},[637,35841,35842,35844,35846,35848,35850,35852,35854,35856],{"class":639,"line":729},[637,35843,677],{"class":676},[637,35845,680],{"class":642},[637,35847,32320],{"class":683},[637,35849,693],{"class":642},[637,35851,696],{"class":676},[637,35853,699],{"class":642},[637,35855,4799],{"class":663},[637,35857,705],{"class":642},[637,35859,35860,35862,35864],{"class":639,"line":739},[637,35861,732],{"class":642},[637,35863,647],{"class":646},[637,35865,669],{"class":642},[637,35867,35868],{"class":639,"line":745},[637,35869,742],{"emptyLinePlaceholder":594},[637,35871,35872,35874,35876],{"class":639,"line":755},[637,35873,643],{"class":642},[637,35875,750],{"class":646},[637,35877,669],{"class":642},[637,35879,35880,35882,35884],{"class":639,"line":778},[637,35881,758],{"class":642},[637,35883,761],{"class":646},[637,35885,669],{"class":642},[637,35887,35888,35890,35892,35894,35896,35898,35900,35902,35904,35906,35908,35910,35912,35914,35916],{"class":639,"line":790},[637,35889,781],{"class":642},[637,35891,784],{"class":646},[637,35893,813],{"class":642},[637,35895,1491],{"class":650},[637,35897,657],{"class":642},[637,35899,660],{"class":642},[637,35901,1498],{"class":642},[637,35903,2729],{"class":823},[637,35905,1503],{"class":642},[637,35907,2729],{"class":823},[637,35909,1503],{"class":642},[637,35911,2729],{"class":823},[637,35913,1513],{"class":642},[637,35915,660],{"class":642},[637,35917,787],{"class":642},[637,35919,35920,35922],{"class":639,"line":800},[637,35921,781],{"class":642},[637,35923,35924],{"class":646},"QuadraticBezierLine\n",[637,35926,35927,35929,35931,35933,35935,35937,35939,35941,35943,35945,35947,35949,35951,35953],{"class":639,"line":805},[637,35928,13000],{"class":642},[637,35930,15072],{"class":650},[637,35932,657],{"class":642},[637,35934,660],{"class":642},[637,35936,33309],{"class":642},[637,35938,8411],{"class":2506},[637,35940,32418],{"class":642},[637,35942,1925],{"class":823},[637,35944,1503],{"class":642},[637,35946,969],{"class":823},[637,35948,1503],{"class":642},[637,35950,969],{"class":823},[637,35952,3433],{"class":642},[637,35954,3224],{"class":642},[637,35956,35957,35959,35961,35963,35965,35967,35969,35971,35973,35975,35977,35979,35981,35983],{"class":639,"line":831},[637,35958,13000],{"class":642},[637,35960,15086],{"class":650},[637,35962,657],{"class":642},[637,35964,660],{"class":642},[637,35966,33309],{"class":642},[637,35968,8411],{"class":2506},[637,35970,2509],{"class":642},[637,35972,1925],{"class":823},[637,35974,1503],{"class":642},[637,35976,969],{"class":823},[637,35978,1503],{"class":642},[637,35980,969],{"class":823},[637,35982,3433],{"class":642},[637,35984,3224],{"class":642},[637,35986,35987,35989,35992,35994,35996,35998,36000,36002,36004,36006,36008,36010,36012,36014],{"class":639,"line":631},[637,35988,13000],{"class":642},[637,35990,35991],{"class":650},"mid",[637,35993,657],{"class":642},[637,35995,660],{"class":642},[637,35997,33309],{"class":642},[637,35999,8411],{"class":2506},[637,36001,2509],{"class":642},[637,36003,969],{"class":823},[637,36005,1503],{"class":642},[637,36007,1925],{"class":823},[637,36009,1503],{"class":642},[637,36011,969],{"class":823},[637,36013,3433],{"class":642},[637,36015,3224],{"class":642},[637,36017,36018,36020,36022,36024,36026,36028],{"class":639,"line":854},[637,36019,13000],{"class":642},[637,36021,32474],{"class":650},[637,36023,657],{"class":642},[637,36025,660],{"class":642},[637,36027,11917],{"class":823},[637,36029,3224],{"class":642},[637,36031,36032,36034,36036,36038,36040],{"class":639,"line":865},[637,36033,32488],{"class":650},[637,36035,657],{"class":642},[637,36037,660],{"class":642},[637,36039,14044],{"class":663},[637,36041,3224],{"class":642},[637,36043,36044,36046,36048,36050,36052,36054],{"class":639,"line":876},[637,36045,13000],{"class":642},[637,36047,32504],{"class":650},[637,36049,657],{"class":642},[637,36051,660],{"class":642},[637,36053,2729],{"class":823},[637,36055,3224],{"class":642},[637,36057,36058],{"class":639,"line":886},[637,36059,18174],{"class":642},[637,36061,36062,36064,36066],{"class":639,"line":632},[637,36063,781],{"class":642},[637,36065,10010],{"class":646},[637,36067,787],{"class":642},[637,36069,36070,36072,36074],{"class":639,"line":906},[637,36071,909],{"class":642},[637,36073,761],{"class":646},[637,36075,669],{"class":642},[637,36077,36078,36080,36082],{"class":639,"line":916},[637,36079,732],{"class":642},[637,36081,750],{"class":646},[637,36083,669],{"class":642},[504,36085,926],{"id":925},[614,36087,36088,33494,36090,7428,36092,1150],{},[618,36089,35772],{},[618,36091,32406],{},[618,36093,32238],{},[931,36095,36096,36110],{},[934,36097,36098],{},[937,36099,36100,36102,36104,36106,36108],{},[940,36101,942],{},[940,36103,6178],{},[940,36105,945],{},[940,36107,948],{},[940,36109,19523],{},[950,36111,36112,36129,36145,36163],{},[937,36113,36114,36118,36122,36124,36126],{},[955,36115,36116],{},[618,36117,15072],{},[955,36119,36120],{},[618,36121,33525],{},[955,36123,33528],{},[955,36125],{},[955,36127,36128],{},"yes",[937,36130,36131,36135,36139,36141,36143],{},[955,36132,36133],{},[618,36134,15086],{},[955,36136,36137],{},[618,36138,33525],{},[955,36140,33543],{},[955,36142],{},[955,36144,36128],{},[937,36146,36147,36151,36155,36158,36160],{},[955,36148,36149],{},[618,36150,35991],{},[955,36152,36153],{},[618,36154,33525],{},[955,36156,36157],{},"Control point",[955,36159],{},[955,36161,36162],{},"no",[937,36164,36165,36169,36173,36175,36177],{},[955,36166,36167],{},[618,36168,32474],{},[955,36170,36171],{},[618,36172,5564],{},[955,36174,32583],{},[955,36176,32586],{},[955,36178,36162],{},[1331,36180,32773],{},{"title":576,"searchDepth":577,"depth":578,"links":36182},[36183,36184],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Renders a Line2 between start and end points with an optional control point.",{},{"title":265,"description":36185},"x3tvZVc6qkdY7oDfxpxQl2C7EV85RKijXjcoHR_b1q8",{"id":36190,"title":269,"body":36191,"description":36362,"extension":591,"links":592,"meta":36363,"navigation":594,"path":270,"seo":36364,"stem":271,"__hash__":36365},"docs\u002F2.api\u002F5.shapes\u002Fring.md",{"type":501,"value":36192,"toc":36359},[36193,36198,36208,36214,36220,36222,36357],[608,36194,36195],{},[36196,36197],"shapes-ring",{},[614,36199,2867,36200,9768,36202,32039,36205,1150],{},[618,36201,7526],{},[618,36203,36204],{},"\u003CRing \u002F>",[618,36206,36207],{},"RingGeometry",[626,36209,36212],{"className":36210,"code":36211,"language":32048},[32046],"args: [\n innerRadius: number,\n outerRadius: number,\n thetaSegments: number,\n phiSegments: number,\n thetaStart: number,\n thetaLength: number\n]\n",[618,36213,36211],{"__ignoreMap":576},[614,36215,32053,36216],{},[1144,36217,36207],{"href":36218,"rel":36219},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=ring#api\u002Fen\u002Fgeometries\u002FRingGeometry",[1148],[504,36221,15],{"id":624},[626,36223,36225],{"className":628,"code":36224,"language":633,"meta":576,"style":576},"\u003CRing :args=\"[0.5, 1, 32]\" color=\"orange\" \u002F>\n\n\u002F\u002F Ring with a custom material transformations\n\u003CRing ref=\"ringRef\" :args=\"[0.5, 1, 32]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FRing>\n",[618,36226,36227,36269,36273,36278,36345,36349],{"__ignoreMap":576},[637,36228,36229,36231,36233,36235,36237,36239,36241,36243,36245,36247,36249,36251,36253,36255,36257,36259,36261,36263,36265,36267],{"class":639,"line":577},[637,36230,643],{"class":642},[637,36232,269],{"class":646},[637,36234,813],{"class":642},[637,36236,2021],{"class":650},[637,36238,657],{"class":642},[637,36240,660],{"class":642},[637,36242,1498],{"class":683},[637,36244,1545],{"class":823},[637,36246,687],{"class":642},[637,36248,2631],{"class":823},[637,36250,687],{"class":642},[637,36252,32842],{"class":823},[637,36254,1513],{"class":683},[637,36256,660],{"class":642},[637,36258,2773],{"class":650},[637,36260,657],{"class":642},[637,36262,660],{"class":642},[637,36264,14044],{"class":663},[637,36266,660],{"class":642},[637,36268,787],{"class":642},[637,36270,36271],{"class":639,"line":578},[637,36272,742],{"emptyLinePlaceholder":594},[637,36274,36275],{"class":639,"line":708},[637,36276,36277],{"class":683},"\u002F\u002F Ring with a custom material transformations\n",[637,36279,36280,36282,36284,36286,36288,36290,36293,36295,36297,36299,36301,36303,36305,36307,36309,36311,36313,36315,36317,36319,36321,36323,36325,36327,36329,36331,36333,36335,36337,36339,36341,36343],{"class":639,"line":729},[637,36281,643],{"class":642},[637,36283,269],{"class":646},[637,36285,3999],{"class":650},[637,36287,657],{"class":642},[637,36289,660],{"class":642},[637,36291,36292],{"class":663},"ringRef",[637,36294,660],{"class":642},[637,36296,813],{"class":642},[637,36298,2021],{"class":650},[637,36300,657],{"class":642},[637,36302,660],{"class":642},[637,36304,1498],{"class":683},[637,36306,1545],{"class":823},[637,36308,687],{"class":642},[637,36310,2631],{"class":823},[637,36312,687],{"class":642},[637,36314,32842],{"class":823},[637,36316,1513],{"class":683},[637,36318,660],{"class":642},[637,36320,813],{"class":642},[637,36322,1491],{"class":650},[637,36324,657],{"class":642},[637,36326,660],{"class":642},[637,36328,1498],{"class":683},[637,36330,824],{"class":823},[637,36332,687],{"class":642},[637,36334,32172],{"class":823},[637,36336,687],{"class":642},[637,36338,2577],{"class":823},[637,36340,1513],{"class":683},[637,36342,660],{"class":642},[637,36344,669],{"class":642},[637,36346,36347],{"class":639,"line":739},[637,36348,32187],{"class":683},[637,36350,36351,36353,36355],{"class":639,"line":745},[637,36352,732],{"class":642},[637,36354,269],{"class":646},[637,36356,669],{"class":642},[1331,36358,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":36360},[36361],{"id":624,"depth":578,"text":15},"Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":269,"description":36362},"sjdJr8WfSUL8VppV0tIyFALL7j5Mg1IJmmVLISwAI9U",{"id":36367,"title":273,"body":36368,"description":36524,"extension":591,"links":592,"meta":36525,"navigation":594,"path":274,"seo":36526,"stem":275,"__hash__":36527},"docs\u002F2.api\u002F5.shapes\u002Frounded-box.md",{"type":501,"value":36369,"toc":36521},[36370,36375,36386,36392,36398,36400,36519],[608,36371,36372],{},[36373,36374],"shapes-rounded-box",{},[614,36376,2867,36377,9768,36379,32039,36382,36385],{},[618,36378,7526],{},[618,36380,36381],{},"\u003CRoundedBox \u002F>",[618,36383,36384],{},"RoundedBoxGeometry"," .",[626,36387,36390],{"className":36388,"code":36389,"language":32048},[32046],"args: [\n width: number, \u002F\u002F default 1\n height: number, \u002F\u002F default 1\n depth: number, \u002F\u002F default 1\n segments: number, \u002F\u002F default 2\n radius: number, \u002F\u002F default 0.1\n]\n",[618,36391,36389],{"__ignoreMap":576},[614,36393,32053,36394],{},[1144,36395,36384],{"href":36396,"rel":36397},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fblob\u002Fmaster\u002Fexamples\u002Fjsm\u002Fgeometries\u002FRoundedBoxGeometry.js",[1148],[504,36399,15],{"id":624},[626,36401,36403],{"className":628,"code":36402,"language":633,"meta":576,"style":576},"\u003CRoundedBox :args=\"[1, 1, 1, 2, 0.1]\" color=\"orange\" \u002F>\n\n\u002F\u002F RoundedBox with a custom material transformations\n\u003CRoundedBox ref=\"boxRef\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FRoundedBox>\n",[618,36404,36405,36456,36460,36465,36507,36511],{"__ignoreMap":576},[637,36406,36407,36409,36412,36414,36416,36418,36420,36422,36424,36426,36428,36430,36432,36434,36436,36438,36440,36442,36444,36446,36448,36450,36452,36454],{"class":639,"line":577},[637,36408,643],{"class":642},[637,36410,36411],{"class":646},"RoundedBox",[637,36413,813],{"class":642},[637,36415,2021],{"class":650},[637,36417,657],{"class":642},[637,36419,660],{"class":642},[637,36421,1498],{"class":683},[637,36423,1925],{"class":823},[637,36425,687],{"class":642},[637,36427,2631],{"class":823},[637,36429,687],{"class":642},[637,36431,2631],{"class":823},[637,36433,687],{"class":642},[637,36435,33693],{"class":823},[637,36437,687],{"class":642},[637,36439,24744],{"class":823},[637,36441,1513],{"class":683},[637,36443,660],{"class":642},[637,36445,2773],{"class":650},[637,36447,657],{"class":642},[637,36449,660],{"class":642},[637,36451,14044],{"class":663},[637,36453,660],{"class":642},[637,36455,787],{"class":642},[637,36457,36458],{"class":639,"line":578},[637,36459,742],{"emptyLinePlaceholder":594},[637,36461,36462],{"class":639,"line":708},[637,36463,36464],{"class":683},"\u002F\u002F RoundedBox with a custom material transformations\n",[637,36466,36467,36469,36471,36473,36475,36477,36479,36481,36483,36485,36487,36489,36491,36493,36495,36497,36499,36501,36503,36505],{"class":639,"line":729},[637,36468,643],{"class":642},[637,36470,36411],{"class":646},[637,36472,3999],{"class":650},[637,36474,657],{"class":642},[637,36476,660],{"class":642},[637,36478,17183],{"class":663},[637,36480,660],{"class":642},[637,36482,813],{"class":642},[637,36484,1491],{"class":650},[637,36486,657],{"class":642},[637,36488,660],{"class":642},[637,36490,1498],{"class":683},[637,36492,969],{"class":823},[637,36494,687],{"class":642},[637,36496,32172],{"class":823},[637,36498,687],{"class":642},[637,36500,2577],{"class":823},[637,36502,1513],{"class":683},[637,36504,660],{"class":642},[637,36506,669],{"class":642},[637,36508,36509],{"class":639,"line":739},[637,36510,32187],{"class":683},[637,36512,36513,36515,36517],{"class":639,"line":745},[637,36514,732],{"class":642},[637,36516,36411],{"class":646},[637,36518,669],{"class":642},[1331,36520,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":36522},[36523],{"id":624,"depth":578,"text":15},"Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":273,"description":36524},"6uRmRs4RGOfq4lQeUlAm3DycDFH9FnKYbwGuk5ODp5k",{"id":36529,"title":277,"body":36530,"description":36685,"extension":591,"links":592,"meta":36686,"navigation":594,"path":278,"seo":36687,"stem":279,"__hash__":36688},"docs\u002F2.api\u002F5.shapes\u002Frounded-plane.md",{"type":501,"value":36531,"toc":36682},[36532,36537,36554,36560,36562,36680],[608,36533,36534],{},[36535,36536],"shapes-rounded-plane",{},[614,36538,2867,36539,9768,36541,32039,36544,36547,36548,36553],{},[618,36540,7526],{},[618,36542,36543],{},"\u003CRoundedPlane \u002F>",[618,36545,36546],{},"RoundedPlaneGeometry",": a plane with rounded corners. The geometry is vendored from ",[1144,36549,36552],{"href":36550,"rel":36551},"https:\u002F\u002Fgithub.com\u002Fpmndrs\u002Fmaath\u002Fblob\u002Fmain\u002Fpackages\u002Fmaath\u002Fsrc\u002Fgeometry.ts",[1148],"pmndrs\u002Fmaath"," (MIT), so it ships with no extra dependency.",[626,36555,36558],{"className":36556,"code":36557,"language":32048},[32046],"args: [\n width: number, \u002F\u002F default 1\n height: number, \u002F\u002F default 1\n radius: number, \u002F\u002F default 0.2\n segments: number, \u002F\u002F default 16\n]\n",[618,36559,36557],{"__ignoreMap":576},[504,36561,15],{"id":624},[626,36563,36565],{"className":628,"code":36564,"language":633,"meta":576,"style":576},"\u003CRoundedPlane :args=\"[1.5, 1, 0.2, 16]\" color=\"orange\" \u002F>\n\n\u002F\u002F RoundedPlane with a custom material\n\u003CRoundedPlane ref=\"planeRef\" :position=\"[0, 4, 0]\">\n \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n\u003C\u002FRoundedPlane>\n",[618,36566,36567,36616,36620,36625,36667,36672],{"__ignoreMap":576},[637,36568,36569,36571,36574,36576,36578,36580,36582,36584,36586,36588,36590,36592,36595,36597,36600,36602,36604,36606,36608,36610,36612,36614],{"class":639,"line":577},[637,36570,643],{"class":642},[637,36572,36573],{"class":646},"RoundedPlane",[637,36575,813],{"class":642},[637,36577,2021],{"class":650},[637,36579,657],{"class":642},[637,36581,660],{"class":642},[637,36583,1498],{"class":683},[637,36585,17251],{"class":823},[637,36587,687],{"class":642},[637,36589,2631],{"class":823},[637,36591,687],{"class":642},[637,36593,36594],{"class":823}," 0.2",[637,36596,687],{"class":642},[637,36598,36599],{"class":823}," 16",[637,36601,1513],{"class":683},[637,36603,660],{"class":642},[637,36605,2773],{"class":650},[637,36607,657],{"class":642},[637,36609,660],{"class":642},[637,36611,14044],{"class":663},[637,36613,660],{"class":642},[637,36615,787],{"class":642},[637,36617,36618],{"class":639,"line":578},[637,36619,742],{"emptyLinePlaceholder":594},[637,36621,36622],{"class":639,"line":708},[637,36623,36624],{"class":683},"\u002F\u002F RoundedPlane with a custom material\n",[637,36626,36627,36629,36631,36633,36635,36637,36639,36641,36643,36645,36647,36649,36651,36653,36655,36657,36659,36661,36663,36665],{"class":639,"line":729},[637,36628,643],{"class":642},[637,36630,36573],{"class":646},[637,36632,3999],{"class":650},[637,36634,657],{"class":642},[637,36636,660],{"class":642},[637,36638,35689],{"class":663},[637,36640,660],{"class":642},[637,36642,813],{"class":642},[637,36644,1491],{"class":650},[637,36646,657],{"class":642},[637,36648,660],{"class":642},[637,36650,1498],{"class":683},[637,36652,969],{"class":823},[637,36654,687],{"class":642},[637,36656,32172],{"class":823},[637,36658,687],{"class":642},[637,36660,2577],{"class":823},[637,36662,1513],{"class":683},[637,36664,660],{"class":642},[637,36666,669],{"class":642},[637,36668,36669],{"class":639,"line":739},[637,36670,36671],{"class":683}," \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n",[637,36673,36674,36676,36678],{"class":639,"line":745},[637,36675,732],{"class":642},[637,36677,36573],{"class":646},[637,36679,669],{"class":642},[1331,36681,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":36683},[36684],{"id":624,"depth":578,"text":15},"Short-cut for a RoundedPlaneGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":277,"description":36685},"HH5158_07Il55CXeB5dFOKuUS3I52MwiYYeqEjcgDoM",{"id":36690,"title":281,"body":36691,"description":36879,"extension":591,"links":592,"meta":36880,"navigation":594,"path":282,"seo":36881,"stem":283,"__hash__":36882},"docs\u002F2.api\u002F5.shapes\u002Fscreen-quad.md",{"type":501,"value":36692,"toc":36875},[36693,36698,36701,36703,36853,36857,36873],[2367,36694,36695],{},[36696,36697],"shapes-screen-quad",{},[614,36699,36700],{},"A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.",[504,36702,15],{"id":624},[626,36704,36706],{"className":628,"code":36705,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { ScreenQuad } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresOrthographicCamera \u002F>\n \u003CScreenQuad>\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FScreenQuad>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,36707,36708,36728,36746,36765,36773,36777,36785,36793,36802,36811,36829,36837,36845],{"__ignoreMap":576},[637,36709,36710,36712,36714,36716,36718,36720,36722,36724,36726],{"class":639,"line":577},[637,36711,643],{"class":642},[637,36713,647],{"class":646},[637,36715,651],{"class":650},[637,36717,654],{"class":650},[637,36719,657],{"class":642},[637,36721,660],{"class":642},[637,36723,664],{"class":663},[637,36725,660],{"class":642},[637,36727,669],{"class":642},[637,36729,36730,36732,36734,36736,36738,36740,36742,36744],{"class":639,"line":578},[637,36731,677],{"class":676},[637,36733,680],{"class":642},[637,36735,715],{"class":683},[637,36737,693],{"class":642},[637,36739,696],{"class":676},[637,36741,699],{"class":642},[637,36743,724],{"class":663},[637,36745,705],{"class":642},[637,36747,36748,36750,36752,36755,36757,36759,36761,36763],{"class":639,"line":708},[637,36749,677],{"class":676},[637,36751,680],{"class":642},[637,36753,36754],{"class":683}," ScreenQuad",[637,36756,693],{"class":642},[637,36758,696],{"class":676},[637,36760,699],{"class":642},[637,36762,702],{"class":663},[637,36764,705],{"class":642},[637,36766,36767,36769,36771],{"class":639,"line":729},[637,36768,732],{"class":642},[637,36770,647],{"class":646},[637,36772,669],{"class":642},[637,36774,36775],{"class":639,"line":739},[637,36776,742],{"emptyLinePlaceholder":594},[637,36778,36779,36781,36783],{"class":639,"line":745},[637,36780,643],{"class":642},[637,36782,750],{"class":646},[637,36784,669],{"class":642},[637,36786,36787,36789,36791],{"class":639,"line":755},[637,36788,758],{"class":642},[637,36790,761],{"class":646},[637,36792,669],{"class":642},[637,36794,36795,36797,36800],{"class":639,"line":778},[637,36796,781],{"class":642},[637,36798,36799],{"class":646},"TresOrthographicCamera",[637,36801,787],{"class":642},[637,36803,36804,36806,36809],{"class":639,"line":790},[637,36805,781],{"class":642},[637,36807,36808],{"class":646},"ScreenQuad",[637,36810,669],{"class":642},[637,36812,36813,36815,36817,36819,36821,36823,36825,36827],{"class":639,"line":800},[637,36814,857],{"class":642},[637,36816,14035],{"class":646},[637,36818,2773],{"class":650},[637,36820,657],{"class":642},[637,36822,660],{"class":642},[637,36824,14044],{"class":663},[637,36826,660],{"class":642},[637,36828,787],{"class":642},[637,36830,36831,36833,36835],{"class":639,"line":805},[637,36832,899],{"class":642},[637,36834,36808],{"class":646},[637,36836,669],{"class":642},[637,36838,36839,36841,36843],{"class":639,"line":831},[637,36840,909],{"class":642},[637,36842,761],{"class":646},[637,36844,669],{"class":642},[637,36846,36847,36849,36851],{"class":639,"line":631},[637,36848,732],{"class":642},[637,36850,750],{"class":646},[637,36852,669],{"class":642},[504,36854,36856],{"id":36855},"references","References",[2285,36858,36859,36866],{},[2288,36860,36861],{},[1144,36862,36865],{"href":36863,"rel":36864},"https:\u002F\u002Fwww.cginternals.com\u002Fen\u002Fblog\u002F2018-01-10-screen-aligned-quads-and-triangles.html",[1148],"Why a triangle?",[2288,36867,36868],{},[1144,36869,36872],{"href":36870,"rel":36871},"https:\u002F\u002Fluruke.medium.com\u002Fsimple-postprocessing-in-three-js-91936ecadfb7",[1148],"Simple postprocessing in Three.js",[1331,36874,29032],{},{"title":576,"searchDepth":577,"depth":578,"links":36876},[36877,36878],{"id":624,"depth":578,"text":15},{"id":36855,"depth":578,"text":36856},"A triangle that fills the screen for full-screen fragment shader work.",{},{"title":281,"description":36879},"7AUdT-SMH4R5MsKpuypi4UzVsHt7S7ryCNHpJVv28A8",{"id":36884,"title":285,"body":36885,"description":37055,"extension":591,"links":592,"meta":37056,"navigation":594,"path":286,"seo":37057,"stem":287,"__hash__":37058},"docs\u002F2.api\u002F5.shapes\u002Fsphere.md",{"type":501,"value":36886,"toc":37052},[36887,36892,36902,36908,36914,36916,37050],[608,36888,36889],{},[36890,36891],"shapes-sphere",{},[614,36893,2867,36894,9768,36896,32039,36899,1150],{},[618,36895,7526],{},[618,36897,36898],{},"\u003CSphere \u002F>",[618,36900,36901],{},"SphereGeometry",[626,36903,36906],{"className":36904,"code":36905,"language":32048},[32046],"args: [\n radius: number,\n widthSegments: number,\n heightSegments: number,\n phiStart: number,\n phiLength: number,\n thetaStart: number,\n thetaLength: number\n]\n",[618,36907,36905],{"__ignoreMap":576},[614,36909,32053,36910],{},[1144,36911,36901],{"href":36912,"rel":36913},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=sphere#api\u002Fen\u002Fgeometries\u002FSphereGeometry",[1148],[504,36915,15],{"id":624},[626,36917,36919],{"className":628,"code":36918,"language":633,"meta":576,"style":576},"\u003CSphere :args=\"[1, 1, 1]\" color=\"orange\" \u002F>\n\n\u002F\u002F Sphere with a custom material transformations\n\u003CSphere ref=\"planeRef\" :args=\"[1, 1, 1]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FSphere>\n",[618,36920,36921,36963,36967,36972,37038,37042],{"__ignoreMap":576},[637,36922,36923,36925,36927,36929,36931,36933,36935,36937,36939,36941,36943,36945,36947,36949,36951,36953,36955,36957,36959,36961],{"class":639,"line":577},[637,36924,643],{"class":642},[637,36926,285],{"class":646},[637,36928,813],{"class":642},[637,36930,2021],{"class":650},[637,36932,657],{"class":642},[637,36934,660],{"class":642},[637,36936,1498],{"class":683},[637,36938,1925],{"class":823},[637,36940,687],{"class":642},[637,36942,2631],{"class":823},[637,36944,687],{"class":642},[637,36946,2631],{"class":823},[637,36948,1513],{"class":683},[637,36950,660],{"class":642},[637,36952,2773],{"class":650},[637,36954,657],{"class":642},[637,36956,660],{"class":642},[637,36958,14044],{"class":663},[637,36960,660],{"class":642},[637,36962,787],{"class":642},[637,36964,36965],{"class":639,"line":578},[637,36966,742],{"emptyLinePlaceholder":594},[637,36968,36969],{"class":639,"line":708},[637,36970,36971],{"class":683},"\u002F\u002F Sphere with a custom material transformations\n",[637,36973,36974,36976,36978,36980,36982,36984,36986,36988,36990,36992,36994,36996,36998,37000,37002,37004,37006,37008,37010,37012,37014,37016,37018,37020,37022,37024,37026,37028,37030,37032,37034,37036],{"class":639,"line":729},[637,36975,643],{"class":642},[637,36977,285],{"class":646},[637,36979,3999],{"class":650},[637,36981,657],{"class":642},[637,36983,660],{"class":642},[637,36985,35689],{"class":663},[637,36987,660],{"class":642},[637,36989,813],{"class":642},[637,36991,2021],{"class":650},[637,36993,657],{"class":642},[637,36995,660],{"class":642},[637,36997,1498],{"class":683},[637,36999,1925],{"class":823},[637,37001,687],{"class":642},[637,37003,2631],{"class":823},[637,37005,687],{"class":642},[637,37007,2631],{"class":823},[637,37009,1513],{"class":683},[637,37011,660],{"class":642},[637,37013,813],{"class":642},[637,37015,1491],{"class":650},[637,37017,657],{"class":642},[637,37019,660],{"class":642},[637,37021,1498],{"class":683},[637,37023,824],{"class":823},[637,37025,687],{"class":642},[637,37027,32172],{"class":823},[637,37029,687],{"class":642},[637,37031,2577],{"class":823},[637,37033,1513],{"class":683},[637,37035,660],{"class":642},[637,37037,669],{"class":642},[637,37039,37040],{"class":639,"line":739},[637,37041,32187],{"class":683},[637,37043,37044,37046,37048],{"class":639,"line":745},[637,37045,732],{"class":642},[637,37047,285],{"class":646},[637,37049,669],{"class":642},[1331,37051,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":37053},[37054],{"id":624,"depth":578,"text":15},"Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":285,"description":37055},"CXqQd226fbRLkf86b33CXbH-uGM-cwo2HQNRB4Pt8Xs",{"id":37060,"title":289,"body":37061,"description":37507,"extension":591,"links":592,"meta":37508,"navigation":594,"path":290,"seo":37509,"stem":291,"__hash__":37510},"docs\u002F2.api\u002F5.shapes\u002Fsuperformula.md",{"type":501,"value":37062,"toc":37502},[37063,37068,37081,37083,37367,37369,37379,37491,37495,37500],[608,37064,37065],{},[37066,37067],"shapes-super-formula",{},[614,37069,2867,37070,9768,37072,37075,37076,1150],{},[618,37071,7526],{},[618,37073,37074],{},"\u003CSuperformula \u002F>"," component that produces a configurable ",[1144,37077,37080],{"href":37078,"rel":37079},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSuperformula",[1148],"3D plot of the superformula",[504,37082,15],{"id":624},[626,37084,37087],{"className":628,"code":37085,"highlights":37086,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Superformula } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CSuperformula\n :width-segments=\"64\"\n :height-segments=\"64\"\n :num-arms-a=\"5\"\n :exp-a=\"[40, 1.3, 0.9]\"\n color=\"#ff6b6b\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790,800,805,831,631,854],[618,37088,37089,37109,37127,37147,37155,37159,37167,37175,37207,37215,37231,37247,37263,37293,37307,37311,37319,37351,37359],{"__ignoreMap":576},[637,37090,37091,37093,37095,37097,37099,37101,37103,37105,37107],{"class":639,"line":577},[637,37092,643],{"class":642},[637,37094,647],{"class":646},[637,37096,651],{"class":650},[637,37098,654],{"class":650},[637,37100,657],{"class":642},[637,37102,660],{"class":642},[637,37104,664],{"class":663},[637,37106,660],{"class":642},[637,37108,669],{"class":642},[637,37110,37111,37113,37115,37117,37119,37121,37123,37125],{"class":639,"line":578},[637,37112,677],{"class":676},[637,37114,680],{"class":642},[637,37116,715],{"class":683},[637,37118,693],{"class":642},[637,37120,696],{"class":676},[637,37122,699],{"class":642},[637,37124,724],{"class":663},[637,37126,705],{"class":642},[637,37128,37130,37132,37134,37137,37139,37141,37143,37145],{"class":37129,"line":708},[639,673],[637,37131,677],{"class":676},[637,37133,680],{"class":642},[637,37135,37136],{"class":683}," Superformula",[637,37138,693],{"class":642},[637,37140,696],{"class":676},[637,37142,699],{"class":642},[637,37144,702],{"class":663},[637,37146,705],{"class":642},[637,37148,37149,37151,37153],{"class":639,"line":729},[637,37150,732],{"class":642},[637,37152,647],{"class":646},[637,37154,669],{"class":642},[637,37156,37157],{"class":639,"line":739},[637,37158,742],{"emptyLinePlaceholder":594},[637,37160,37161,37163,37165],{"class":639,"line":745},[637,37162,643],{"class":642},[637,37164,750],{"class":646},[637,37166,669],{"class":642},[637,37168,37169,37171,37173],{"class":639,"line":755},[637,37170,758],{"class":642},[637,37172,761],{"class":646},[637,37174,669],{"class":642},[637,37176,37177,37179,37181,37183,37185,37187,37189,37191,37193,37195,37197,37199,37201,37203,37205],{"class":639,"line":778},[637,37178,781],{"class":642},[637,37180,784],{"class":646},[637,37182,813],{"class":642},[637,37184,1491],{"class":650},[637,37186,657],{"class":642},[637,37188,660],{"class":642},[637,37190,1498],{"class":642},[637,37192,2729],{"class":823},[637,37194,1503],{"class":642},[637,37196,2729],{"class":823},[637,37198,1503],{"class":642},[637,37200,2729],{"class":823},[637,37202,1513],{"class":642},[637,37204,660],{"class":642},[637,37206,787],{"class":642},[637,37208,37210,37212],{"class":37209,"line":790},[639,673],[637,37211,781],{"class":642},[637,37213,37214],{"class":646},"Superformula\n",[637,37216,37218,37220,37223,37225,37227,37229],{"class":37217,"line":800},[639,673],[637,37219,13000],{"class":642},[637,37221,37222],{"class":650},"width-segments",[637,37224,657],{"class":642},[637,37226,660],{"class":642},[637,37228,10453],{"class":823},[637,37230,3224],{"class":642},[637,37232,37234,37236,37239,37241,37243,37245],{"class":37233,"line":805},[639,673],[637,37235,13000],{"class":642},[637,37237,37238],{"class":650},"height-segments",[637,37240,657],{"class":642},[637,37242,660],{"class":642},[637,37244,10453],{"class":823},[637,37246,3224],{"class":642},[637,37248,37250,37252,37255,37257,37259,37261],{"class":37249,"line":831},[639,673],[637,37251,13000],{"class":642},[637,37253,37254],{"class":650},"num-arms-a",[637,37256,657],{"class":642},[637,37258,660],{"class":642},[637,37260,7666],{"class":823},[637,37262,3224],{"class":642},[637,37264,37266,37268,37271,37273,37275,37277,37280,37282,37284,37286,37289,37291],{"class":37265,"line":631},[639,673],[637,37267,13000],{"class":642},[637,37269,37270],{"class":650},"exp-a",[637,37272,657],{"class":642},[637,37274,660],{"class":642},[637,37276,1498],{"class":642},[637,37278,37279],{"class":823},"40",[637,37281,1503],{"class":642},[637,37283,34305],{"class":823},[637,37285,1503],{"class":642},[637,37287,37288],{"class":823},"0.9",[637,37290,1513],{"class":642},[637,37292,3224],{"class":642},[637,37294,37296,37298,37300,37302,37305],{"class":37295,"line":854},[639,673],[637,37297,32488],{"class":650},[637,37299,657],{"class":642},[637,37301,660],{"class":642},[637,37303,37304],{"class":663},"#ff6b6b",[637,37306,3224],{"class":642},[637,37308,37309],{"class":639,"line":865},[637,37310,18174],{"class":642},[637,37312,37313,37315,37317],{"class":639,"line":876},[637,37314,781],{"class":642},[637,37316,10010],{"class":646},[637,37318,787],{"class":642},[637,37320,37321,37323,37325,37327,37329,37331,37333,37335,37337,37339,37341,37343,37345,37347,37349],{"class":639,"line":886},[637,37322,781],{"class":642},[637,37324,10031],{"class":646},[637,37326,813],{"class":642},[637,37328,1491],{"class":650},[637,37330,657],{"class":642},[637,37332,660],{"class":642},[637,37334,1498],{"class":642},[637,37336,969],{"class":823},[637,37338,1503],{"class":642},[637,37340,824],{"class":823},[637,37342,1503],{"class":642},[637,37344,3900],{"class":823},[637,37346,1513],{"class":642},[637,37348,660],{"class":642},[637,37350,787],{"class":642},[637,37352,37353,37355,37357],{"class":639,"line":632},[637,37354,909],{"class":642},[637,37356,761],{"class":646},[637,37358,669],{"class":642},[637,37360,37361,37363,37365],{"class":639,"line":906},[637,37362,732],{"class":642},[637,37364,750],{"class":646},[637,37366,669],{"class":642},[504,37368,926],{"id":925},[614,37370,2867,37371,37373,37374,37378],{},[618,37372,37074],{}," 3D plot is the product of 2 2D superformulas, referred to as \"A\" and \"B\" in the props. See this ",[1144,37375,37377],{"href":37078,"rel":37376},[1148],"Wikipedia article about the superformula"," for more information about the function's arguments.",[931,37380,37381,37391],{},[934,37382,37383],{},[937,37384,37385,37387,37389],{},[940,37386,8360],{"align":1001},[940,37388,945],{"align":1001},[940,37390,948],{"align":1001},[950,37392,37393,37407,37421,37435,37450,37464,37478],{},[937,37394,37395,37400,37403],{},[955,37396,37397],{"align":1001},[1705,37398,37399],{},"widthSegments",[955,37401,37402],{"align":1001},"Number of horizontal mesh segments",[955,37404,37405],{"align":1001},[618,37406,13043],{},[937,37408,37409,37414,37417],{},[955,37410,37411],{"align":1001},[1705,37412,37413],{},"heightSegments",[955,37415,37416],{"align":1001},"Number of vertical mesh segments",[955,37418,37419],{"align":1001},[618,37420,13043],{},[937,37422,37423,37428,37431],{},[955,37424,37425],{"align":1001},[1705,37426,37427],{},"numArmsA",[955,37429,37430],{"align":1001},"For A, number of radial arms\u002Fripples",[955,37432,37433],{"align":1001},[618,37434,3900],{},[937,37436,37437,37442,37445],{},[955,37438,37439],{"align":1001},[1705,37440,37441],{},"expA",[955,37443,37444],{"align":1001},"A's 3 exponents",[955,37446,37447],{"align":1001},[618,37448,37449],{},"[40, 1.3, 0.9]",[937,37451,37452,37457,37460],{},[955,37453,37454],{"align":1001},[1705,37455,37456],{},"numArmsB",[955,37458,37459],{"align":1001},"For B, number of radial arms\u002Fripples",[955,37461,37462],{"align":1001},[618,37463,3900],{},[937,37465,37466,37471,37474],{},[955,37467,37468],{"align":1001},[1705,37469,37470],{},"expB",[955,37472,37473],{"align":1001},"B's 3 exponents",[955,37475,37476],{"align":1001},[618,37477,37449],{},[937,37479,37480,37484,37487],{},[955,37481,37482],{"align":1001},[1705,37483,7770],{},[955,37485,37486],{"align":1001},"If no material is provided, a color for the default material",[955,37488,37489],{"align":1001},[618,37490,32659],{},[504,37492,37494],{"id":37493},"slot","Slot",[614,37496,37497,37499],{},[618,37498,37074],{}," has a single slot for an optional material.",[1331,37501,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":37503},[37504,37505,37506],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":37493,"depth":578,"text":37494},"Produces a configurable 3D plot of the superformula.",{},{"title":289,"description":37507},"e6vrte2Vz6VeiZF2tvUtKAkrmeL55JA0AIEipHcn53Y",{"id":37512,"title":293,"body":37513,"description":37675,"extension":591,"links":592,"meta":37676,"navigation":594,"path":294,"seo":37677,"stem":295,"__hash__":37678},"docs\u002F2.api\u002F5.shapes\u002Ftetrahedron.md",{"type":501,"value":37514,"toc":37672},[37515,37520,37530,37535,37541,37543,37670],[608,37516,37517],{},[37518,37519],"shapes-tetrahedron",{},[614,37521,2867,37522,9768,37524,32039,37527,1150],{},[618,37523,7526],{},[618,37525,37526],{},"\u003CTetrahedron \u002F>",[618,37528,37529],{},"TetrahedronGeometry",[626,37531,37533],{"className":37532,"code":33858,"language":32048},[32046],[618,37534,33858],{"__ignoreMap":576},[614,37536,32053,37537],{},[1144,37538,37529],{"href":37539,"rel":37540},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=tetr#api\u002Fen\u002Fgeometries\u002FTetrahedronGeometry",[1148],[504,37542,15],{"id":624},[626,37544,37546],{"className":628,"code":37545,"language":633,"meta":576,"style":576},"\u003CTetrahedron :args=\"[1, 0]\" color=\"orange\" \u002F>\n\n\u002F\u002F Tetrahedron with a custom material transformations\n\u003CTetrahedron ref=\"tetrahedronRef\" :args=\"[1, 0]\" :position=\"[2, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FTetrahedron>\n",[618,37547,37548,37586,37590,37595,37658,37662],{"__ignoreMap":576},[637,37549,37550,37552,37554,37556,37558,37560,37562,37564,37566,37568,37570,37572,37574,37576,37578,37580,37582,37584],{"class":639,"line":577},[637,37551,643],{"class":642},[637,37553,293],{"class":646},[637,37555,813],{"class":642},[637,37557,2021],{"class":650},[637,37559,657],{"class":642},[637,37561,660],{"class":642},[637,37563,1498],{"class":683},[637,37565,1925],{"class":823},[637,37567,687],{"class":642},[637,37569,2577],{"class":823},[637,37571,1513],{"class":683},[637,37573,660],{"class":642},[637,37575,2773],{"class":650},[637,37577,657],{"class":642},[637,37579,660],{"class":642},[637,37581,14044],{"class":663},[637,37583,660],{"class":642},[637,37585,787],{"class":642},[637,37587,37588],{"class":639,"line":578},[637,37589,742],{"emptyLinePlaceholder":594},[637,37591,37592],{"class":639,"line":708},[637,37593,37594],{"class":683},"\u002F\u002F Tetrahedron with a custom material transformations\n",[637,37596,37597,37599,37601,37603,37605,37607,37610,37612,37614,37616,37618,37620,37622,37624,37626,37628,37630,37632,37634,37636,37638,37640,37642,37644,37646,37648,37650,37652,37654,37656],{"class":639,"line":729},[637,37598,643],{"class":642},[637,37600,293],{"class":646},[637,37602,3999],{"class":650},[637,37604,657],{"class":642},[637,37606,660],{"class":642},[637,37608,37609],{"class":663},"tetrahedronRef",[637,37611,660],{"class":642},[637,37613,813],{"class":642},[637,37615,2021],{"class":650},[637,37617,657],{"class":642},[637,37619,660],{"class":642},[637,37621,1498],{"class":683},[637,37623,1925],{"class":823},[637,37625,687],{"class":642},[637,37627,2577],{"class":823},[637,37629,1513],{"class":683},[637,37631,660],{"class":642},[637,37633,813],{"class":642},[637,37635,1491],{"class":650},[637,37637,657],{"class":642},[637,37639,660],{"class":642},[637,37641,1498],{"class":683},[637,37643,824],{"class":823},[637,37645,687],{"class":642},[637,37647,32172],{"class":823},[637,37649,687],{"class":642},[637,37651,2577],{"class":823},[637,37653,1513],{"class":683},[637,37655,660],{"class":642},[637,37657,669],{"class":642},[637,37659,37660],{"class":639,"line":739},[637,37661,32187],{"class":683},[637,37663,37664,37666,37668],{"class":639,"line":745},[637,37665,732],{"class":642},[637,37667,293],{"class":646},[637,37669,669],{"class":642},[1331,37671,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":37673},[37674],{"id":624,"depth":578,"text":15},"Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":293,"description":37675},"6ZMY_90iSBZYMdJF00ih1rbyX9sFMIXEk1iKSd_AFMc",{"id":37680,"title":297,"body":37681,"description":37865,"extension":591,"links":592,"meta":37866,"navigation":594,"path":298,"seo":37867,"stem":299,"__hash__":37868},"docs\u002F2.api\u002F5.shapes\u002Ftorus.md",{"type":501,"value":37682,"toc":37862},[37683,37688,37698,37704,37710,37712,37860],[608,37684,37685],{},[37686,37687],"shapes-torus",{},[614,37689,2867,37690,9768,37692,32039,37695,1150],{},[618,37691,7526],{},[618,37693,37694],{},"\u003CTorus \u002F>",[618,37696,37697],{},"TorusGeometry",[626,37699,37702],{"className":37700,"code":37701,"language":32048},[32046],"args: [\n radius: number,\n tube: number,\n radialSegments: number,\n tubularSegments: number,\n arc: number\n]\n",[618,37703,37701],{"__ignoreMap":576},[614,37705,32053,37706],{},[1144,37707,37697],{"href":37708,"rel":37709},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=torus#api\u002Fen\u002Fgeometries\u002FTorusGeometry",[1148],[504,37711,15],{"id":624},[626,37713,37715],{"className":628,"code":37714,"language":633,"meta":576,"style":576},"\u003CTorus :args=\"[2, 0.4, 42, 100]\" color=\"orange\" \u002F>\n\n\u002F\u002F Torus with a custom material transformations\n\u003CTorus ref=\"torusRef\" :args=\"[0.75, 0.4, 16, 80]\" :position=\"[-2, 6, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FTorus>\n",[618,37716,37717,37765,37769,37774,37848,37852],{"__ignoreMap":576},[637,37718,37719,37721,37723,37725,37727,37729,37731,37733,37735,37737,37740,37742,37745,37747,37749,37751,37753,37755,37757,37759,37761,37763],{"class":639,"line":577},[637,37720,643],{"class":642},[637,37722,297],{"class":646},[637,37724,813],{"class":642},[637,37726,2021],{"class":650},[637,37728,657],{"class":642},[637,37730,660],{"class":642},[637,37732,1498],{"class":683},[637,37734,824],{"class":823},[637,37736,687],{"class":642},[637,37738,37739],{"class":823}," 0.4",[637,37741,687],{"class":642},[637,37743,37744],{"class":823}," 42",[637,37746,687],{"class":642},[637,37748,7986],{"class":823},[637,37750,1513],{"class":683},[637,37752,660],{"class":642},[637,37754,2773],{"class":650},[637,37756,657],{"class":642},[637,37758,660],{"class":642},[637,37760,14044],{"class":663},[637,37762,660],{"class":642},[637,37764,787],{"class":642},[637,37766,37767],{"class":639,"line":578},[637,37768,742],{"emptyLinePlaceholder":594},[637,37770,37771],{"class":639,"line":708},[637,37772,37773],{"class":683},"\u002F\u002F Torus with a custom material transformations\n",[637,37775,37776,37778,37780,37782,37784,37786,37788,37790,37792,37794,37796,37798,37800,37802,37804,37806,37808,37810,37812,37815,37817,37819,37821,37823,37825,37827,37829,37831,37833,37835,37838,37840,37842,37844,37846],{"class":639,"line":729},[637,37777,643],{"class":642},[637,37779,297],{"class":646},[637,37781,3999],{"class":650},[637,37783,657],{"class":642},[637,37785,660],{"class":642},[637,37787,12950],{"class":663},[637,37789,660],{"class":642},[637,37791,813],{"class":642},[637,37793,2021],{"class":650},[637,37795,657],{"class":642},[637,37797,660],{"class":642},[637,37799,1498],{"class":683},[637,37801,2621],{"class":823},[637,37803,687],{"class":642},[637,37805,37739],{"class":823},[637,37807,687],{"class":642},[637,37809,36599],{"class":823},[637,37811,687],{"class":642},[637,37813,37814],{"class":823}," 80",[637,37816,1513],{"class":683},[637,37818,660],{"class":642},[637,37820,813],{"class":642},[637,37822,1491],{"class":650},[637,37824,657],{"class":642},[637,37826,660],{"class":642},[637,37828,1498],{"class":683},[637,37830,8776],{"class":642},[637,37832,824],{"class":823},[637,37834,687],{"class":642},[637,37836,37837],{"class":823}," 6",[637,37839,687],{"class":642},[637,37841,2577],{"class":823},[637,37843,1513],{"class":683},[637,37845,660],{"class":642},[637,37847,669],{"class":642},[637,37849,37850],{"class":639,"line":739},[637,37851,32187],{"class":683},[637,37853,37854,37856,37858],{"class":639,"line":745},[637,37855,732],{"class":642},[637,37857,297],{"class":646},[637,37859,669],{"class":642},[1331,37861,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":37863},[37864],{"id":624,"depth":578,"text":15},"Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":297,"description":37865},"yySx0l9wZ0o7oTaUN9FO6Q3RIbMpJeR5NAvohXoIacY",{"id":37870,"title":301,"body":37871,"description":38054,"extension":591,"links":592,"meta":38055,"navigation":594,"path":302,"seo":38056,"stem":303,"__hash__":38057},"docs\u002F2.api\u002F5.shapes\u002Ftorus-knot.md",{"type":501,"value":37872,"toc":38051},[37873,37878,37888,37894,37900,37902,38049],[608,37874,37875],{},[37876,37877],"shapes-torus-knot",{},[614,37879,2867,37880,9768,37882,32039,37885,1150],{},[618,37881,7526],{},[618,37883,37884],{},"\u003CTorusKnot \u002F>",[618,37886,37887],{},"TorusKnotGeometry",[626,37889,37892],{"className":37890,"code":37891,"language":32048},[32046],"args: [\n radius: number,\n tube: number,\n tubularSegments: number,\n radialSegments: number,\n p: number,\n q: number\n]\n",[618,37893,37891],{"__ignoreMap":576},[614,37895,32053,37896],{},[1144,37897,37887],{"href":37898,"rel":37899},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=torus#api\u002Fen\u002Fgeometries\u002FTorusKnotGeometry",[1148],[504,37901,15],{"id":624},[626,37903,37905],{"className":628,"code":37904,"language":633,"meta":576,"style":576},"\u003CTorusKnot :args=\"[0.6, 0.2, 64, 8]\" color=\"orange\" \u002F>\n\n\u002F\u002F TorusKnot with a custom material transformations\n\u003CTorusKnot ref=\"torusKnotRef\" :args=\"[0.6, 0.2, 64, 8]\" :position=\"[-2, 6, 2]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n\u003C\u002FTorusKnot>\n",[618,37906,37907,37955,37959,37964,38037,38041],{"__ignoreMap":576},[637,37908,37909,37911,37914,37916,37918,37920,37922,37924,37926,37928,37930,37932,37935,37937,37939,37941,37943,37945,37947,37949,37951,37953],{"class":639,"line":577},[637,37910,643],{"class":642},[637,37912,37913],{"class":646},"TorusKnot",[637,37915,813],{"class":642},[637,37917,2021],{"class":650},[637,37919,657],{"class":642},[637,37921,660],{"class":642},[637,37923,1498],{"class":683},[637,37925,11028],{"class":823},[637,37927,687],{"class":642},[637,37929,36594],{"class":823},[637,37931,687],{"class":642},[637,37933,37934],{"class":823}," 64",[637,37936,687],{"class":642},[637,37938,33016],{"class":823},[637,37940,1513],{"class":683},[637,37942,660],{"class":642},[637,37944,2773],{"class":650},[637,37946,657],{"class":642},[637,37948,660],{"class":642},[637,37950,14044],{"class":663},[637,37952,660],{"class":642},[637,37954,787],{"class":642},[637,37956,37957],{"class":639,"line":578},[637,37958,742],{"emptyLinePlaceholder":594},[637,37960,37961],{"class":639,"line":708},[637,37962,37963],{"class":683},"\u002F\u002F TorusKnot with a custom material transformations\n",[637,37965,37966,37968,37970,37972,37974,37976,37979,37981,37983,37985,37987,37989,37991,37993,37995,37997,37999,38001,38003,38005,38007,38009,38011,38013,38015,38017,38019,38021,38023,38025,38027,38029,38031,38033,38035],{"class":639,"line":729},[637,37967,643],{"class":642},[637,37969,37913],{"class":646},[637,37971,3999],{"class":650},[637,37973,657],{"class":642},[637,37975,660],{"class":642},[637,37977,37978],{"class":663},"torusKnotRef",[637,37980,660],{"class":642},[637,37982,813],{"class":642},[637,37984,2021],{"class":650},[637,37986,657],{"class":642},[637,37988,660],{"class":642},[637,37990,1498],{"class":683},[637,37992,11028],{"class":823},[637,37994,687],{"class":642},[637,37996,36594],{"class":823},[637,37998,687],{"class":642},[637,38000,37934],{"class":823},[637,38002,687],{"class":642},[637,38004,33016],{"class":823},[637,38006,1513],{"class":683},[637,38008,660],{"class":642},[637,38010,813],{"class":642},[637,38012,1491],{"class":650},[637,38014,657],{"class":642},[637,38016,660],{"class":642},[637,38018,1498],{"class":683},[637,38020,8776],{"class":642},[637,38022,824],{"class":823},[637,38024,687],{"class":642},[637,38026,37837],{"class":823},[637,38028,687],{"class":642},[637,38030,33693],{"class":823},[637,38032,1513],{"class":683},[637,38034,660],{"class":642},[637,38036,669],{"class":642},[637,38038,38039],{"class":639,"line":739},[637,38040,32187],{"class":683},[637,38042,38043,38045,38047],{"class":639,"line":745},[637,38044,732],{"class":642},[637,38046,37913],{"class":646},[637,38048,669],{"class":642},[1331,38050,32198],{},{"title":576,"searchDepth":577,"depth":578,"links":38052},[38053],{"id":624,"depth":578,"text":15},"Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":301,"description":38054},"OlUiMxF35Ud6Y1uh8PxYgHq7DDQtWj0nint0vp1wx2U",{"id":38059,"title":305,"body":38060,"description":38492,"extension":591,"links":592,"meta":38493,"navigation":594,"path":306,"seo":38494,"stem":307,"__hash__":38495},"docs\u002F2.api\u002F5.shapes\u002Ftube.md",{"type":501,"value":38061,"toc":38488},[38062,38067,38077,38083,38085,38476,38479,38485],[608,38063,38064],{},[38065,38066],"shapes-tube",{},[614,38068,2867,38069,9768,38071,32039,38074,1150],{},[618,38070,7526],{},[618,38072,38073],{},"\u003CTube \u002F>",[618,38075,38076],{},"TubeGeometry",[614,38078,32053,38079],{},[1144,38080,38076],{"href":38081,"rel":38082},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=tube#api\u002Fen\u002Fgeometries\u002FTubeGeometry",[1148],[504,38084,15],{"id":624},[626,38086,38088],{"className":628,"code":38087,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Tube } from '@tresjs\u002Fcientos'\nimport { CubicBezierCurve3, Vector3 } from 'three'\nimport { ref } from 'vue'\n\nconst tubePath = ref(new CubicBezierCurve3(\n new Vector3(-1, 0, 0),\n new Vector3(-0.5, -1, 0),\n new Vector3(0.5, 1, 0),\n new Vector3(1, 0, 0),\n))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003C!-- TubeGeometry needs a curve path to be construct -->\n \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" color=\"orange\" \u002F>\n\n \u003C!-- Tube with a custom material transformations -->\n \u003CTube :args=\"[tubePath, 20, 0.2, 8, false]\" :position=\"[0, 4, 0]\">\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FTube>\n\u003C\u002Ftemplate>\n",[618,38089,38090,38110,38129,38152,38170,38174,38194,38219,38245,38267,38289,38293,38301,38305,38313,38318,38369,38373,38378,38442,38460,38468],{"__ignoreMap":576},[637,38091,38092,38094,38096,38098,38100,38102,38104,38106,38108],{"class":639,"line":577},[637,38093,643],{"class":642},[637,38095,647],{"class":646},[637,38097,651],{"class":650},[637,38099,654],{"class":650},[637,38101,657],{"class":642},[637,38103,660],{"class":642},[637,38105,664],{"class":663},[637,38107,660],{"class":642},[637,38109,669],{"class":642},[637,38111,38112,38114,38116,38119,38121,38123,38125,38127],{"class":639,"line":578},[637,38113,677],{"class":676},[637,38115,680],{"class":642},[637,38117,38118],{"class":683}," Tube",[637,38120,693],{"class":642},[637,38122,696],{"class":676},[637,38124,699],{"class":642},[637,38126,702],{"class":663},[637,38128,705],{"class":642},[637,38130,38131,38133,38135,38138,38140,38142,38144,38146,38148,38150],{"class":639,"line":708},[637,38132,677],{"class":676},[637,38134,680],{"class":642},[637,38136,38137],{"class":683}," CubicBezierCurve3",[637,38139,687],{"class":642},[637,38141,32320],{"class":683},[637,38143,693],{"class":642},[637,38145,696],{"class":676},[637,38147,699],{"class":642},[637,38149,4799],{"class":663},[637,38151,705],{"class":642},[637,38153,38154,38156,38158,38160,38162,38164,38166,38168],{"class":639,"line":729},[637,38155,677],{"class":676},[637,38157,680],{"class":642},[637,38159,3999],{"class":683},[637,38161,693],{"class":642},[637,38163,696],{"class":676},[637,38165,699],{"class":642},[637,38167,633],{"class":663},[637,38169,705],{"class":642},[637,38171,38172],{"class":639,"line":739},[637,38173,742],{"emptyLinePlaceholder":594},[637,38175,38176,38178,38181,38183,38185,38187,38190,38192],{"class":639,"line":745},[637,38177,2487],{"class":650},[637,38179,38180],{"class":683}," tubePath ",[637,38182,657],{"class":642},[637,38184,3999],{"class":2506},[637,38186,2509],{"class":683},[637,38188,38189],{"class":642},"new",[637,38191,38137],{"class":2506},[637,38193,4871],{"class":683},[637,38195,38196,38199,38201,38203,38205,38207,38209,38211,38213,38215,38217],{"class":639,"line":755},[637,38197,38198],{"class":642}," new",[637,38200,32320],{"class":2506},[637,38202,2509],{"class":683},[637,38204,8776],{"class":642},[637,38206,1925],{"class":823},[637,38208,687],{"class":642},[637,38210,2577],{"class":823},[637,38212,687],{"class":642},[637,38214,2577],{"class":823},[637,38216,3433],{"class":683},[637,38218,2560],{"class":642},[637,38220,38221,38223,38225,38227,38229,38231,38233,38235,38237,38239,38241,38243],{"class":639,"line":778},[637,38222,38198],{"class":642},[637,38224,32320],{"class":2506},[637,38226,2509],{"class":683},[637,38228,8776],{"class":642},[637,38230,1545],{"class":823},[637,38232,687],{"class":642},[637,38234,8746],{"class":642},[637,38236,1925],{"class":823},[637,38238,687],{"class":642},[637,38240,2577],{"class":823},[637,38242,3433],{"class":683},[637,38244,2560],{"class":642},[637,38246,38247,38249,38251,38253,38255,38257,38259,38261,38263,38265],{"class":639,"line":790},[637,38248,38198],{"class":642},[637,38250,32320],{"class":2506},[637,38252,2509],{"class":683},[637,38254,1545],{"class":823},[637,38256,687],{"class":642},[637,38258,2631],{"class":823},[637,38260,687],{"class":642},[637,38262,2577],{"class":823},[637,38264,3433],{"class":683},[637,38266,2560],{"class":642},[637,38268,38269,38271,38273,38275,38277,38279,38281,38283,38285,38287],{"class":639,"line":800},[637,38270,38198],{"class":642},[637,38272,32320],{"class":2506},[637,38274,2509],{"class":683},[637,38276,1925],{"class":823},[637,38278,687],{"class":642},[637,38280,2577],{"class":823},[637,38282,687],{"class":642},[637,38284,2577],{"class":823},[637,38286,3433],{"class":683},[637,38288,2560],{"class":642},[637,38290,38291],{"class":639,"line":805},[637,38292,7398],{"class":683},[637,38294,38295,38297,38299],{"class":639,"line":831},[637,38296,732],{"class":642},[637,38298,647],{"class":646},[637,38300,669],{"class":642},[637,38302,38303],{"class":639,"line":631},[637,38304,742],{"emptyLinePlaceholder":594},[637,38306,38307,38309,38311],{"class":639,"line":854},[637,38308,643],{"class":642},[637,38310,750],{"class":646},[637,38312,669],{"class":642},[637,38314,38315],{"class":639,"line":865},[637,38316,38317],{"class":1213}," \u003C!-- TubeGeometry needs a curve path to be construct -->\n",[637,38319,38320,38322,38324,38326,38328,38330,38332,38334,38337,38339,38341,38343,38345,38347,38349,38351,38353,38355,38357,38359,38361,38363,38365,38367],{"class":639,"line":876},[637,38321,758],{"class":642},[637,38323,305],{"class":646},[637,38325,813],{"class":642},[637,38327,2021],{"class":650},[637,38329,657],{"class":642},[637,38331,660],{"class":642},[637,38333,1498],{"class":642},[637,38335,38336],{"class":683},"tubePath",[637,38338,1503],{"class":642},[637,38340,32586],{"class":823},[637,38342,1503],{"class":642},[637,38344,5938],{"class":823},[637,38346,1503],{"class":642},[637,38348,22756],{"class":823},[637,38350,1503],{"class":642},[637,38352,975],{"class":4560},[637,38354,1513],{"class":642},[637,38356,660],{"class":642},[637,38358,2773],{"class":650},[637,38360,657],{"class":642},[637,38362,660],{"class":642},[637,38364,14044],{"class":663},[637,38366,660],{"class":642},[637,38368,787],{"class":642},[637,38370,38371],{"class":639,"line":886},[637,38372,742],{"emptyLinePlaceholder":594},[637,38374,38375],{"class":639,"line":632},[637,38376,38377],{"class":1213}," \u003C!-- Tube with a custom material transformations -->\n",[637,38379,38380,38382,38384,38386,38388,38390,38392,38394,38396,38398,38400,38402,38404,38406,38408,38410,38412,38414,38416,38418,38420,38422,38424,38426,38428,38430,38432,38434,38436,38438,38440],{"class":639,"line":906},[637,38381,758],{"class":642},[637,38383,305],{"class":646},[637,38385,813],{"class":642},[637,38387,2021],{"class":650},[637,38389,657],{"class":642},[637,38391,660],{"class":642},[637,38393,1498],{"class":642},[637,38395,38336],{"class":683},[637,38397,1503],{"class":642},[637,38399,32586],{"class":823},[637,38401,1503],{"class":642},[637,38403,5938],{"class":823},[637,38405,1503],{"class":642},[637,38407,22756],{"class":823},[637,38409,1503],{"class":642},[637,38411,975],{"class":4560},[637,38413,1513],{"class":642},[637,38415,660],{"class":642},[637,38417,813],{"class":642},[637,38419,1491],{"class":650},[637,38421,657],{"class":642},[637,38423,660],{"class":642},[637,38425,1498],{"class":642},[637,38427,969],{"class":823},[637,38429,1503],{"class":642},[637,38431,3900],{"class":823},[637,38433,1503],{"class":642},[637,38435,969],{"class":823},[637,38437,1513],{"class":642},[637,38439,660],{"class":642},[637,38441,669],{"class":642},[637,38443,38444,38446,38448,38450,38452,38454,38456,38458],{"class":639,"line":916},[637,38445,781],{"class":642},[637,38447,14035],{"class":646},[637,38449,2773],{"class":650},[637,38451,657],{"class":642},[637,38453,660],{"class":642},[637,38455,14044],{"class":663},[637,38457,660],{"class":642},[637,38459,787],{"class":642},[637,38461,38462,38464,38466],{"class":639,"line":2695},[637,38463,909],{"class":642},[637,38465,305],{"class":646},[637,38467,669],{"class":642},[637,38469,38470,38472,38474],{"class":639,"line":2704},[637,38471,732],{"class":642},[637,38473,750],{"class":646},[637,38475,669],{"class":642},[504,38477,38478],{"id":2021},"Args",[626,38480,38483],{"className":38481,"code":38482,"language":32048},[32046],"type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3\n\nargs: [\n path: CurveType,\n tubularSegments: number,\n radius: number,\n radialSegments: number,\n closed: boolean\n]\n",[618,38484,38482],{"__ignoreMap":576},[1331,38486,38487],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html 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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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);}",{"title":576,"searchDepth":577,"depth":578,"links":38489},[38490,38491],{"id":624,"depth":578,"text":15},{"id":2021,"depth":578,"text":38478},"Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.",{},{"title":305,"description":38492},"dl45gDobAVZZJ-EiABsXN_ZQHrn_4vSzVw1r8h_AnrY",[38497,38811,39331,39542,39839],{"id":38498,"title":315,"body":38499,"description":38807,"extension":591,"links":592,"meta":38808,"navigation":594,"path":316,"seo":38809,"stem":317,"__hash__":38810},"docs\u002F2.api\u002F6.debug-performance\u002Fhelper.md",{"type":501,"value":38500,"toc":38803},[38501,38506,38512,38514,38761,38763,38801],[2367,38502,38503],{},[38504,38505],"debug-performance-helper",{},[614,38507,38508,38511],{},[618,38509,38510],{},"\u003CHelper \u002F>"," handles instantiation, updates, and removal\u002Fdisposal of THREE Helpers.",[504,38513,15],{"id":624},[626,38515,38518],{"className":628,"code":38516,"highlights":38517,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Helper } from '@tresjs\u002Fcientos'\nimport { BoxHelper } from 'three'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" \u002F>\n \u003CTresMesh ref=\"boxRef\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003CHelper :type=\"BoxHelper\" :args=\"[0xff0000]\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,631],[618,38519,38520,38540,38558,38578,38597,38605,38609,38617,38625,38657,38675,38683,38691,38729,38737,38745,38753],{"__ignoreMap":576},[637,38521,38522,38524,38526,38528,38530,38532,38534,38536,38538],{"class":639,"line":577},[637,38523,643],{"class":642},[637,38525,647],{"class":646},[637,38527,651],{"class":650},[637,38529,654],{"class":650},[637,38531,657],{"class":642},[637,38533,660],{"class":642},[637,38535,664],{"class":663},[637,38537,660],{"class":642},[637,38539,669],{"class":642},[637,38541,38542,38544,38546,38548,38550,38552,38554,38556],{"class":639,"line":578},[637,38543,677],{"class":676},[637,38545,680],{"class":642},[637,38547,715],{"class":683},[637,38549,693],{"class":642},[637,38551,696],{"class":676},[637,38553,699],{"class":642},[637,38555,724],{"class":663},[637,38557,705],{"class":642},[637,38559,38561,38563,38565,38568,38570,38572,38574,38576],{"class":38560,"line":708},[639,673],[637,38562,677],{"class":676},[637,38564,680],{"class":642},[637,38566,38567],{"class":683}," Helper",[637,38569,693],{"class":642},[637,38571,696],{"class":676},[637,38573,699],{"class":642},[637,38575,702],{"class":663},[637,38577,705],{"class":642},[637,38579,38580,38582,38584,38587,38589,38591,38593,38595],{"class":639,"line":729},[637,38581,677],{"class":676},[637,38583,680],{"class":642},[637,38585,38586],{"class":683}," BoxHelper",[637,38588,693],{"class":642},[637,38590,696],{"class":676},[637,38592,699],{"class":642},[637,38594,4799],{"class":663},[637,38596,705],{"class":642},[637,38598,38599,38601,38603],{"class":639,"line":739},[637,38600,732],{"class":642},[637,38602,647],{"class":646},[637,38604,669],{"class":642},[637,38606,38607],{"class":639,"line":745},[637,38608,742],{"emptyLinePlaceholder":594},[637,38610,38611,38613,38615],{"class":639,"line":755},[637,38612,643],{"class":642},[637,38614,750],{"class":646},[637,38616,669],{"class":642},[637,38618,38619,38621,38623],{"class":639,"line":778},[637,38620,758],{"class":642},[637,38622,761],{"class":646},[637,38624,669],{"class":642},[637,38626,38627,38629,38631,38633,38635,38637,38639,38641,38643,38645,38647,38649,38651,38653,38655],{"class":639,"line":790},[637,38628,781],{"class":642},[637,38630,784],{"class":646},[637,38632,813],{"class":642},[637,38634,1491],{"class":650},[637,38636,657],{"class":642},[637,38638,660],{"class":642},[637,38640,1498],{"class":642},[637,38642,2729],{"class":823},[637,38644,1503],{"class":642},[637,38646,2729],{"class":823},[637,38648,1503],{"class":642},[637,38650,2729],{"class":823},[637,38652,1513],{"class":642},[637,38654,660],{"class":642},[637,38656,787],{"class":642},[637,38658,38659,38661,38663,38665,38667,38669,38671,38673],{"class":639,"line":800},[637,38660,781],{"class":642},[637,38662,860],{"class":646},[637,38664,3999],{"class":650},[637,38666,657],{"class":642},[637,38668,660],{"class":642},[637,38670,17183],{"class":663},[637,38672,660],{"class":642},[637,38674,669],{"class":642},[637,38676,38677,38679,38681],{"class":639,"line":805},[637,38678,857],{"class":642},[637,38680,871],{"class":646},[637,38682,787],{"class":642},[637,38684,38685,38687,38689],{"class":639,"line":831},[637,38686,857],{"class":642},[637,38688,881],{"class":646},[637,38690,787],{"class":642},[637,38692,38694,38696,38698,38700,38702,38704,38706,38709,38711,38713,38715,38717,38719,38721,38723,38725,38727],{"class":38693,"line":631},[639,673],[637,38695,857],{"class":642},[637,38697,315],{"class":646},[637,38699,813],{"class":642},[637,38701,5729],{"class":650},[637,38703,657],{"class":642},[637,38705,660],{"class":642},[637,38707,38708],{"class":683},"BoxHelper",[637,38710,660],{"class":642},[637,38712,813],{"class":642},[637,38714,2021],{"class":650},[637,38716,657],{"class":642},[637,38718,660],{"class":642},[637,38720,1498],{"class":642},[637,38722,27695],{"class":823},[637,38724,1513],{"class":642},[637,38726,660],{"class":642},[637,38728,787],{"class":642},[637,38730,38731,38733,38735],{"class":639,"line":854},[637,38732,899],{"class":642},[637,38734,860],{"class":646},[637,38736,669],{"class":642},[637,38738,38739,38741,38743],{"class":639,"line":865},[637,38740,781],{"class":642},[637,38742,10010],{"class":646},[637,38744,787],{"class":642},[637,38746,38747,38749,38751],{"class":639,"line":876},[637,38748,909],{"class":642},[637,38750,761],{"class":646},[637,38752,669],{"class":642},[637,38754,38755,38757,38759],{"class":639,"line":886},[637,38756,732],{"class":642},[637,38758,750],{"class":646},[637,38760,669],{"class":642},[504,38762,926],{"id":925},[931,38764,38765,38775],{},[934,38766,38767],{},[937,38768,38769,38771,38773],{},[940,38770,942],{"align":1001},[940,38772,945],{"align":1001},[940,38774,948],{},[950,38776,38777,38788],{},[937,38778,38779,38783,38786],{},[955,38780,38781],{"align":1001},[1705,38782,5729],{},[955,38784,38785],{"align":1001},"Helper constructor - required",[955,38787],{},[937,38789,38790,38794,38797],{},[955,38791,38792],{"align":1001},[1705,38793,2021],{},[955,38795,38796],{"align":1001},"Helper constructor args",[955,38798,38799],{},[618,38800,3672],{},[1331,38802,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":38804},[38805,38806],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Handles instantiation, updates, and removal\u002Fdisposal of THREE Helpers.",{},{"title":315,"description":38807},"eCegCHTXKuWv3dso3PuJHIMliJK_ACUVoEreb2IQT48",{"id":38812,"title":319,"body":38813,"description":39327,"extension":591,"links":592,"meta":39328,"navigation":594,"path":320,"seo":39329,"stem":321,"__hash__":39330},"docs\u002F2.api\u002F6.debug-performance\u002Flod.md",{"type":501,"value":38814,"toc":39323},[38815,38820,38823,38834,38836,39271,39273,39321],[2367,38816,38817],{},[38818,38819],"debug-performance-lod",{},[614,38821,38822],{},"Level of Detail - show meshes with more or less geometry based on distance from the camera.",[614,38824,38825,38828,38829,38833],{},[618,38826,38827],{},"\u003CLOD \u002F>"," is a wrapper for THREE's ",[1144,38830,319],{"href":38831,"rel":38832},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=LOD#api\u002Fen\u002Fobjects\u002FLOD",[1148]," class.",[504,38835,15],{"id":624},[626,38837,38839],{"className":628,"code":38838,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { LOD } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003CLOD :levels=\"[0, 5, 10]\">\n \u003C!-- High detail mesh - shown when close -->\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 32, 32]\" \u002F>\n \u003CTresMeshStandardMaterial color=\"red\" \u002F>\n \u003C\u002FTresMesh>\n \u003C!-- Medium detail mesh - shown at mid distance -->\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 16, 16]\" \u002F>\n \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n \u003C\u002FTresMesh>\n \u003C!-- Low detail mesh - shown when far -->\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 8, 8]\" \u002F>\n \u003CTresMeshStandardMaterial color=\"yellow\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FLOD>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,38840,38841,38861,38879,38898,38906,38910,38918,38926,38958,38991,38996,39004,39036,39055,39063,39068,39076,39109,39127,39135,39140,39148,39180,39199,39207,39215,39223,39255,39263],{"__ignoreMap":576},[637,38842,38843,38845,38847,38849,38851,38853,38855,38857,38859],{"class":639,"line":577},[637,38844,643],{"class":642},[637,38846,647],{"class":646},[637,38848,651],{"class":650},[637,38850,654],{"class":650},[637,38852,657],{"class":642},[637,38854,660],{"class":642},[637,38856,664],{"class":663},[637,38858,660],{"class":642},[637,38860,669],{"class":642},[637,38862,38863,38865,38867,38869,38871,38873,38875,38877],{"class":639,"line":578},[637,38864,677],{"class":676},[637,38866,680],{"class":642},[637,38868,715],{"class":683},[637,38870,693],{"class":642},[637,38872,696],{"class":676},[637,38874,699],{"class":642},[637,38876,724],{"class":663},[637,38878,705],{"class":642},[637,38880,38881,38883,38885,38888,38890,38892,38894,38896],{"class":639,"line":708},[637,38882,677],{"class":676},[637,38884,680],{"class":642},[637,38886,38887],{"class":683}," LOD",[637,38889,693],{"class":642},[637,38891,696],{"class":676},[637,38893,699],{"class":642},[637,38895,702],{"class":663},[637,38897,705],{"class":642},[637,38899,38900,38902,38904],{"class":639,"line":729},[637,38901,732],{"class":642},[637,38903,647],{"class":646},[637,38905,669],{"class":642},[637,38907,38908],{"class":639,"line":739},[637,38909,742],{"emptyLinePlaceholder":594},[637,38911,38912,38914,38916],{"class":639,"line":745},[637,38913,643],{"class":642},[637,38915,750],{"class":646},[637,38917,669],{"class":642},[637,38919,38920,38922,38924],{"class":639,"line":755},[637,38921,758],{"class":642},[637,38923,761],{"class":646},[637,38925,669],{"class":642},[637,38927,38928,38930,38932,38934,38936,38938,38940,38942,38944,38946,38948,38950,38952,38954,38956],{"class":639,"line":778},[637,38929,781],{"class":642},[637,38931,784],{"class":646},[637,38933,813],{"class":642},[637,38935,1491],{"class":650},[637,38937,657],{"class":642},[637,38939,660],{"class":642},[637,38941,1498],{"class":642},[637,38943,969],{"class":823},[637,38945,1503],{"class":642},[637,38947,824],{"class":823},[637,38949,1503],{"class":642},[637,38951,7666],{"class":823},[637,38953,1513],{"class":642},[637,38955,660],{"class":642},[637,38957,787],{"class":642},[637,38959,38960,38962,38964,38966,38969,38971,38973,38975,38977,38979,38981,38983,38985,38987,38989],{"class":639,"line":790},[637,38961,781],{"class":642},[637,38963,319],{"class":646},[637,38965,813],{"class":642},[637,38967,38968],{"class":650},"levels",[637,38970,657],{"class":642},[637,38972,660],{"class":642},[637,38974,1498],{"class":642},[637,38976,969],{"class":823},[637,38978,1503],{"class":642},[637,38980,7666],{"class":823},[637,38982,1503],{"class":642},[637,38984,1510],{"class":823},[637,38986,1513],{"class":642},[637,38988,660],{"class":642},[637,38990,669],{"class":642},[637,38992,38993],{"class":639,"line":800},[637,38994,38995],{"class":1213}," \u003C!-- High detail mesh - shown when close -->\n",[637,38997,38998,39000,39002],{"class":639,"line":805},[637,38999,857],{"class":642},[637,39001,860],{"class":646},[637,39003,669],{"class":642},[637,39005,39006,39008,39010,39012,39014,39016,39018,39020,39022,39024,39026,39028,39030,39032,39034],{"class":639,"line":831},[637,39007,868],{"class":642},[637,39009,4107],{"class":646},[637,39011,813],{"class":642},[637,39013,2021],{"class":650},[637,39015,657],{"class":642},[637,39017,660],{"class":642},[637,39019,1498],{"class":642},[637,39021,1925],{"class":823},[637,39023,1503],{"class":642},[637,39025,13043],{"class":823},[637,39027,1503],{"class":642},[637,39029,13043],{"class":823},[637,39031,1513],{"class":642},[637,39033,660],{"class":642},[637,39035,787],{"class":642},[637,39037,39038,39040,39042,39044,39046,39048,39051,39053],{"class":639,"line":631},[637,39039,868],{"class":642},[637,39041,2770],{"class":646},[637,39043,2773],{"class":650},[637,39045,657],{"class":642},[637,39047,660],{"class":642},[637,39049,39050],{"class":663},"red",[637,39052,660],{"class":642},[637,39054,787],{"class":642},[637,39056,39057,39059,39061],{"class":639,"line":854},[637,39058,889],{"class":642},[637,39060,860],{"class":646},[637,39062,669],{"class":642},[637,39064,39065],{"class":639,"line":865},[637,39066,39067],{"class":1213}," \u003C!-- Medium detail mesh - shown at mid distance -->\n",[637,39069,39070,39072,39074],{"class":639,"line":876},[637,39071,857],{"class":642},[637,39073,860],{"class":646},[637,39075,669],{"class":642},[637,39077,39078,39080,39082,39084,39086,39088,39090,39092,39094,39096,39099,39101,39103,39105,39107],{"class":639,"line":886},[637,39079,868],{"class":642},[637,39081,4107],{"class":646},[637,39083,813],{"class":642},[637,39085,2021],{"class":650},[637,39087,657],{"class":642},[637,39089,660],{"class":642},[637,39091,1498],{"class":642},[637,39093,1925],{"class":823},[637,39095,1503],{"class":642},[637,39097,39098],{"class":823},"16",[637,39100,1503],{"class":642},[637,39102,39098],{"class":823},[637,39104,1513],{"class":642},[637,39106,660],{"class":642},[637,39108,787],{"class":642},[637,39110,39111,39113,39115,39117,39119,39121,39123,39125],{"class":639,"line":632},[637,39112,868],{"class":642},[637,39114,2770],{"class":646},[637,39116,2773],{"class":650},[637,39118,657],{"class":642},[637,39120,660],{"class":642},[637,39122,14044],{"class":663},[637,39124,660],{"class":642},[637,39126,787],{"class":642},[637,39128,39129,39131,39133],{"class":639,"line":906},[637,39130,889],{"class":642},[637,39132,860],{"class":646},[637,39134,669],{"class":642},[637,39136,39137],{"class":639,"line":916},[637,39138,39139],{"class":1213}," \u003C!-- Low detail mesh - shown when far -->\n",[637,39141,39142,39144,39146],{"class":639,"line":2695},[637,39143,857],{"class":642},[637,39145,860],{"class":646},[637,39147,669],{"class":642},[637,39149,39150,39152,39154,39156,39158,39160,39162,39164,39166,39168,39170,39172,39174,39176,39178],{"class":639,"line":2704},[637,39151,868],{"class":642},[637,39153,4107],{"class":646},[637,39155,813],{"class":642},[637,39157,2021],{"class":650},[637,39159,657],{"class":642},[637,39161,660],{"class":642},[637,39163,1498],{"class":642},[637,39165,1925],{"class":823},[637,39167,1503],{"class":642},[637,39169,22756],{"class":823},[637,39171,1503],{"class":642},[637,39173,22756],{"class":823},[637,39175,1513],{"class":642},[637,39177,660],{"class":642},[637,39179,787],{"class":642},[637,39181,39182,39184,39186,39188,39190,39192,39195,39197],{"class":639,"line":2738},[637,39183,868],{"class":642},[637,39185,2770],{"class":646},[637,39187,2773],{"class":650},[637,39189,657],{"class":642},[637,39191,660],{"class":642},[637,39193,39194],{"class":663},"yellow",[637,39196,660],{"class":642},[637,39198,787],{"class":642},[637,39200,39201,39203,39205],{"class":639,"line":2747},[637,39202,889],{"class":642},[637,39204,860],{"class":646},[637,39206,669],{"class":642},[637,39208,39209,39211,39213],{"class":639,"line":2756},[637,39210,899],{"class":642},[637,39212,319],{"class":646},[637,39214,669],{"class":642},[637,39216,39217,39219,39221],{"class":639,"line":2765},[637,39218,781],{"class":642},[637,39220,10010],{"class":646},[637,39222,787],{"class":642},[637,39224,39225,39227,39229,39231,39233,39235,39237,39239,39241,39243,39245,39247,39249,39251,39253],{"class":639,"line":2787},[637,39226,781],{"class":642},[637,39228,10031],{"class":646},[637,39230,813],{"class":642},[637,39232,1491],{"class":650},[637,39234,657],{"class":642},[637,39236,660],{"class":642},[637,39238,1498],{"class":642},[637,39240,969],{"class":823},[637,39242,1503],{"class":642},[637,39244,824],{"class":823},[637,39246,1503],{"class":642},[637,39248,3900],{"class":823},[637,39250,1513],{"class":642},[637,39252,660],{"class":642},[637,39254,787],{"class":642},[637,39256,39257,39259,39261],{"class":639,"line":2838},[637,39258,909],{"class":642},[637,39260,761],{"class":646},[637,39262,669],{"class":642},[637,39264,39265,39267,39269],{"class":639,"line":2847},[637,39266,732],{"class":642},[637,39268,750],{"class":646},[637,39270,669],{"class":642},[504,39272,926],{"id":925},[931,39274,39275,39285],{},[934,39276,39277],{},[937,39278,39279,39281,39283],{},[940,39280,942],{"align":1001},[940,39282,945],{"align":1001},[940,39284,948],{},[950,39286,39287,39307],{},[937,39288,39289,39293,39305],{},[955,39290,39291],{"align":1001},[1705,39292,38968],{},[955,39294,39295,39298,39299,39301,39302,39304],{"align":1001},[618,39296,39297],{},"number[]"," - The distances at which to display each level of detail. There should be one ",[618,39300,38968],{}," value for each ",[618,39303,319],{}," child.",[955,39306],{},[937,39308,39309,39314,39317],{},[955,39310,39311],{"align":1001},[1705,39312,39313],{},"hysteresis",[955,39315,39316],{"align":1001},"Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.",[955,39318,39319],{},[618,39320,14513],{},[1331,39322,29699],{},{"title":576,"searchDepth":577,"depth":578,"links":39324},[39325,39326],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Level of Detail - show meshes with more or less geometry based on distance from camera.",{},{"title":319,"description":39327},"ue6lcrsKRgNjxBsudKxGB368Ot9yPUV2C-0TWgeZzbE",{"id":39332,"title":323,"body":39333,"description":39538,"extension":591,"links":592,"meta":39539,"navigation":594,"path":324,"seo":39540,"stem":325,"__hash__":39541},"docs\u002F2.api\u002F6.debug-performance\u002Fstats.md",{"type":501,"value":39334,"toc":39534},[39335,39349,39358,39362,39479,39481,39515,39532],[614,39336,39337,39342,39343,39348],{},[1144,39338,39341],{"href":39339,"rel":39340},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fstats.js\u002F",[1148],"stats.js"," is a JavaScript performance monitor, made by ",[1144,39344,39347],{"href":39345,"rel":39346},"https:\u002F\u002Fgithub.com\u002Fmrdoob",[1148],"mrdoob",". stats.js provides a simple info box that will help you monitor your code performance.",[614,39350,39351,39354,39355,39357],{},[1705,39352,39353],{},"Cientos"," provides a component called ",[618,39356,323],{}," that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.",[504,39359,39361],{"id":39360},"basic-usage","Basic usage",[626,39363,39366],{"className":628,"code":39364,"highlights":39365,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Stats } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CStats \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,778],[618,39367,39368,39388,39406,39426,39434,39438,39446,39454,39463,39471],{"__ignoreMap":576},[637,39369,39370,39372,39374,39376,39378,39380,39382,39384,39386],{"class":639,"line":577},[637,39371,643],{"class":642},[637,39373,647],{"class":646},[637,39375,651],{"class":650},[637,39377,654],{"class":650},[637,39379,657],{"class":642},[637,39381,660],{"class":642},[637,39383,664],{"class":663},[637,39385,660],{"class":642},[637,39387,669],{"class":642},[637,39389,39390,39392,39394,39396,39398,39400,39402,39404],{"class":639,"line":578},[637,39391,677],{"class":676},[637,39393,680],{"class":642},[637,39395,715],{"class":683},[637,39397,693],{"class":642},[637,39399,696],{"class":676},[637,39401,699],{"class":642},[637,39403,724],{"class":663},[637,39405,705],{"class":642},[637,39407,39409,39411,39413,39416,39418,39420,39422,39424],{"class":39408,"line":708},[639,673],[637,39410,677],{"class":676},[637,39412,680],{"class":642},[637,39414,39415],{"class":683}," Stats",[637,39417,693],{"class":642},[637,39419,696],{"class":676},[637,39421,699],{"class":642},[637,39423,702],{"class":663},[637,39425,705],{"class":642},[637,39427,39428,39430,39432],{"class":639,"line":729},[637,39429,732],{"class":642},[637,39431,647],{"class":646},[637,39433,669],{"class":642},[637,39435,39436],{"class":639,"line":739},[637,39437,742],{"emptyLinePlaceholder":594},[637,39439,39440,39442,39444],{"class":639,"line":745},[637,39441,643],{"class":642},[637,39443,750],{"class":646},[637,39445,669],{"class":642},[637,39447,39448,39450,39452],{"class":639,"line":755},[637,39449,758],{"class":642},[637,39451,761],{"class":646},[637,39453,669],{"class":642},[637,39455,39457,39459,39461],{"class":39456,"line":778},[639,673],[637,39458,781],{"class":642},[637,39460,323],{"class":646},[637,39462,787],{"class":642},[637,39464,39465,39467,39469],{"class":639,"line":790},[637,39466,909],{"class":642},[637,39468,761],{"class":646},[637,39470,669],{"class":642},[637,39472,39473,39475,39477],{"class":639,"line":800},[637,39474,732],{"class":642},[637,39476,750],{"class":646},[637,39478,669],{"class":642},[504,39480,926],{"id":925},[931,39482,39483,39495],{},[934,39484,39485],{},[937,39486,39487,39489,39491,39493],{},[940,39488,942],{"align":1001},[940,39490,6178],{},[940,39492,948],{},[940,39494,945],{},[950,39496,39497],{},[937,39498,39499,39504,39508,39512],{},[955,39500,39501],{"align":1001},[1705,39502,39503],{},"showPanel",[955,39505,39506],{},[618,39507,5564],{},[955,39509,39510],{},[618,39511,969],{},[955,39513,39514],{},"FPS monitor.",[2285,39516,39517,39520,39523,39526],{},[2288,39518,39519],{},"0: FPS Frames rendered in the last second. The higher the number the better.",[2288,39521,39522],{},"1: MS Milliseconds needed to render a frame. The lower the number the better.",[2288,39524,39525],{},"2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)",[2288,39527,39528,39529,1150],{},"3+: CUSTOM User-defined panel support. For more info please check ",[1144,39530,39341],{"href":39339,"rel":39531},[1148],[1331,39533,29032],{},{"title":576,"searchDepth":577,"depth":578,"links":39535},[39536,39537],{"id":39360,"depth":578,"text":39361},{"id":925,"depth":578,"text":926},"JavaScript performance monitor to track FPS, MS, and memory usage.",{},{"title":323,"description":39538},"CEx2GwVgDehipIa_mCiC4Mpq7SAIqbwq61OScXwW86c",{"id":39543,"title":327,"body":39544,"description":39835,"extension":591,"links":592,"meta":39836,"navigation":594,"path":328,"seo":39837,"stem":329,"__hash__":39838},"docs\u002F2.api\u002F6.debug-performance\u002Fstats-gl.md",{"type":501,"value":39545,"toc":39831},[39546,39564,39567,39569,39686,39688,39829],[614,39547,39548,39553,39554,39559,39560,39563],{},[1144,39549,39552],{"href":39550,"rel":39551},"https:\u002F\u002Fgithub.com\u002FRenaudRohlinger\u002Fstats-gl",[1148],"stats-gl"," is a powerful WebGL performance monitoring tool created by ",[1144,39555,39558],{"href":39556,"rel":39557},"https:\u002F\u002Fgithub.com\u002FRenaudRohlinger",[1148],"RenaudRohlinger",".\nIt offers simple information boxes to track code performance and serves as a more advanced alternative to ",[1144,39561,39341],{"href":39339,"rel":39562},[1148],", capable of displaying CPU and GPU metrics.",[614,39565,39566],{},"In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component.\nSimply drop the StatsGl component into your TresCanvas for easy performance monitoring.",[504,39568,39361],{"id":39360},[626,39570,39573],{"className":628,"code":39571,"highlights":39572,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { StatsGl } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CStatsGl \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,778],[618,39574,39575,39595,39613,39633,39641,39645,39653,39661,39670,39678],{"__ignoreMap":576},[637,39576,39577,39579,39581,39583,39585,39587,39589,39591,39593],{"class":639,"line":577},[637,39578,643],{"class":642},[637,39580,647],{"class":646},[637,39582,651],{"class":650},[637,39584,654],{"class":650},[637,39586,657],{"class":642},[637,39588,660],{"class":642},[637,39590,664],{"class":663},[637,39592,660],{"class":642},[637,39594,669],{"class":642},[637,39596,39597,39599,39601,39603,39605,39607,39609,39611],{"class":639,"line":578},[637,39598,677],{"class":676},[637,39600,680],{"class":642},[637,39602,715],{"class":683},[637,39604,693],{"class":642},[637,39606,696],{"class":676},[637,39608,699],{"class":642},[637,39610,724],{"class":663},[637,39612,705],{"class":642},[637,39614,39616,39618,39620,39623,39625,39627,39629,39631],{"class":39615,"line":708},[639,673],[637,39617,677],{"class":676},[637,39619,680],{"class":642},[637,39621,39622],{"class":683}," StatsGl",[637,39624,693],{"class":642},[637,39626,696],{"class":676},[637,39628,699],{"class":642},[637,39630,702],{"class":663},[637,39632,705],{"class":642},[637,39634,39635,39637,39639],{"class":639,"line":729},[637,39636,732],{"class":642},[637,39638,647],{"class":646},[637,39640,669],{"class":642},[637,39642,39643],{"class":639,"line":739},[637,39644,742],{"emptyLinePlaceholder":594},[637,39646,39647,39649,39651],{"class":639,"line":745},[637,39648,643],{"class":642},[637,39650,750],{"class":646},[637,39652,669],{"class":642},[637,39654,39655,39657,39659],{"class":639,"line":755},[637,39656,758],{"class":642},[637,39658,761],{"class":646},[637,39660,669],{"class":642},[637,39662,39664,39666,39668],{"class":39663,"line":778},[639,673],[637,39665,781],{"class":642},[637,39667,327],{"class":646},[637,39669,787],{"class":642},[637,39671,39672,39674,39676],{"class":639,"line":790},[637,39673,909],{"class":642},[637,39675,761],{"class":646},[637,39677,669],{"class":642},[637,39679,39680,39682,39684],{"class":639,"line":800},[637,39681,732],{"class":642},[637,39683,750],{"class":646},[637,39685,669],{"class":642},[504,39687,14787],{"id":18439},[931,39689,39690,39702],{},[934,39691,39692],{},[937,39693,39694,39696,39698,39700],{},[940,39695,8360],{"align":1001},[940,39697,6178],{},[940,39699,948],{},[940,39701,945],{},[950,39703,39704,39722,39740,39758,39776,39794,39812],{},[937,39705,39706,39711,39715,39719],{},[955,39707,39708],{"align":1001},[1705,39709,39710],{},"logsPerSecond",[955,39712,39713],{},[618,39714,5564],{},[955,39716,39717],{},[618,39718,32586],{},[955,39720,39721],{},"How often to log performance data, in logs per second.",[937,39723,39724,39729,39733,39737],{},[955,39725,39726],{"align":1001},[1705,39727,39728],{},"samplesLog",[955,39730,39731],{},[618,39732,5564],{},[955,39734,39735],{},[618,39736,11706],{},[955,39738,39739],{},"Number of recent log samples to keep for computing averages.",[937,39741,39742,39747,39751,39755],{},[955,39743,39744],{"align":1001},[1705,39745,39746],{},"samplesGraph",[955,39748,39749],{},[618,39750,5564],{},[955,39752,39753],{},[618,39754,1510],{},[955,39756,39757],{},"Number of recent graph samples to keep for computing averages.",[937,39759,39760,39765,39769,39773],{},[955,39761,39762],{"align":1001},[1705,39763,39764],{},"precision",[955,39766,39767],{},[618,39768,5564],{},[955,39770,39771],{},[618,39772,824],{},[955,39774,39775],{},"Precision of the data, in the number of decimal places (only affects CPU and GPU).",[937,39777,39778,39783,39787,39791],{},[955,39779,39780],{"align":1001},[1705,39781,39782],{},"horizontal",[955,39784,39785],{},[618,39786,18466],{},[955,39788,39789],{},[618,39790,965],{},[955,39792,39793],{},"Display the canvases on the X-axis, set to align on the vertical axis.",[937,39795,39796,39801,39805,39809],{},[955,39797,39798],{"align":1001},[1705,39799,39800],{},"minimal",[955,39802,39803],{},[618,39804,18466],{},[955,39806,39807],{},[618,39808,975],{},[955,39810,39811],{},"A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics.",[937,39813,39814,39818,39822,39826],{},[955,39815,39816],{"align":1001},[1705,39817,7073],{},[955,39819,39820],{},[618,39821,5564],{},[955,39823,39824],{},[618,39825,969],{},[955,39827,39828],{},"Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported).",[1331,39830,29032],{},{"title":576,"searchDepth":577,"depth":578,"links":39832},[39833,39834],{"id":39360,"depth":578,"text":39361},{"id":18439,"depth":578,"text":14787},"WebGL performance monitoring tool displaying CPU and GPU metrics.",{},{"title":327,"description":39835},"U7tHg9fUc_rOVhwBvVzqjDp7pPwOLcUprEa_GiH5-Uc",{"id":39840,"title":331,"body":39841,"description":41248,"extension":591,"links":592,"meta":41249,"navigation":594,"path":332,"seo":41250,"stem":333,"__hash__":41251},"docs\u002F2.api\u002F6.debug-performance\u002Fuse-bvh.md",{"type":501,"value":39842,"toc":41224},[39843,39848,39855,39869,39873,39876,39881,39892,39894,39897,40062,40066,40069,40216,40220,40223,40513,40515,40529,40533,40586,40590,40596,40743,40747,40767,40769,40773,40776,40868,40872,40875,40918,40921,40925,40975,40979,41005,41009,41015,41171,41173,41177,41198,41202,41221],[608,39844,39845],{},[39846,39847],"debug-performance-use-bounding-volume-hierarchy",{},[614,39849,39850,39851,39854],{},"A composable that dramatically improves raycasting performance by building a Bounding Volume Hierarchy (BVH) for your meshes. This can speed up raycasting by ",[1705,39852,39853],{},"orders of magnitude",", especially for complex models with many triangles.",[614,39856,39857,39858,39863,39864,1150],{},"Built on top of ",[1144,39859,39862],{"href":39860,"rel":39861},"https:\u002F\u002Fgithub.com\u002Fgkjohnson\u002Fthree-mesh-bvh",[1148],"three-mesh-bvh"," by ",[1144,39865,39868],{"href":39866,"rel":39867},"https:\u002F\u002Fgithub.com\u002Fgkjohnson",[1148],"Garrett Johnson",[504,39870,39872],{"id":39871},"what-is-bvh","What is BVH?",[614,39874,39875],{},"BVH (Bounding Volume Hierarchy) is a spatial data structure that organizes geometry into a tree of bounding boxes. Instead of testing every triangle during raycasting, the algorithm tests bounding boxes first and only checks triangles in boxes that intersect the ray. This reduces raycasting complexity from O(n) to O(log n).",[614,39877,39878],{},[1705,39879,39880],{},"Use cases:",[2285,39882,39883,39886,39889],{},[2288,39884,39885],{},"Interactive 3D applications with raycasting (mouse picking, selection)",[2288,39887,39888],{},"Complex models with thousands of triangles",[2288,39890,39891],{},"Scenes with multiple raycasting operations per frame",[504,39893,15],{"id":624},[4215,39895,39896],{"id":39360},"Basic Usage",[626,39898,39901],{"className":628,"code":39899,"highlights":39900,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs\u002Fcientos'\n\nconst { state: model } = useGLTF('\u002Fmodels\u002Fcomplex-model.glb')\nuseBVH(() => model.value?.scene)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cprimitive v-if=\"model\" :object=\"model.scene\" \u002F>\n\u003C\u002Ftemplate>\n",[578,739,745,755,778,800],[618,39902,39903,39923,39947,39951,39980,40001,40010,40015,40024,40053],{"__ignoreMap":576},[637,39904,39905,39907,39909,39911,39913,39915,39917,39919,39921],{"class":639,"line":577},[637,39906,643],{"class":642},[637,39908,647],{"class":646},[637,39910,651],{"class":650},[637,39912,654],{"class":650},[637,39914,657],{"class":642},[637,39916,660],{"class":642},[637,39918,664],{"class":663},[637,39920,660],{"class":642},[637,39922,669],{"class":642},[637,39924,39926,39928,39930,39932,39934,39937,39939,39941,39943,39945],{"class":39925,"line":578},[639,673],[637,39927,677],{"class":676},[637,39929,680],{"class":642},[637,39931,4510],{"class":683},[637,39933,687],{"class":642},[637,39935,39936],{"class":683}," useBVH",[637,39938,693],{"class":642},[637,39940,696],{"class":676},[637,39942,699],{"class":642},[637,39944,702],{"class":663},[637,39946,705],{"class":642},[637,39948,39949],{"class":639,"line":708},[637,39950,742],{"emptyLinePlaceholder":594},[637,39952,39953,39955,39957,39959,39961,39963,39965,39967,39969,39971,39973,39976,39978],{"class":639,"line":729},[637,39954,2487],{"class":650},[637,39956,680],{"class":642},[637,39958,2492],{"class":646},[637,39960,1222],{"class":642},[637,39962,5194],{"class":683},[637,39964,2500],{"class":642},[637,39966,2503],{"class":642},[637,39968,4510],{"class":2506},[637,39970,2509],{"class":683},[637,39972,2512],{"class":642},[637,39974,39975],{"class":663},"\u002Fmodels\u002Fcomplex-model.glb",[637,39977,2512],{"class":642},[637,39979,2520],{"class":683},[637,39981,39983,39985,39987,39989,39991,39993,39995,39997,39999],{"class":39982,"line":739},[639,673],[637,39984,331],{"class":2506},[637,39986,2509],{"class":683},[637,39988,3767],{"class":642},[637,39990,3770],{"class":650},[637,39992,5233],{"class":683},[637,39994,1150],{"class":642},[637,39996,3778],{"class":683},[637,39998,3781],{"class":642},[637,40000,5242],{"class":683},[637,40002,40004,40006,40008],{"class":40003,"line":745},[639,673],[637,40005,732],{"class":642},[637,40007,647],{"class":646},[637,40009,669],{"class":642},[637,40011,40013],{"class":40012,"line":755},[639,673],[637,40014,742],{"emptyLinePlaceholder":594},[637,40016,40018,40020,40022],{"class":40017,"line":778},[639,673],[637,40019,643],{"class":642},[637,40021,750],{"class":646},[637,40023,669],{"class":642},[637,40025,40026,40028,40030,40032,40034,40036,40038,40040,40042,40044,40046,40049,40051],{"class":639,"line":790},[637,40027,758],{"class":642},[637,40029,4597],{"class":646},[637,40031,2794],{"class":650},[637,40033,657],{"class":642},[637,40035,660],{"class":642},[637,40037,20806],{"class":663},[637,40039,660],{"class":642},[637,40041,4611],{"class":650},[637,40043,657],{"class":642},[637,40045,660],{"class":642},[637,40047,40048],{"class":663},"model.scene",[637,40050,660],{"class":642},[637,40052,787],{"class":642},[637,40054,40056,40058,40060],{"class":40055,"line":800},[639,673],[637,40057,732],{"class":642},[637,40059,750],{"class":646},[637,40061,669],{"class":642},[4215,40063,40065],{"id":40064},"with-debug-visualization","With Debug Visualization",[614,40067,40068],{},"Enable debug mode to visualize the BVH bounding boxes:",[626,40070,40073],{"className":628,"code":40071,"highlights":40072,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useBVH } from '@tresjs\u002Fcientos'\n\nconst { state: model } = useGLTF('\u002Fmodels\u002Fmodel.glb')\n\nuseBVH(\n () => model.value?.scene,\n {\n debug: true, \u002F\u002F Show BVH bounding boxes\n }\n)\n\u003C\u002Fscript>\n",[729,739,745,755],[618,40074,40075,40095,40117,40121,40151,40156,40163,40182,40186,40200,40204,40208],{"__ignoreMap":576},[637,40076,40077,40079,40081,40083,40085,40087,40089,40091,40093],{"class":639,"line":577},[637,40078,643],{"class":642},[637,40080,647],{"class":646},[637,40082,651],{"class":650},[637,40084,654],{"class":650},[637,40086,657],{"class":642},[637,40088,660],{"class":642},[637,40090,664],{"class":663},[637,40092,660],{"class":642},[637,40094,669],{"class":642},[637,40096,40097,40099,40101,40103,40105,40107,40109,40111,40113,40115],{"class":639,"line":578},[637,40098,677],{"class":676},[637,40100,680],{"class":642},[637,40102,4510],{"class":683},[637,40104,687],{"class":642},[637,40106,39936],{"class":683},[637,40108,693],{"class":642},[637,40110,696],{"class":676},[637,40112,699],{"class":642},[637,40114,702],{"class":663},[637,40116,705],{"class":642},[637,40118,40119],{"class":639,"line":708},[637,40120,742],{"emptyLinePlaceholder":594},[637,40122,40124,40126,40128,40130,40132,40134,40136,40138,40140,40142,40144,40147,40149],{"class":40123,"line":729},[639,673],[637,40125,2487],{"class":650},[637,40127,680],{"class":642},[637,40129,2492],{"class":646},[637,40131,1222],{"class":642},[637,40133,5194],{"class":683},[637,40135,2500],{"class":642},[637,40137,2503],{"class":642},[637,40139,4510],{"class":2506},[637,40141,2509],{"class":683},[637,40143,2512],{"class":642},[637,40145,40146],{"class":663},"\u002Fmodels\u002Fmodel.glb",[637,40148,2512],{"class":642},[637,40150,2520],{"class":683},[637,40152,40154],{"class":40153,"line":739},[639,673],[637,40155,742],{"emptyLinePlaceholder":594},[637,40157,40159,40161],{"class":40158,"line":745},[639,673],[637,40160,331],{"class":2506},[637,40162,4871],{"class":683},[637,40164,40166,40168,40170,40172,40174,40176,40178,40180],{"class":40165,"line":755},[639,673],[637,40167,4876],{"class":642},[637,40169,3770],{"class":650},[637,40171,5233],{"class":683},[637,40173,1150],{"class":642},[637,40175,3778],{"class":683},[637,40177,3781],{"class":642},[637,40179,19399],{"class":683},[637,40181,2560],{"class":642},[637,40183,40184],{"class":639,"line":778},[637,40185,2543],{"class":642},[637,40187,40188,40191,40193,40195,40197],{"class":639,"line":790},[637,40189,40190],{"class":646}," debug",[637,40192,1222],{"class":642},[637,40194,4561],{"class":4560},[637,40196,687],{"class":642},[637,40198,40199],{"class":1213}," \u002F\u002F Show BVH bounding boxes\n",[637,40201,40202],{"class":639,"line":800},[637,40203,8080],{"class":642},[637,40205,40206],{"class":639,"line":805},[637,40207,2520],{"class":683},[637,40209,40210,40212,40214],{"class":639,"line":831},[637,40211,732],{"class":642},[637,40213,647],{"class":646},[637,40215,669],{"class":642},[4215,40217,40219],{"id":40218},"reactive-enabled-state","Reactive Enabled State",[614,40221,40222],{},"Control BVH optimization dynamically:",[626,40224,40227],{"className":628,"code":40225,"highlights":40226,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { useGLTF, useBVH } from '@tresjs\u002Fcientos'\n\nconst bvhEnabled = ref(true)\n\nconst { state: model } = useGLTF('\u002Fmodels\u002Fmodel.glb')\n\nuseBVH(\n () => model.value?.scene,\n {\n enabled: bvhEnabled,\n }\n)\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cbutton @click=\"bvhEnabled = !bvhEnabled\">\n Toggle BVH\n \u003C\u002Fbutton>\n \u003Cprimitive v-if=\"model\" :object=\"model.scene\" \u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[729,745,755,778,790],[618,40228,40229,40249,40271,40293,40298,40315,40320,40349,40354,40361,40379,40383,40395,40399,40403,40407,40415,40419,40427,40435,40456,40461,40469,40497,40505],{"__ignoreMap":576},[637,40230,40231,40233,40235,40237,40239,40241,40243,40245,40247],{"class":639,"line":577},[637,40232,643],{"class":642},[637,40234,647],{"class":646},[637,40236,651],{"class":650},[637,40238,654],{"class":650},[637,40240,657],{"class":642},[637,40242,660],{"class":642},[637,40244,664],{"class":663},[637,40246,660],{"class":642},[637,40248,669],{"class":642},[637,40250,40251,40253,40255,40257,40259,40261,40263,40265,40267,40269],{"class":639,"line":578},[637,40252,677],{"class":676},[637,40254,680],{"class":642},[637,40256,3999],{"class":683},[637,40258,687],{"class":642},[637,40260,3582],{"class":683},[637,40262,693],{"class":642},[637,40264,696],{"class":676},[637,40266,699],{"class":642},[637,40268,633],{"class":663},[637,40270,705],{"class":642},[637,40272,40273,40275,40277,40279,40281,40283,40285,40287,40289,40291],{"class":639,"line":708},[637,40274,677],{"class":676},[637,40276,680],{"class":642},[637,40278,4510],{"class":683},[637,40280,687],{"class":642},[637,40282,39936],{"class":683},[637,40284,693],{"class":642},[637,40286,696],{"class":676},[637,40288,699],{"class":642},[637,40290,702],{"class":663},[637,40292,705],{"class":642},[637,40294,40296],{"class":40295,"line":729},[639,673],[637,40297,742],{"emptyLinePlaceholder":594},[637,40299,40300,40302,40305,40307,40309,40311,40313],{"class":639,"line":739},[637,40301,2487],{"class":650},[637,40303,40304],{"class":683}," bvhEnabled ",[637,40306,657],{"class":642},[637,40308,3999],{"class":2506},[637,40310,2509],{"class":683},[637,40312,965],{"class":4560},[637,40314,2520],{"class":683},[637,40316,40318],{"class":40317,"line":745},[639,673],[637,40319,742],{"emptyLinePlaceholder":594},[637,40321,40323,40325,40327,40329,40331,40333,40335,40337,40339,40341,40343,40345,40347],{"class":40322,"line":755},[639,673],[637,40324,2487],{"class":650},[637,40326,680],{"class":642},[637,40328,2492],{"class":646},[637,40330,1222],{"class":642},[637,40332,5194],{"class":683},[637,40334,2500],{"class":642},[637,40336,2503],{"class":642},[637,40338,4510],{"class":2506},[637,40340,2509],{"class":683},[637,40342,2512],{"class":642},[637,40344,40146],{"class":663},[637,40346,2512],{"class":642},[637,40348,2520],{"class":683},[637,40350,40352],{"class":40351,"line":778},[639,673],[637,40353,742],{"emptyLinePlaceholder":594},[637,40355,40357,40359],{"class":40356,"line":790},[639,673],[637,40358,331],{"class":2506},[637,40360,4871],{"class":683},[637,40362,40363,40365,40367,40369,40371,40373,40375,40377],{"class":639,"line":800},[637,40364,4876],{"class":642},[637,40366,3770],{"class":650},[637,40368,5233],{"class":683},[637,40370,1150],{"class":642},[637,40372,3778],{"class":683},[637,40374,3781],{"class":642},[637,40376,19399],{"class":683},[637,40378,2560],{"class":642},[637,40380,40381],{"class":639,"line":805},[637,40382,2543],{"class":642},[637,40384,40385,40388,40390,40393],{"class":639,"line":831},[637,40386,40387],{"class":646}," enabled",[637,40389,1222],{"class":642},[637,40391,40392],{"class":683}," bvhEnabled",[637,40394,2560],{"class":642},[637,40396,40397],{"class":639,"line":631},[637,40398,8080],{"class":642},[637,40400,40401],{"class":639,"line":854},[637,40402,2520],{"class":683},[637,40404,40405],{"class":639,"line":865},[637,40406,742],{"emptyLinePlaceholder":594},[637,40408,40409,40411,40413],{"class":639,"line":876},[637,40410,732],{"class":642},[637,40412,647],{"class":646},[637,40414,669],{"class":642},[637,40416,40417],{"class":639,"line":886},[637,40418,742],{"emptyLinePlaceholder":594},[637,40420,40421,40423,40425],{"class":639,"line":632},[637,40422,643],{"class":642},[637,40424,750],{"class":646},[637,40426,669],{"class":642},[637,40428,40429,40431,40433],{"class":639,"line":906},[637,40430,758],{"class":642},[637,40432,4283],{"class":646},[637,40434,669],{"class":642},[637,40436,40437,40439,40442,40445,40447,40449,40452,40454],{"class":639,"line":916},[637,40438,781],{"class":642},[637,40440,40441],{"class":646},"button",[637,40443,40444],{"class":650}," @click",[637,40446,657],{"class":642},[637,40448,660],{"class":642},[637,40450,40451],{"class":663},"bvhEnabled = !bvhEnabled",[637,40453,660],{"class":642},[637,40455,669],{"class":642},[637,40457,40458],{"class":639,"line":2695},[637,40459,40460],{"class":683}," Toggle BVH\n",[637,40462,40463,40465,40467],{"class":639,"line":2704},[637,40464,899],{"class":642},[637,40466,40441],{"class":646},[637,40468,669],{"class":642},[637,40470,40471,40473,40475,40477,40479,40481,40483,40485,40487,40489,40491,40493,40495],{"class":639,"line":2738},[637,40472,781],{"class":642},[637,40474,4597],{"class":646},[637,40476,2794],{"class":650},[637,40478,657],{"class":642},[637,40480,660],{"class":642},[637,40482,20806],{"class":663},[637,40484,660],{"class":642},[637,40486,4611],{"class":650},[637,40488,657],{"class":642},[637,40490,660],{"class":642},[637,40492,40048],{"class":663},[637,40494,660],{"class":642},[637,40496,787],{"class":642},[637,40498,40499,40501,40503],{"class":639,"line":2747},[637,40500,909],{"class":642},[637,40502,4283],{"class":646},[637,40504,669],{"class":642},[637,40506,40507,40509,40511],{"class":639,"line":2756},[637,40508,732],{"class":642},[637,40510,750],{"class":646},[637,40512,669],{"class":642},[504,40514,14787],{"id":18439},[614,40516,40517,40518,40521,40522,40525,40526,40528],{},"Options are divided into ",[1705,40519,40520],{},"reactive"," (can change at runtime) and ",[1705,40523,40524],{},"static"," (set once at creation - changing requires toggling ",[618,40527,17533],{}," off\u002Fon to rebuild).",[4215,40530,40532],{"id":40531},"reactive-options","Reactive Options",[931,40534,40535,40548],{},[934,40536,40537],{},[937,40538,40539,40542,40544,40546],{},[940,40540,40541],{"align":1001},"Option",[940,40543,6178],{"align":1001},[940,40545,948],{"align":1001},[940,40547,945],{"align":1001},[950,40549,40550,40568],{},[937,40551,40552,40556,40561,40565],{},[955,40553,40554],{"align":1001},[1705,40555,17533],{},[955,40557,40558],{"align":1001},[618,40559,40560],{},"MaybeRefOrGetter\u003Cboolean>",[955,40562,40563],{"align":1001},[618,40564,965],{},[955,40566,40567],{"align":1001},"Enable\u002Fdisable BVH optimization. Toggling rebuilds BVH structures.",[937,40569,40570,40575,40579,40583],{},[955,40571,40572],{"align":1001},[1705,40573,40574],{},"debug",[955,40576,40577],{"align":1001},[618,40578,40560],{},[955,40580,40581],{"align":1001},[618,40582,975],{},[955,40584,40585],{"align":1001},"Show debug visualization of BVH bounding boxes.",[4215,40587,40589],{"id":40588},"static-options-bvh-construction","Static Options (BVH Construction)",[614,40591,40592,40593,40595],{},"These options configure how the BVH is built. Changing them after creation has no effect - toggle ",[618,40594,17533],{}," off\u002Fon to rebuild with new values.",[931,40597,40598,40610],{},[934,40599,40600],{},[937,40601,40602,40604,40606,40608],{},[940,40603,40541],{"align":1001},[940,40605,6178],{"align":1001},[940,40607,948],{"align":1001},[940,40609,945],{"align":1001},[950,40611,40612,40633,40653,40671,40689,40707,40725],{},[937,40613,40614,40619,40623,40627],{},[955,40615,40616],{"align":1001},[1705,40617,40618],{},"firstHitOnly",[955,40620,40621],{"align":1001},[618,40622,18466],{},[955,40624,40625],{"align":1001},[618,40626,975],{},[955,40628,26079,40629,40632],{"align":1001},[618,40630,40631],{},"raycastFirst"," for better performance when only the first hit is needed.",[937,40634,40635,40640,40645,40650],{},[955,40636,40637],{"align":1001},[1705,40638,40639],{},"splitStrategy",[955,40641,40642],{"align":1001},[618,40643,40644],{},"'CENTER' | 'AVERAGE' | 'SAH'",[955,40646,40647],{"align":1001},[618,40648,40649],{},"'SAH'",[955,40651,40652],{"align":1001},"BVH build strategy. See section below.",[937,40654,40655,40660,40664,40668],{},[955,40656,40657],{"align":1001},[1705,40658,40659],{},"maxDepth",[955,40661,40662],{"align":1001},[618,40663,5564],{},[955,40665,40666],{"align":1001},[618,40667,37279],{},[955,40669,40670],{"align":1001},"Maximum tree depth for the BVH structure.",[937,40672,40673,40678,40682,40686],{},[955,40674,40675],{"align":1001},[1705,40676,40677],{},"maxLeafSize",[955,40679,40680],{"align":1001},[618,40681,5564],{},[955,40683,40684],{"align":1001},[618,40685,1510],{},[955,40687,40688],{"align":1001},"Target number of triangles per leaf node.",[937,40690,40691,40696,40700,40704],{},[955,40692,40693],{"align":1001},[1705,40694,40695],{},"verbose",[955,40697,40698],{"align":1001},[618,40699,18466],{},[955,40701,40702],{"align":1001},[618,40703,975],{},[955,40705,40706],{"align":1001},"Print construction warnings and progress to console.",[937,40708,40709,40714,40718,40722],{},[955,40710,40711],{"align":1001},[1705,40712,40713],{},"setBoundingBox",[955,40715,40716],{"align":1001},[618,40717,18466],{},[955,40719,40720],{"align":1001},[618,40721,965],{},[955,40723,40724],{"align":1001},"Automatically set geometry bounding box after BVH construction.",[937,40726,40727,40732,40736,40740],{},[955,40728,40729],{"align":1001},[1705,40730,40731],{},"indirect",[955,40733,40734],{"align":1001},[618,40735,18466],{},[955,40737,40738],{"align":1001},[618,40739,975],{},[955,40741,40742],{"align":1001},"If false, creates and rearranges index buffer for better performance.",[4215,40744,40746],{"id":40745},"split-strategies","Split Strategies",[2285,40748,40749,40755,40761],{},[2288,40750,40751,40754],{},[1705,40752,40753],{},"SAH (Surface Area Heuristic)"," - Slowest to build, fastest at runtime, uses least memory. Best for production.",[2288,40756,40757,40760],{},[1705,40758,40759],{},"AVERAGE"," - Balanced build time and runtime performance.",[2288,40762,40763,40766],{},[1705,40764,40765],{},"CENTER"," - Fastest to build, slower at runtime.",[504,40768,24887],{"id":24886},[4215,40770,40772],{"id":40771},"fine-tuning-performance","Fine-tuning Performance",[614,40774,40775],{},"Adjust BVH construction parameters for your use case:",[626,40777,40779],{"className":1190,"code":40778,"language":664,"meta":576,"style":576},"useBVH(\n target,\n {\n splitStrategy: 'SAH', \u002F\u002F Best runtime performance\n maxDepth: 30, \u002F\u002F Shallower tree (faster build)\n maxLeafSize: 5, \u002F\u002F Smaller leaves (better culling)\n verbose: true, \u002F\u002F Debug construction\n }\n)\n",[618,40780,40781,40787,40794,40798,40817,40831,40846,40860,40864],{"__ignoreMap":576},[637,40782,40783,40785],{"class":639,"line":577},[637,40784,331],{"class":2506},[637,40786,4871],{"class":683},[637,40788,40789,40792],{"class":639,"line":578},[637,40790,40791],{"class":683}," target",[637,40793,2560],{"class":642},[637,40795,40796],{"class":639,"line":708},[637,40797,2543],{"class":642},[637,40799,40800,40803,40805,40807,40810,40812,40814],{"class":639,"line":729},[637,40801,40802],{"class":646}," splitStrategy",[637,40804,1222],{"class":642},[637,40806,699],{"class":642},[637,40808,40809],{"class":663},"SAH",[637,40811,2512],{"class":642},[637,40813,687],{"class":642},[637,40815,40816],{"class":1213}," \u002F\u002F Best runtime performance\n",[637,40818,40819,40822,40824,40826,40828],{"class":639,"line":739},[637,40820,40821],{"class":646}," maxDepth",[637,40823,1222],{"class":642},[637,40825,8743],{"class":823},[637,40827,687],{"class":642},[637,40829,40830],{"class":1213}," \u002F\u002F Shallower tree (faster build)\n",[637,40832,40833,40836,40838,40841,40843],{"class":639,"line":745},[637,40834,40835],{"class":646}," maxLeafSize",[637,40837,1222],{"class":642},[637,40839,40840],{"class":823}," 5",[637,40842,687],{"class":642},[637,40844,40845],{"class":1213}," \u002F\u002F Smaller leaves (better culling)\n",[637,40847,40848,40851,40853,40855,40857],{"class":639,"line":755},[637,40849,40850],{"class":646}," verbose",[637,40852,1222],{"class":642},[637,40854,4561],{"class":4560},[637,40856,687],{"class":642},[637,40858,40859],{"class":1213}," \u002F\u002F Debug construction\n",[637,40861,40862],{"class":639,"line":778},[637,40863,8080],{"class":642},[637,40865,40866],{"class":639,"line":790},[637,40867,2520],{"class":683},[4215,40869,40871],{"id":40870},"first-hit-only-mode","First Hit Only Mode",[614,40873,40874],{},"When you only need the closest intersection (e.g., mouse picking):",[626,40876,40878],{"className":1190,"code":40877,"language":664,"meta":576,"style":576},"useBVH(\n target,\n {\n firstHitOnly: true, \u002F\u002F Uses raycastFirst internally\n }\n)\n",[618,40879,40880,40886,40892,40896,40910,40914],{"__ignoreMap":576},[637,40881,40882,40884],{"class":639,"line":577},[637,40883,331],{"class":2506},[637,40885,4871],{"class":683},[637,40887,40888,40890],{"class":639,"line":578},[637,40889,40791],{"class":683},[637,40891,2560],{"class":642},[637,40893,40894],{"class":639,"line":708},[637,40895,2543],{"class":642},[637,40897,40898,40901,40903,40905,40907],{"class":639,"line":729},[637,40899,40900],{"class":646}," firstHitOnly",[637,40902,1222],{"class":642},[637,40904,4561],{"class":4560},[637,40906,687],{"class":642},[637,40908,40909],{"class":1213}," \u002F\u002F Uses raycastFirst internally\n",[637,40911,40912],{"class":639,"line":739},[637,40913,8080],{"class":642},[637,40915,40916],{"class":639,"line":745},[637,40917,2520],{"class":683},[614,40919,40920],{},"This is significantly faster than computing all intersections when you only need one.",[504,40922,40924],{"id":40923},"important-notes","Important Notes",[2285,40926,40927,40933,40952,40958,40969],{},[2288,40928,40929,40932],{},[1705,40930,40931],{},"Side-effect free",": BVH is automatically removed on unmount and when disabled.",[2288,40934,40935,40938,40939,3156,40941,40943,40944,1503,40946,40948,40949,40951],{},[1705,40936,40937],{},"Reactive options",": Only ",[618,40940,17533],{},[618,40942,40574],{}," are reactive. Construction options (",[618,40945,40639],{},[618,40947,40659],{},", etc.) are static - to apply new values, toggle ",[618,40950,17533],{}," off\u002Fon.",[2288,40953,40954,40957],{},[1705,40955,40956],{},"Memory efficient",": BVH structures are properly disposed when removed.",[2288,40959,40960,40963,40964,3156,40966,40968],{},[1705,40961,40962],{},"Automatic mesh detection",": Works with ",[618,40965,4455],{},[618,40967,6560],{}," instances.",[2288,40970,40971,40974],{},[1705,40972,40973],{},"Draco models",": Works seamlessly with Draco-compressed GLTF models.",[504,40976,40978],{"id":40977},"performance-tips","Performance Tips",[14905,40980,40981,40987,40993,40999],{},[2288,40982,40983,40986],{},[1705,40984,40985],{},"Use firstHitOnly"," when you only need the closest intersection",[2288,40988,40989,40992],{},[1705,40990,40991],{},"SAH strategy"," gives best runtime performance for production",[2288,40994,40995,40998],{},[1705,40996,40997],{},"Adjust maxLeafSize"," based on triangle density (smaller for dense meshes)",[2288,41000,41001,41004],{},[1705,41002,41003],{},"Enable debug mode"," during development to verify BVH coverage",[504,41006,41008],{"id":41007},"integration-with-usegltf","Integration with useGLTF",[614,41010,41011,41012,41014],{},"Perfect pairing with ",[618,41013,133],{}," for optimized model loading:",[626,41016,41018],{"className":628,"code":41017,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useBVH, useGLTF } from '@tresjs\u002Fcientos'\n\nconst { state: model } = useGLTF('\u002Fmodels\u002Fhigh-poly-model.glb', {\n draco: true\n})\n\nuseBVH(\n () => model.value?.scene,\n { splitStrategy: 'SAH' }\n)\n\u003C\u002Fscript>\n",[618,41019,41020,41040,41062,41066,41097,41107,41113,41117,41123,41141,41159,41163],{"__ignoreMap":576},[637,41021,41022,41024,41026,41028,41030,41032,41034,41036,41038],{"class":639,"line":577},[637,41023,643],{"class":642},[637,41025,647],{"class":646},[637,41027,651],{"class":650},[637,41029,654],{"class":650},[637,41031,657],{"class":642},[637,41033,660],{"class":642},[637,41035,664],{"class":663},[637,41037,660],{"class":642},[637,41039,669],{"class":642},[637,41041,41042,41044,41046,41048,41050,41052,41054,41056,41058,41060],{"class":639,"line":578},[637,41043,677],{"class":676},[637,41045,680],{"class":642},[637,41047,39936],{"class":683},[637,41049,687],{"class":642},[637,41051,4510],{"class":683},[637,41053,693],{"class":642},[637,41055,696],{"class":676},[637,41057,699],{"class":642},[637,41059,702],{"class":663},[637,41061,705],{"class":642},[637,41063,41064],{"class":639,"line":708},[637,41065,742],{"emptyLinePlaceholder":594},[637,41067,41068,41070,41072,41074,41076,41078,41080,41082,41084,41086,41088,41091,41093,41095],{"class":639,"line":729},[637,41069,2487],{"class":650},[637,41071,680],{"class":642},[637,41073,2492],{"class":646},[637,41075,1222],{"class":642},[637,41077,5194],{"class":683},[637,41079,2500],{"class":642},[637,41081,2503],{"class":642},[637,41083,4510],{"class":2506},[637,41085,2509],{"class":683},[637,41087,2512],{"class":642},[637,41089,41090],{"class":663},"\u002Fmodels\u002Fhigh-poly-model.glb",[637,41092,2512],{"class":642},[637,41094,687],{"class":642},[637,41096,1208],{"class":642},[637,41098,41099,41102,41104],{"class":639,"line":739},[637,41100,41101],{"class":646}," draco",[637,41103,1222],{"class":642},[637,41105,41106],{"class":4560}," true\n",[637,41108,41109,41111],{"class":639,"line":745},[637,41110,2500],{"class":642},[637,41112,2520],{"class":683},[637,41114,41115],{"class":639,"line":755},[637,41116,742],{"emptyLinePlaceholder":594},[637,41118,41119,41121],{"class":639,"line":778},[637,41120,331],{"class":2506},[637,41122,4871],{"class":683},[637,41124,41125,41127,41129,41131,41133,41135,41137,41139],{"class":639,"line":790},[637,41126,4876],{"class":642},[637,41128,3770],{"class":650},[637,41130,5233],{"class":683},[637,41132,1150],{"class":642},[637,41134,3778],{"class":683},[637,41136,3781],{"class":642},[637,41138,19399],{"class":683},[637,41140,2560],{"class":642},[637,41142,41143,41146,41149,41151,41153,41155,41157],{"class":639,"line":800},[637,41144,41145],{"class":642}," {",[637,41147,41148],{"class":646}," splitStrategy",[637,41150,1222],{"class":642},[637,41152,699],{"class":642},[637,41154,40809],{"class":663},[637,41156,2512],{"class":642},[637,41158,18700],{"class":642},[637,41160,41161],{"class":639,"line":805},[637,41162,2520],{"class":683},[637,41164,41165,41167,41169],{"class":639,"line":831},[637,41166,732],{"class":642},[637,41168,647],{"class":646},[637,41170,669],{"class":642},[504,41172,25936],{"id":25935},[4215,41174,41176],{"id":41175},"bvh-not-applying-to-some-meshes","BVH not applying to some meshes",[2285,41178,41179,41182,41189],{},[2288,41180,41181],{},"Ensure meshes have valid geometry with position attributes",[2288,41183,41184,41185,41188],{},"Check console with ",[618,41186,41187],{},"verbose: true"," to see which meshes are skipped",[2288,41190,41191,41192,41194,41195,41197],{},"Verify the object is an ",[618,41193,7845],{}," (use ",[618,41196,4597],{}," in templates)",[4215,41199,41201],{"id":41200},"performance-not-improving","Performance not improving",[2285,41203,41204,41209,41215,41218],{},[2288,41205,19536,41206,41208],{},[618,41207,40618],{}," if you only need one intersection",[2288,41210,41211,41212,41214],{},"Try different split strategies (",[618,41213,40809],{}," is usually best)",[2288,41216,41217],{},"Verify raycasting is the bottleneck (use Stats\u002FStatsGl)",[2288,41219,41220],{},"Consider LOD for very distant objects",[1331,41222,41223],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":577,"depth":578,"links":41225},[41226,41227,41232,41237,41241,41242,41243,41244],{"id":39871,"depth":578,"text":39872},{"id":624,"depth":578,"text":15,"children":41228},[41229,41230,41231],{"id":39360,"depth":708,"text":39896},{"id":40064,"depth":708,"text":40065},{"id":40218,"depth":708,"text":40219},{"id":18439,"depth":578,"text":14787,"children":41233},[41234,41235,41236],{"id":40531,"depth":708,"text":40532},{"id":40588,"depth":708,"text":40589},{"id":40745,"depth":708,"text":40746},{"id":24886,"depth":578,"text":24887,"children":41238},[41239,41240],{"id":40771,"depth":708,"text":40772},{"id":40870,"depth":708,"text":40871},{"id":40923,"depth":578,"text":40924},{"id":40977,"depth":578,"text":40978},{"id":41007,"depth":578,"text":41008},{"id":25935,"depth":578,"text":25936,"children":41245},[41246,41247],{"id":41175,"depth":708,"text":41176},{"id":41200,"depth":708,"text":41201},"Speed up raycasting with Bounding Volume Hierarchy (BVH) optimization.",{},{"title":331,"description":41248},"Ubx_HIq-xEI-Pv2T8zVe8LT3sJ_wBF7VmDcGGpLgBYs",[41253,41815,42437,42849,43342,44856,45553],{"id":41254,"title":341,"body":41255,"description":41811,"extension":591,"links":592,"meta":41812,"navigation":594,"path":342,"seo":41813,"stem":343,"__hash__":41814},"docs\u002F2.api\u002F7.light-shadow\u002Faccumulative-shadows.md",{"type":501,"value":41256,"toc":41806},[41257,41262,41276,41278,41577,41579,41771,41773,41783,41803],[608,41258,41259],{},[41260,41261],"light-shadow-accumulative-shadows",{},[614,41263,41264,4467,41267,41270,41271,1150],{},[618,41265,41266],{},"\u003CAccumulativeShadows \u002F>",[618,41268,41269],{},"THREE.DirectionalLight","-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on ",[1144,41272,41275],{"href":41273,"rel":41274},"http:\u002F\u002Fdrei.docs.pmnd.rs\u002Fstaging\u002Faccumulative-shadows",[1148],"Drei component of the same name",[504,41277,15],{"id":624},[626,41279,41282],{"className":628,"code":41280,"highlights":41281,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { AccumulativeShadows } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#fbb03b\" :shadows=\"true\">\n \u003CTresPerspectiveCamera\n :look-at=\"[0, 0, 0]\"\n \u002F>\n \u003CTresMesh :position-y=\"0.3\" :scale=\"0.4\" :cast-shadow=\"true\">\n \u003CTresTorusKnotGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003CAccumulativeShadows\n :blend=\"100\"\n color=\"#fbb03b\"\n once\n :position-y=\"-0.4\"\n \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,865,876,886,632,906],[618,41283,41284,41304,41324,41342,41350,41354,41362,41393,41399,41425,41429,41474,41482,41490,41498,41506,41521,41534,41540,41557,41561,41569],{"__ignoreMap":576},[637,41285,41286,41288,41290,41292,41294,41296,41298,41300,41302],{"class":639,"line":577},[637,41287,643],{"class":642},[637,41289,647],{"class":646},[637,41291,651],{"class":650},[637,41293,654],{"class":650},[637,41295,657],{"class":642},[637,41297,660],{"class":642},[637,41299,664],{"class":663},[637,41301,660],{"class":642},[637,41303,669],{"class":642},[637,41305,41307,41309,41311,41314,41316,41318,41320,41322],{"class":41306,"line":578},[639,673],[637,41308,677],{"class":676},[637,41310,680],{"class":642},[637,41312,41313],{"class":683}," AccumulativeShadows",[637,41315,693],{"class":642},[637,41317,696],{"class":676},[637,41319,699],{"class":642},[637,41321,702],{"class":663},[637,41323,705],{"class":642},[637,41325,41326,41328,41330,41332,41334,41336,41338,41340],{"class":639,"line":708},[637,41327,677],{"class":676},[637,41329,680],{"class":642},[637,41331,715],{"class":683},[637,41333,693],{"class":642},[637,41335,696],{"class":676},[637,41337,699],{"class":642},[637,41339,724],{"class":663},[637,41341,705],{"class":642},[637,41343,41344,41346,41348],{"class":639,"line":729},[637,41345,732],{"class":642},[637,41347,647],{"class":646},[637,41349,669],{"class":642},[637,41351,41352],{"class":639,"line":739},[637,41353,742],{"emptyLinePlaceholder":594},[637,41355,41356,41358,41360],{"class":639,"line":745},[637,41357,643],{"class":642},[637,41359,750],{"class":646},[637,41361,669],{"class":642},[637,41363,41364,41366,41368,41370,41372,41374,41376,41378,41380,41383,41385,41387,41389,41391],{"class":639,"line":755},[637,41365,758],{"class":642},[637,41367,761],{"class":646},[637,41369,764],{"class":650},[637,41371,657],{"class":642},[637,41373,660],{"class":642},[637,41375,10533],{"class":663},[637,41377,660],{"class":642},[637,41379,813],{"class":642},[637,41381,41382],{"class":650},"shadows",[637,41384,657],{"class":642},[637,41386,660],{"class":642},[637,41388,965],{"class":4560},[637,41390,660],{"class":642},[637,41392,669],{"class":642},[637,41394,41395,41397],{"class":639,"line":778},[637,41396,857],{"class":642},[637,41398,26786],{"class":646},[637,41400,41401,41403,41405,41407,41409,41411,41413,41415,41417,41419,41421,41423],{"class":639,"line":790},[637,41402,13000],{"class":642},[637,41404,9933],{"class":650},[637,41406,657],{"class":642},[637,41408,660],{"class":642},[637,41410,1498],{"class":642},[637,41412,969],{"class":823},[637,41414,1503],{"class":642},[637,41416,969],{"class":823},[637,41418,1503],{"class":642},[637,41420,969],{"class":823},[637,41422,1513],{"class":642},[637,41424,3224],{"class":642},[637,41426,41427],{"class":639,"line":800},[637,41428,18174],{"class":642},[637,41430,41431,41433,41435,41437,41439,41441,41443,41445,41447,41449,41451,41453,41455,41458,41460,41462,41464,41466,41468,41470,41472],{"class":639,"line":805},[637,41432,781],{"class":642},[637,41434,860],{"class":646},[637,41436,813],{"class":642},[637,41438,2000],{"class":650},[637,41440,657],{"class":642},[637,41442,660],{"class":642},[637,41444,30749],{"class":823},[637,41446,660],{"class":642},[637,41448,813],{"class":642},[637,41450,816],{"class":650},[637,41452,657],{"class":642},[637,41454,660],{"class":642},[637,41456,41457],{"class":823},"0.4",[637,41459,660],{"class":642},[637,41461,813],{"class":642},[637,41463,19571],{"class":650},[637,41465,657],{"class":642},[637,41467,660],{"class":642},[637,41469,965],{"class":4560},[637,41471,660],{"class":642},[637,41473,669],{"class":642},[637,41475,41476,41478,41480],{"class":639,"line":831},[637,41477,857],{"class":642},[637,41479,29343],{"class":646},[637,41481,787],{"class":642},[637,41483,41484,41486,41488],{"class":639,"line":631},[637,41485,857],{"class":642},[637,41487,881],{"class":646},[637,41489,787],{"class":642},[637,41491,41492,41494,41496],{"class":639,"line":854},[637,41493,899],{"class":642},[637,41495,860],{"class":646},[637,41497,669],{"class":642},[637,41499,41501,41503],{"class":41500,"line":865},[639,673],[637,41502,781],{"class":642},[637,41504,41505],{"class":646},"AccumulativeShadows\n",[637,41507,41509,41511,41513,41515,41517,41519],{"class":41508,"line":876},[639,673],[637,41510,13000],{"class":642},[637,41512,29066],{"class":650},[637,41514,657],{"class":642},[637,41516,660],{"class":642},[637,41518,11706],{"class":823},[637,41520,3224],{"class":642},[637,41522,41524,41526,41528,41530,41532],{"class":41523,"line":886},[639,673],[637,41525,32488],{"class":650},[637,41527,657],{"class":642},[637,41529,660],{"class":642},[637,41531,10533],{"class":663},[637,41533,3224],{"class":642},[637,41535,41537],{"class":41536,"line":632},[639,673],[637,41538,41539],{"class":650}," once\n",[637,41541,41543,41545,41547,41549,41551,41553,41555],{"class":41542,"line":906},[639,673],[637,41544,13000],{"class":642},[637,41546,2000],{"class":650},[637,41548,657],{"class":642},[637,41550,660],{"class":642},[637,41552,8776],{"class":642},[637,41554,41457],{"class":823},[637,41556,3224],{"class":642},[637,41558,41559],{"class":639,"line":916},[637,41560,18174],{"class":642},[637,41562,41563,41565,41567],{"class":639,"line":2695},[637,41564,909],{"class":642},[637,41566,761],{"class":646},[637,41568,669],{"class":642},[637,41570,41571,41573,41575],{"class":639,"line":2704},[637,41572,732],{"class":642},[637,41574,750],{"class":646},[637,41576,669],{"class":642},[504,41578,926],{"id":925},[931,41580,41581,41591],{},[934,41582,41583],{},[937,41584,41585,41587,41589],{},[940,41586,942],{},[940,41588,945],{},[940,41590,948],{},[950,41592,41593,41606,41620,41644,41659,41675,41688,41701,41715,41728,41743,41757],{},[937,41594,41595,41599,41602],{},[955,41596,41597],{},[618,41598,3301],{},[955,41600,41601],{},"Whether shadow creation only happens once (resets after props change)",[955,41603,41604],{},[618,41605,975],{},[937,41607,41608,41613,41616],{},[955,41609,41610],{},[618,41611,41612],{},"accumulate",[955,41614,41615],{},"Whether shadows accumulate progressively over several frames",[955,41617,41618],{},[618,41619,965],{},[937,41621,41622,41627,41640],{},[955,41623,41624],{},[618,41625,41626],{},"frames",[955,41628,41629,41630,41633,41634,41636,41637,41639],{},"Number of frames to render. More yields cleaner results but takes more time. If ",[618,41631,41632],{},"accumulate && once",", 1 frame will be consumed every update for ",[618,41635,41626],{}," updates. Otherwise, ",[618,41638,41626],{}," frames are consumed for every update.",[955,41641,41642],{},[618,41643,37279],{},[937,41645,41646,41650,41655],{},[955,41647,41648],{},[618,41649,29066],{},[955,41651,962,41652,41654],{},[618,41653,41612],{},", controls the refresh ratio",[955,41656,41657],{},[618,41658,11706],{},[937,41660,41661,41665,41671],{},[955,41662,41663],{},[618,41664,9379],{},[955,41666,41667,41668,41670],{},"If less than ",[618,41669,14244],{},", limits the amount of frames rendered. Use this to increase performance once a movable scene has settled",[955,41672,41673],{},[618,41674,14244],{},[937,41676,41677,41681,41684],{},[955,41678,41679],{},[618,41680,816],{},[955,41682,41683],{},"Scale of the plane",[955,41685,41686],{},[618,41687,1510],{},[937,41689,41690,41694,41697],{},[955,41691,41692],{},[618,41693,12179],{},[955,41695,41696],{},"Opacity of the plane",[955,41698,41699],{},[618,41700,1925],{},[937,41702,41703,41708,41711],{},[955,41704,41705],{},[618,41706,41707],{},"alphaTest",[955,41709,41710],{},"Discards alpha pixels",[955,41712,41713],{},[618,41714,2178],{},[937,41716,41717,41721,41724],{},[955,41718,41719],{},[618,41720,7770],{},[955,41722,41723],{},"Shadow color",[955,41725,41726],{},[618,41727,12162],{},[937,41729,41730,41735,41739],{},[955,41731,41732],{},[618,41733,41734],{},"colorBlend",[955,41736,41667,41737,41670],{},[618,41738,14244],{},[955,41740,41741],{},[618,41742,14244],{},[937,41744,41745,41749,41752],{},[955,41746,41747],{},[618,41748,29480],{},[955,41750,41751],{},"Buffer resolution",[955,41753,41754],{},[618,41755,41756],{},"1024",[937,41758,41759,41764,41767],{},[955,41760,41761],{},[618,41762,41763],{},"toneMapped",[955,41765,41766],{},"Texture tonemapping",[955,41768,41769],{},[618,41770,965],{},[504,41772,37494],{"id":37493},[614,41774,41775,41776,41779,41780,1150],{},"You can bring your own lights to ",[618,41777,41778],{},"\u003CAccumulatedShadows \u002F>",", but it's designed to be used with ",[618,41781,41782],{},"\u003CRandomizedLights \u002F>",[614,41784,41785,41786,41790,41791,41793,41794,41797,41798,41802],{},"By default, there's a ",[1144,41787,41788],{"href":362},[618,41789,41782],{}," instance provided in ",[618,41792,41778],{},"'s ",[618,41795,41796],{},"\u003Cslot \u002F>",". You can replace it with your own ",[1144,41799,41800],{"href":362},[618,41801,41782],{}," or an alternative by passing it as a child component.",[1331,41804,41805],{},"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 .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);}",{"title":576,"searchDepth":577,"depth":578,"links":41807},[41808,41809,41810],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":37493,"depth":578,"text":37494},"DirectionalLight-based shadow component with progressive accumulation.",{},{"title":341,"description":41811},"VdtFCKwQ2ZyFv-ZyG0covi7a2nS1DuskCV9MJO6BaDQ",{"id":41816,"title":345,"body":41817,"description":42433,"extension":591,"links":592,"meta":42434,"navigation":594,"path":346,"seo":42435,"stem":347,"__hash__":42436},"docs\u002F2.api\u002F7.light-shadow\u002Fbake-shadows.md",{"type":501,"value":41818,"toc":42430},[41819,41824,41835,41837,41842,42427],[2367,41820,41821],{},[41822,41823],"light-shadow-bake-shadows",{},[614,41825,41826,39354,41828,41831,41832,41834],{},[1705,41827,39353],{},[618,41829,41830],{},"BakeShadows",". Basically this component set the renderer.shadowMap.autoUpdate to ",[618,41833,975],{},", so the shadows are casted just in the first frame which is really great for performance, the downside of this method is that the shadows will not be updated.",[504,41836,39361],{"id":39360},[3292,41838,41839],{},[614,41840,41841],{},"You have to set the shadows in the TresCanvas (renderer), your light sources and objects to receive and cast accordantly as you normally would do.",[626,41843,41846],{"className":628,"code":41844,"highlights":41845,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { BakeShadows } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { shallowRef } from 'vue'\n\nconst cubeRef = shallowRef()\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n if (cubeRef.value) {\n cubeRef.value.rotation.y = elapsed * 0.5\n cubeRef.value.rotation.x = elapsed * 0.5\n }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas\n clear-color=\"#82DBC5\"\n shadows\n @loop=\"onLoop\"\n >\n \u003CTresPerspectiveCamera\n :position=\"[0, 2, 5]\"\n :look-at=\"[0, 0, 0]\"\n \u002F>\n \u003CBakeShadows \u002F>\n \u003CTresMesh\n ref=\"cubeRef\"\n cast-shadow\n >\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresMesh\n receive-shadow\n :position=\"[0, -2, 0]\"\n :rotation-x=\"-Math.PI \u002F 2\"\n >\n \u003CTresPlaneGeometry :args=\"[5, 5]\" \u002F>\n \u003CTresMeshStandardMaterial :color=\"0xF7F7F7\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresDirectionalLight\n cast-shadow\n :position=\"[0, 10, 0]\"\n \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,2765],[618,41847,41848,41868,41888,41906,41924,41928,41941,41945,41975,41992,42020,42044,42048,42052,42060,42064,42072,42079,42092,42097,42112,42116,42122,42148,42174,42178,42187,42193,42205,42210,42214,42222,42240,42248,42254,42259,42285,42310,42314,42342,42363,42371,42377,42381,42407,42411,42419],{"__ignoreMap":576},[637,41849,41850,41852,41854,41856,41858,41860,41862,41864,41866],{"class":639,"line":577},[637,41851,643],{"class":642},[637,41853,647],{"class":646},[637,41855,651],{"class":650},[637,41857,654],{"class":650},[637,41859,657],{"class":642},[637,41861,660],{"class":642},[637,41863,664],{"class":663},[637,41865,660],{"class":642},[637,41867,669],{"class":642},[637,41869,41871,41873,41875,41878,41880,41882,41884,41886],{"class":41870,"line":578},[639,673],[637,41872,677],{"class":676},[637,41874,680],{"class":642},[637,41876,41877],{"class":683}," BakeShadows",[637,41879,693],{"class":642},[637,41881,696],{"class":676},[637,41883,699],{"class":642},[637,41885,702],{"class":663},[637,41887,705],{"class":642},[637,41889,41890,41892,41894,41896,41898,41900,41902,41904],{"class":639,"line":708},[637,41891,677],{"class":676},[637,41893,680],{"class":642},[637,41895,715],{"class":683},[637,41897,693],{"class":642},[637,41899,696],{"class":676},[637,41901,699],{"class":642},[637,41903,724],{"class":663},[637,41905,705],{"class":642},[637,41907,41908,41910,41912,41914,41916,41918,41920,41922],{"class":639,"line":729},[637,41909,677],{"class":676},[637,41911,680],{"class":642},[637,41913,3591],{"class":683},[637,41915,693],{"class":642},[637,41917,696],{"class":676},[637,41919,699],{"class":642},[637,41921,633],{"class":663},[637,41923,705],{"class":642},[637,41925,41926],{"class":639,"line":739},[637,41927,742],{"emptyLinePlaceholder":594},[637,41929,41930,41932,41935,41937,41939],{"class":639,"line":745},[637,41931,2487],{"class":650},[637,41933,41934],{"class":683}," cubeRef ",[637,41936,657],{"class":642},[637,41938,3591],{"class":2506},[637,41940,6744],{"class":683},[637,41942,41943],{"class":639,"line":755},[637,41944,742],{"emptyLinePlaceholder":594},[637,41946,41947,41950,41953,41956,41959,41962,41964,41966,41968,41970,41973],{"class":639,"line":778},[637,41948,41949],{"class":650},"function",[637,41951,41952],{"class":2506}," onLoop",[637,41954,41955],{"class":642},"({",[637,41957,41958],{"class":7047}," elapsed",[637,41960,41961],{"class":642}," }:",[637,41963,680],{"class":642},[637,41965,41958],{"class":646},[637,41967,1222],{"class":642},[637,41969,5569],{"class":1204},[637,41971,41972],{"class":642}," })",[637,41974,1208],{"class":642},[637,41976,41977,41979,41981,41984,41986,41988,41990],{"class":639,"line":790},[637,41978,22291],{"class":676},[637,41980,3167],{"class":646},[637,41982,41983],{"class":683},"cubeRef",[637,41985,1150],{"class":642},[637,41987,3778],{"class":683},[637,41989,4907],{"class":646},[637,41991,3353],{"class":642},[637,41993,41994,41997,41999,42001,42003,42005,42007,42010,42012,42014,42017],{"class":639,"line":800},[637,41995,41996],{"class":683}," cubeRef",[637,41998,1150],{"class":642},[637,42000,3778],{"class":683},[637,42002,1150],{"class":642},[637,42004,5838],{"class":683},[637,42006,1150],{"class":642},[637,42008,42009],{"class":683},"y",[637,42011,2503],{"class":642},[637,42013,41958],{"class":683},[637,42015,42016],{"class":642}," *",[637,42018,42019],{"class":823}," 0.5\n",[637,42021,42022,42024,42026,42028,42030,42032,42034,42036,42038,42040,42042],{"class":639,"line":805},[637,42023,41996],{"class":683},[637,42025,1150],{"class":642},[637,42027,3778],{"class":683},[637,42029,1150],{"class":642},[637,42031,5838],{"class":683},[637,42033,1150],{"class":642},[637,42035,8063],{"class":683},[637,42037,2503],{"class":642},[637,42039,41958],{"class":683},[637,42041,42016],{"class":642},[637,42043,42019],{"class":823},[637,42045,42046],{"class":639,"line":831},[637,42047,8080],{"class":642},[637,42049,42050],{"class":639,"line":631},[637,42051,1329],{"class":642},[637,42053,42054,42056,42058],{"class":639,"line":854},[637,42055,732],{"class":642},[637,42057,647],{"class":646},[637,42059,669],{"class":642},[637,42061,42062],{"class":639,"line":865},[637,42063,742],{"emptyLinePlaceholder":594},[637,42065,42066,42068,42070],{"class":639,"line":876},[637,42067,643],{"class":642},[637,42069,750],{"class":646},[637,42071,669],{"class":642},[637,42073,42074,42076],{"class":639,"line":886},[637,42075,758],{"class":642},[637,42077,42078],{"class":646},"TresCanvas\n",[637,42080,42081,42084,42086,42088,42090],{"class":639,"line":632},[637,42082,42083],{"class":650}," clear-color",[637,42085,657],{"class":642},[637,42087,660],{"class":642},[637,42089,12358],{"class":663},[637,42091,3224],{"class":642},[637,42093,42094],{"class":639,"line":906},[637,42095,42096],{"class":650}," shadows\n",[637,42098,42099,42101,42103,42105,42107,42110],{"class":639,"line":916},[637,42100,21527],{"class":642},[637,42102,27218],{"class":650},[637,42104,657],{"class":642},[637,42106,660],{"class":642},[637,42108,42109],{"class":683},"onLoop",[637,42111,3224],{"class":642},[637,42113,42114],{"class":639,"line":2695},[637,42115,5376],{"class":642},[637,42117,42118,42120],{"class":639,"line":2704},[637,42119,781],{"class":642},[637,42121,26786],{"class":646},[637,42123,42124,42126,42128,42130,42132,42134,42136,42138,42140,42142,42144,42146],{"class":639,"line":2738},[637,42125,13000],{"class":642},[637,42127,1491],{"class":650},[637,42129,657],{"class":642},[637,42131,660],{"class":642},[637,42133,1498],{"class":642},[637,42135,969],{"class":823},[637,42137,1503],{"class":642},[637,42139,824],{"class":823},[637,42141,1503],{"class":642},[637,42143,7666],{"class":823},[637,42145,1513],{"class":642},[637,42147,3224],{"class":642},[637,42149,42150,42152,42154,42156,42158,42160,42162,42164,42166,42168,42170,42172],{"class":639,"line":2747},[637,42151,13000],{"class":642},[637,42153,9933],{"class":650},[637,42155,657],{"class":642},[637,42157,660],{"class":642},[637,42159,1498],{"class":642},[637,42161,969],{"class":823},[637,42163,1503],{"class":642},[637,42165,969],{"class":823},[637,42167,1503],{"class":642},[637,42169,969],{"class":823},[637,42171,1513],{"class":642},[637,42173,3224],{"class":642},[637,42175,42176],{"class":639,"line":2756},[637,42177,18174],{"class":642},[637,42179,42181,42183,42185],{"class":42180,"line":2765},[639,673],[637,42182,781],{"class":642},[637,42184,41830],{"class":646},[637,42186,787],{"class":642},[637,42188,42189,42191],{"class":639,"line":2787},[637,42190,781],{"class":642},[637,42192,5311],{"class":646},[637,42194,42195,42197,42199,42201,42203],{"class":639,"line":2838},[637,42196,12986],{"class":650},[637,42198,657],{"class":642},[637,42200,660],{"class":642},[637,42202,41983],{"class":663},[637,42204,3224],{"class":642},[637,42206,42207],{"class":639,"line":2847},[637,42208,42209],{"class":650}," cast-shadow\n",[637,42211,42212],{"class":639,"line":2856},[637,42213,13020],{"class":642},[637,42215,42216,42218,42220],{"class":639,"line":4058},[637,42217,857],{"class":642},[637,42219,871],{"class":646},[637,42221,787],{"class":642},[637,42223,42224,42226,42228,42230,42232,42234,42236,42238],{"class":639,"line":4102},[637,42225,857],{"class":642},[637,42227,2770],{"class":646},[637,42229,2773],{"class":650},[637,42231,657],{"class":642},[637,42233,660],{"class":642},[637,42235,14044],{"class":663},[637,42237,660],{"class":642},[637,42239,787],{"class":642},[637,42241,42242,42244,42246],{"class":639,"line":4129},[637,42243,899],{"class":642},[637,42245,860],{"class":646},[637,42247,669],{"class":642},[637,42249,42250,42252],{"class":639,"line":4148},[637,42251,781],{"class":642},[637,42253,5311],{"class":646},[637,42255,42256],{"class":639,"line":4189},[637,42257,42258],{"class":650}," receive-shadow\n",[637,42260,42261,42263,42265,42267,42269,42271,42273,42275,42277,42279,42281,42283],{"class":639,"line":4198},[637,42262,13000],{"class":642},[637,42264,1491],{"class":650},[637,42266,657],{"class":642},[637,42268,660],{"class":642},[637,42270,1498],{"class":642},[637,42272,969],{"class":823},[637,42274,10090],{"class":642},[637,42276,824],{"class":823},[637,42278,1503],{"class":642},[637,42280,969],{"class":823},[637,42282,1513],{"class":642},[637,42284,3224],{"class":642},[637,42286,42287,42289,42292,42294,42296,42298,42300,42302,42304,42306,42308],{"class":639,"line":4207},[637,42288,13000],{"class":642},[637,42290,42291],{"class":650},"rotation-x",[637,42293,657],{"class":642},[637,42295,660],{"class":642},[637,42297,8776],{"class":642},[637,42299,29913],{"class":683},[637,42301,1150],{"class":642},[637,42303,29918],{"class":683},[637,42305,3429],{"class":642},[637,42307,824],{"class":823},[637,42309,3224],{"class":642},[637,42311,42312],{"class":639,"line":22477},[637,42313,13020],{"class":642},[637,42315,42316,42318,42320,42322,42324,42326,42328,42330,42332,42334,42336,42338,42340],{"class":639,"line":22492},[637,42317,857],{"class":642},[637,42319,29235],{"class":646},[637,42321,813],{"class":642},[637,42323,2021],{"class":650},[637,42325,657],{"class":642},[637,42327,660],{"class":642},[637,42329,1498],{"class":642},[637,42331,7666],{"class":823},[637,42333,1503],{"class":642},[637,42335,7666],{"class":823},[637,42337,1513],{"class":642},[637,42339,660],{"class":642},[637,42341,787],{"class":642},[637,42343,42344,42346,42348,42350,42352,42354,42356,42359,42361],{"class":639,"line":22507},[637,42345,857],{"class":642},[637,42347,2770],{"class":646},[637,42349,813],{"class":642},[637,42351,7770],{"class":650},[637,42353,657],{"class":642},[637,42355,660],{"class":642},[637,42357,42358],{"class":823},"0xF7F7F7",[637,42360,660],{"class":642},[637,42362,787],{"class":642},[637,42364,42365,42367,42369],{"class":639,"line":22512},[637,42366,899],{"class":642},[637,42368,860],{"class":646},[637,42370,669],{"class":642},[637,42372,42373,42375],{"class":639,"line":22519},[637,42374,781],{"class":642},[637,42376,18129],{"class":646},[637,42378,42379],{"class":639,"line":22524},[637,42380,42209],{"class":650},[637,42382,42383,42385,42387,42389,42391,42393,42395,42397,42399,42401,42403,42405],{"class":639,"line":22530},[637,42384,13000],{"class":642},[637,42386,1491],{"class":650},[637,42388,657],{"class":642},[637,42390,660],{"class":642},[637,42392,1498],{"class":642},[637,42394,969],{"class":823},[637,42396,1503],{"class":642},[637,42398,1510],{"class":823},[637,42400,1503],{"class":642},[637,42402,969],{"class":823},[637,42404,1513],{"class":642},[637,42406,3224],{"class":642},[637,42408,42409],{"class":639,"line":22551},[637,42410,18174],{"class":642},[637,42412,42413,42415,42417],{"class":639,"line":22557},[637,42414,909],{"class":642},[637,42416,761],{"class":646},[637,42418,669],{"class":642},[637,42420,42421,42423,42425],{"class":639,"line":22564},[637,42422,732],{"class":642},[637,42424,750],{"class":646},[637,42426,669],{"class":642},[1331,42428,42429],{},"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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":576,"searchDepth":577,"depth":578,"links":42431},[42432],{"id":39360,"depth":578,"text":39361},"Bakes shadows in the first frame for performance optimization.",{},{"title":345,"description":42433},"QK3DUMpIehZIpD5u6Zp41TLp1-R6Kjjc-USX_iID0V8",{"id":42438,"title":349,"body":42439,"description":42845,"extension":591,"links":592,"meta":42846,"navigation":594,"path":350,"seo":42847,"stem":351,"__hash__":42848},"docs\u002F2.api\u002F7.light-shadow\u002Fcircle-shadow.md",{"type":501,"value":42440,"toc":42841},[42441,42446,42455,42457,42745,42747,42749,42839],[608,42442,42443],{},[42444,42445],"light-shadow-circle-shadow",{},[614,42447,42448,42451,42452,1150],{},[618,42449,42450],{},"\u003CCircleShadow \u002F>"," is a cheap, texture-based radial gradient on a ",[618,42453,42454],{},"THREE.PlaneGeometry",[504,42456,15],{"id":624},[626,42458,42461],{"className":628,"code":42459,"highlights":42460,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CircleShadow, OrbitControls } from \"@tresjs\u002Fcientos\";\nimport { TresCanvas } from \"@tresjs\u002Fcore\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n \u003CTresGroup :position-y=\"-0.5\">\n \u003CTresMesh :position-y=\"1\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FTresMesh>\n \u003CCircleShadow :scale=\"1.5\" \u002F>\n \u003C\u002FTresGroup>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,865],[618,42462,42463,42483,42509,42529,42537,42541,42549,42567,42575,42583,42605,42625,42633,42651,42659,42681,42689,42697,42729,42737],{"__ignoreMap":576},[637,42464,42465,42467,42469,42471,42473,42475,42477,42479,42481],{"class":639,"line":577},[637,42466,643],{"class":642},[637,42468,647],{"class":646},[637,42470,651],{"class":650},[637,42472,654],{"class":650},[637,42474,657],{"class":642},[637,42476,660],{"class":642},[637,42478,664],{"class":663},[637,42480,660],{"class":642},[637,42482,669],{"class":642},[637,42484,42486,42488,42490,42493,42495,42497,42499,42501,42503,42505,42507],{"class":42485,"line":578},[639,673],[637,42487,677],{"class":676},[637,42489,680],{"class":642},[637,42491,42492],{"class":683}," CircleShadow",[637,42494,687],{"class":642},[637,42496,690],{"class":683},[637,42498,693],{"class":642},[637,42500,696],{"class":676},[637,42502,9815],{"class":642},[637,42504,702],{"class":663},[637,42506,660],{"class":642},[637,42508,9822],{"class":642},[637,42510,42511,42513,42515,42517,42519,42521,42523,42525,42527],{"class":639,"line":708},[637,42512,677],{"class":676},[637,42514,680],{"class":642},[637,42516,715],{"class":683},[637,42518,693],{"class":642},[637,42520,696],{"class":676},[637,42522,9815],{"class":642},[637,42524,724],{"class":663},[637,42526,660],{"class":642},[637,42528,9822],{"class":642},[637,42530,42531,42533,42535],{"class":639,"line":729},[637,42532,732],{"class":642},[637,42534,647],{"class":646},[637,42536,669],{"class":642},[637,42538,42539],{"class":639,"line":739},[637,42540,742],{"emptyLinePlaceholder":594},[637,42542,42543,42545,42547],{"class":639,"line":745},[637,42544,643],{"class":642},[637,42546,750],{"class":646},[637,42548,669],{"class":642},[637,42550,42551,42553,42555,42557,42559,42561,42563,42565],{"class":639,"line":755},[637,42552,758],{"class":642},[637,42554,761],{"class":646},[637,42556,764],{"class":650},[637,42558,657],{"class":642},[637,42560,660],{"class":642},[637,42562,12358],{"class":663},[637,42564,660],{"class":642},[637,42566,669],{"class":642},[637,42568,42569,42571,42573],{"class":639,"line":778},[637,42570,781],{"class":642},[637,42572,784],{"class":646},[637,42574,787],{"class":642},[637,42576,42577,42579,42581],{"class":639,"line":790},[637,42578,781],{"class":642},[637,42580,795],{"class":646},[637,42582,787],{"class":642},[637,42584,42585,42587,42589,42591,42593,42595,42597,42599,42601,42603],{"class":639,"line":800},[637,42586,781],{"class":642},[637,42588,10402],{"class":646},[637,42590,813],{"class":642},[637,42592,2000],{"class":650},[637,42594,657],{"class":642},[637,42596,660],{"class":642},[637,42598,8776],{"class":642},[637,42600,1545],{"class":823},[637,42602,660],{"class":642},[637,42604,669],{"class":642},[637,42606,42607,42609,42611,42613,42615,42617,42619,42621,42623],{"class":639,"line":805},[637,42608,857],{"class":642},[637,42610,860],{"class":646},[637,42612,813],{"class":642},[637,42614,2000],{"class":650},[637,42616,657],{"class":642},[637,42618,660],{"class":642},[637,42620,1925],{"class":823},[637,42622,660],{"class":642},[637,42624,669],{"class":642},[637,42626,42627,42629,42631],{"class":639,"line":831},[637,42628,868],{"class":642},[637,42630,871],{"class":646},[637,42632,787],{"class":642},[637,42634,42635,42637,42639,42641,42643,42645,42647,42649],{"class":639,"line":631},[637,42636,868],{"class":642},[637,42638,14035],{"class":646},[637,42640,2773],{"class":650},[637,42642,657],{"class":642},[637,42644,660],{"class":642},[637,42646,14044],{"class":663},[637,42648,660],{"class":642},[637,42650,787],{"class":642},[637,42652,42653,42655,42657],{"class":639,"line":854},[637,42654,889],{"class":642},[637,42656,860],{"class":646},[637,42658,669],{"class":642},[637,42660,42662,42664,42667,42669,42671,42673,42675,42677,42679],{"class":42661,"line":865},[639,673],[637,42663,857],{"class":642},[637,42665,42666],{"class":646},"CircleShadow",[637,42668,813],{"class":642},[637,42670,816],{"class":650},[637,42672,657],{"class":642},[637,42674,660],{"class":642},[637,42676,17251],{"class":823},[637,42678,660],{"class":642},[637,42680,787],{"class":642},[637,42682,42683,42685,42687],{"class":639,"line":876},[637,42684,899],{"class":642},[637,42686,10402],{"class":646},[637,42688,669],{"class":642},[637,42690,42691,42693,42695],{"class":639,"line":886},[637,42692,781],{"class":642},[637,42694,10010],{"class":646},[637,42696,787],{"class":642},[637,42698,42699,42701,42703,42705,42707,42709,42711,42713,42715,42717,42719,42721,42723,42725,42727],{"class":639,"line":632},[637,42700,781],{"class":642},[637,42702,10031],{"class":646},[637,42704,813],{"class":642},[637,42706,1491],{"class":650},[637,42708,657],{"class":642},[637,42710,660],{"class":642},[637,42712,1498],{"class":642},[637,42714,969],{"class":823},[637,42716,1503],{"class":642},[637,42718,824],{"class":823},[637,42720,1503],{"class":642},[637,42722,3900],{"class":823},[637,42724,1513],{"class":642},[637,42726,660],{"class":642},[637,42728,787],{"class":642},[637,42730,42731,42733,42735],{"class":639,"line":906},[637,42732,909],{"class":642},[637,42734,761],{"class":646},[637,42736,669],{"class":642},[637,42738,42739,42741,42743],{"class":639,"line":916},[637,42740,732],{"class":642},[637,42742,750],{"class":646},[637,42744,669],{"class":642},[504,42746,926],{"id":925},[614,42748,929],{},[931,42750,42751,42761],{},[934,42752,42753],{},[937,42754,42755,42757,42759],{},[940,42756,8360],{"align":1001},[940,42758,945],{"align":1001},[940,42760,948],{},[950,42762,42763,42779,42792,42812,42826],{},[937,42764,42765,42769,42775],{},[955,42766,42767],{"align":1001},[618,42768,7770],{},[955,42770,42771,42772],{"align":1001},"Color of the shadow as a ",[618,42773,42774],{},"Color | number | string",[955,42776,42777],{},[618,42778,12162],{},[937,42780,42781,42785,42788],{},[955,42782,42783],{"align":1001},[618,42784,12179],{},[955,42786,42787],{"align":1001},"Opacity of the shadow",[955,42789,42790],{},[618,42791,1545],{},[937,42793,42794,42799,42808],{},[955,42795,42796],{"align":1001},[618,42797,42798],{},"offset",[955,42800,42801,42802,42804,42805,42807],{"align":1001},"Placement of the first radial gradient color stop. ",[618,42803,14513],{}," is the center of the circle. ",[618,42806,14391],{}," is edge.",[955,42809,42810],{},[618,42811,969],{},[937,42813,42814,42819,42822],{},[955,42815,42816],{"align":1001},[618,42817,42818],{},"fog",[955,42820,42821],{"align":1001},"Whether the material is affected by fog",[955,42823,42824],{},[618,42825,975],{},[937,42827,42828,42832,42835],{},[955,42829,42830],{"align":1001},[618,42831,10812],{},[955,42833,42834],{"align":1001},"Whether rendering the material has any effect on the depth buffer",[955,42836,42837],{},[618,42838,975],{},[1331,42840,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":42842},[42843,42844],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Cheap, texture-based radial gradient shadow on a plane geometry.",{},{"title":349,"description":42845},"jex1uKNCt29jCPBXUCSBNgtrQ_7FSemdGlLVzRCeKOs",{"id":42850,"title":353,"body":42851,"description":43338,"extension":591,"links":592,"meta":43339,"navigation":594,"path":354,"seo":43340,"stem":355,"__hash__":43341},"docs\u002F2.api\u002F7.light-shadow\u002Fcontact-shadows.md",{"type":501,"value":42852,"toc":43334},[42853,42858,42874,42876,43147,43149,43332],[608,42854,42855],{},[42856,42857],"light-shadow-contact-shadow",{},[614,42859,42860,42863,42864,39863,42869,1150],{},[618,42861,42862],{},"\u003CContactShadows \u002F>"," is a \"fake\", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the ",[1144,42865,42868],{"href":42866,"rel":42867},"https:\u002F\u002Fthreejs.org\u002Fexamples\u002Fwebgl_shadow_contact.html",[1148],"Three.js contact shadows example",[1144,42870,42873],{"href":42871,"rel":42872},"https:\u002F\u002Ftwitter.com\u002Fmrdoob",[1148],"@mrdoob",[504,42875,15],{"id":624},[626,42877,42880],{"className":628,"code":42878,"highlights":42879,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { ContactShadows, Levioso, TorusKnot } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"white\">\n \u003CLevioso :speed=\"2\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n \u003CTorusKnot :scale=\"0.45\">\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTorusKnot>\n \u003C\u002FLevioso>\n \u003CContactShadows :position-y=\"-1\" color=\"#335\" :scale=\"20\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,631],[618,42881,42882,42902,42931,42949,42957,42961,42969,42987,43040,43060,43068,43076,43084,43131,43139],{"__ignoreMap":576},[637,42883,42884,42886,42888,42890,42892,42894,42896,42898,42900],{"class":639,"line":577},[637,42885,643],{"class":642},[637,42887,647],{"class":646},[637,42889,651],{"class":650},[637,42891,654],{"class":650},[637,42893,657],{"class":642},[637,42895,660],{"class":642},[637,42897,664],{"class":663},[637,42899,660],{"class":642},[637,42901,669],{"class":642},[637,42903,42905,42907,42909,42912,42914,42916,42918,42921,42923,42925,42927,42929],{"class":42904,"line":578},[639,673],[637,42906,677],{"class":676},[637,42908,680],{"class":642},[637,42910,42911],{"class":683}," ContactShadows",[637,42913,687],{"class":642},[637,42915,9832],{"class":683},[637,42917,687],{"class":642},[637,42919,42920],{"class":683}," TorusKnot",[637,42922,693],{"class":642},[637,42924,696],{"class":676},[637,42926,699],{"class":642},[637,42928,702],{"class":663},[637,42930,705],{"class":642},[637,42932,42933,42935,42937,42939,42941,42943,42945,42947],{"class":639,"line":708},[637,42934,677],{"class":676},[637,42936,680],{"class":642},[637,42938,715],{"class":683},[637,42940,693],{"class":642},[637,42942,696],{"class":676},[637,42944,699],{"class":642},[637,42946,724],{"class":663},[637,42948,705],{"class":642},[637,42950,42951,42953,42955],{"class":639,"line":729},[637,42952,732],{"class":642},[637,42954,647],{"class":646},[637,42956,669],{"class":642},[637,42958,42959],{"class":639,"line":739},[637,42960,742],{"emptyLinePlaceholder":594},[637,42962,42963,42965,42967],{"class":639,"line":745},[637,42964,643],{"class":642},[637,42966,750],{"class":646},[637,42968,669],{"class":642},[637,42970,42971,42973,42975,42977,42979,42981,42983,42985],{"class":639,"line":755},[637,42972,758],{"class":642},[637,42974,761],{"class":646},[637,42976,764],{"class":650},[637,42978,657],{"class":642},[637,42980,660],{"class":642},[637,42982,2780],{"class":663},[637,42984,660],{"class":642},[637,42986,669],{"class":642},[637,42988,42989,42991,42993,42995,42997,42999,43001,43003,43005,43007,43009,43011,43013,43015,43017,43019,43021,43023,43025,43027,43030,43032,43034,43036,43038],{"class":639,"line":778},[637,42990,781],{"class":642},[637,42992,9971],{"class":646},[637,42994,813],{"class":642},[637,42996,9976],{"class":650},[637,42998,657],{"class":642},[637,43000,660],{"class":642},[637,43002,824],{"class":823},[637,43004,660],{"class":642},[637,43006,813],{"class":642},[637,43008,10182],{"class":650},[637,43010,657],{"class":642},[637,43012,660],{"class":642},[637,43014,1498],{"class":642},[637,43016,969],{"class":823},[637,43018,1503],{"class":642},[637,43020,4120],{"class":823},[637,43022,1513],{"class":642},[637,43024,660],{"class":642},[637,43026,813],{"class":642},[637,43028,43029],{"class":650},"rotation-factor",[637,43031,657],{"class":642},[637,43033,660],{"class":642},[637,43035,11364],{"class":823},[637,43037,660],{"class":642},[637,43039,669],{"class":642},[637,43041,43042,43044,43046,43048,43050,43052,43054,43056,43058],{"class":639,"line":790},[637,43043,857],{"class":642},[637,43045,37913],{"class":646},[637,43047,813],{"class":642},[637,43049,816],{"class":650},[637,43051,657],{"class":642},[637,43053,660],{"class":642},[637,43055,28672],{"class":823},[637,43057,660],{"class":642},[637,43059,669],{"class":642},[637,43061,43062,43064,43066],{"class":639,"line":800},[637,43063,868],{"class":642},[637,43065,881],{"class":646},[637,43067,787],{"class":642},[637,43069,43070,43072,43074],{"class":639,"line":805},[637,43071,889],{"class":642},[637,43073,37913],{"class":646},[637,43075,669],{"class":642},[637,43077,43078,43080,43082],{"class":639,"line":831},[637,43079,899],{"class":642},[637,43081,9971],{"class":646},[637,43083,669],{"class":642},[637,43085,43087,43089,43092,43094,43096,43098,43100,43102,43104,43106,43108,43110,43112,43115,43117,43119,43121,43123,43125,43127,43129],{"class":43086,"line":631},[639,673],[637,43088,781],{"class":642},[637,43090,43091],{"class":646},"ContactShadows",[637,43093,813],{"class":642},[637,43095,2000],{"class":650},[637,43097,657],{"class":642},[637,43099,660],{"class":642},[637,43101,8776],{"class":642},[637,43103,1925],{"class":823},[637,43105,660],{"class":642},[637,43107,2773],{"class":650},[637,43109,657],{"class":642},[637,43111,660],{"class":642},[637,43113,43114],{"class":663},"#335",[637,43116,660],{"class":642},[637,43118,813],{"class":642},[637,43120,816],{"class":650},[637,43122,657],{"class":642},[637,43124,660],{"class":642},[637,43126,32586],{"class":823},[637,43128,660],{"class":642},[637,43130,787],{"class":642},[637,43132,43133,43135,43137],{"class":639,"line":854},[637,43134,909],{"class":642},[637,43136,761],{"class":646},[637,43138,669],{"class":642},[637,43140,43141,43143,43145],{"class":639,"line":865},[637,43142,732],{"class":642},[637,43144,750],{"class":646},[637,43146,669],{"class":642},[504,43148,926],{"id":925},[931,43150,43151,43161],{},[934,43152,43153],{},[937,43154,43155,43157,43159],{},[940,43156,942],{},[940,43158,945],{},[940,43160,948],{},[950,43162,43163,43176,43189,43203,43219,43233,43247,43261,43275,43289,43302,43319],{},[937,43164,43165,43169,43172],{},[955,43166,43167],{},[618,43168,12179],{},[955,43170,43171],{},"The opacity of the shadows.",[955,43173,43174],{},[618,43175,1925],{},[937,43177,43178,43182,43185],{},[955,43179,43180],{},[618,43181,22717],{},[955,43183,43184],{},"The blur of the shadows.",[955,43186,43187],{},[618,43188,1925],{},[937,43190,43191,43195,43198],{},[955,43192,43193],{},[618,43194,7770],{},[955,43196,43197],{},"The color of the shadows.",[955,43199,43200],{},[618,43201,43202],{},"'#000000'",[937,43204,43205,43210,43215],{},[955,43206,43207],{},[618,43208,43209],{},"tint",[955,43211,43212,43213,1150],{},"If provided, the color of the \"core\" of the shadows. \"Added\" to ",[618,43214,7770],{},[955,43216,43217],{},[618,43218,1183],{},[937,43220,43221,43225,43231],{},[955,43222,43223],{},[618,43224,816],{},[955,43226,43227,43228,1150],{},"The scale of the shadows\u002Fshadow plane. Can be a number or an array of two numbers ",[618,43229,43230],{},"[x, y]",[955,43232,1510],{},[937,43234,43235,43240,43243],{},[955,43236,43237],{},[618,43238,43239],{},"width",[955,43241,43242],{},"The width of the shadow plane.",[955,43244,43245],{},[618,43246,1925],{},[937,43248,43249,43254,43257],{},[955,43250,43251],{},[618,43252,43253],{},"height",[955,43255,43256],{},"The height of the shadow plane.",[955,43258,43259],{},[618,43260,1925],{},[937,43262,43263,43268,43271],{},[955,43264,43265],{},[618,43266,43267],{},"far",[955,43269,43270],{},"The distance of the orthographic shadow camera extends above the shadow plane.",[955,43272,43273],{},[618,43274,1510],{},[937,43276,43277,43282,43285],{},[955,43278,43279],{},[618,43280,43281],{},"smooth",[955,43283,43284],{},"Whether the shadows should be smoothed to reduce artifacts.",[955,43286,43287],{},[618,43288,965],{},[937,43290,43291,43295,43298],{},[955,43292,43293],{},[618,43294,29480],{},[955,43296,43297],{},"The resolution of the shadow textures.",[955,43299,43300],{},[618,43301,29489],{},[937,43303,43304,43308,43314],{},[955,43305,43306],{},[618,43307,41626],{},[955,43309,43310,43311,43313],{},"For performance, optionally stop updating shadows after ",[618,43312,41626],{}," frames.",[955,43315,43316],{},[618,43317,43318],{},"Math.POSITIVE_INFINITY",[937,43320,43321,43325,43328],{},[955,43322,43323],{},[618,43324,10812],{},[955,43326,43327],{},"Whether the shadows should write to the depth buffer or not.",[955,43329,43330],{},[618,43331,975],{},[1331,43333,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":43335},[43336,43337],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Fake, non-lighting-based shadow component for single plane shadows.",{},{"title":353,"description":43338},"TB1Ehaki9I6r1J_wGeA_UAl3knLim1b5GHqTm1K7PNY",{"id":43343,"title":357,"body":43344,"description":44852,"extension":591,"links":592,"meta":44853,"navigation":594,"path":358,"seo":44854,"stem":359,"__hash__":44855},"docs\u002F2.api\u002F7.light-shadow\u002Flensflare.md",{"type":501,"value":43345,"toc":44836},[43346,43351,43362,43364,43497,43499,43624,43628,43634,43642,43648,43705,43709,43715,43729,43736,43740,43766,43783,43789,43794,43799,43806,43812,43904,43909,43913,43918,43931,43935,43943,43998,44008,44011,44030,44039,44046,44050,44053,44061,44073,44081,44107,44114,44147,44151,44154,44198,44212,44217,44220,44223,44246,44265,44270,44274,44277,44407,44412,44417,44605,44611,44617,44620,44623,44833],[608,43347,43348],{},[43349,43350],"light-shadow-lensflare",{},[614,43352,43353,43356,43357,1150],{},[618,43354,43355],{},"\u003CLensflare \u002F>"," wraps the ",[1144,43358,43361],{"href":43359,"rel":43360},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#examples\u002Fen\u002Fobjects\u002FLensflare",[1148],"Three.js Lensflare",[504,43363,15],{"id":624},[626,43365,43368],{"className":628,"code":43366,"highlights":43367,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Lensflare } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPointLight>\n \u003CLensflare \u002F>\n \u003C\u002FTresPointLight>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790],[618,43369,43370,43390,43408,43428,43436,43440,43448,43456,43464,43473,43481,43489],{"__ignoreMap":576},[637,43371,43372,43374,43376,43378,43380,43382,43384,43386,43388],{"class":639,"line":577},[637,43373,643],{"class":642},[637,43375,647],{"class":646},[637,43377,651],{"class":650},[637,43379,654],{"class":650},[637,43381,657],{"class":642},[637,43383,660],{"class":642},[637,43385,664],{"class":663},[637,43387,660],{"class":642},[637,43389,669],{"class":642},[637,43391,43392,43394,43396,43398,43400,43402,43404,43406],{"class":639,"line":578},[637,43393,677],{"class":676},[637,43395,680],{"class":642},[637,43397,715],{"class":683},[637,43399,693],{"class":642},[637,43401,696],{"class":676},[637,43403,699],{"class":642},[637,43405,724],{"class":663},[637,43407,705],{"class":642},[637,43409,43411,43413,43415,43418,43420,43422,43424,43426],{"class":43410,"line":708},[639,673],[637,43412,677],{"class":676},[637,43414,680],{"class":642},[637,43416,43417],{"class":683}," Lensflare",[637,43419,693],{"class":642},[637,43421,696],{"class":676},[637,43423,699],{"class":642},[637,43425,702],{"class":663},[637,43427,705],{"class":642},[637,43429,43430,43432,43434],{"class":639,"line":729},[637,43431,732],{"class":642},[637,43433,647],{"class":646},[637,43435,669],{"class":642},[637,43437,43438],{"class":639,"line":739},[637,43439,742],{"emptyLinePlaceholder":594},[637,43441,43442,43444,43446],{"class":639,"line":745},[637,43443,643],{"class":642},[637,43445,750],{"class":646},[637,43447,669],{"class":642},[637,43449,43450,43452,43454],{"class":639,"line":755},[637,43451,758],{"class":642},[637,43453,761],{"class":646},[637,43455,669],{"class":642},[637,43457,43458,43460,43462],{"class":639,"line":778},[637,43459,781],{"class":642},[637,43461,11906],{"class":646},[637,43463,669],{"class":642},[637,43465,43467,43469,43471],{"class":43466,"line":790},[639,673],[637,43468,857],{"class":642},[637,43470,357],{"class":646},[637,43472,787],{"class":642},[637,43474,43475,43477,43479],{"class":639,"line":800},[637,43476,899],{"class":642},[637,43478,11906],{"class":646},[637,43480,669],{"class":642},[637,43482,43483,43485,43487],{"class":639,"line":805},[637,43484,909],{"class":642},[637,43486,761],{"class":646},[637,43488,669],{"class":642},[637,43490,43491,43493,43495],{"class":639,"line":831},[637,43492,732],{"class":642},[637,43494,750],{"class":646},[637,43496,669],{"class":642},[504,43498,926],{"id":925},[931,43500,43501,43511],{},[934,43502,43503],{},[937,43504,43505,43507,43509],{},[940,43506,8360],{"align":1001},[940,43508,945],{"align":1001},[940,43510,948],{"align":1001},[950,43512,43513,43528,43543,43560,43576,43593,43608],{},[937,43514,43515,43519,43524],{},[955,43516,43517],{"align":1001},[1705,43518,816],{},[955,43520,43521,43523],{"align":1001},[618,43522,5564],{}," – multiplier for lensflare element sizes",[955,43525,43526],{"align":1001},[618,43527,14391],{},[937,43529,43530,43534,43539],{},[955,43531,43532],{"align":1001},[1705,43533,14251],{},[955,43535,43536,43538],{"align":1001},[618,43537,5564],{}," – multiplier for element distances from flare center",[955,43540,43541],{"align":1001},[618,43542,14391],{},[937,43544,43545,43550,43556],{},[955,43546,43547],{"align":1001},[1705,43548,43549],{},"elements",[955,43551,43552,43555],{"align":1001},[618,43553,43554],{},"Partial<LensflareElementProps>[]"," – array of lensflare element properties",[955,43557,43558],{"align":1001},[618,43559,1183],{},[937,43561,43562,43567,43572],{},[955,43563,43564],{"align":1001},[1705,43565,43566],{},"seed",[955,43568,43569,43571],{"align":1001},[618,43570,5564],{}," – random seed for generating random seeded elements",[955,43573,43574],{"align":1001},[618,43575,1183],{},[937,43577,43578,43583,43589],{},[955,43579,43580],{"align":1001},[1705,43581,43582],{},"seedProps",[955,43584,43585,43588],{"align":1001},[618,43586,43587],{},"SeedProps[]"," – specifications for generating random seeded elements",[955,43590,43591],{"align":1001},[618,43592,1183],{},[937,43594,43595,43599,43604],{},[955,43596,43597],{"align":1001},[1705,43598,7770],{},[955,43600,43601,43603],{"align":1001},[618,43602,7785],{}," – default color of lensflare elements",[955,43605,43606],{"align":1001},[618,43607,1183],{},[937,43609,43610,43614,43620],{},[955,43611,43612],{"align":1001},[1705,43613,2801],{},[955,43615,43616,43619],{"align":1001},[618,43617,43618],{},"Texture | string"," – default texture of lensflare elements",[955,43621,43622],{"align":1001},[618,43623,1183],{},[504,43625,43626],{"id":43549},[618,43627,43549],{},[614,43629,43630,43631,43633],{},"You can specify individual lensflare element properties directly using the component's ",[618,43632,43549],{}," prop.",[614,43635,2867,43636,43638,43639,1150],{},[618,43637,43549],{}," prop expects an instance of ",[618,43640,43641],{},"(Partial\u003CLensflareElementProps>)[]",[614,43643,43644,43645,43647],{},"Every object in ",[618,43646,43549],{}," may have any (or none) of the following properties.",[931,43649,43650,43658],{},[934,43651,43652],{},[937,43653,43654,43656],{},[940,43655,8360],{"align":1001},[940,43657,945],{"align":1001},[950,43659,43660,43672,43683,43694],{},[937,43661,43662,43666],{},[955,43663,43664],{"align":1001},[1705,43665,2801],{},[955,43667,43668,43671],{"align":1001},[618,43669,43670],{},"string | Texture"," - an image URL or texture to use on the lensflare element",[937,43673,43674,43678],{},[955,43675,43676],{"align":1001},[1705,43677,7770],{},[955,43679,43680,43682],{"align":1001},[618,43681,7785],{}," - color of the lensflare element",[937,43684,43685,43689],{},[955,43686,43687],{"align":1001},[1705,43688,14251],{},[955,43690,43691,43693],{"align":1001},[618,43692,5564],{}," - distance of the lensflare element from the lensflare center",[937,43695,43696,43700],{},[955,43697,43698],{"align":1001},[1705,43699,17604],{},[955,43701,43702,43704],{"align":1001},[618,43703,5564],{}," - size of the lensflare element",[504,43706,43707],{"id":43566},[618,43708,43566],{},[614,43710,43711,43712,43714],{},"Adding a ",[618,43713,43566],{}," prop to a component enables seeded random element generation.",[614,43716,2867,43717,43719,43720,43725,43726,1150],{},[618,43718,43566],{}," prop is used as the \"seed\" in a ",[1144,43721,43724],{"href":43722,"rel":43723},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPseudorandom_number_generator",[1148],"pseudorandom number generator (PRNG)",". The PRNG is in turn used to build lensflare elements, by selecting values from an array of ",[618,43727,43728],{},"SeedProps",[2078,43730,43731],{},[614,43732,43733,43734,1150],{},"If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps",[637,43735],{},[4215,43737,43739],{"id":43738},"example","Example",[626,43741,43743],{"className":628,"code":43742,"language":633,"meta":576,"style":576},"\u003CLensflare :seed=\"seedRef\" \u002F>\n",[618,43744,43745],{"__ignoreMap":576},[637,43746,43747,43749,43751,43753,43755,43757,43759,43762,43764],{"class":639,"line":577},[637,43748,643],{"class":642},[637,43750,357],{"class":646},[637,43752,813],{"class":642},[637,43754,43566],{"class":650},[637,43756,657],{"class":642},[637,43758,660],{"class":642},[637,43760,43761],{"class":683},"seedRef",[637,43763,660],{"class":642},[637,43765,787],{"class":642},[614,43767,43768,43769,2322,43772,1503,43774,1503,43776,1503,43778,1503,43780,43782],{},"Below, the results of setting ",[618,43770,43771],{},"seedRef.value",[618,43773,969],{},[618,43775,1925],{},[618,43777,824],{},[618,43779,2729],{},[618,43781,3900],{},", respectively.",[614,43784,43785],{},[9760,43786],{"alt":43787,"src":43788},"Lensflare seeds 0-4","\u002Fcientos\u002Flensflare_seeds.png",[504,43790,43792],{"id":43791},"seedprops",[618,43793,43582],{},[614,43795,43711,43796,43798],{},[618,43797,43582],{}," prop to the component enables seeded random element generation.",[614,43800,2867,43801,43638,43803,43805],{},[618,43802,43582],{},[618,43804,43587],{},". It specifies rules and acceptable values for creating random lensflare elements.",[614,43807,43808,43809,43811],{},"Every element in ",[618,43810,43582],{}," has this shape.",[931,43813,43814,43824],{},[934,43815,43816],{},[937,43817,43818,43820,43822],{},[940,43819,8360],{"align":1001},[940,43821,945],{"align":1001},[940,43823,19523],{},[950,43825,43826,43839,43852,43865,43878,43891],{},[937,43827,43828,43832,43837],{},[955,43829,43830],{"align":1001},[1705,43831,2801],{},[955,43833,43834,43836],{"align":1001},[618,43835,23036],{}," - array of 1 or more image URLs; a single texture will be selected per generated element",[955,43838,36128],{},[937,43840,43841,43845,43850],{},[955,43842,43843],{"align":1001},[1705,43844,7770],{},[955,43846,43847,43849],{"align":1001},[618,43848,32640],{}," - array of 1 or more colors; a single color will be selected per generated element",[955,43851,36128],{},[937,43853,43854,43858,43863],{},[955,43855,43856],{"align":1001},[1705,43857,14251],{},[955,43859,43860,43862],{"align":1001},[618,43861,30448],{}," - minimum and maximum allowable distance from the flare center",[955,43864,36128],{},[937,43866,43867,43871,43876],{},[955,43868,43869],{"align":1001},[1705,43870,17604],{},[955,43872,43873,43875],{"align":1001},[618,43874,30448],{}," - minimum and maximum allowable size",[955,43877,36128],{},[937,43879,43880,43884,43889],{},[955,43881,43882],{"align":1001},[1705,43883,22309],{},[955,43885,43886,43888],{"align":1001},[618,43887,30448],{}," - minimum and maximum allowable number of elements to generate",[955,43890,36128],{},[937,43892,43893,43897,43902],{},[955,43894,43895],{"align":1001},[1705,43896,43566],{},[955,43898,43899,43901],{"align":1001},[618,43900,5564],{}," - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed",[955,43903,36162],{},[2078,43905,43906],{},[614,43907,43908],{},"If you set seedProps but not seed, the component will fall back to a default seed of 0.",[504,43910,43912],{"id":43911},"random-elements-and-non-random-properties","Random elements and non-random properties",[614,43914,43915,43917],{},[618,43916,43355],{}," was designed to make it easy to get a lensflare on screen. You can simply add the component with no props and the component will generate seeded random lensflare elements.",[626,43919,43921],{"className":628,"code":43920,"language":633,"meta":576,"style":576},"\u003CLensflare \u002F>\n",[618,43922,43923],{"__ignoreMap":576},[637,43924,43925,43927,43929],{"class":639,"line":577},[637,43926,643],{"class":642},[637,43928,357],{"class":646},[637,43930,787],{"class":642},[4215,43932,43934],{"id":43933},"non-random-properties","Non-random properties",[614,43936,43937,43938,43633],{},"You can provide a list of lensflare element properties using the ",[1144,43939,43941],{"href":43940},"#elements",[618,43942,43549],{},[626,43944,43946],{"className":628,"code":43945,"language":633,"meta":576,"style":576},"\u003CLensflare :elements=\"[{ color: 'red' }, { color: 'yellow' }]\" \u002F>\n",[618,43947,43948],{"__ignoreMap":576},[637,43949,43950,43952,43954,43956,43958,43960,43962,43964,43966,43968,43970,43972,43974,43976,43978,43980,43982,43984,43986,43988,43990,43992,43994,43996],{"class":639,"line":577},[637,43951,643],{"class":642},[637,43953,357],{"class":646},[637,43955,813],{"class":642},[637,43957,43549],{"class":650},[637,43959,657],{"class":642},[637,43961,660],{"class":642},[637,43963,1498],{"class":683},[637,43965,8709],{"class":642},[637,43967,2773],{"class":646},[637,43969,1222],{"class":642},[637,43971,699],{"class":642},[637,43973,39050],{"class":663},[637,43975,2512],{"class":642},[637,43977,8720],{"class":642},[637,43979,680],{"class":642},[637,43981,2773],{"class":646},[637,43983,1222],{"class":642},[637,43985,699],{"class":642},[637,43987,39194],{"class":663},[637,43989,2512],{"class":642},[637,43991,693],{"class":642},[637,43993,1513],{"class":683},[637,43995,660],{"class":642},[637,43997,787],{"class":642},[614,43999,44000,44001,1503,44003,1503,44005,44007],{},"This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – ",[618,44002,14251],{},[618,44004,17604],{},[618,44006,2801],{}," – will be filled in by the built-in defaults in this case.",[614,44009,44010],{},"You can also provide default props which will overwrite random generated props.",[626,44012,44014],{"className":628,"code":44013,"language":633,"meta":576,"style":576},"\u003CLensflare color:\"red\" \u002F>\n",[618,44015,44016],{"__ignoreMap":576},[637,44017,44018,44020,44022,44025,44028],{"class":639,"line":577},[637,44019,643],{"class":642},[637,44021,357],{"class":646},[637,44023,44024],{"class":650}," color:",[637,44026,44027],{"class":683},"\"red\" ",[637,44029,3260],{"class":642},[614,44031,44032,44033,44035,44036,44038],{},"Since ",[618,44034,43549],{}," is not defined here, the component will generate random lensflare elements. The specified ",[618,44037,7770],{}," prop – \"red\" – will overwrite the color property of the generated lensflare elements.",[614,44040,1142,44041,44045],{},[1144,44042,44044],{"href":44043},"#precedence","precedence"," for details about how properties are filled in.",[4215,44047,44049],{"id":44048},"random-elements","Random elements",[614,44051,44052],{},"You can let the component generate random elements ...",[614,44054,44055,44056],{},"... by not adding an ",[1144,44057,44058,44060],{"href":43940},[618,44059,43549],{}," prop",[626,44062,44063],{"className":628,"code":43920,"language":633,"meta":576,"style":576},[618,44064,44065],{"__ignoreMap":576},[637,44066,44067,44069,44071],{"class":639,"line":577},[637,44068,643],{"class":642},[637,44070,357],{"class":646},[637,44072,787],{"class":642},[614,44074,44075,44076],{},"... by adding a ",[1144,44077,44079,44060],{"href":44078},"#seed",[618,44080,43566],{},[626,44082,44084],{"className":628,"code":44083,"language":633,"meta":576,"style":576},"\u003CLensflare :seed=\"7127\" \u002F>\n",[618,44085,44086],{"__ignoreMap":576},[637,44087,44088,44090,44092,44094,44096,44098,44100,44103,44105],{"class":639,"line":577},[637,44089,643],{"class":642},[637,44091,357],{"class":646},[637,44093,813],{"class":642},[637,44095,43566],{"class":650},[637,44097,657],{"class":642},[637,44099,660],{"class":642},[637,44101,44102],{"class":823},"7127",[637,44104,660],{"class":642},[637,44106,787],{"class":642},[614,44108,44075,44109],{},[1144,44110,44112,44060],{"href":44111},"#seedprops",[618,44113,43582],{},[626,44115,44117],{"className":628,"code":44116,"language":633,"meta":576,"style":576},"\u003CLensflare :seedProps=\"[{...}, {...}]\" \u002F>\n",[618,44118,44119],{"__ignoreMap":576},[637,44120,44121,44123,44125,44127,44129,44131,44133,44135,44138,44141,44143,44145],{"class":639,"line":577},[637,44122,643],{"class":642},[637,44124,357],{"class":646},[637,44126,813],{"class":642},[637,44128,43582],{"class":650},[637,44130,657],{"class":642},[637,44132,660],{"class":642},[637,44134,1498],{"class":683},[637,44136,44137],{"class":642},"{...},",[637,44139,44140],{"class":642}," {...}",[637,44142,1513],{"class":683},[637,44144,660],{"class":642},[637,44146,787],{"class":642},[4215,44148,44150],{"id":44149},"mixing-random-elements-and-non-random-properties","Mixing random elements and non-random properties",[614,44152,44153],{},"You can mix your own properties and random elements.",[626,44155,44157],{"className":628,"code":44156,"language":633,"meta":576,"style":576},"\u003CLensflare :elements=\"[{...}, {...}]\" :seed=\"8193\" \u002F>\n",[618,44158,44159],{"__ignoreMap":576},[637,44160,44161,44163,44165,44167,44169,44171,44173,44175,44177,44179,44181,44183,44185,44187,44189,44191,44194,44196],{"class":639,"line":577},[637,44162,643],{"class":642},[637,44164,357],{"class":646},[637,44166,813],{"class":642},[637,44168,43549],{"class":650},[637,44170,657],{"class":642},[637,44172,660],{"class":642},[637,44174,1498],{"class":683},[637,44176,44137],{"class":642},[637,44178,44140],{"class":642},[637,44180,1513],{"class":683},[637,44182,660],{"class":642},[637,44184,813],{"class":642},[637,44186,43566],{"class":650},[637,44188,657],{"class":642},[637,44190,660],{"class":642},[637,44192,44193],{"class":823},"8193",[637,44195,660],{"class":642},[637,44197,787],{"class":642},[614,44199,44200,44201,3156,44203,44205,44206,44208,44209,1150],{},"Here, both ",[618,44202,43549],{},[618,44204,43566],{}," are defined. The component will generate random elements and overwrite their properties with the contents of ",[618,44207,43549],{},", according to the ",[1144,44210,44211],{"href":44043},"order of precedence",[2078,44213,44214],{},[614,44215,44216],{},"When mixing random elements with elements, the final number of lensflare elements equals whichever is larger, the length of the array of generated random elements or the length of elements.",[4215,44218,44219],{"id":44044},"Precedence",[614,44221,44222],{},"If more than one source sets the same property on a given element, the following order of precendence is used. Higher in the list (lower number) equals higher precendence.",[14905,44224,44225,44229,44236,44243],{},[2288,44226,44227],{},[618,44228,43549],{},[2288,44230,44231,1503,44233,44235],{},[618,44232,7770],{},[618,44234,2801],{}," – default element properties",[2288,44237,44238,1503,44240,44242],{},[618,44239,43566],{},[618,44241,43582],{}," – generated random elements",[2288,44244,44245],{},"built-in default element properties",[2078,44247,44248],{},[614,44249,44250,3156,44252,44254,44255,44258,44259,44261,44262,44264],{},[618,44251,816],{},[618,44253,14251],{}," are applied as ",[1705,44256,44257],{},"multipliers"," at render time, not as default values. They proportionally adjust all element sizes and distances respectively, preserving the variation between elements. Use ",[618,44260,816],{}," to make the entire lensflare larger or smaller, and ",[618,44263,14251],{}," to spread or compress the scattered elements.",[2078,44266,44267],{},[614,44268,44269],{},"If elements, seed, and seedProps are all undefined, a seed of 0 and built-in default seedProps will be used to generate the lensflare elements.",[4215,44271,44273],{"id":44272},"precedence-example","Precedence example",[614,44275,44276],{},"Here's an example of precedence. Assume this is in our vue template.",[626,44278,44280],{"className":628,"code":44279,"language":633,"meta":576,"style":576},"\u003CLensflare\n :elements=\"[\n {size:512, texture='http:\u002F\u002Fexample.net\u002Fcircle.png'},\n {color:'yellow', distance:0.5}\n ]\"\n :texture=\"http:\u002F\u002Fexample.net\u002Fring.png\"\n color=\"red\"\n :seed=\"1\"\n\u002F>\n",[618,44281,44282,44289,44302,44329,44354,44361,44377,44389,44403],{"__ignoreMap":576},[637,44283,44284,44286],{"class":639,"line":577},[637,44285,643],{"class":642},[637,44287,44288],{"class":646},"Lensflare\n",[637,44290,44291,44293,44295,44297,44299],{"class":639,"line":578},[637,44292,3229],{"class":642},[637,44294,43549],{"class":650},[637,44296,657],{"class":642},[637,44298,660],{"class":642},[637,44300,44301],{"class":683},"[\n",[637,44303,44304,44307,44309,44311,44313,44315,44317,44319,44321,44324,44326],{"class":639,"line":708},[637,44305,44306],{"class":642}," {",[637,44308,17604],{"class":646},[637,44310,1222],{"class":642},[637,44312,29489],{"class":823},[637,44314,687],{"class":642},[637,44316,21068],{"class":683},[637,44318,657],{"class":642},[637,44320,2512],{"class":642},[637,44322,44323],{"class":663},"http:\u002F\u002Fexample.net\u002Fcircle.png",[637,44325,2512],{"class":642},[637,44327,44328],{"class":642},"},\n",[637,44330,44331,44333,44335,44337,44339,44341,44343,44345,44348,44350,44352],{"class":639,"line":729},[637,44332,44306],{"class":642},[637,44334,7770],{"class":646},[637,44336,1222],{"class":642},[637,44338,2512],{"class":642},[637,44340,39194],{"class":663},[637,44342,2512],{"class":642},[637,44344,687],{"class":642},[637,44346,44347],{"class":646}," distance",[637,44349,1222],{"class":642},[637,44351,1545],{"class":823},[637,44353,1329],{"class":642},[637,44355,44356,44359],{"class":639,"line":739},[637,44357,44358],{"class":683}," ]",[637,44360,3224],{"class":642},[637,44362,44363,44365,44367,44369,44371,44374],{"class":639,"line":745},[637,44364,3229],{"class":642},[637,44366,2801],{"class":650},[637,44368,657],{"class":642},[637,44370,660],{"class":642},[637,44372,44373],{"class":683},"http:",[637,44375,44376],{"class":1213},"\u002F\u002Fexample.net\u002Fring.png\"\n",[637,44378,44379,44381,44383,44385,44387],{"class":639,"line":755},[637,44380,5685],{"class":683},[637,44382,657],{"class":642},[637,44384,660],{"class":642},[637,44386,39050],{"class":650},[637,44388,3224],{"class":683},[637,44390,44391,44393,44395,44397,44399,44401],{"class":639,"line":778},[637,44392,3229],{"class":642},[637,44394,43566],{"class":650},[637,44396,657],{"class":642},[637,44398,660],{"class":642},[637,44400,1925],{"class":823},[637,44402,3224],{"class":642},[637,44404,44405],{"class":639,"line":790},[637,44406,3260],{"class":683},[614,44408,44409,44411],{},[618,44410,43566],{}," is defined, so the component will produce random elements.",[614,44413,44414,44415,1222],{},"Assume the random element generator produces this, based on ",[618,44416,43566],{},[626,44418,44422],{"className":44419,"code":44420,"language":44421,"meta":576,"style":576},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n {\n color: 'white',\n distance: 0,\n size: 1024,\n texture: 'http:\u002F\u002Fexample.net\u002Frays.png',\n },\n {\n color: 'white',\n distance: 1,\n size: 512,\n texture: 'http:\u002F\u002Fexample.net\u002Fcircle.png',\n },\n {\n color: 'white',\n distance: 2,\n size: 512,\n texture: 'http:\u002F\u002Fexample.net\u002Fcircle.png',\n },\n]\n","js",[618,44423,44424,44428,44432,44446,44457,44468,44484,44488,44492,44506,44516,44527,44541,44545,44549,44563,44573,44583,44597,44601],{"__ignoreMap":576},[637,44425,44426],{"class":639,"line":577},[637,44427,44301],{"class":683},[637,44429,44430],{"class":639,"line":578},[637,44431,2543],{"class":642},[637,44433,44434,44436,44438,44440,44442,44444],{"class":639,"line":708},[637,44435,25361],{"class":646},[637,44437,1222],{"class":642},[637,44439,699],{"class":642},[637,44441,2780],{"class":663},[637,44443,2512],{"class":642},[637,44445,2560],{"class":642},[637,44447,44448,44451,44453,44455],{"class":639,"line":729},[637,44449,44450],{"class":646}," distance",[637,44452,1222],{"class":642},[637,44454,2577],{"class":823},[637,44456,2560],{"class":642},[637,44458,44459,44461,44463,44466],{"class":639,"line":739},[637,44460,2614],{"class":646},[637,44462,1222],{"class":642},[637,44464,44465],{"class":823}," 1024",[637,44467,2560],{"class":642},[637,44469,44470,44473,44475,44477,44480,44482],{"class":639,"line":745},[637,44471,44472],{"class":646}," texture",[637,44474,1222],{"class":642},[637,44476,699],{"class":642},[637,44478,44479],{"class":663},"http:\u002F\u002Fexample.net\u002Frays.png",[637,44481,2512],{"class":642},[637,44483,2560],{"class":642},[637,44485,44486],{"class":639,"line":755},[637,44487,2667],{"class":642},[637,44489,44490],{"class":639,"line":778},[637,44491,2543],{"class":642},[637,44493,44494,44496,44498,44500,44502,44504],{"class":639,"line":790},[637,44495,25361],{"class":646},[637,44497,1222],{"class":642},[637,44499,699],{"class":642},[637,44501,2780],{"class":663},[637,44503,2512],{"class":642},[637,44505,2560],{"class":642},[637,44507,44508,44510,44512,44514],{"class":639,"line":800},[637,44509,44450],{"class":646},[637,44511,1222],{"class":642},[637,44513,2631],{"class":823},[637,44515,2560],{"class":642},[637,44517,44518,44520,44522,44525],{"class":639,"line":805},[637,44519,2614],{"class":646},[637,44521,1222],{"class":642},[637,44523,44524],{"class":823}," 512",[637,44526,2560],{"class":642},[637,44528,44529,44531,44533,44535,44537,44539],{"class":639,"line":831},[637,44530,44472],{"class":646},[637,44532,1222],{"class":642},[637,44534,699],{"class":642},[637,44536,44323],{"class":663},[637,44538,2512],{"class":642},[637,44540,2560],{"class":642},[637,44542,44543],{"class":639,"line":631},[637,44544,2667],{"class":642},[637,44546,44547],{"class":639,"line":854},[637,44548,2543],{"class":642},[637,44550,44551,44553,44555,44557,44559,44561],{"class":639,"line":865},[637,44552,25361],{"class":646},[637,44554,1222],{"class":642},[637,44556,699],{"class":642},[637,44558,2780],{"class":663},[637,44560,2512],{"class":642},[637,44562,2560],{"class":642},[637,44564,44565,44567,44569,44571],{"class":639,"line":876},[637,44566,44450],{"class":646},[637,44568,1222],{"class":642},[637,44570,33693],{"class":823},[637,44572,2560],{"class":642},[637,44574,44575,44577,44579,44581],{"class":639,"line":886},[637,44576,2614],{"class":646},[637,44578,1222],{"class":642},[637,44580,44524],{"class":823},[637,44582,2560],{"class":642},[637,44584,44585,44587,44589,44591,44593,44595],{"class":639,"line":632},[637,44586,44472],{"class":646},[637,44588,1222],{"class":642},[637,44590,699],{"class":642},[637,44592,44323],{"class":663},[637,44594,2512],{"class":642},[637,44596,2560],{"class":642},[637,44598,44599],{"class":639,"line":906},[637,44600,2667],{"class":642},[637,44602,44603],{"class":639,"line":916},[637,44604,21755],{"class":683},[614,44606,44607,44608,44610],{},"When random elements are mixed with ",[618,44609,43549],{},", the final number of elements in the lensflare is determined by whichever is longer.",[614,44612,44613,44614,44616],{},"Here, ",[618,44615,43549],{}," contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.",[614,44618,44619],{},"Therefore, resulting lensflare will have 3 elements.",[614,44621,44622],{},"The resulting 3 lensflare elements will have the following properties, from the following sources:",[626,44624,44626],{"className":44419,"code":44625,"language":44421,"meta":576,"style":576},"[\n {\n color: 'yellow', \u002F\u002F from `elements`\n distance: 0, \u002F\u002F from random element generator\n size: 512, \u002F\u002F from `elements`\n texture: 'http:\u002F\u002Fexample.net\u002Fcircle.png', \u002F\u002F from `elements`\n },\n {\n color: 'red', \u002F\u002F from component prop `color`\n distance: 0.5, \u002F\u002F from `elements`\n size: 512, \u002F\u002F from random element generator\n texture: 'http:\u002F\u002Fexample.net\u002Fring.png', \u002F\u002F from component prop `texture`\n },\n {\n color: 'red', \u002F\u002F from component prop `color`\n distance: 2, \u002F\u002F from random element generator\n size: 512, \u002F\u002F from random element generator\n texture: 'http:\u002F\u002Fexample.net\u002Fring.png', \u002F\u002F from component prop `texture`\n },\n]\n",[618,44627,44628,44632,44636,44653,44666,44678,44694,44698,44702,44719,44731,44743,44761,44765,44769,44785,44797,44809,44825,44829],{"__ignoreMap":576},[637,44629,44630],{"class":639,"line":577},[637,44631,44301],{"class":683},[637,44633,44634],{"class":639,"line":578},[637,44635,2543],{"class":642},[637,44637,44638,44640,44642,44644,44646,44648,44650],{"class":639,"line":708},[637,44639,25361],{"class":646},[637,44641,1222],{"class":642},[637,44643,699],{"class":642},[637,44645,39194],{"class":663},[637,44647,2512],{"class":642},[637,44649,687],{"class":642},[637,44651,44652],{"class":1213}," \u002F\u002F from `elements`\n",[637,44654,44655,44657,44659,44661,44663],{"class":639,"line":729},[637,44656,44450],{"class":646},[637,44658,1222],{"class":642},[637,44660,2577],{"class":823},[637,44662,687],{"class":642},[637,44664,44665],{"class":1213}," \u002F\u002F from random element generator\n",[637,44667,44668,44670,44672,44674,44676],{"class":639,"line":739},[637,44669,2614],{"class":646},[637,44671,1222],{"class":642},[637,44673,44524],{"class":823},[637,44675,687],{"class":642},[637,44677,44652],{"class":1213},[637,44679,44680,44682,44684,44686,44688,44690,44692],{"class":639,"line":745},[637,44681,44472],{"class":646},[637,44683,1222],{"class":642},[637,44685,699],{"class":642},[637,44687,44323],{"class":663},[637,44689,2512],{"class":642},[637,44691,687],{"class":642},[637,44693,44652],{"class":1213},[637,44695,44696],{"class":639,"line":755},[637,44697,2667],{"class":642},[637,44699,44700],{"class":639,"line":778},[637,44701,2543],{"class":642},[637,44703,44704,44706,44708,44710,44712,44714,44716],{"class":639,"line":790},[637,44705,25361],{"class":646},[637,44707,1222],{"class":642},[637,44709,699],{"class":642},[637,44711,39050],{"class":663},[637,44713,2512],{"class":642},[637,44715,687],{"class":642},[637,44717,44718],{"class":1213}," \u002F\u002F from component prop `color`\n",[637,44720,44721,44723,44725,44727,44729],{"class":639,"line":800},[637,44722,44450],{"class":646},[637,44724,1222],{"class":642},[637,44726,2582],{"class":823},[637,44728,687],{"class":642},[637,44730,44652],{"class":1213},[637,44732,44733,44735,44737,44739,44741],{"class":639,"line":805},[637,44734,2614],{"class":646},[637,44736,1222],{"class":642},[637,44738,44524],{"class":823},[637,44740,687],{"class":642},[637,44742,44665],{"class":1213},[637,44744,44745,44747,44749,44751,44754,44756,44758],{"class":639,"line":831},[637,44746,44472],{"class":646},[637,44748,1222],{"class":642},[637,44750,699],{"class":642},[637,44752,44753],{"class":663},"http:\u002F\u002Fexample.net\u002Fring.png",[637,44755,2512],{"class":642},[637,44757,687],{"class":642},[637,44759,44760],{"class":1213}," \u002F\u002F from component prop `texture`\n",[637,44762,44763],{"class":639,"line":631},[637,44764,2667],{"class":642},[637,44766,44767],{"class":639,"line":854},[637,44768,2543],{"class":642},[637,44770,44771,44773,44775,44777,44779,44781,44783],{"class":639,"line":865},[637,44772,25361],{"class":646},[637,44774,1222],{"class":642},[637,44776,699],{"class":642},[637,44778,39050],{"class":663},[637,44780,2512],{"class":642},[637,44782,687],{"class":642},[637,44784,44718],{"class":1213},[637,44786,44787,44789,44791,44793,44795],{"class":639,"line":876},[637,44788,44450],{"class":646},[637,44790,1222],{"class":642},[637,44792,33693],{"class":823},[637,44794,687],{"class":642},[637,44796,44665],{"class":1213},[637,44798,44799,44801,44803,44805,44807],{"class":639,"line":886},[637,44800,2614],{"class":646},[637,44802,1222],{"class":642},[637,44804,44524],{"class":823},[637,44806,687],{"class":642},[637,44808,44665],{"class":1213},[637,44810,44811,44813,44815,44817,44819,44821,44823],{"class":639,"line":632},[637,44812,44472],{"class":646},[637,44814,1222],{"class":642},[637,44816,699],{"class":642},[637,44818,44753],{"class":663},[637,44820,2512],{"class":642},[637,44822,687],{"class":642},[637,44824,44760],{"class":1213},[637,44826,44827],{"class":639,"line":906},[637,44828,2667],{"class":642},[637,44830,44831],{"class":639,"line":916},[637,44832,21755],{"class":683},[1331,44834,44835],{},"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 .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":576,"searchDepth":577,"depth":578,"links":44837},[44838,44839,44840,44841,44844,44845],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":43549,"depth":578,"text":43549},{"id":43566,"depth":578,"text":43566,"children":44842},[44843],{"id":43738,"depth":708,"text":43739},{"id":43791,"depth":578,"text":43582},{"id":43911,"depth":578,"text":43912,"children":44846},[44847,44848,44849,44850,44851],{"id":43933,"depth":708,"text":43934},{"id":44048,"depth":708,"text":44049},{"id":44149,"depth":708,"text":44150},{"id":44044,"depth":708,"text":44219},{"id":44272,"depth":708,"text":44273},"Wraps the Three.js Lensflare with seeded random element generation.",{},{"title":357,"description":44852},"IPTu6ltIJ84TUkEk77xCaQa3Z9Y35mfjfjyH23AjLG0",{"id":44857,"title":361,"body":44858,"description":45549,"extension":591,"links":592,"meta":45550,"navigation":594,"path":362,"seo":45551,"stem":363,"__hash__":45552},"docs\u002F2.api\u002F7.light-shadow\u002Frandomized-lights.md",{"type":501,"value":44859,"toc":45545},[44860,44865,44872,44880,44882,45380,45382,45543],[2367,44861,44862],{},[44863,44864],"light-shadow-randomized-lights",{},[614,44866,44867,44869,44870,1150],{},[618,44868,41782],{}," internally creates multiple lights and jiggles them. You would normally add it as a child of ",[618,44871,41266],{},[614,44873,44874,44875,1150],{},"It is based on this ",[1144,44876,44879],{"href":44877,"rel":44878},"http:\u002F\u002Fdrei.docs.pmnd.rs\u002Fstaging\u002Frandomized-light",[1148],"Drei component",[504,44881,15],{"id":624},[626,44883,44886],{"className":628,"code":44884,"highlights":44885,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from \"@tresjs\u002Fcore\";\nimport {\n RandomizedLights,\n AccumulativeShadows,\n OrbitControls,\n Plane,\n} from \"@tresjs\u002Fcientos\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CAccumulativeShadows :blend=\"100\" color=\"#fbb03b\" once :position-y=\"-1\">\n \u003CRandomizedLights\n :ambient=\"0.25\"\n :bias=\"0.001\"\n :count=\"8\"\n :intensity=\"Math.PI\"\n :map-size=\"1024\"\n :position=\"[5, 5, -10]\"\n :radius=\"2\"\n \u002F>\n \u003C\u002FAccumulativeShadows>\n \u003CTresMesh cast-shadow>\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FTresMesh>\n \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n \u003CTresMeshStandardMaterial \u002F>\n \u003C\u002FPlane>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[729,876,886,632,906,916,2695,2704,2738],[618,44887,44888,44908,44928,44934,44942,44949,44956,44963,44977,44985,44989,44997,45008,45040,45048,45096,45104,45120,45136,45151,45170,45186,45213,45229,45233,45241,45251,45259,45277,45285,45340,45348,45356,45364,45372],{"__ignoreMap":576},[637,44889,44890,44892,44894,44896,44898,44900,44902,44904,44906],{"class":639,"line":577},[637,44891,643],{"class":642},[637,44893,647],{"class":646},[637,44895,651],{"class":650},[637,44897,654],{"class":650},[637,44899,657],{"class":642},[637,44901,660],{"class":642},[637,44903,664],{"class":663},[637,44905,660],{"class":642},[637,44907,669],{"class":642},[637,44909,44910,44912,44914,44916,44918,44920,44922,44924,44926],{"class":639,"line":578},[637,44911,677],{"class":676},[637,44913,680],{"class":642},[637,44915,715],{"class":683},[637,44917,693],{"class":642},[637,44919,696],{"class":676},[637,44921,9815],{"class":642},[637,44923,724],{"class":663},[637,44925,660],{"class":642},[637,44927,9822],{"class":642},[637,44929,44930,44932],{"class":639,"line":708},[637,44931,677],{"class":676},[637,44933,1208],{"class":642},[637,44935,44937,44940],{"class":44936,"line":729},[639,673],[637,44938,44939],{"class":683}," RandomizedLights",[637,44941,2560],{"class":642},[637,44943,44944,44947],{"class":639,"line":739},[637,44945,44946],{"class":683}," AccumulativeShadows",[637,44948,2560],{"class":642},[637,44950,44951,44954],{"class":639,"line":745},[637,44952,44953],{"class":683}," OrbitControls",[637,44955,2560],{"class":642},[637,44957,44958,44961],{"class":639,"line":755},[637,44959,44960],{"class":683}," Plane",[637,44962,2560],{"class":642},[637,44964,44965,44967,44969,44971,44973,44975],{"class":639,"line":778},[637,44966,2500],{"class":642},[637,44968,696],{"class":676},[637,44970,9815],{"class":642},[637,44972,702],{"class":663},[637,44974,660],{"class":642},[637,44976,9822],{"class":642},[637,44978,44979,44981,44983],{"class":639,"line":790},[637,44980,732],{"class":642},[637,44982,647],{"class":646},[637,44984,669],{"class":642},[637,44986,44987],{"class":639,"line":800},[637,44988,742],{"emptyLinePlaceholder":594},[637,44990,44991,44993,44995],{"class":639,"line":805},[637,44992,643],{"class":642},[637,44994,750],{"class":646},[637,44996,669],{"class":642},[637,44998,44999,45001,45003,45006],{"class":639,"line":831},[637,45000,758],{"class":642},[637,45002,761],{"class":646},[637,45004,45005],{"class":650}," shadows",[637,45007,669],{"class":642},[637,45009,45010,45012,45014,45016,45018,45020,45022,45024,45026,45028,45030,45032,45034,45036,45038],{"class":639,"line":631},[637,45011,781],{"class":642},[637,45013,784],{"class":646},[637,45015,813],{"class":642},[637,45017,1491],{"class":650},[637,45019,657],{"class":642},[637,45021,660],{"class":642},[637,45023,1498],{"class":642},[637,45025,969],{"class":823},[637,45027,1503],{"class":642},[637,45029,2729],{"class":823},[637,45031,1503],{"class":642},[637,45033,7666],{"class":823},[637,45035,1513],{"class":642},[637,45037,660],{"class":642},[637,45039,787],{"class":642},[637,45041,45042,45044,45046],{"class":639,"line":854},[637,45043,781],{"class":642},[637,45045,795],{"class":646},[637,45047,787],{"class":642},[637,45049,45050,45052,45055,45057,45059,45061,45063,45065,45067,45069,45071,45073,45075,45077,45080,45082,45084,45086,45088,45090,45092,45094],{"class":639,"line":865},[637,45051,781],{"class":642},[637,45053,45054],{"class":646},"AccumulativeShadows",[637,45056,813],{"class":642},[637,45058,29066],{"class":650},[637,45060,657],{"class":642},[637,45062,660],{"class":642},[637,45064,11706],{"class":823},[637,45066,660],{"class":642},[637,45068,2773],{"class":650},[637,45070,657],{"class":642},[637,45072,660],{"class":642},[637,45074,10533],{"class":663},[637,45076,660],{"class":642},[637,45078,45079],{"class":650}," once",[637,45081,813],{"class":642},[637,45083,2000],{"class":650},[637,45085,657],{"class":642},[637,45087,660],{"class":642},[637,45089,8776],{"class":642},[637,45091,1925],{"class":823},[637,45093,660],{"class":642},[637,45095,669],{"class":642},[637,45097,45099,45101],{"class":45098,"line":876},[639,673],[637,45100,857],{"class":642},[637,45102,45103],{"class":646},"RandomizedLights\n",[637,45105,45107,45109,45112,45114,45116,45118],{"class":45106,"line":886},[639,673],[637,45108,8241],{"class":642},[637,45110,45111],{"class":650},"ambient",[637,45113,657],{"class":642},[637,45115,660],{"class":642},[637,45117,14347],{"class":823},[637,45119,3224],{"class":642},[637,45121,45123,45125,45128,45130,45132,45134],{"class":45122,"line":632},[639,673],[637,45124,8241],{"class":642},[637,45126,45127],{"class":650},"bias",[637,45129,657],{"class":642},[637,45131,660],{"class":642},[637,45133,1554],{"class":823},[637,45135,3224],{"class":642},[637,45137,45139,45141,45143,45145,45147,45149],{"class":45138,"line":906},[639,673],[637,45140,8241],{"class":642},[637,45142,12418],{"class":650},[637,45144,657],{"class":642},[637,45146,660],{"class":642},[637,45148,22756],{"class":823},[637,45150,3224],{"class":642},[637,45152,45154,45156,45158,45160,45162,45164,45166,45168],{"class":45153,"line":916},[639,673],[637,45155,8241],{"class":642},[637,45157,1918],{"class":650},[637,45159,657],{"class":642},[637,45161,660],{"class":642},[637,45163,29913],{"class":683},[637,45165,1150],{"class":642},[637,45167,29918],{"class":683},[637,45169,3224],{"class":642},[637,45171,45173,45175,45178,45180,45182,45184],{"class":45172,"line":2695},[639,673],[637,45174,8241],{"class":642},[637,45176,45177],{"class":650},"map-size",[637,45179,657],{"class":642},[637,45181,660],{"class":642},[637,45183,41756],{"class":823},[637,45185,3224],{"class":642},[637,45187,45189,45191,45193,45195,45197,45199,45201,45203,45205,45207,45209,45211],{"class":45188,"line":2704},[639,673],[637,45190,8241],{"class":642},[637,45192,1491],{"class":650},[637,45194,657],{"class":642},[637,45196,660],{"class":642},[637,45198,1498],{"class":642},[637,45200,7666],{"class":823},[637,45202,1503],{"class":642},[637,45204,7666],{"class":823},[637,45206,10090],{"class":642},[637,45208,1510],{"class":823},[637,45210,1513],{"class":642},[637,45212,3224],{"class":642},[637,45214,45216,45218,45221,45223,45225,45227],{"class":45215,"line":2738},[639,673],[637,45217,8241],{"class":642},[637,45219,45220],{"class":650},"radius",[637,45222,657],{"class":642},[637,45224,660],{"class":642},[637,45226,824],{"class":823},[637,45228,3224],{"class":642},[637,45230,45231],{"class":639,"line":2747},[637,45232,8295],{"class":642},[637,45234,45235,45237,45239],{"class":639,"line":2756},[637,45236,899],{"class":642},[637,45238,45054],{"class":646},[637,45240,669],{"class":642},[637,45242,45243,45245,45247,45249],{"class":639,"line":2765},[637,45244,781],{"class":642},[637,45246,860],{"class":646},[637,45248,17230],{"class":650},[637,45250,669],{"class":642},[637,45252,45253,45255,45257],{"class":639,"line":2787},[637,45254,857],{"class":642},[637,45256,871],{"class":646},[637,45258,787],{"class":642},[637,45260,45261,45263,45265,45267,45269,45271,45273,45275],{"class":639,"line":2838},[637,45262,857],{"class":642},[637,45264,14035],{"class":646},[637,45266,2773],{"class":650},[637,45268,657],{"class":642},[637,45270,660],{"class":642},[637,45272,14044],{"class":663},[637,45274,660],{"class":642},[637,45276,787],{"class":642},[637,45278,45279,45281,45283],{"class":639,"line":2847},[637,45280,899],{"class":642},[637,45282,860],{"class":646},[637,45284,669],{"class":642},[637,45286,45287,45289,45291,45293,45295,45297,45299,45301,45303,45305,45307,45309,45311,45313,45315,45318,45320,45322,45324,45326,45328,45330,45332,45334,45336,45338],{"class":639,"line":2856},[637,45288,781],{"class":642},[637,45290,261],{"class":646},[637,45292,813],{"class":642},[637,45294,1491],{"class":650},[637,45296,657],{"class":642},[637,45298,660],{"class":642},[637,45300,1498],{"class":642},[637,45302,969],{"class":823},[637,45304,10090],{"class":642},[637,45306,824],{"class":823},[637,45308,1503],{"class":642},[637,45310,969],{"class":823},[637,45312,1513],{"class":642},[637,45314,660],{"class":642},[637,45316,45317],{"class":650}," receive-shadow",[637,45319,813],{"class":642},[637,45321,2021],{"class":650},[637,45323,657],{"class":642},[637,45325,660],{"class":642},[637,45327,1498],{"class":642},[637,45329,1510],{"class":823},[637,45331,1503],{"class":642},[637,45333,1510],{"class":823},[637,45335,1513],{"class":642},[637,45337,660],{"class":642},[637,45339,669],{"class":642},[637,45341,45342,45344,45346],{"class":639,"line":4058},[637,45343,857],{"class":642},[637,45345,2770],{"class":646},[637,45347,787],{"class":642},[637,45349,45350,45352,45354],{"class":639,"line":4102},[637,45351,899],{"class":642},[637,45353,261],{"class":646},[637,45355,669],{"class":642},[637,45357,45358,45360,45362],{"class":639,"line":4129},[637,45359,781],{"class":642},[637,45361,10010],{"class":646},[637,45363,787],{"class":642},[637,45365,45366,45368,45370],{"class":639,"line":4148},[637,45367,909],{"class":642},[637,45369,761],{"class":646},[637,45371,669],{"class":642},[637,45373,45374,45376,45378],{"class":639,"line":4189},[637,45375,732],{"class":642},[637,45377,750],{"class":646},[637,45379,669],{"class":642},[504,45381,926],{"id":925},[931,45383,45384,45394],{},[934,45385,45386],{},[937,45387,45388,45390,45392],{},[940,45389,942],{},[940,45391,945],{},[940,45393,948],{},[950,45395,45396,45409,45422,45435,45448,45461,45474,45488,45501,45515,45529],{},[937,45397,45398,45402,45405],{},[955,45399,45400],{},[618,45401,12418],{},[955,45403,45404],{},"Number of lights",[955,45406,45407],{},[618,45408,22756],{},[937,45410,45411,45415,45418],{},[955,45412,45413],{},[618,45414,45220],{},[955,45416,45417],{},"Radius of the jiggle, higher values make softer light",[955,45419,45420],{},[618,45421,1925],{},[937,45423,45424,45428,45431],{},[955,45425,45426],{},[618,45427,1918],{},[955,45429,45430],{},"Light intensity",[955,45432,45433],{},[618,45434,12231],{},[937,45436,45437,45441,45444],{},[955,45438,45439],{},[618,45440,45111],{},[955,45442,45443],{},"\"Ambient occlusion\" to directional light ratio, lower values mean less AO",[955,45445,45446],{},[618,45447,1545],{},[937,45449,45450,45454,45457],{},[955,45451,45452],{},[618,45453,19565],{},[955,45455,45456],{},"If the lights cast shadows",[955,45458,45459],{},[618,45460,965],{},[937,45462,45463,45467,45470],{},[955,45464,45465],{},[618,45466,45127],{},[955,45468,45469],{},"Default shadow bias",[955,45471,45472],{},[618,45473,969],{},[937,45475,45476,45481,45484],{},[955,45477,45478],{},[618,45479,45480],{},"mapSize",[955,45482,45483],{},"Size of the lights' shadow map",[955,45485,45486],{},[618,45487,29489],{},[937,45489,45490,45494,45497],{},[955,45491,45492],{},[618,45493,17604],{},[955,45495,45496],{},"Size of the lights' shadow camera frustum",[955,45498,45499],{},[618,45500,1510],{},[937,45502,45503,45508,45511],{},[955,45504,45505],{},[618,45506,45507],{},"near",[955,45509,45510],{},"Lights' shadow camera near value",[955,45512,45513],{},[618,45514,1545],{},[937,45516,45517,45521,45524],{},[955,45518,45519],{},[618,45520,43267],{},[955,45522,45523],{},"Lights' shadow camera far value",[955,45525,45526],{},[618,45527,45528],{},"500",[937,45530,45531,45535,45538],{},[955,45532,45533],{},[618,45534,1491],{},[955,45536,45537],{},"Position",[955,45539,45540],{},[618,45541,45542],{},"[5, 5, -10]",[1331,45544,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":45546},[45547,45548],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Creates multiple lights and jiggles them for softer shadows.",{},{"title":361,"description":45549},"baGOsq_IYKuFBxflpLvSmGExVBUODXQrO5EKfecXWks",{"id":45554,"title":365,"body":45555,"description":46003,"extension":591,"links":592,"meta":46004,"navigation":594,"path":366,"seo":46005,"stem":367,"__hash__":46006},"docs\u002F2.api\u002F7.light-shadow\u002Fsoft-shadows.md",{"type":501,"value":45556,"toc":45999},[45557,45562,45565,45567,45946,45948,45997],[608,45558,45559],{},[45560,45561],"light-shadow-soft-shadows",{},[614,45563,45564],{},"Injects percent closer soft shadows (pcss) into THREE's shader chunk. Mounting\u002Funmounting this component or changing its props will cause all shaders to be recompiled.",[504,45566,15],{"id":624},[626,45568,45571],{"className":628,"code":45569,"highlights":45570,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { SoftShadows, Levioso, TorusKnot, Plane } from \"@tresjs\u002Fcientos\";\nimport { TresCanvas } from \"@tresjs\u002Fcore\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows clear-color=\"#82DBC5\">\n \u003CLevioso :speed=\"4\" :range=\"[0, 0.7]\" :rotation-factor=\"9\">\n \u003CTorusKnot cast-shadow :scale=\"0.45\">\n \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n \u003C\u002FTorusKnot>\n \u003C\u002FLevioso>\n \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[10, 10]\">\n \u003CTresMeshStandardMaterial \u002F>\n \u003C\u002FPlane>\n \u003CTresDirectionalLight cast-shadow :position=\"[0, 3, 0]\" \u002F>\n \u003CTresAmbientLight :intensity=\"0.5\" \u002F>\n \u003CSoftShadows \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,632],[618,45572,45573,45593,45628,45648,45656,45660,45668,45688,45740,45762,45780,45788,45796,45850,45858,45866,45900,45920,45930,45938],{"__ignoreMap":576},[637,45574,45575,45577,45579,45581,45583,45585,45587,45589,45591],{"class":639,"line":577},[637,45576,643],{"class":642},[637,45578,647],{"class":646},[637,45580,651],{"class":650},[637,45582,654],{"class":650},[637,45584,657],{"class":642},[637,45586,660],{"class":642},[637,45588,664],{"class":663},[637,45590,660],{"class":642},[637,45592,669],{"class":642},[637,45594,45596,45598,45600,45603,45605,45607,45609,45611,45613,45616,45618,45620,45622,45624,45626],{"class":45595,"line":578},[639,673],[637,45597,677],{"class":676},[637,45599,680],{"class":642},[637,45601,45602],{"class":683}," SoftShadows",[637,45604,687],{"class":642},[637,45606,9832],{"class":683},[637,45608,687],{"class":642},[637,45610,42920],{"class":683},[637,45612,687],{"class":642},[637,45614,45615],{"class":683}," Plane",[637,45617,693],{"class":642},[637,45619,696],{"class":676},[637,45621,9815],{"class":642},[637,45623,702],{"class":663},[637,45625,660],{"class":642},[637,45627,9822],{"class":642},[637,45629,45630,45632,45634,45636,45638,45640,45642,45644,45646],{"class":639,"line":708},[637,45631,677],{"class":676},[637,45633,680],{"class":642},[637,45635,715],{"class":683},[637,45637,693],{"class":642},[637,45639,696],{"class":676},[637,45641,9815],{"class":642},[637,45643,724],{"class":663},[637,45645,660],{"class":642},[637,45647,9822],{"class":642},[637,45649,45650,45652,45654],{"class":639,"line":729},[637,45651,732],{"class":642},[637,45653,647],{"class":646},[637,45655,669],{"class":642},[637,45657,45658],{"class":639,"line":739},[637,45659,742],{"emptyLinePlaceholder":594},[637,45661,45662,45664,45666],{"class":639,"line":745},[637,45663,643],{"class":642},[637,45665,750],{"class":646},[637,45667,669],{"class":642},[637,45669,45670,45672,45674,45676,45678,45680,45682,45684,45686],{"class":639,"line":755},[637,45671,758],{"class":642},[637,45673,761],{"class":646},[637,45675,45005],{"class":650},[637,45677,764],{"class":650},[637,45679,657],{"class":642},[637,45681,660],{"class":642},[637,45683,12358],{"class":663},[637,45685,660],{"class":642},[637,45687,669],{"class":642},[637,45689,45690,45692,45694,45696,45698,45700,45702,45704,45706,45708,45710,45712,45714,45716,45718,45720,45722,45724,45726,45728,45730,45732,45734,45736,45738],{"class":639,"line":778},[637,45691,781],{"class":642},[637,45693,9971],{"class":646},[637,45695,813],{"class":642},[637,45697,9976],{"class":650},[637,45699,657],{"class":642},[637,45701,660],{"class":642},[637,45703,3900],{"class":823},[637,45705,660],{"class":642},[637,45707,813],{"class":642},[637,45709,10182],{"class":650},[637,45711,657],{"class":642},[637,45713,660],{"class":642},[637,45715,1498],{"class":642},[637,45717,969],{"class":823},[637,45719,1503],{"class":642},[637,45721,4120],{"class":823},[637,45723,1513],{"class":642},[637,45725,660],{"class":642},[637,45727,813],{"class":642},[637,45729,43029],{"class":650},[637,45731,657],{"class":642},[637,45733,660],{"class":642},[637,45735,11364],{"class":823},[637,45737,660],{"class":642},[637,45739,669],{"class":642},[637,45741,45742,45744,45746,45748,45750,45752,45754,45756,45758,45760],{"class":639,"line":790},[637,45743,857],{"class":642},[637,45745,37913],{"class":646},[637,45747,17230],{"class":650},[637,45749,813],{"class":642},[637,45751,816],{"class":650},[637,45753,657],{"class":642},[637,45755,660],{"class":642},[637,45757,28672],{"class":823},[637,45759,660],{"class":642},[637,45761,669],{"class":642},[637,45763,45764,45766,45768,45770,45772,45774,45776,45778],{"class":639,"line":800},[637,45765,868],{"class":642},[637,45767,2770],{"class":646},[637,45769,2773],{"class":650},[637,45771,657],{"class":642},[637,45773,660],{"class":642},[637,45775,14044],{"class":663},[637,45777,660],{"class":642},[637,45779,787],{"class":642},[637,45781,45782,45784,45786],{"class":639,"line":805},[637,45783,889],{"class":642},[637,45785,37913],{"class":646},[637,45787,669],{"class":642},[637,45789,45790,45792,45794],{"class":639,"line":831},[637,45791,899],{"class":642},[637,45793,9971],{"class":646},[637,45795,669],{"class":642},[637,45797,45798,45800,45802,45804,45806,45808,45810,45812,45814,45816,45818,45820,45822,45824,45826,45828,45830,45832,45834,45836,45838,45840,45842,45844,45846,45848],{"class":639,"line":631},[637,45799,781],{"class":642},[637,45801,261],{"class":646},[637,45803,813],{"class":642},[637,45805,1491],{"class":650},[637,45807,657],{"class":642},[637,45809,660],{"class":642},[637,45811,1498],{"class":642},[637,45813,969],{"class":823},[637,45815,10090],{"class":642},[637,45817,824],{"class":823},[637,45819,1503],{"class":642},[637,45821,969],{"class":823},[637,45823,1513],{"class":642},[637,45825,660],{"class":642},[637,45827,45317],{"class":650},[637,45829,813],{"class":642},[637,45831,2021],{"class":650},[637,45833,657],{"class":642},[637,45835,660],{"class":642},[637,45837,1498],{"class":642},[637,45839,1510],{"class":823},[637,45841,1503],{"class":642},[637,45843,1510],{"class":823},[637,45845,1513],{"class":642},[637,45847,660],{"class":642},[637,45849,669],{"class":642},[637,45851,45852,45854,45856],{"class":639,"line":854},[637,45853,857],{"class":642},[637,45855,2770],{"class":646},[637,45857,787],{"class":642},[637,45859,45860,45862,45864],{"class":639,"line":865},[637,45861,899],{"class":642},[637,45863,261],{"class":646},[637,45865,669],{"class":642},[637,45867,45868,45870,45872,45874,45876,45878,45880,45882,45884,45886,45888,45890,45892,45894,45896,45898],{"class":639,"line":876},[637,45869,781],{"class":642},[637,45871,10031],{"class":646},[637,45873,17230],{"class":650},[637,45875,813],{"class":642},[637,45877,1491],{"class":650},[637,45879,657],{"class":642},[637,45881,660],{"class":642},[637,45883,1498],{"class":642},[637,45885,969],{"class":823},[637,45887,1503],{"class":642},[637,45889,2729],{"class":823},[637,45891,1503],{"class":642},[637,45893,969],{"class":823},[637,45895,1513],{"class":642},[637,45897,660],{"class":642},[637,45899,787],{"class":642},[637,45901,45902,45904,45906,45908,45910,45912,45914,45916,45918],{"class":639,"line":886},[637,45903,781],{"class":642},[637,45905,10010],{"class":646},[637,45907,813],{"class":642},[637,45909,1918],{"class":650},[637,45911,657],{"class":642},[637,45913,660],{"class":642},[637,45915,1545],{"class":823},[637,45917,660],{"class":642},[637,45919,787],{"class":642},[637,45921,45923,45925,45928],{"class":45922,"line":632},[639,673],[637,45924,781],{"class":642},[637,45926,45927],{"class":646},"SoftShadows",[637,45929,787],{"class":642},[637,45931,45932,45934,45936],{"class":639,"line":906},[637,45933,909],{"class":642},[637,45935,761],{"class":646},[637,45937,669],{"class":642},[637,45939,45940,45942,45944],{"class":639,"line":916},[637,45941,732],{"class":642},[637,45943,750],{"class":646},[637,45945,669],{"class":642},[504,45947,926],{"id":925},[931,45949,45950,45960],{},[934,45951,45952],{},[937,45953,45954,45956,45958],{},[940,45955,8360],{"align":1001},[940,45957,945],{"align":1001},[940,45959,948],{},[950,45961,45962,45973,45984],{},[937,45963,45964,45966,45969],{},[955,45965,17604],{"align":1001},[955,45967,45968],{"align":1001},"Size of the light source (the larger the softer the light)",[955,45970,45971],{},[618,45972,34170],{},[937,45974,45975,45977,45980],{},[955,45976,31250],{"align":1001},[955,45978,45979],{"align":1001},"Number of samples (more samples less noise but more expensive)",[955,45981,45982],{},[618,45983,1510],{},[937,45985,45986,45989,45992],{},[955,45987,45988],{"align":1001},"focus",[955,45990,45991],{"align":1001},"Depth focus, use it to shift the focal point (where the shadow is the sharpest)",[955,45993,45994,45996],{},[618,45995,969],{}," (the beginning)",[1331,45998,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":46000},[46001,46002],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Injects percent closer soft shadows (PCSS) into THREE's shader chunk.",{},{"title":365,"description":46003},"Jcog66jVOp0ZbwScDyRmLoOj7ZJPGe-FsPG7UiW8n8I",[46008,47194,47785,48080,48433,49041,50086,50501,50912,52821,53517],{"id":46009,"title":375,"body":46010,"description":47190,"extension":591,"links":592,"meta":47191,"navigation":594,"path":376,"seo":47192,"stem":377,"__hash__":47193},"docs\u002F2.api\u002F8.staging\u002F1.environment.md",{"type":501,"value":46011,"toc":47177},[46012,46017,46027,46033,46035,46252,46259,46285,46290,46294,46301,46498,46502,46508,46531,46535,46553,46589,46602,46616,46632,46665,46669,46672,46799,46803,46809,46915,46920,46931,46933,47165,47168,47174],[608,46013,46014],{},[46015,46016],"staging-environment",{},[614,46018,46019,46020,46023,46024,1150],{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[618,46021,46022],{},"scene.environment",", and optionally ",[618,46025,46026],{},"scene.background",[614,46028,46029,46030,46032],{},"It uses the composable ",[1144,46031,379],{"href":380}," under the hood to load the cubemap.",[504,46034,15],{"id":624},[626,46036,46038],{"className":628,"code":46037,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Environment } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CEnvironment\n :files=\"[\n '\u002Fpx.jpg',\n '\u002Fnx.jpg',\n '\u002Fpy.jpg',\n '\u002Fny.jpg',\n '\u002Fpz.jpg',\n '\u002Fnz.jpg',\n ]\"\n \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,46039,46040,46060,46078,46096,46104,46108,46116,46124,46132,46138,46150,46162,46173,46184,46195,46206,46217,46224,46228,46236,46244],{"__ignoreMap":576},[637,46041,46042,46044,46046,46048,46050,46052,46054,46056,46058],{"class":639,"line":577},[637,46043,643],{"class":642},[637,46045,647],{"class":646},[637,46047,651],{"class":650},[637,46049,654],{"class":650},[637,46051,657],{"class":642},[637,46053,660],{"class":642},[637,46055,664],{"class":663},[637,46057,660],{"class":642},[637,46059,669],{"class":642},[637,46061,46062,46064,46066,46068,46070,46072,46074,46076],{"class":639,"line":578},[637,46063,677],{"class":676},[637,46065,680],{"class":642},[637,46067,715],{"class":683},[637,46069,693],{"class":642},[637,46071,696],{"class":676},[637,46073,699],{"class":642},[637,46075,724],{"class":663},[637,46077,705],{"class":642},[637,46079,46080,46082,46084,46086,46088,46090,46092,46094],{"class":639,"line":708},[637,46081,677],{"class":676},[637,46083,680],{"class":642},[637,46085,21984],{"class":683},[637,46087,693],{"class":642},[637,46089,696],{"class":676},[637,46091,699],{"class":642},[637,46093,702],{"class":663},[637,46095,705],{"class":642},[637,46097,46098,46100,46102],{"class":639,"line":729},[637,46099,732],{"class":642},[637,46101,647],{"class":646},[637,46103,669],{"class":642},[637,46105,46106],{"class":639,"line":739},[637,46107,742],{"emptyLinePlaceholder":594},[637,46109,46110,46112,46114],{"class":639,"line":745},[637,46111,643],{"class":642},[637,46113,750],{"class":646},[637,46115,669],{"class":642},[637,46117,46118,46120,46122],{"class":639,"line":755},[637,46119,758],{"class":642},[637,46121,761],{"class":646},[637,46123,669],{"class":642},[637,46125,46126,46128,46130],{"class":639,"line":778},[637,46127,781],{"class":642},[637,46129,22688],{"class":646},[637,46131,669],{"class":642},[637,46133,46134,46136],{"class":639,"line":790},[637,46135,857],{"class":642},[637,46137,26484],{"class":646},[637,46139,46140,46142,46144,46146,46148],{"class":639,"line":800},[637,46141,8241],{"class":642},[637,46143,26496],{"class":650},[637,46145,657],{"class":642},[637,46147,660],{"class":642},[637,46149,44301],{"class":642},[637,46151,46152,46155,46158,46160],{"class":639,"line":805},[637,46153,46154],{"class":642}," '",[637,46156,46157],{"class":663},"\u002Fpx.jpg",[637,46159,2512],{"class":642},[637,46161,2560],{"class":642},[637,46163,46164,46166,46169,46171],{"class":639,"line":831},[637,46165,46154],{"class":642},[637,46167,46168],{"class":663},"\u002Fnx.jpg",[637,46170,2512],{"class":642},[637,46172,2560],{"class":642},[637,46174,46175,46177,46180,46182],{"class":639,"line":631},[637,46176,46154],{"class":642},[637,46178,46179],{"class":663},"\u002Fpy.jpg",[637,46181,2512],{"class":642},[637,46183,2560],{"class":642},[637,46185,46186,46188,46191,46193],{"class":639,"line":854},[637,46187,46154],{"class":642},[637,46189,46190],{"class":663},"\u002Fny.jpg",[637,46192,2512],{"class":642},[637,46194,2560],{"class":642},[637,46196,46197,46199,46202,46204],{"class":639,"line":865},[637,46198,46154],{"class":642},[637,46200,46201],{"class":663},"\u002Fpz.jpg",[637,46203,2512],{"class":642},[637,46205,2560],{"class":642},[637,46207,46208,46210,46213,46215],{"class":639,"line":876},[637,46209,46154],{"class":642},[637,46211,46212],{"class":663},"\u002Fnz.jpg",[637,46214,2512],{"class":642},[637,46216,2560],{"class":642},[637,46218,46219,46222],{"class":639,"line":886},[637,46220,46221],{"class":642}," ]",[637,46223,3224],{"class":642},[637,46225,46226],{"class":639,"line":632},[637,46227,8295],{"class":642},[637,46229,46230,46232,46234],{"class":639,"line":906},[637,46231,899],{"class":642},[637,46233,22688],{"class":646},[637,46235,669],{"class":642},[637,46237,46238,46240,46242],{"class":639,"line":916},[637,46239,909],{"class":642},[637,46241,761],{"class":646},[637,46243,669],{"class":642},[637,46245,46246,46248,46250],{"class":639,"line":2695},[637,46247,732],{"class":642},[637,46249,750],{"class":646},[637,46251,669],{"class":642},[614,46253,46254,46255,46258],{},"You can also pass the ",[618,46256,46257],{},".hdr"," file directly:",[626,46260,46262],{"className":628,"code":46261,"language":633,"meta":576,"style":576},"\u003CSuspense>\n \u003CEnvironment files=\"\u002Fsunset.hdr\" \u002F>\n\u003C\u002FSuspense>\n",[618,46263,46264,46272,46277],{"__ignoreMap":576},[637,46265,46266,46268,46270],{"class":639,"line":577},[637,46267,643],{"class":642},[637,46269,22688],{"class":646},[637,46271,669],{"class":642},[637,46273,46274],{"class":639,"line":578},[637,46275,46276],{"class":683}," \u003CEnvironment files=\"\u002Fsunset.hdr\" \u002F>\n",[637,46278,46279,46281,46283],{"class":639,"line":708},[637,46280,732],{"class":642},[637,46282,22688],{"class":646},[637,46284,669],{"class":642},[614,46286,46287],{},[9760,46288],{"alt":375,"src":46289},"\u002Fcientos\u002Fenvmaps.png",[504,46291,46293],{"id":46292},"texture-reference","Texture reference",[614,46295,20696,46296,1712,46298,44060],{},[618,46297,6103],{},[618,46299,46300],{},"\u003CEnvironment \u002F>",[626,46302,46305],{"className":628,"code":46303,"highlights":46304,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Environment } from '@tresjs\u002Fcientos'\n\nconst environmentRef = shallowRef()\n\nwatch(environmentRef, texture => {\n console.log(texture)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CEnvironment ref=\"environmentRef\" \u002F>\n \u003CTresMesh>\n \u003CTresSphereGeometry \u002F>\n \u003CTresMeshStandardMaterial :env-map=\"envMap\" \u002F>\n \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n",[729,745,790,854,886],[618,46306,46307,46327,46345,46349,46363,46367,46383,46397,46403,46412,46416,46424,46443,46451,46460,46481,46489],{"__ignoreMap":576},[637,46308,46309,46311,46313,46315,46317,46319,46321,46323,46325],{"class":639,"line":577},[637,46310,643],{"class":642},[637,46312,647],{"class":646},[637,46314,651],{"class":650},[637,46316,654],{"class":650},[637,46318,657],{"class":642},[637,46320,660],{"class":642},[637,46322,664],{"class":663},[637,46324,660],{"class":642},[637,46326,669],{"class":642},[637,46328,46329,46331,46333,46335,46337,46339,46341,46343],{"class":639,"line":578},[637,46330,677],{"class":676},[637,46332,680],{"class":642},[637,46334,21984],{"class":683},[637,46336,693],{"class":642},[637,46338,696],{"class":676},[637,46340,699],{"class":642},[637,46342,702],{"class":663},[637,46344,705],{"class":642},[637,46346,46347],{"class":639,"line":708},[637,46348,742],{"emptyLinePlaceholder":594},[637,46350,46352,46354,46357,46359,46361],{"class":46351,"line":729},[639,673],[637,46353,2487],{"class":650},[637,46355,46356],{"class":683}," environmentRef ",[637,46358,657],{"class":642},[637,46360,3591],{"class":2506},[637,46362,6744],{"class":683},[637,46364,46365],{"class":639,"line":739},[637,46366,742],{"emptyLinePlaceholder":594},[637,46368,46370,46372,46375,46377,46379,46381],{"class":46369,"line":745},[639,673],[637,46371,12798],{"class":2506},[637,46373,46374],{"class":683},"(environmentRef",[637,46376,687],{"class":642},[637,46378,21068],{"class":7047},[637,46380,3770],{"class":650},[637,46382,1208],{"class":642},[637,46384,46385,46387,46389,46391,46393,46395],{"class":639,"line":755},[637,46386,7063],{"class":683},[637,46388,1150],{"class":642},[637,46390,7068],{"class":2506},[637,46392,2509],{"class":646},[637,46394,2801],{"class":683},[637,46396,2520],{"class":646},[637,46398,46399,46401],{"class":639,"line":778},[637,46400,2500],{"class":642},[637,46402,2520],{"class":683},[637,46404,46406,46408,46410],{"class":46405,"line":790},[639,673],[637,46407,732],{"class":642},[637,46409,647],{"class":646},[637,46411,669],{"class":642},[637,46413,46414],{"class":639,"line":800},[637,46415,742],{"emptyLinePlaceholder":594},[637,46417,46418,46420,46422],{"class":639,"line":805},[637,46419,643],{"class":642},[637,46421,750],{"class":646},[637,46423,669],{"class":642},[637,46425,46426,46428,46430,46432,46434,46436,46439,46441],{"class":639,"line":831},[637,46427,758],{"class":642},[637,46429,375],{"class":646},[637,46431,3999],{"class":650},[637,46433,657],{"class":642},[637,46435,660],{"class":642},[637,46437,46438],{"class":663},"environmentRef",[637,46440,660],{"class":642},[637,46442,787],{"class":642},[637,46444,46445,46447,46449],{"class":639,"line":631},[637,46446,758],{"class":642},[637,46448,860],{"class":646},[637,46450,669],{"class":642},[637,46452,46454,46456,46458],{"class":46453,"line":854},[639,673],[637,46455,781],{"class":642},[637,46457,4107],{"class":646},[637,46459,787],{"class":642},[637,46461,46462,46464,46466,46468,46471,46473,46475,46477,46479],{"class":639,"line":865},[637,46463,781],{"class":642},[637,46465,2770],{"class":646},[637,46467,813],{"class":642},[637,46469,46470],{"class":650},"env-map",[637,46472,657],{"class":642},[637,46474,660],{"class":642},[637,46476,31301],{"class":683},[637,46478,660],{"class":642},[637,46480,787],{"class":642},[637,46482,46483,46485,46487],{"class":639,"line":876},[637,46484,909],{"class":642},[637,46486,860],{"class":646},[637,46488,669],{"class":642},[637,46490,46492,46494,46496],{"class":46491,"line":886},[639,673],[637,46493,732],{"class":642},[637,46495,750],{"class":646},[637,46497,669],{"class":642},[504,46499,46501],{"id":46500},"presets","Presets",[614,46503,46504,46505,2100],{},"You can use one of the available presets by passing the ",[618,46506,46507],{},"preset",[626,46509,46511],{"className":628,"code":46510,"language":633,"meta":576,"style":576},"\u003CEnvironment preset=\"city\" \u002F>\n",[618,46512,46513],{"__ignoreMap":576},[637,46514,46515,46517,46519,46521,46523,46525,46527,46529],{"class":639,"line":577},[637,46516,643],{"class":642},[637,46518,375],{"class":646},[637,46520,22700],{"class":650},[637,46522,657],{"class":642},[637,46524,660],{"class":642},[637,46526,30712],{"class":663},[637,46528,660],{"class":642},[637,46530,787],{"class":642},[4215,46532,46534],{"id":46533},"preset-quality","Preset quality",[614,46536,46537,46538,46545,46546,46549,46550,2100],{},"Presets are served from the ",[1144,46539,46542],{"href":46540,"rel":46541},"https:\u002F\u002Fgithub.com\u002FTresjs\u002Fassets\u002Ftree\u002Fmain\u002Ftextures\u002Fhdr",[1148],[618,46543,46544],{},"Tresjs\u002Fassets"," CDN at ",[1705,46547,46548],{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[618,46551,46552],{},"quality",[626,46554,46556],{"className":628,"code":46555,"language":633,"meta":576,"style":576},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" \u002F>\n",[618,46557,46558],{"__ignoreMap":576},[637,46559,46560,46562,46564,46566,46568,46570,46573,46575,46578,46580,46582,46585,46587],{"class":639,"line":577},[637,46561,643],{"class":642},[637,46563,375],{"class":646},[637,46565,22700],{"class":650},[637,46567,657],{"class":642},[637,46569,660],{"class":642},[637,46571,46572],{"class":663},"sunset",[637,46574,660],{"class":642},[637,46576,46577],{"class":650}," quality",[637,46579,657],{"class":642},[637,46581,660],{"class":642},[637,46583,46584],{"class":663},"4k",[637,46586,660],{"class":642},[637,46588,787],{"class":642},[614,46590,46591,46592,46595,46596,1503,46599,1150],{},"Available tiers: ",[618,46593,46594],{},"'1k'"," (default), ",[618,46597,46598],{},"'2k'",[618,46600,46601],{},"'4k'",[25940,46603,46604],{},[614,46605,46606,46607,46610,46611,3429,46613,46615],{},"Higher tiers are significantly larger: ",[1705,46608,46609],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[618,46612,46598],{},[618,46614,46601],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[614,46617,2867,46618,46620,46621,46623,46624,3429,46626,46628,46629,46631],{},[618,46619,46552],{}," prop only applies when ",[618,46622,46507],{}," is set — it is ignored when loading via ",[618,46625,26496],{},[618,46627,18978],{},". An unsupported value falls back to ",[618,46630,46594],{}," with a console warning.",[25940,46633,46634],{},[614,46635,46636,46645,46646,46648,46649,46652,46653,46655,46656,46658,46659,46661,46662,46664],{},[1705,46637,46638,46640,46641,46644],{},[618,46639,46552],{}," has no visible effect when you pass ",[1144,46642,46643],{"href":384},"Lightformers"," (or any children)."," With children present, ",[618,46647,29654],{}," bakes the environment and background into a ",[618,46650,46651],{},"WebGLCubeRenderTarget"," sized by the ",[618,46654,29480],{}," prop (default ",[618,46657,30261],{},"), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[618,46660,46552],{},". For a sharp high-res background, either omit the children or raise ",[618,46663,29480],{}," (a cube big enough to match 4K is expensive to render each frame).",[504,46666,46668],{"id":46667},"environment-rotation","Environment Rotation",[614,46670,46671],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[626,46673,46675],{"className":628,"code":46674,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CEnvironment\n preset=\"sunset\"\n :background=\"true\"\n :background-rotation=\"[0, Math.PI \u002F 2, 0]\"\n :environment-rotation=\"[0, Math.PI \u002F 4, 0]\"\n \u002F>\n\u003C\u002Ftemplate>\n",[618,46676,46677,46685,46691,46704,46718,46753,46787,46791],{"__ignoreMap":576},[637,46678,46679,46681,46683],{"class":639,"line":577},[637,46680,643],{"class":642},[637,46682,750],{"class":646},[637,46684,669],{"class":642},[637,46686,46687,46689],{"class":639,"line":578},[637,46688,758],{"class":642},[637,46690,26484],{"class":646},[637,46692,46693,46696,46698,46700,46702],{"class":639,"line":708},[637,46694,46695],{"class":650}," preset",[637,46697,657],{"class":642},[637,46699,660],{"class":642},[637,46701,46572],{"class":663},[637,46703,3224],{"class":642},[637,46705,46706,46708,46710,46712,46714,46716],{"class":639,"line":729},[637,46707,5353],{"class":642},[637,46709,31212],{"class":650},[637,46711,657],{"class":642},[637,46713,660],{"class":642},[637,46715,965],{"class":4560},[637,46717,3224],{"class":642},[637,46719,46720,46722,46725,46727,46729,46731,46733,46735,46737,46739,46741,46743,46745,46747,46749,46751],{"class":639,"line":739},[637,46721,5353],{"class":642},[637,46723,46724],{"class":650},"background-rotation",[637,46726,657],{"class":642},[637,46728,660],{"class":642},[637,46730,1498],{"class":642},[637,46732,969],{"class":823},[637,46734,1503],{"class":642},[637,46736,29913],{"class":683},[637,46738,1150],{"class":642},[637,46740,29918],{"class":683},[637,46742,3429],{"class":642},[637,46744,824],{"class":823},[637,46746,1503],{"class":642},[637,46748,969],{"class":823},[637,46750,1513],{"class":642},[637,46752,3224],{"class":642},[637,46754,46755,46757,46759,46761,46763,46765,46767,46769,46771,46773,46775,46777,46779,46781,46783,46785],{"class":639,"line":745},[637,46756,5353],{"class":642},[637,46758,46667],{"class":650},[637,46760,657],{"class":642},[637,46762,660],{"class":642},[637,46764,1498],{"class":642},[637,46766,969],{"class":823},[637,46768,1503],{"class":642},[637,46770,29913],{"class":683},[637,46772,1150],{"class":642},[637,46774,29918],{"class":683},[637,46776,3429],{"class":642},[637,46778,3900],{"class":823},[637,46780,1503],{"class":642},[637,46782,969],{"class":823},[637,46784,1513],{"class":642},[637,46786,3224],{"class":642},[637,46788,46789],{"class":639,"line":755},[637,46790,14760],{"class":642},[637,46792,46793,46795,46797],{"class":639,"line":778},[637,46794,732],{"class":642},[637,46796,750],{"class":646},[637,46798,669],{"class":642},[4215,46800,46802],{"id":46801},"syncing-rotations","Syncing Rotations",[614,46804,46805,46806,2100],{},"You can sync the environment rotation with the background rotation using the ",[618,46807,46808],{},"syncMaterials",[626,46810,46812],{"className":628,"code":46811,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CEnvironment\n preset=\"sunset\"\n :background=\"true\"\n :sync-materials=\"true\"\n :background-rotation=\"[0, Math.PI \u002F 2, 0]\"\n \u002F>\n\u003C\u002Ftemplate>\n",[618,46813,46814,46822,46828,46840,46854,46869,46903,46907],{"__ignoreMap":576},[637,46815,46816,46818,46820],{"class":639,"line":577},[637,46817,643],{"class":642},[637,46819,750],{"class":646},[637,46821,669],{"class":642},[637,46823,46824,46826],{"class":639,"line":578},[637,46825,758],{"class":642},[637,46827,26484],{"class":646},[637,46829,46830,46832,46834,46836,46838],{"class":639,"line":708},[637,46831,46695],{"class":650},[637,46833,657],{"class":642},[637,46835,660],{"class":642},[637,46837,46572],{"class":663},[637,46839,3224],{"class":642},[637,46841,46842,46844,46846,46848,46850,46852],{"class":639,"line":729},[637,46843,5353],{"class":642},[637,46845,31212],{"class":650},[637,46847,657],{"class":642},[637,46849,660],{"class":642},[637,46851,965],{"class":4560},[637,46853,3224],{"class":642},[637,46855,46856,46858,46861,46863,46865,46867],{"class":639,"line":739},[637,46857,5353],{"class":642},[637,46859,46860],{"class":650},"sync-materials",[637,46862,657],{"class":642},[637,46864,660],{"class":642},[637,46866,965],{"class":4560},[637,46868,3224],{"class":642},[637,46870,46871,46873,46875,46877,46879,46881,46883,46885,46887,46889,46891,46893,46895,46897,46899,46901],{"class":639,"line":745},[637,46872,5353],{"class":642},[637,46874,46724],{"class":650},[637,46876,657],{"class":642},[637,46878,660],{"class":642},[637,46880,1498],{"class":642},[637,46882,969],{"class":823},[637,46884,1503],{"class":642},[637,46886,29913],{"class":683},[637,46888,1150],{"class":642},[637,46890,29918],{"class":683},[637,46892,3429],{"class":642},[637,46894,824],{"class":823},[637,46896,1503],{"class":642},[637,46898,969],{"class":823},[637,46900,1513],{"class":642},[637,46902,3224],{"class":642},[637,46904,46905],{"class":639,"line":755},[637,46906,14760],{"class":642},[637,46908,46909,46911,46913],{"class":639,"line":778},[637,46910,732],{"class":642},[637,46912,750],{"class":646},[637,46914,669],{"class":642},[614,46916,4463,46917,46919],{},[618,46918,46808],{}," is enabled:",[2285,46921,46922,46925,46928],{},[2288,46923,46924],{},"The environment rotation will automatically match the background rotation",[2288,46926,46927],{},"All materials in the scene will update to reflect the new rotation",[2288,46929,46930],{},"This ensures visual consistency between the background and environment reflections",[504,46932,926],{"id":925},[931,46934,46935,46945],{},[934,46936,46937],{},[937,46938,46939,46941,46943],{},[940,46940,942],{"align":1001},[940,46942,945],{"align":1001},[940,46944,948],{},[950,46946,46947,46960,46973,46993,47008,47019,47032,47057,47068,47079,47090,47101,47113,47125,47140,47154],{},[937,46948,46949,46953,46956],{},[955,46950,46951],{"align":1001},[618,46952,26496],{},[955,46954,46955],{"align":1001},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[955,46957,46958],{},[618,46959,1183],{},[937,46961,46962,46966,46969],{},[955,46963,46964],{"align":1001},[618,46965,18978],{},[955,46967,46968],{"align":1001},"Path to the environment map files",[955,46970,46971],{},[618,46972,1183],{},[937,46974,46975,46980,46983],{},[955,46976,46977],{"align":1001},[618,46978,46979],{},"encoding",[955,46981,46982],{"align":1001},"Encoding of the environment map",[955,46984,46985,46988,46989,46992],{},[618,46986,46987],{},"SRGBColorSpace"," for array files, ",[618,46990,46991],{},"LinearEncoding"," for single texture",[937,46994,46995,46999,47004],{},[955,46996,46997],{"align":1001},[618,46998,31212],{},[955,47000,962,47001,47003],{"align":1001},[618,47002,965],{},", the environment map will be used as the scene background",[955,47005,47006],{},[618,47007,975],{},[937,47009,47010,47014,47017],{},[955,47011,47012],{"align":1001},[618,47013,22717],{},[955,47015,47016],{"align":1001},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[955,47018,969],{},[937,47020,47021,47025,47028],{},[955,47022,47023],{"align":1001},[618,47024,46507],{},[955,47026,47027],{"align":1001},"Preset environment map",[955,47029,47030],{},[618,47031,1183],{},[937,47033,47034,47038,47053],{},[955,47035,47036],{"align":1001},[618,47037,46552],{},[955,47039,47040,47041,14804,47044,14804,47047,47049,47050,47052],{"align":1001},"Resolution variant of the preset HDR (",[618,47042,47043],{},"1k",[618,47045,47046],{},"2k",[618,47048,46584],{},"). Only applies when ",[618,47051,46507],{}," is set",[955,47054,47055],{},[618,47056,47043],{},[937,47058,47059,47063,47066],{},[955,47060,47061],{"align":1001},[618,47062,29480],{},[955,47064,47065],{"align":1001},"The resolution of the WebGLCubeRenderTarget",[955,47067,30261],{},[937,47069,47070,47074,47077],{},[955,47071,47072],{"align":1001},[618,47073,45507],{},[955,47075,47076],{"align":1001},"The near of the CubeCamera",[955,47078,1925],{},[937,47080,47081,47085,47088],{},[955,47082,47083],{"align":1001},[618,47084,43267],{},[955,47086,47087],{"align":1001},"The far of the CubeCamera",[955,47089,9586],{},[937,47091,47092,47096,47099],{},[955,47093,47094],{"align":1001},[618,47095,41626],{},[955,47097,47098],{"align":1001},"The frames of the cubeCamera.update",[955,47100,14244],{},[937,47102,47103,47108,47111],{},[955,47104,47105],{"align":1001},[618,47106,47107],{},"backgroundIntensity",[955,47109,47110],{"align":1001},"Intensity of the background",[955,47112,1925],{},[937,47114,47115,47120,47123],{},[955,47116,47117],{"align":1001},[618,47118,47119],{},"environmentIntensity",[955,47121,47122],{"align":1001},"Intensity of the environment",[955,47124,1925],{},[937,47126,47127,47132,47135],{},[955,47128,47129],{"align":1001},[618,47130,47131],{},"backgroundRotation",[955,47133,47134],{"align":1001},"Rotation of the background (in radians)",[955,47136,47137],{},[637,47138,47139],{},"0, 0, 0",[937,47141,47142,47147,47150],{},[955,47143,47144],{"align":1001},[618,47145,47146],{},"environmentRotation",[955,47148,47149],{"align":1001},"Rotation of the environment (in radians)",[955,47151,47152],{},[637,47153,47139],{},[937,47155,47156,47160,47163],{},[955,47157,47158],{"align":1001},[618,47159,46808],{},[955,47161,47162],{"align":1001},"If true, environment rotation will sync with background rotation",[955,47164,975],{},[4215,47166,46501],{"id":47167},"presets-1",[626,47169,47172],{"className":47170,"code":47171,"language":32048},[32046],"sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n",[618,47173,47171],{"__ignoreMap":576},[1331,47175,47176],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .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 .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}",{"title":576,"searchDepth":577,"depth":578,"links":47178},[47179,47180,47181,47184,47187],{"id":624,"depth":578,"text":15},{"id":46292,"depth":578,"text":46293},{"id":46500,"depth":578,"text":46501,"children":47182},[47183],{"id":46533,"depth":708,"text":46534},{"id":46667,"depth":578,"text":46668,"children":47185},[47186],{"id":46801,"depth":708,"text":46802},{"id":925,"depth":578,"text":926,"children":47188},[47189],{"id":47167,"depth":708,"text":46501},"Automatically sets up a global cubemap for scene environment and background.",{},{"title":375,"description":47190},"qFwBC0gwpmIRV8fAkWJdOJik9gNGfs8Ly3nKoM30G4U",{"id":47195,"title":379,"body":47196,"description":47781,"extension":591,"links":592,"meta":47782,"navigation":594,"path":380,"seo":47783,"stem":381,"__hash__":47784},"docs\u002F2.api\u002F8.staging\u002F2.use-environment.md",{"type":501,"value":47197,"toc":47777},[47198,47202,47211,47220,47222,47227,47429,47434,47467,47472,47556,47558,47774],[2367,47199,47200],{},[46015,47201],{},[614,47203,47204,47206,47207,46023,47209,1150],{},[618,47205,379],{}," composable that automatically sets up a global cubemap, which affects the default ",[618,47208,46022],{},[618,47210,46026],{},[614,47212,47213,47214,47219],{},"It uses the ",[1144,47215,47218],{"href":47216,"rel":47217},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Floaders\u002FCubeTextureLoader",[1148],"CubeTextureLoader"," to load the cubemap",[504,47221,15],{"id":624},[3292,47223,47224],{},[614,47225,47226],{},"UseEnvironment needs to be wrapped by a Suspense component",[626,47228,47230],{"className":628,"code":47229,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useEnvironment } from '@tresjs\u002Fcientos'\nimport { SRGBColorSpace } from 'three'\n\nconst texture = await useEnvironment({\n files: [\n '\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fpx.jpg',\n '\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fnx.jpg',\n '\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fpy.jpg',\n '\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fny.jpg',\n '\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fpz.jpg',\n '\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fnz.jpg',\n ],\n path: '',\n encoding: SRGBColorSpace,\n})\n\u003C\u002Fscript>\n",[618,47231,47232,47252,47271,47290,47294,47310,47319,47331,47342,47353,47364,47375,47386,47392,47404,47415,47421],{"__ignoreMap":576},[637,47233,47234,47236,47238,47240,47242,47244,47246,47248,47250],{"class":639,"line":577},[637,47235,643],{"class":642},[637,47237,647],{"class":646},[637,47239,651],{"class":650},[637,47241,654],{"class":650},[637,47243,657],{"class":642},[637,47245,660],{"class":642},[637,47247,664],{"class":663},[637,47249,660],{"class":642},[637,47251,669],{"class":642},[637,47253,47254,47256,47258,47261,47263,47265,47267,47269],{"class":639,"line":578},[637,47255,677],{"class":676},[637,47257,680],{"class":642},[637,47259,47260],{"class":683}," useEnvironment",[637,47262,693],{"class":642},[637,47264,696],{"class":676},[637,47266,699],{"class":642},[637,47268,702],{"class":663},[637,47270,705],{"class":642},[637,47272,47273,47275,47277,47280,47282,47284,47286,47288],{"class":639,"line":708},[637,47274,677],{"class":676},[637,47276,680],{"class":642},[637,47278,47279],{"class":683}," SRGBColorSpace",[637,47281,693],{"class":642},[637,47283,696],{"class":676},[637,47285,699],{"class":642},[637,47287,4799],{"class":663},[637,47289,705],{"class":642},[637,47291,47292],{"class":639,"line":729},[637,47293,742],{"emptyLinePlaceholder":594},[637,47295,47296,47298,47300,47302,47304,47306,47308],{"class":639,"line":739},[637,47297,2487],{"class":650},[637,47299,2497],{"class":683},[637,47301,657],{"class":642},[637,47303,26222],{"class":676},[637,47305,47260],{"class":2506},[637,47307,2509],{"class":683},[637,47309,3353],{"class":642},[637,47311,47312,47315,47317],{"class":639,"line":745},[637,47313,47314],{"class":646}," files",[637,47316,1222],{"class":642},[637,47318,21719],{"class":683},[637,47320,47321,47324,47327,47329],{"class":639,"line":755},[637,47322,47323],{"class":642}," '",[637,47325,47326],{"class":663},"\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fpx.jpg",[637,47328,2512],{"class":642},[637,47330,2560],{"class":642},[637,47332,47333,47335,47338,47340],{"class":639,"line":778},[637,47334,47323],{"class":642},[637,47336,47337],{"class":663},"\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fnx.jpg",[637,47339,2512],{"class":642},[637,47341,2560],{"class":642},[637,47343,47344,47346,47349,47351],{"class":639,"line":790},[637,47345,47323],{"class":642},[637,47347,47348],{"class":663},"\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fpy.jpg",[637,47350,2512],{"class":642},[637,47352,2560],{"class":642},[637,47354,47355,47357,47360,47362],{"class":639,"line":800},[637,47356,47323],{"class":642},[637,47358,47359],{"class":663},"\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fny.jpg",[637,47361,2512],{"class":642},[637,47363,2560],{"class":642},[637,47365,47366,47368,47371,47373],{"class":639,"line":805},[637,47367,47323],{"class":642},[637,47369,47370],{"class":663},"\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fpz.jpg",[637,47372,2512],{"class":642},[637,47374,2560],{"class":642},[637,47376,47377,47379,47382,47384],{"class":639,"line":831},[637,47378,47323],{"class":642},[637,47380,47381],{"class":663},"\u002Ftextures\u002FenvironmentMaps\u002F0\u002Fnz.jpg",[637,47383,2512],{"class":642},[637,47385,2560],{"class":642},[637,47387,47388,47390],{"class":639,"line":631},[637,47389,44358],{"class":683},[637,47391,2560],{"class":642},[637,47393,47394,47397,47399,47402],{"class":639,"line":854},[637,47395,47396],{"class":646}," path",[637,47398,1222],{"class":642},[637,47400,47401],{"class":642}," ''",[637,47403,2560],{"class":642},[637,47405,47406,47409,47411,47413],{"class":639,"line":865},[637,47407,47408],{"class":646}," encoding",[637,47410,1222],{"class":642},[637,47412,47279],{"class":683},[637,47414,2560],{"class":642},[637,47416,47417,47419],{"class":639,"line":876},[637,47418,2500],{"class":642},[637,47420,2520],{"class":683},[637,47422,47423,47425,47427],{"class":639,"line":886},[637,47424,732],{"class":642},[637,47426,647],{"class":646},[637,47428,669],{"class":642},[614,47430,26229,47431,47433],{},[618,47432,2801],{}," in your scene:",[626,47435,47438],{"className":628,"code":47436,"highlights":47437,"language":633,"meta":576,"style":576},"\u003CTresMesh>\n \u003CTresSphereGeometry \u002F>\n \u003CTresMeshStandardMaterial :map=\"texture\" \u002F>\n\u003C\u002FTresMesh>\n",[708],[618,47439,47440,47448,47453,47459],{"__ignoreMap":576},[637,47441,47442,47444,47446],{"class":639,"line":577},[637,47443,643],{"class":642},[637,47445,860],{"class":646},[637,47447,669],{"class":642},[637,47449,47450],{"class":639,"line":578},[637,47451,47452],{"class":683}," \u003CTresSphereGeometry \u002F>\n",[637,47454,47456],{"class":47455,"line":708},[639,673],[637,47457,47458],{"class":683}," \u003CTresMeshStandardMaterial :map=\"texture\" \u002F>\n",[637,47460,47461,47463,47465],{"class":639,"line":729},[637,47462,732],{"class":642},[637,47464,860],{"class":646},[637,47466,669],{"class":642},[614,47468,46254,47469,47471],{},[618,47470,46257],{}," file directly",[626,47473,47475],{"className":1190,"code":47474,"language":664,"meta":576,"style":576},"import { useEnvironment } from '@tresjs\u002Fcientos'\n\nconst texture = await useEnvironment({\n files: '\u002Fsunset.hdr',\n path: '',\n encoding: SRGBColorSpace,\n})\n",[618,47476,47477,47495,47499,47515,47530,47540,47550],{"__ignoreMap":576},[637,47478,47479,47481,47483,47485,47487,47489,47491,47493],{"class":639,"line":577},[637,47480,677],{"class":676},[637,47482,680],{"class":642},[637,47484,47260],{"class":683},[637,47486,693],{"class":642},[637,47488,696],{"class":676},[637,47490,699],{"class":642},[637,47492,702],{"class":663},[637,47494,705],{"class":642},[637,47496,47497],{"class":639,"line":578},[637,47498,742],{"emptyLinePlaceholder":594},[637,47500,47501,47503,47505,47507,47509,47511,47513],{"class":639,"line":708},[637,47502,2487],{"class":650},[637,47504,2497],{"class":683},[637,47506,657],{"class":642},[637,47508,26222],{"class":676},[637,47510,47260],{"class":2506},[637,47512,2509],{"class":683},[637,47514,3353],{"class":642},[637,47516,47517,47519,47521,47523,47526,47528],{"class":639,"line":729},[637,47518,47314],{"class":646},[637,47520,1222],{"class":642},[637,47522,699],{"class":642},[637,47524,47525],{"class":663},"\u002Fsunset.hdr",[637,47527,2512],{"class":642},[637,47529,2560],{"class":642},[637,47531,47532,47534,47536,47538],{"class":639,"line":739},[637,47533,47396],{"class":646},[637,47535,1222],{"class":642},[637,47537,47401],{"class":642},[637,47539,2560],{"class":642},[637,47541,47542,47544,47546,47548],{"class":639,"line":745},[637,47543,47408],{"class":646},[637,47545,1222],{"class":642},[637,47547,47279],{"class":683},[637,47549,2560],{"class":642},[637,47551,47552,47554],{"class":639,"line":755},[637,47553,2500],{"class":642},[637,47555,2520],{"class":683},[504,47557,14787],{"id":18439},[931,47559,47560,47572],{},[934,47561,47562],{},[937,47563,47564,47566,47568,47570],{},[940,47565,8360],{"align":1001},[940,47567,6178],{},[940,47569,948],{},[940,47571,945],{},[950,47573,47574,47591,47608,47630,47649,47666,47683,47704,47721,47738,47757],{},[937,47575,47576,47580,47584,47588],{},[955,47577,47578],{"align":1001},[1705,47579,26496],{},[955,47581,47582],{},[618,47583,26613],{},[955,47585,47586],{},[618,47587,1183],{},[955,47589,47590],{},"Array of 6 urls to images, one for each side of the CubeTexture. or and HDR",[937,47592,47593,47597,47601,47605],{},[955,47594,47595],{"align":1001},[1705,47596,18978],{},[955,47598,47599],{},[618,47600,18466],{},[955,47602,47603],{},[618,47604,975],{},[955,47606,47607],{},"Path to the environment map files.",[937,47609,47610,47614,47619,47627],{},[955,47611,47612],{"align":1001},[1705,47613,46979],{},[955,47615,47616],{},[618,47617,47618],{},"Encoding",[955,47620,47621,47623,47624,47626],{},[618,47622,46987],{}," for an array of files and ",[618,47625,46991],{}," for a single texture",[955,47628,47629],{},"Encoding of the environment map.",[937,47631,47632,47636,47640,47644],{},[955,47633,47634],{"align":1001},[1705,47635,31212],{},[955,47637,47638],{},[618,47639,18466],{},[955,47641,47642],{},[618,47643,975],{},[955,47645,962,47646,47648],{},[618,47647,965],{}," the texture will be used as the scene background.",[937,47650,47651,47655,47659,47663],{},[955,47652,47653],{"align":1001},[1705,47654,22717],{},[955,47656,47657],{},[618,47658,5564],{},[955,47660,47661],{},[618,47662,969],{},[955,47664,47665],{},"Blur factor between 0 and 1. (only works with three 0.146 and up)",[937,47667,47668,47672,47676,47680],{},[955,47669,47670],{"align":1001},[1705,47671,46507],{},[955,47673,47674],{},[618,47675,3665],{},[955,47677,47678],{},[618,47679,1183],{},[955,47681,47682],{},"Preset environment map.",[937,47684,47685,47689,47694,47698],{},[955,47686,47687],{"align":1001},[1705,47688,46552],{},[955,47690,47691],{},[618,47692,47693],{},"'1k' | '2k' | '4k'",[955,47695,47696],{},[618,47697,46594],{},[955,47699,47700,47701,47703],{},"Resolution variant of the preset HDR. Only applies when ",[618,47702,46507],{}," is set. 4K ≈ 30–60MB.",[937,47705,47706,47710,47714,47718],{},[955,47707,47708],{"align":1001},[1705,47709,47107],{},[955,47711,47712],{},[618,47713,5564],{},[955,47715,47716],{},[618,47717,1925],{},[955,47719,47720],{},"Intensity of the background.",[937,47722,47723,47727,47731,47735],{},[955,47724,47725],{"align":1001},[1705,47726,47119],{},[955,47728,47729],{},[618,47730,5564],{},[955,47732,47733],{},[618,47734,1925],{},[955,47736,47737],{},"Intensity of the environment.",[937,47739,47740,47744,47749,47754],{},[955,47741,47742],{"align":1001},[1705,47743,47131],{},[955,47745,47746],{},[618,47747,47748],{},"VectorFlexibleParams",[955,47750,47751],{},[618,47752,47753],{},"[0, 0, 0]",[955,47755,47756],{},"Rotation of the background.",[937,47758,47759,47763,47767,47771],{},[955,47760,47761],{"align":1001},[1705,47762,47146],{},[955,47764,47765],{},[618,47766,47748],{},[955,47768,47769],{},[618,47770,47753],{},[955,47772,47773],{},"Rotation of the environment.",[1331,47775,47776],{},"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);}",{"title":576,"searchDepth":577,"depth":578,"links":47778},[47779,47780],{"id":624,"depth":578,"text":15},{"id":18439,"depth":578,"text":14787},"Composable that sets up a global cubemap for scene environment and background.",{},{"title":379,"description":47781},"WFsmQOwv-yc23voKTzWwYBxnk1QVtMW5VaFbmbCf-8c",{"id":47786,"title":383,"body":47787,"description":48076,"extension":591,"links":592,"meta":48077,"navigation":594,"path":384,"seo":48078,"stem":385,"__hash__":48079},"docs\u002F2.api\u002F8.staging\u002F3.lightformer.md",{"type":501,"value":47788,"toc":48073},[47789,47794,47800,47994,47996,47999,48071],[608,47790,47791],{},[47792,47793],"staging-lightformer",{},[614,47795,47796,47797,47799],{},"You can incorporate ",[618,47798,383],{}," into the environment just like a slot.",[626,47801,47803],{"className":628,"code":47802,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { Enviroment, LightFormer } from '@tres\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CEnvironment>\n \u003CLightformer :intensity=\"0.75\" :position=\"[0, 5, -9]\" \u002F>\n \u003CLightformer from=\"ring\" :rotation-y=\"-Math.PI \u002F 2\" :scale=\"[10, 10, 1]\" \u002F>\n \u003C\u002FEnvironment>\n\u003C\u002Ftemplate>\n",[618,47804,47805,47815,47840,47848,47852,47860,47868,47912,47978,47986],{"__ignoreMap":576},[637,47806,47807,47809,47811,47813],{"class":639,"line":577},[637,47808,643],{"class":642},[637,47810,647],{"class":646},[637,47812,651],{"class":650},[637,47814,669],{"class":642},[637,47816,47817,47819,47821,47824,47826,47829,47831,47833,47835,47838],{"class":639,"line":578},[637,47818,677],{"class":676},[637,47820,680],{"class":642},[637,47822,47823],{"class":683}," Enviroment",[637,47825,687],{"class":642},[637,47827,47828],{"class":683}," LightFormer",[637,47830,693],{"class":642},[637,47832,696],{"class":676},[637,47834,699],{"class":642},[637,47836,47837],{"class":663},"@tres\u002Fcientos",[637,47839,705],{"class":642},[637,47841,47842,47844,47846],{"class":639,"line":708},[637,47843,732],{"class":642},[637,47845,647],{"class":646},[637,47847,669],{"class":642},[637,47849,47850],{"class":639,"line":729},[637,47851,742],{"emptyLinePlaceholder":594},[637,47853,47854,47856,47858],{"class":639,"line":739},[637,47855,643],{"class":642},[637,47857,750],{"class":646},[637,47859,669],{"class":642},[637,47861,47862,47864,47866],{"class":639,"line":745},[637,47863,758],{"class":642},[637,47865,375],{"class":646},[637,47867,669],{"class":642},[637,47869,47870,47872,47874,47876,47878,47880,47882,47884,47886,47888,47890,47892,47894,47896,47898,47900,47902,47904,47906,47908,47910],{"class":639,"line":755},[637,47871,781],{"class":642},[637,47873,383],{"class":646},[637,47875,813],{"class":642},[637,47877,1918],{"class":650},[637,47879,657],{"class":642},[637,47881,660],{"class":642},[637,47883,2621],{"class":823},[637,47885,660],{"class":642},[637,47887,813],{"class":642},[637,47889,1491],{"class":650},[637,47891,657],{"class":642},[637,47893,660],{"class":642},[637,47895,1498],{"class":642},[637,47897,969],{"class":823},[637,47899,1503],{"class":642},[637,47901,7666],{"class":823},[637,47903,10090],{"class":642},[637,47905,11364],{"class":823},[637,47907,1513],{"class":642},[637,47909,660],{"class":642},[637,47911,787],{"class":642},[637,47913,47914,47916,47918,47920,47922,47924,47927,47929,47931,47934,47936,47938,47940,47942,47944,47946,47948,47950,47952,47954,47956,47958,47960,47962,47964,47966,47968,47970,47972,47974,47976],{"class":639,"line":778},[637,47915,781],{"class":642},[637,47917,383],{"class":646},[637,47919,696],{"class":650},[637,47921,657],{"class":642},[637,47923,660],{"class":642},[637,47925,47926],{"class":663},"ring",[637,47928,660],{"class":642},[637,47930,813],{"class":642},[637,47932,47933],{"class":650},"rotation-y",[637,47935,657],{"class":642},[637,47937,660],{"class":642},[637,47939,8776],{"class":642},[637,47941,29913],{"class":683},[637,47943,1150],{"class":642},[637,47945,29918],{"class":683},[637,47947,3429],{"class":642},[637,47949,824],{"class":823},[637,47951,660],{"class":642},[637,47953,813],{"class":642},[637,47955,816],{"class":650},[637,47957,657],{"class":642},[637,47959,660],{"class":642},[637,47961,1498],{"class":642},[637,47963,1510],{"class":823},[637,47965,1503],{"class":642},[637,47967,1510],{"class":823},[637,47969,1503],{"class":642},[637,47971,1925],{"class":823},[637,47973,1513],{"class":642},[637,47975,660],{"class":642},[637,47977,787],{"class":642},[637,47979,47980,47982,47984],{"class":639,"line":790},[637,47981,909],{"class":642},[637,47983,375],{"class":646},[637,47985,669],{"class":642},[637,47987,47988,47990,47992],{"class":639,"line":800},[637,47989,732],{"class":642},[637,47991,750],{"class":646},[637,47993,669],{"class":642},[4215,47995,926],{"id":925},[614,47997,47998],{},"Lightformer inherits from mesh, and its extension parameters include:",[931,48000,48001,48011],{},[934,48002,48003],{},[937,48004,48005,48007,48009],{},[940,48006,942],{"align":1001},[940,48008,945],{"align":1001},[940,48010,948],{},[950,48012,48013,48034,48045,48059],{},[937,48014,48015,48019,48030],{},[955,48016,48017],{"align":1001},[618,48018,8704],{},[955,48020,48021,1503,48024,1503,48026,48029],{"align":1001},[618,48022,48023],{},"circle",[618,48025,47926],{},[618,48027,48028],{},"rect",", or any other Mesh type",[955,48031,48032],{},[618,48033,48028],{},[937,48035,48036,48040,48043],{},[955,48037,48038],{"align":1001},[618,48039,1918],{},[955,48041,48042],{"align":1001},"The intensity of the light",[955,48044,1925],{},[937,48046,48047,48051,48054],{},[955,48048,48049],{"align":1001},[618,48050,7770],{},[955,48052,48053],{"align":1001},"The color of the light",[955,48055,48056],{},[618,48057,48058],{},"0xffffff",[937,48060,48061,48065,48068],{},[955,48062,48063],{"align":1001},[618,48064,2021],{},[955,48066,48067],{"align":1001},"The arguments of the Geometry",[955,48069,48070],{},"When using other geometries, set the corresponding arguments",[1331,48072,15139],{},{"title":576,"searchDepth":577,"depth":578,"links":48074},[48075],{"id":925,"depth":708,"text":926},"Addon for environment component that provided you custom lights.",{},{"title":383,"description":48076},"R8P0Oy_2dpWPhe7Wm4S1_IYaBdzzvZXUtE1_rjpxx6o",{"id":48081,"title":387,"body":48082,"description":48429,"extension":591,"links":592,"meta":48430,"navigation":594,"path":388,"seo":48431,"stem":389,"__hash__":48432},"docs\u002F2.api\u002F8.staging\u002Fbackdrop.md",{"type":501,"value":48083,"toc":48425},[48084,48089,48097,48099,48288,48291,48368,48370,48423],[608,48085,48086],{},[48087,48088],"staging-backdrop",{},[614,48090,2867,48091,9768,48093,48096],{},[618,48092,7526],{},[618,48094,48095],{},"\u003CBackdrop \u002F>"," component. It's just a curved plane, like a studio backdrop. Meant is for presentational purposes, to break up light and shadows more interestingly.",[504,48098,15],{"id":624},[626,48100,48103],{"className":628,"code":48101,"highlights":48102,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Backdrop } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CBackdrop \u002F>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790],[618,48104,48105,48125,48143,48163,48171,48175,48183,48191,48223,48232,48240,48272,48280],{"__ignoreMap":576},[637,48106,48107,48109,48111,48113,48115,48117,48119,48121,48123],{"class":639,"line":577},[637,48108,643],{"class":642},[637,48110,647],{"class":646},[637,48112,651],{"class":650},[637,48114,654],{"class":650},[637,48116,657],{"class":642},[637,48118,660],{"class":642},[637,48120,664],{"class":663},[637,48122,660],{"class":642},[637,48124,669],{"class":642},[637,48126,48127,48129,48131,48133,48135,48137,48139,48141],{"class":639,"line":578},[637,48128,677],{"class":676},[637,48130,680],{"class":642},[637,48132,715],{"class":683},[637,48134,693],{"class":642},[637,48136,696],{"class":676},[637,48138,699],{"class":642},[637,48140,724],{"class":663},[637,48142,705],{"class":642},[637,48144,48146,48148,48150,48153,48155,48157,48159,48161],{"class":48145,"line":708},[639,673],[637,48147,677],{"class":676},[637,48149,680],{"class":642},[637,48151,48152],{"class":683}," Backdrop",[637,48154,693],{"class":642},[637,48156,696],{"class":676},[637,48158,699],{"class":642},[637,48160,702],{"class":663},[637,48162,705],{"class":642},[637,48164,48165,48167,48169],{"class":639,"line":729},[637,48166,732],{"class":642},[637,48168,647],{"class":646},[637,48170,669],{"class":642},[637,48172,48173],{"class":639,"line":739},[637,48174,742],{"emptyLinePlaceholder":594},[637,48176,48177,48179,48181],{"class":639,"line":745},[637,48178,643],{"class":642},[637,48180,750],{"class":646},[637,48182,669],{"class":642},[637,48184,48185,48187,48189],{"class":639,"line":755},[637,48186,758],{"class":642},[637,48188,761],{"class":646},[637,48190,669],{"class":642},[637,48192,48193,48195,48197,48199,48201,48203,48205,48207,48209,48211,48213,48215,48217,48219,48221],{"class":639,"line":778},[637,48194,781],{"class":642},[637,48196,784],{"class":646},[637,48198,813],{"class":642},[637,48200,1491],{"class":650},[637,48202,657],{"class":642},[637,48204,660],{"class":642},[637,48206,1498],{"class":642},[637,48208,969],{"class":823},[637,48210,1503],{"class":642},[637,48212,2729],{"class":823},[637,48214,1503],{"class":642},[637,48216,7666],{"class":823},[637,48218,1513],{"class":642},[637,48220,660],{"class":642},[637,48222,787],{"class":642},[637,48224,48226,48228,48230],{"class":48225,"line":790},[639,673],[637,48227,781],{"class":642},[637,48229,387],{"class":646},[637,48231,787],{"class":642},[637,48233,48234,48236,48238],{"class":639,"line":800},[637,48235,781],{"class":642},[637,48237,10010],{"class":646},[637,48239,787],{"class":642},[637,48241,48242,48244,48246,48248,48250,48252,48254,48256,48258,48260,48262,48264,48266,48268,48270],{"class":639,"line":805},[637,48243,781],{"class":642},[637,48245,10031],{"class":646},[637,48247,813],{"class":642},[637,48249,1491],{"class":650},[637,48251,657],{"class":642},[637,48253,660],{"class":642},[637,48255,1498],{"class":642},[637,48257,969],{"class":823},[637,48259,1503],{"class":642},[637,48261,824],{"class":823},[637,48263,1503],{"class":642},[637,48265,3900],{"class":823},[637,48267,1513],{"class":642},[637,48269,660],{"class":642},[637,48271,787],{"class":642},[637,48273,48274,48276,48278],{"class":639,"line":831},[637,48275,909],{"class":642},[637,48277,761],{"class":646},[637,48279,669],{"class":642},[637,48281,48282,48284,48286],{"class":639,"line":631},[637,48283,732],{"class":642},[637,48285,750],{"class":646},[637,48287,669],{"class":642},[614,48289,48290],{},"Or with a custom material",[626,48292,48296],{"className":48293,"code":48294,"language":48295,"meta":576,"style":576},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBackdrop :floor=\"1.5\" :segments=\"20\" receive-shadow>\n \u003CTresMeshPhysicalMaterial color=\"orange\" :roughness=\"1\" \u002F>\n\u003C\u002FBackdrop>\n","html",[618,48297,48298,48330,48360],{"__ignoreMap":576},[637,48299,48300,48302,48304,48307,48309,48311,48313,48315,48318,48320,48322,48324,48326,48328],{"class":639,"line":577},[637,48301,643],{"class":642},[637,48303,387],{"class":646},[637,48305,48306],{"class":650}," :floor",[637,48308,657],{"class":642},[637,48310,660],{"class":642},[637,48312,17251],{"class":663},[637,48314,660],{"class":642},[637,48316,48317],{"class":650}," :segments",[637,48319,657],{"class":642},[637,48321,660],{"class":642},[637,48323,32586],{"class":663},[637,48325,660],{"class":642},[637,48327,45317],{"class":650},[637,48329,669],{"class":642},[637,48331,48332,48334,48337,48339,48341,48343,48345,48347,48350,48352,48354,48356,48358],{"class":639,"line":578},[637,48333,758],{"class":642},[637,48335,48336],{"class":646},"TresMeshPhysicalMaterial",[637,48338,2773],{"class":650},[637,48340,657],{"class":642},[637,48342,660],{"class":642},[637,48344,14044],{"class":663},[637,48346,660],{"class":642},[637,48348,48349],{"class":650}," :roughness",[637,48351,657],{"class":642},[637,48353,660],{"class":642},[637,48355,1925],{"class":663},[637,48357,660],{"class":642},[637,48359,787],{"class":642},[637,48361,48362,48364,48366],{"class":639,"line":708},[637,48363,732],{"class":642},[637,48365,387],{"class":646},[637,48367,669],{"class":642},[504,48369,926],{"id":925},[931,48371,48372,48384],{},[934,48373,48374],{},[937,48375,48376,48378,48380,48382],{},[940,48377,8360],{"align":1001},[940,48379,6178],{"align":1001},[940,48381,948],{},[940,48383,19523],{},[950,48385,48386,48399,48411],{},[937,48387,48388,48390,48392,48396],{},[955,48389,8763],{"align":1001},[955,48391,5564],{"align":1001},[955,48393,48394],{},[618,48395,14347],{},[955,48397,48398],{},"No",[937,48400,48401,48403,48405,48409],{},[955,48402,32474],{"align":1001},[955,48404,5564],{"align":1001},[955,48406,48407],{},[618,48408,32586],{},[955,48410,48398],{},[937,48412,48413,48415,48417,48421],{},[955,48414,19583],{"align":1001},[955,48416,18466],{"align":1001},[955,48418,48419],{},[618,48420,975],{},[955,48422,48398],{},[1331,48424,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":48426},[48427,48428],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"A curved plane studio backdrop for presentational purposes.",{},{"title":387,"description":48429},"NGh9OweK5ISAF-G6NdgBZKgy35j2Bl_DEl17ABguTXw",{"id":48434,"title":391,"body":48435,"description":49037,"extension":591,"links":592,"meta":49038,"navigation":594,"path":392,"seo":49039,"stem":393,"__hash__":49040},"docs\u002F2.api\u002F8.staging\u002Focean.md",{"type":501,"value":48436,"toc":49029},[48437,48442,48457,48462,48464,48597,48601,48610,48613,48628,48632,48635,48805,48807,48813,49026],[608,48438,48439],{},[48440,48441],"staging-ocean",{},[614,48443,48444,48447,48448,1150],{},[618,48445,48446],{},"\u003COcean \u002F>"," is a wrapper for the ",[1144,48449,48452,48453,48456],{"href":48450,"rel":48451},"https:\u002F\u002Fthreejs.org\u002Fexamples\u002F?q=ocean#webgl_shaders_ocean",[1148],"Three.js ",[618,48454,48455],{},"Water"," add-on",[3292,48458,48459],{},[614,48460,48461],{},"Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.",[504,48463,15],{"id":624},[626,48465,48468],{"className":628,"code":48466,"highlights":48467,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Ocean } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003COcean \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790],[618,48469,48470,48490,48508,48528,48536,48540,48548,48556,48564,48573,48581,48589],{"__ignoreMap":576},[637,48471,48472,48474,48476,48478,48480,48482,48484,48486,48488],{"class":639,"line":577},[637,48473,643],{"class":642},[637,48475,647],{"class":646},[637,48477,651],{"class":650},[637,48479,654],{"class":650},[637,48481,657],{"class":642},[637,48483,660],{"class":642},[637,48485,664],{"class":663},[637,48487,660],{"class":642},[637,48489,669],{"class":642},[637,48491,48492,48494,48496,48498,48500,48502,48504,48506],{"class":639,"line":578},[637,48493,677],{"class":676},[637,48495,680],{"class":642},[637,48497,715],{"class":683},[637,48499,693],{"class":642},[637,48501,696],{"class":676},[637,48503,699],{"class":642},[637,48505,724],{"class":663},[637,48507,705],{"class":642},[637,48509,48511,48513,48515,48518,48520,48522,48524,48526],{"class":48510,"line":708},[639,673],[637,48512,677],{"class":676},[637,48514,680],{"class":642},[637,48516,48517],{"class":683}," Ocean",[637,48519,693],{"class":642},[637,48521,696],{"class":676},[637,48523,699],{"class":642},[637,48525,702],{"class":663},[637,48527,705],{"class":642},[637,48529,48530,48532,48534],{"class":639,"line":729},[637,48531,732],{"class":642},[637,48533,647],{"class":646},[637,48535,669],{"class":642},[637,48537,48538],{"class":639,"line":739},[637,48539,742],{"emptyLinePlaceholder":594},[637,48541,48542,48544,48546],{"class":639,"line":745},[637,48543,643],{"class":642},[637,48545,750],{"class":646},[637,48547,669],{"class":642},[637,48549,48550,48552,48554],{"class":639,"line":755},[637,48551,758],{"class":642},[637,48553,761],{"class":646},[637,48555,669],{"class":642},[637,48557,48558,48560,48562],{"class":639,"line":778},[637,48559,781],{"class":642},[637,48561,22688],{"class":646},[637,48563,669],{"class":642},[637,48565,48567,48569,48571],{"class":48566,"line":790},[639,673],[637,48568,857],{"class":642},[637,48570,391],{"class":646},[637,48572,787],{"class":642},[637,48574,48575,48577,48579],{"class":639,"line":800},[637,48576,899],{"class":642},[637,48578,22688],{"class":646},[637,48580,669],{"class":642},[637,48582,48583,48585,48587],{"class":639,"line":805},[637,48584,909],{"class":642},[637,48586,761],{"class":646},[637,48588,669],{"class":642},[637,48590,48591,48593,48595],{"class":639,"line":831},[637,48592,732],{"class":642},[637,48594,750],{"class":646},[637,48596,669],{"class":642},[4215,48598,48600],{"id":48599},"sky","SKY",[614,48602,48603,48605,48606,48609],{},[618,48604,48446],{}," works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.\n(",[618,48607,48608],{},"\u003CSky \u002F>"," is not required for making this component work.)",[4215,48611,48612],{"id":42818},"Fog",[614,48614,2867,48615,48617,48618,5822,48622,48627],{},[618,48616,48446],{}," component also reacts when there's ",[1144,48619,48612],{"href":48620,"rel":48621},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=fog#api\u002Fen\u002Fscenes\u002FFog",[1148],[1144,48623,48626],{"href":48624,"rel":48625},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=fog#api\u002Fen\u002Fscenes\u002FFogExp2",[1148],"FogExp2"," in your scene.",[504,48629,48631],{"id":48630},"custom-geometry","Custom Geometry",[614,48633,48634],{},"You can use custom geometry by adding it as a child.",[626,48636,48639],{"className":628,"code":48637,"highlights":48638,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Ocean } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003COcean>\n \u003CTresCircleGeometry :args=\"[50, 16]\" \u002F>\n \u003C\u002FOcean>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790,800,805],[618,48640,48641,48661,48679,48698,48706,48710,48718,48726,48734,48743,48772,48781,48789,48797],{"__ignoreMap":576},[637,48642,48643,48645,48647,48649,48651,48653,48655,48657,48659],{"class":639,"line":577},[637,48644,643],{"class":642},[637,48646,647],{"class":646},[637,48648,651],{"class":650},[637,48650,654],{"class":650},[637,48652,657],{"class":642},[637,48654,660],{"class":642},[637,48656,664],{"class":663},[637,48658,660],{"class":642},[637,48660,669],{"class":642},[637,48662,48663,48665,48667,48669,48671,48673,48675,48677],{"class":639,"line":578},[637,48664,677],{"class":676},[637,48666,680],{"class":642},[637,48668,715],{"class":683},[637,48670,693],{"class":642},[637,48672,696],{"class":676},[637,48674,699],{"class":642},[637,48676,724],{"class":663},[637,48678,705],{"class":642},[637,48680,48682,48684,48686,48688,48690,48692,48694,48696],{"class":48681,"line":708},[639,673],[637,48683,677],{"class":676},[637,48685,680],{"class":642},[637,48687,48517],{"class":683},[637,48689,693],{"class":642},[637,48691,696],{"class":676},[637,48693,699],{"class":642},[637,48695,702],{"class":663},[637,48697,705],{"class":642},[637,48699,48700,48702,48704],{"class":639,"line":729},[637,48701,732],{"class":642},[637,48703,647],{"class":646},[637,48705,669],{"class":642},[637,48707,48708],{"class":639,"line":739},[637,48709,742],{"emptyLinePlaceholder":594},[637,48711,48712,48714,48716],{"class":639,"line":745},[637,48713,643],{"class":642},[637,48715,750],{"class":646},[637,48717,669],{"class":642},[637,48719,48720,48722,48724],{"class":639,"line":755},[637,48721,758],{"class":642},[637,48723,761],{"class":646},[637,48725,669],{"class":642},[637,48727,48728,48730,48732],{"class":639,"line":778},[637,48729,781],{"class":642},[637,48731,22688],{"class":646},[637,48733,669],{"class":642},[637,48735,48737,48739,48741],{"class":48736,"line":790},[639,673],[637,48738,857],{"class":642},[637,48740,391],{"class":646},[637,48742,669],{"class":642},[637,48744,48746,48748,48750,48752,48754,48756,48758,48760,48762,48764,48766,48768,48770],{"class":48745,"line":800},[639,673],[637,48747,868],{"class":642},[637,48749,10515],{"class":646},[637,48751,813],{"class":642},[637,48753,2021],{"class":650},[637,48755,657],{"class":642},[637,48757,660],{"class":642},[637,48759,1498],{"class":642},[637,48761,11917],{"class":823},[637,48763,1503],{"class":642},[637,48765,39098],{"class":823},[637,48767,1513],{"class":642},[637,48769,660],{"class":642},[637,48771,787],{"class":642},[637,48773,48775,48777,48779],{"class":48774,"line":805},[639,673],[637,48776,889],{"class":642},[637,48778,391],{"class":646},[637,48780,669],{"class":642},[637,48782,48783,48785,48787],{"class":639,"line":831},[637,48784,899],{"class":642},[637,48786,22688],{"class":646},[637,48788,669],{"class":642},[637,48790,48791,48793,48795],{"class":639,"line":631},[637,48792,909],{"class":642},[637,48794,761],{"class":646},[637,48796,669],{"class":642},[637,48798,48799,48801,48803],{"class":639,"line":854},[637,48800,732],{"class":642},[637,48802,750],{"class":646},[637,48804,669],{"class":642},[504,48806,926],{"id":925},[48808,48809,48810],"prose-tip",{},[614,48811,48812],{},"Props marked with ✅ support reactive changes at runtime. Props marked with ❌ are only read at construction time and cannot be changed after the component is mounted.",[931,48814,48815,48828],{},[934,48816,48817],{},[937,48818,48819,48821,48823,48825],{},[940,48820,942],{"align":1001},[940,48822,945],{"align":1001},[940,48824,948],{},[940,48826,48827],{"align":30879},"Reactive",[950,48829,48830,48847,48863,48882,48899,48916,48933,48949,48964,48980,48996,49011],{},[937,48831,48832,48837,48840,48844],{},[955,48833,48834],{"align":1001},[1705,48835,48836],{},"textureWidth",[955,48838,48839],{"align":1001},"Width of the mirror texture",[955,48841,48842],{},[618,48843,29489],{},[955,48845,48846],{"align":30879},"❌",[937,48848,48849,48854,48857,48861],{},[955,48850,48851],{"align":1001},[1705,48852,48853],{},"textureHeight",[955,48855,48856],{"align":1001},"Height of the mirror texture",[955,48858,48859],{},[618,48860,29489],{},[955,48862,48846],{"align":30879},[937,48864,48865,48870,48873,48880],{},[955,48866,48867],{"align":1001},[1705,48868,48869],{},"waterNormals",[955,48871,48872],{"align":1001},"URL of the water normal texture",[955,48874,48875],{},[1144,48876,48879],{"href":48877,"rel":48878},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fwater-normals\u002FWater_1_M_Normal.jpg",[1148],"Water_1_M_Normal.jpg",[955,48881,48846],{"align":30879},[937,48883,48884,48889,48892,48897],{},[955,48885,48886],{"align":1001},[1705,48887,48888],{},"sunDirection",[955,48890,48891],{"align":1001},"Sun direction to be reflected on the water",[955,48893,48894],{},[618,48895,48896],{},"Vector3(0,0,0)",[955,48898,48846],{"align":30879},[937,48900,48901,48906,48909,48913],{},[955,48902,48903],{"align":1001},[1705,48904,48905],{},"sunColor",[955,48907,48908],{"align":1001},"Sun color to be reflected on the water",[955,48910,48911],{},[618,48912,48058],{},[955,48914,48915],{"align":30879},"✅",[937,48917,48918,48923,48926,48931],{},[955,48919,48920],{"align":1001},[1705,48921,48922],{},"waterColor",[955,48924,48925],{"align":1001},"Water color",[955,48927,48928],{},[618,48929,48930],{},"0x001e0f",[955,48932,48915],{"align":30879},[937,48934,48935,48939,48942,48947],{},[955,48936,48937],{"align":1001},[1705,48938,30996],{},[955,48940,48941],{"align":1001},"Distortion scale on reflected objects",[955,48943,48944],{},[618,48945,48946],{},"3.7",[955,48948,48915],{"align":30879},[937,48950,48951,48955,48958,48962],{},[955,48952,48953],{"align":1001},[1705,48954,17604],{},[955,48956,48957],{"align":1001},"Size of the water normals",[955,48959,48960],{},[618,48961,1925],{},[955,48963,48915],{"align":30879},[937,48965,48966,48971,48974,48978],{},[955,48967,48968],{"align":1001},[1705,48969,48970],{},"clipBias",[955,48972,48973],{"align":1001},"Clip bias for the render target",[955,48975,48976],{},[618,48977,14513],{},[955,48979,48846],{"align":30879},[937,48981,48982,48987,48990,48994],{},[955,48983,48984],{"align":1001},[1705,48985,48986],{},"alpha",[955,48988,48989],{"align":1001},"Alpha transparency of the water",[955,48991,48992],{},[618,48993,14391],{},[955,48995,48915],{"align":30879},[937,48997,48998,49002,49005,49009],{},[955,48999,49000],{"align":1001},[1705,49001,27632],{},[955,49003,49004],{"align":1001},"Which side of the mesh renders the water",[955,49006,49007],{},[618,49008,28856],{},[955,49010,48846],{"align":30879},[937,49012,49013,49017,49020,49024],{},[955,49014,49015],{"align":1001},[1705,49016,9976],{},[955,49018,49019],{"align":1001},"Animation speed multiplier applied to the wave animation. Higher values make the water animate faster.",[955,49021,49022],{},[618,49023,1925],{},[955,49025,48915],{"align":30879},[1331,49027,49028],{},"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}",{"title":576,"searchDepth":577,"depth":578,"links":49030},[49031,49035,49036],{"id":624,"depth":578,"text":15,"children":49032},[49033,49034],{"id":48599,"depth":708,"text":48600},{"id":42818,"depth":708,"text":48612},{"id":48630,"depth":578,"text":48631},{"id":925,"depth":578,"text":926},"Wrapper for the Three.js Water add-on with sky reflection support.",{},{"title":391,"description":49037},"H6l4rOaHY0GADZIJpKUedqEaYTaMVIQ_5pXk41qxwJU",{"id":49042,"title":395,"body":49043,"description":50082,"extension":591,"links":592,"meta":50083,"navigation":594,"path":396,"seo":50084,"stem":397,"__hash__":50085},"docs\u002F2.api\u002F8.staging\u002Fprecipitation.md",{"type":501,"value":49044,"toc":50074},[49045,49050,49056,49058,49064,49221,49225,49228,49435,49439,49442,49647,49651,49654,49900,49903,49908,49910,50072],[608,49046,49047],{},[49048,49049],"staging-precipitation",{},[614,49051,49052,49055],{},[618,49053,49054],{},"\u003CPrecipitation \u002F>"," is a fully flexible component that renders an infinite particle flow, It comes with several props that allow you customize it to create different effects like precipitation, snow, waterfall, beams, etc.",[504,49057,15],{"id":624},[614,49059,49060,49061,49063],{},"You can use ",[618,49062,49054],{}," component without passing any props, this will achieve a snowy effect, like the before example.",[626,49065,49068],{"className":628,"code":49066,"highlights":49067,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Precipitation } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CPrecipitation \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790],[618,49069,49070,49090,49108,49128,49136,49140,49148,49156,49188,49197,49205,49213],{"__ignoreMap":576},[637,49071,49072,49074,49076,49078,49080,49082,49084,49086,49088],{"class":639,"line":577},[637,49073,643],{"class":642},[637,49075,647],{"class":646},[637,49077,651],{"class":650},[637,49079,654],{"class":650},[637,49081,657],{"class":642},[637,49083,660],{"class":642},[637,49085,664],{"class":663},[637,49087,660],{"class":642},[637,49089,669],{"class":642},[637,49091,49092,49094,49096,49098,49100,49102,49104,49106],{"class":639,"line":578},[637,49093,677],{"class":676},[637,49095,680],{"class":642},[637,49097,715],{"class":683},[637,49099,693],{"class":642},[637,49101,696],{"class":676},[637,49103,699],{"class":642},[637,49105,724],{"class":663},[637,49107,705],{"class":642},[637,49109,49111,49113,49115,49118,49120,49122,49124,49126],{"class":49110,"line":708},[639,673],[637,49112,677],{"class":676},[637,49114,680],{"class":642},[637,49116,49117],{"class":683}," Precipitation",[637,49119,693],{"class":642},[637,49121,696],{"class":676},[637,49123,699],{"class":642},[637,49125,702],{"class":663},[637,49127,705],{"class":642},[637,49129,49130,49132,49134],{"class":639,"line":729},[637,49131,732],{"class":642},[637,49133,647],{"class":646},[637,49135,669],{"class":642},[637,49137,49138],{"class":639,"line":739},[637,49139,742],{"emptyLinePlaceholder":594},[637,49141,49142,49144,49146],{"class":639,"line":745},[637,49143,643],{"class":642},[637,49145,750],{"class":646},[637,49147,669],{"class":642},[637,49149,49150,49152,49154],{"class":639,"line":755},[637,49151,758],{"class":642},[637,49153,761],{"class":646},[637,49155,669],{"class":642},[637,49157,49158,49160,49162,49164,49166,49168,49170,49172,49174,49176,49178,49180,49182,49184,49186],{"class":639,"line":778},[637,49159,781],{"class":642},[637,49161,784],{"class":646},[637,49163,813],{"class":642},[637,49165,1491],{"class":650},[637,49167,657],{"class":642},[637,49169,660],{"class":642},[637,49171,1498],{"class":642},[637,49173,969],{"class":823},[637,49175,1503],{"class":642},[637,49177,2729],{"class":823},[637,49179,1503],{"class":642},[637,49181,7666],{"class":823},[637,49183,1513],{"class":642},[637,49185,660],{"class":642},[637,49187,787],{"class":642},[637,49189,49191,49193,49195],{"class":49190,"line":790},[639,673],[637,49192,781],{"class":642},[637,49194,395],{"class":646},[637,49196,787],{"class":642},[637,49198,49199,49201,49203],{"class":639,"line":800},[637,49200,781],{"class":642},[637,49202,10010],{"class":646},[637,49204,787],{"class":642},[637,49206,49207,49209,49211],{"class":639,"line":805},[637,49208,909],{"class":642},[637,49210,761],{"class":646},[637,49212,669],{"class":642},[637,49214,49215,49217,49219],{"class":639,"line":831},[637,49216,732],{"class":642},[637,49218,750],{"class":646},[637,49220,669],{"class":642},[4215,49222,49224],{"id":49223},"rain","Rain",[614,49226,49227],{},"By setting the randomness to 0, increase the speed and reduce the count. You can easily achieve a more rainy effect.",[626,49229,49232],{"className":628,"code":49230,"highlights":49231,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Precipitation } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CPrecipitation\n :count=\"2000\"\n :speed=\"0.3\"\n :randomness=\"0\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790,800,805,831,631],[618,49233,49234,49254,49272,49291,49299,49303,49311,49319,49351,49359,49375,49390,49406,49411,49419,49427],{"__ignoreMap":576},[637,49235,49236,49238,49240,49242,49244,49246,49248,49250,49252],{"class":639,"line":577},[637,49237,643],{"class":642},[637,49239,647],{"class":646},[637,49241,651],{"class":650},[637,49243,654],{"class":650},[637,49245,657],{"class":642},[637,49247,660],{"class":642},[637,49249,664],{"class":663},[637,49251,660],{"class":642},[637,49253,669],{"class":642},[637,49255,49256,49258,49260,49262,49264,49266,49268,49270],{"class":639,"line":578},[637,49257,677],{"class":676},[637,49259,680],{"class":642},[637,49261,715],{"class":683},[637,49263,693],{"class":642},[637,49265,696],{"class":676},[637,49267,699],{"class":642},[637,49269,724],{"class":663},[637,49271,705],{"class":642},[637,49273,49275,49277,49279,49281,49283,49285,49287,49289],{"class":49274,"line":708},[639,673],[637,49276,677],{"class":676},[637,49278,680],{"class":642},[637,49280,49117],{"class":683},[637,49282,693],{"class":642},[637,49284,696],{"class":676},[637,49286,699],{"class":642},[637,49288,702],{"class":663},[637,49290,705],{"class":642},[637,49292,49293,49295,49297],{"class":639,"line":729},[637,49294,732],{"class":642},[637,49296,647],{"class":646},[637,49298,669],{"class":642},[637,49300,49301],{"class":639,"line":739},[637,49302,742],{"emptyLinePlaceholder":594},[637,49304,49305,49307,49309],{"class":639,"line":745},[637,49306,643],{"class":642},[637,49308,750],{"class":646},[637,49310,669],{"class":642},[637,49312,49313,49315,49317],{"class":639,"line":755},[637,49314,758],{"class":642},[637,49316,761],{"class":646},[637,49318,669],{"class":642},[637,49320,49321,49323,49325,49327,49329,49331,49333,49335,49337,49339,49341,49343,49345,49347,49349],{"class":639,"line":778},[637,49322,781],{"class":642},[637,49324,784],{"class":646},[637,49326,813],{"class":642},[637,49328,1491],{"class":650},[637,49330,657],{"class":642},[637,49332,660],{"class":642},[637,49334,1498],{"class":642},[637,49336,969],{"class":823},[637,49338,1503],{"class":642},[637,49340,2729],{"class":823},[637,49342,1503],{"class":642},[637,49344,7666],{"class":823},[637,49346,1513],{"class":642},[637,49348,660],{"class":642},[637,49350,787],{"class":642},[637,49352,49354,49356],{"class":49353,"line":790},[639,673],[637,49355,781],{"class":642},[637,49357,49358],{"class":646},"Precipitation\n",[637,49360,49362,49364,49366,49368,49370,49373],{"class":49361,"line":800},[639,673],[637,49363,13000],{"class":642},[637,49365,12418],{"class":650},[637,49367,657],{"class":642},[637,49369,660],{"class":642},[637,49371,49372],{"class":823},"2000",[637,49374,3224],{"class":642},[637,49376,49378,49380,49382,49384,49386,49388],{"class":49377,"line":805},[639,673],[637,49379,13000],{"class":642},[637,49381,9976],{"class":650},[637,49383,657],{"class":642},[637,49385,660],{"class":642},[637,49387,30749],{"class":823},[637,49389,3224],{"class":642},[637,49391,49393,49395,49398,49400,49402,49404],{"class":49392,"line":831},[639,673],[637,49394,13000],{"class":642},[637,49396,49397],{"class":650},"randomness",[637,49399,657],{"class":642},[637,49401,660],{"class":642},[637,49403,969],{"class":823},[637,49405,3224],{"class":642},[637,49407,49409],{"class":49408,"line":631},[639,673],[637,49410,18174],{"class":642},[637,49412,49413,49415,49417],{"class":639,"line":854},[637,49414,781],{"class":642},[637,49416,10010],{"class":646},[637,49418,787],{"class":642},[637,49420,49421,49423,49425],{"class":639,"line":865},[637,49422,909],{"class":642},[637,49424,761],{"class":646},[637,49426,669],{"class":642},[637,49428,49429,49431,49433],{"class":639,"line":876},[637,49430,732],{"class":642},[637,49432,750],{"class":646},[637,49434,669],{"class":642},[4215,49436,49438],{"id":49437},"storm","Storm",[614,49440,49441],{},"A storm effect? Easy just increase the randomness.",[626,49443,49446],{"className":628,"code":49444,"highlights":49445,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Precipitation } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CPrecipitation\n :count=\"3000\"\n :speed=\"0.5\"\n :randomness=\"1.5\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790,800,805,831,631],[618,49447,49448,49468,49486,49505,49513,49517,49525,49533,49565,49572,49588,49603,49618,49623,49631,49639],{"__ignoreMap":576},[637,49449,49450,49452,49454,49456,49458,49460,49462,49464,49466],{"class":639,"line":577},[637,49451,643],{"class":642},[637,49453,647],{"class":646},[637,49455,651],{"class":650},[637,49457,654],{"class":650},[637,49459,657],{"class":642},[637,49461,660],{"class":642},[637,49463,664],{"class":663},[637,49465,660],{"class":642},[637,49467,669],{"class":642},[637,49469,49470,49472,49474,49476,49478,49480,49482,49484],{"class":639,"line":578},[637,49471,677],{"class":676},[637,49473,680],{"class":642},[637,49475,715],{"class":683},[637,49477,693],{"class":642},[637,49479,696],{"class":676},[637,49481,699],{"class":642},[637,49483,724],{"class":663},[637,49485,705],{"class":642},[637,49487,49489,49491,49493,49495,49497,49499,49501,49503],{"class":49488,"line":708},[639,673],[637,49490,677],{"class":676},[637,49492,680],{"class":642},[637,49494,49117],{"class":683},[637,49496,693],{"class":642},[637,49498,696],{"class":676},[637,49500,699],{"class":642},[637,49502,702],{"class":663},[637,49504,705],{"class":642},[637,49506,49507,49509,49511],{"class":639,"line":729},[637,49508,732],{"class":642},[637,49510,647],{"class":646},[637,49512,669],{"class":642},[637,49514,49515],{"class":639,"line":739},[637,49516,742],{"emptyLinePlaceholder":594},[637,49518,49519,49521,49523],{"class":639,"line":745},[637,49520,643],{"class":642},[637,49522,750],{"class":646},[637,49524,669],{"class":642},[637,49526,49527,49529,49531],{"class":639,"line":755},[637,49528,758],{"class":642},[637,49530,761],{"class":646},[637,49532,669],{"class":642},[637,49534,49535,49537,49539,49541,49543,49545,49547,49549,49551,49553,49555,49557,49559,49561,49563],{"class":639,"line":778},[637,49536,781],{"class":642},[637,49538,784],{"class":646},[637,49540,813],{"class":642},[637,49542,1491],{"class":650},[637,49544,657],{"class":642},[637,49546,660],{"class":642},[637,49548,1498],{"class":642},[637,49550,969],{"class":823},[637,49552,1503],{"class":642},[637,49554,2729],{"class":823},[637,49556,1503],{"class":642},[637,49558,7666],{"class":823},[637,49560,1513],{"class":642},[637,49562,660],{"class":642},[637,49564,787],{"class":642},[637,49566,49568,49570],{"class":49567,"line":790},[639,673],[637,49569,781],{"class":642},[637,49571,49358],{"class":646},[637,49573,49575,49577,49579,49581,49583,49586],{"class":49574,"line":800},[639,673],[637,49576,13000],{"class":642},[637,49578,12418],{"class":650},[637,49580,657],{"class":642},[637,49582,660],{"class":642},[637,49584,49585],{"class":823},"3000",[637,49587,3224],{"class":642},[637,49589,49591,49593,49595,49597,49599,49601],{"class":49590,"line":805},[639,673],[637,49592,13000],{"class":642},[637,49594,9976],{"class":650},[637,49596,657],{"class":642},[637,49598,660],{"class":642},[637,49600,1545],{"class":823},[637,49602,3224],{"class":642},[637,49604,49606,49608,49610,49612,49614,49616],{"class":49605,"line":831},[639,673],[637,49607,13000],{"class":642},[637,49609,49397],{"class":650},[637,49611,657],{"class":642},[637,49613,660],{"class":642},[637,49615,17251],{"class":823},[637,49617,3224],{"class":642},[637,49619,49621],{"class":49620,"line":631},[639,673],[637,49622,18174],{"class":642},[637,49624,49625,49627,49629],{"class":639,"line":854},[637,49626,781],{"class":642},[637,49628,10010],{"class":646},[637,49630,787],{"class":642},[637,49632,49633,49635,49637],{"class":639,"line":865},[637,49634,909],{"class":642},[637,49636,761],{"class":646},[637,49638,669],{"class":642},[637,49640,49641,49643,49645],{"class":639,"line":876},[637,49642,732],{"class":642},[637,49644,750],{"class":646},[637,49646,669],{"class":642},[4215,49648,49650],{"id":49649},"beam","Beam",[614,49652,49653],{},"What about an infinite beam? Just set the area, to the axis that you need constrain.",[626,49655,49658],{"className":628,"code":49656,"highlights":49657,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Precipitation } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CPrecipitation\n :area=\"[0.5, 0.5, 20]\"\n :count=\"1000\"\n :speed=\"0.2\"\n :size=\"0.3\"\n color=\"#00ff00\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790,800,805,831,631,854,865],[618,49659,49660,49680,49698,49717,49725,49729,49737,49745,49777,49784,49812,49827,49842,49857,49871,49876,49884,49892],{"__ignoreMap":576},[637,49661,49662,49664,49666,49668,49670,49672,49674,49676,49678],{"class":639,"line":577},[637,49663,643],{"class":642},[637,49665,647],{"class":646},[637,49667,651],{"class":650},[637,49669,654],{"class":650},[637,49671,657],{"class":642},[637,49673,660],{"class":642},[637,49675,664],{"class":663},[637,49677,660],{"class":642},[637,49679,669],{"class":642},[637,49681,49682,49684,49686,49688,49690,49692,49694,49696],{"class":639,"line":578},[637,49683,677],{"class":676},[637,49685,680],{"class":642},[637,49687,715],{"class":683},[637,49689,693],{"class":642},[637,49691,696],{"class":676},[637,49693,699],{"class":642},[637,49695,724],{"class":663},[637,49697,705],{"class":642},[637,49699,49701,49703,49705,49707,49709,49711,49713,49715],{"class":49700,"line":708},[639,673],[637,49702,677],{"class":676},[637,49704,680],{"class":642},[637,49706,49117],{"class":683},[637,49708,693],{"class":642},[637,49710,696],{"class":676},[637,49712,699],{"class":642},[637,49714,702],{"class":663},[637,49716,705],{"class":642},[637,49718,49719,49721,49723],{"class":639,"line":729},[637,49720,732],{"class":642},[637,49722,647],{"class":646},[637,49724,669],{"class":642},[637,49726,49727],{"class":639,"line":739},[637,49728,742],{"emptyLinePlaceholder":594},[637,49730,49731,49733,49735],{"class":639,"line":745},[637,49732,643],{"class":642},[637,49734,750],{"class":646},[637,49736,669],{"class":642},[637,49738,49739,49741,49743],{"class":639,"line":755},[637,49740,758],{"class":642},[637,49742,761],{"class":646},[637,49744,669],{"class":642},[637,49746,49747,49749,49751,49753,49755,49757,49759,49761,49763,49765,49767,49769,49771,49773,49775],{"class":639,"line":778},[637,49748,781],{"class":642},[637,49750,784],{"class":646},[637,49752,813],{"class":642},[637,49754,1491],{"class":650},[637,49756,657],{"class":642},[637,49758,660],{"class":642},[637,49760,1498],{"class":642},[637,49762,969],{"class":823},[637,49764,1503],{"class":642},[637,49766,2729],{"class":823},[637,49768,1503],{"class":642},[637,49770,7666],{"class":823},[637,49772,1513],{"class":642},[637,49774,660],{"class":642},[637,49776,787],{"class":642},[637,49778,49780,49782],{"class":49779,"line":790},[639,673],[637,49781,781],{"class":642},[637,49783,49358],{"class":646},[637,49785,49787,49789,49792,49794,49796,49798,49800,49802,49804,49806,49808,49810],{"class":49786,"line":800},[639,673],[637,49788,13000],{"class":642},[637,49790,49791],{"class":650},"area",[637,49793,657],{"class":642},[637,49795,660],{"class":642},[637,49797,1498],{"class":642},[637,49799,1545],{"class":823},[637,49801,1503],{"class":642},[637,49803,1545],{"class":823},[637,49805,1503],{"class":642},[637,49807,32586],{"class":823},[637,49809,1513],{"class":642},[637,49811,3224],{"class":642},[637,49813,49815,49817,49819,49821,49823,49825],{"class":49814,"line":805},[639,673],[637,49816,13000],{"class":642},[637,49818,12418],{"class":650},[637,49820,657],{"class":642},[637,49822,660],{"class":642},[637,49824,9586],{"class":823},[637,49826,3224],{"class":642},[637,49828,49830,49832,49834,49836,49838,49840],{"class":49829,"line":831},[639,673],[637,49831,13000],{"class":642},[637,49833,9976],{"class":650},[637,49835,657],{"class":642},[637,49837,660],{"class":642},[637,49839,5938],{"class":823},[637,49841,3224],{"class":642},[637,49843,49845,49847,49849,49851,49853,49855],{"class":49844,"line":631},[639,673],[637,49846,13000],{"class":642},[637,49848,17604],{"class":650},[637,49850,657],{"class":642},[637,49852,660],{"class":642},[637,49854,30749],{"class":823},[637,49856,3224],{"class":642},[637,49858,49860,49862,49864,49866,49869],{"class":49859,"line":854},[639,673],[637,49861,32488],{"class":650},[637,49863,657],{"class":642},[637,49865,660],{"class":642},[637,49867,49868],{"class":663},"#00ff00",[637,49870,3224],{"class":642},[637,49872,49874],{"class":49873,"line":865},[639,673],[637,49875,18174],{"class":642},[637,49877,49878,49880,49882],{"class":639,"line":876},[637,49879,781],{"class":642},[637,49881,10010],{"class":646},[637,49883,787],{"class":642},[637,49885,49886,49888,49890],{"class":639,"line":886},[637,49887,909],{"class":642},[637,49889,761],{"class":646},[637,49891,669],{"class":642},[637,49893,49894,49896,49898],{"class":639,"line":632},[637,49895,732],{"class":642},[637,49897,750],{"class":646},[637,49899,669],{"class":642},[614,49901,49902],{},"You can create much more! ☔",[3292,49904,49905],{},[614,49906,49907],{},"Be careful with the performance this components render infinite particles in movement",[504,49909,926],{"id":925},[931,49911,49912,49922],{},[934,49913,49914],{},[937,49915,49916,49918,49920],{},[940,49917,942],{"align":1001},[940,49919,945],{"align":1001},[940,49921,948],{},[950,49923,49924,49935,49949,49960,49971,49983,49994,50005,50016,50027,50038,50049,50060],{},[937,49925,49926,49930,49933],{},[955,49927,49928],{"align":1001},[1705,49929,17604],{},[955,49931,49932],{"align":1001},"The size of the drops.",[955,49934,2235],{},[937,49936,49937,49941,49944],{},[955,49938,49939],{"align":1001},[1705,49940,49791],{},[955,49942,49943],{"align":1001},"The size of the precipitation area.",[955,49945,49946],{},[637,49947,49948],{},"10, 10, 20",[937,49950,49951,49955,49958],{},[955,49952,49953],{"align":1001},[1705,49954,7770],{},[955,49956,49957],{"align":1001},"The color of the drops.",[955,49959,48058],{},[937,49961,49962,49966,49969],{},[955,49963,49964],{"align":1001},[1705,49965,2825],{},[955,49967,49968],{"align":1001},"Color texture of the drops.",[955,49970,3749],{},[937,49972,49973,49978,49981],{},[955,49974,49975],{"align":1001},[1705,49976,49977],{},"alphaMap",[955,49979,49980],{"align":1001},"Alpha texture of the Drops.",[955,49982,3749],{},[937,49984,49985,49989,49992],{},[955,49986,49987],{"align":1001},[1705,49988,41707],{},[955,49990,49991],{"align":1001},"Enables the WebGL to know when not to render the pixel.",[955,49993,1939],{},[937,49995,49996,50000,50003],{},[955,49997,49998],{"align":1001},[1705,49999,12179],{},[955,50001,50002],{"align":1001},"Set the opacity of the drops.",[955,50004,25727],{},[937,50006,50007,50011,50014],{},[955,50008,50009],{"align":1001},[1705,50010,12418],{},[955,50012,50013],{"align":1001},"Number of drops.",[955,50015,9429],{},[937,50017,50018,50022,50025],{},[955,50019,50020],{"align":1001},[1705,50021,9976],{},[955,50023,50024],{"align":1001},"Drops speed.",[955,50026,2235],{},[937,50028,50029,50033,50036],{},[955,50030,50031],{"align":1001},[1705,50032,49397],{},[955,50034,50035],{"align":1001},"Add randomness to the drops.",[955,50037,1545],{},[937,50039,50040,50044,50047],{},[955,50041,50042],{"align":1001},[1705,50043,10812],{},[955,50045,50046],{"align":1001},"Whether should write to the depth buffer or not. drops.",[955,50048,965],{},[937,50050,50051,50055,50058],{},[955,50052,50053],{"align":1001},[1705,50054,12191],{},[955,50056,50057],{"align":1001},"Transparency on the drops texture",[955,50059,975],{},[937,50061,50062,50067,50070],{},[955,50063,50064],{"align":1001},[1705,50065,50066],{},"sizeAttenuation",[955,50068,50069],{"align":1001},"Keep the same size regardless distance. drops.",[955,50071,965],{},[1331,50073,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":50075},[50076,50081],{"id":624,"depth":578,"text":15,"children":50077},[50078,50079,50080],{"id":49223,"depth":708,"text":49224},{"id":49437,"depth":708,"text":49438},{"id":49649,"depth":708,"text":49650},{"id":925,"depth":578,"text":926},"Flexible infinite particle flow for rain, snow, waterfall, and beam effects.",{},{"title":395,"description":50082},"oN0a-7Db4CfLOwRF8vcglYxi0o3twbiI7bqgn-6GqoY",{"id":50087,"title":399,"body":50088,"description":50497,"extension":591,"links":592,"meta":50498,"navigation":594,"path":400,"seo":50499,"stem":401,"__hash__":50500},"docs\u002F2.api\u002F8.staging\u002Fsky.md",{"type":501,"value":50089,"toc":50493},[50090,50095,50105,50107,50310,50312,50491],[608,50091,50092],{},[50093,50094],"staging-sky",{},[614,50096,50097,48447,50099,1150],{},[618,50098,48608],{},[1144,50100,48452,50103,48456],{"href":50101,"rel":50102},"https:\u002F\u002Fthreejs.org\u002Fexamples\u002F?q=sky#webgl_shaders_sky",[1148],[618,50104,399],{},[504,50106,15],{"id":624},[626,50108,50111],{"className":628,"code":50109,"highlights":50110,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { OrbitControls, Sky } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :tone-mapping-exposure=\"0.25\">\n \u003CTresPerspectiveCamera :position=\"[0, 15, 200]\" \u002F>\n \u003CSky \u002F>\n \u003COrbitControls \u002F>\n \u003CTresGridHelper :args=\"[1000, 20]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[578,790],[618,50112,50113,50133,50157,50175,50183,50187,50195,50216,50249,50258,50266,50294,50302],{"__ignoreMap":576},[637,50114,50115,50117,50119,50121,50123,50125,50127,50129,50131],{"class":639,"line":577},[637,50116,643],{"class":642},[637,50118,647],{"class":646},[637,50120,651],{"class":650},[637,50122,654],{"class":650},[637,50124,657],{"class":642},[637,50126,660],{"class":642},[637,50128,664],{"class":663},[637,50130,660],{"class":642},[637,50132,669],{"class":642},[637,50134,50136,50138,50140,50142,50144,50147,50149,50151,50153,50155],{"class":50135,"line":578},[639,673],[637,50137,677],{"class":676},[637,50139,680],{"class":642},[637,50141,690],{"class":683},[637,50143,687],{"class":642},[637,50145,50146],{"class":683}," Sky",[637,50148,693],{"class":642},[637,50150,696],{"class":676},[637,50152,699],{"class":642},[637,50154,702],{"class":663},[637,50156,705],{"class":642},[637,50158,50159,50161,50163,50165,50167,50169,50171,50173],{"class":639,"line":708},[637,50160,677],{"class":676},[637,50162,680],{"class":642},[637,50164,715],{"class":683},[637,50166,693],{"class":642},[637,50168,696],{"class":676},[637,50170,699],{"class":642},[637,50172,724],{"class":663},[637,50174,705],{"class":642},[637,50176,50177,50179,50181],{"class":639,"line":729},[637,50178,732],{"class":642},[637,50180,647],{"class":646},[637,50182,669],{"class":642},[637,50184,50185],{"class":639,"line":739},[637,50186,742],{"emptyLinePlaceholder":594},[637,50188,50189,50191,50193],{"class":639,"line":745},[637,50190,643],{"class":642},[637,50192,750],{"class":646},[637,50194,669],{"class":642},[637,50196,50197,50199,50201,50203,50206,50208,50210,50212,50214],{"class":639,"line":755},[637,50198,758],{"class":642},[637,50200,761],{"class":646},[637,50202,813],{"class":642},[637,50204,50205],{"class":650},"tone-mapping-exposure",[637,50207,657],{"class":642},[637,50209,660],{"class":642},[637,50211,14347],{"class":823},[637,50213,660],{"class":642},[637,50215,669],{"class":642},[637,50217,50218,50220,50222,50224,50226,50228,50230,50232,50234,50236,50238,50240,50243,50245,50247],{"class":639,"line":778},[637,50219,781],{"class":642},[637,50221,784],{"class":646},[637,50223,813],{"class":642},[637,50225,1491],{"class":650},[637,50227,657],{"class":642},[637,50229,660],{"class":642},[637,50231,1498],{"class":642},[637,50233,969],{"class":823},[637,50235,1503],{"class":642},[637,50237,6382],{"class":823},[637,50239,1503],{"class":642},[637,50241,50242],{"class":823},"200",[637,50244,1513],{"class":642},[637,50246,660],{"class":642},[637,50248,787],{"class":642},[637,50250,50252,50254,50256],{"class":50251,"line":790},[639,673],[637,50253,781],{"class":642},[637,50255,399],{"class":646},[637,50257,787],{"class":642},[637,50259,50260,50262,50264],{"class":639,"line":800},[637,50261,781],{"class":642},[637,50263,795],{"class":646},[637,50265,787],{"class":642},[637,50267,50268,50270,50272,50274,50276,50278,50280,50282,50284,50286,50288,50290,50292],{"class":639,"line":805},[637,50269,781],{"class":642},[637,50271,8311],{"class":646},[637,50273,813],{"class":642},[637,50275,2021],{"class":650},[637,50277,657],{"class":642},[637,50279,660],{"class":642},[637,50281,1498],{"class":642},[637,50283,9586],{"class":823},[637,50285,1503],{"class":642},[637,50287,32586],{"class":823},[637,50289,1513],{"class":642},[637,50291,660],{"class":642},[637,50293,787],{"class":642},[637,50295,50296,50298,50300],{"class":639,"line":831},[637,50297,909],{"class":642},[637,50299,761],{"class":646},[637,50301,669],{"class":642},[637,50303,50304,50306,50308],{"class":639,"line":631},[637,50305,732],{"class":642},[637,50307,750],{"class":646},[637,50309,669],{"class":642},[504,50311,926],{"id":925},[931,50313,50314,50328],{},[934,50315,50316],{},[937,50317,50318,50320,50322,50324,50326],{},[940,50319,8360],{"align":1001},[940,50321,6178],{"align":1001},[940,50323,945],{"align":1001},[940,50325,948],{"align":1001},[940,50327,19523],{"align":1001},[950,50329,50330,50351,50375,50401,50424,50444,50471],{},[937,50331,50332,50337,50341,50344,50349],{},[955,50333,50334],{"align":1001},[1705,50335,50336],{},"turbidity",[955,50338,50339],{"align":1001},[618,50340,5564],{},[955,50342,50343],{"align":1001},"Haziness",[955,50345,50346],{"align":1001},[618,50347,50348],{},"3.4",[955,50350,48398],{"align":1001},[937,50352,50353,50358,50362,50369,50373],{},[955,50354,50355],{"align":1001},[1705,50356,50357],{},"rayleigh",[955,50359,50360],{"align":1001},[618,50361,5564],{},[955,50363,50364],{"align":1001},[1144,50365,50368],{"href":50366,"rel":50367},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FRayleigh_scattering",[1148],"Rayleigh scattering",[955,50370,50371],{"align":1001},[618,50372,2729],{},[955,50374,48398],{"align":1001},[937,50376,50377,50382,50386,50394,50399],{},[955,50378,50379],{"align":1001},[1705,50380,50381],{},"mieCoefficient",[955,50383,50384],{"align":1001},[618,50385,5564],{},[955,50387,50388,50393],{"align":1001},[1144,50389,50392],{"href":50390,"rel":50391},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMie_scattering",[1148],"Mie scattering"," amount",[955,50395,50396],{"align":1001},[618,50397,50398],{},"0.005",[955,50400,48398],{"align":1001},[937,50402,50403,50408,50412,50418,50422],{},[955,50404,50405],{"align":1001},[1705,50406,50407],{},"mieDirectionalG",[955,50409,50410],{"align":1001},[618,50411,5564],{},[955,50413,50414,50417],{"align":1001},[1144,50415,50392],{"href":50390,"rel":50416},[1148]," direction",[955,50419,50420],{"align":1001},[618,50421,4120],{},[955,50423,48398],{"align":1001},[937,50425,50426,50431,50435,50438,50442],{},[955,50427,50428],{"align":1001},[1705,50429,50430],{},"elevation",[955,50432,50433],{"align":1001},[618,50434,5564],{},[955,50436,50437],{"align":1001},"Sun's elevation from the horizon, in degrees",[955,50439,50440],{"align":1001},[618,50441,11028],{},[955,50443,48398],{"align":1001},[937,50445,50446,50451,50455,50464,50469],{},[955,50447,50448],{"align":1001},[1705,50449,50450],{},"azimuth",[955,50452,50453],{"align":1001},[618,50454,5564],{},[955,50456,50457,50458,50463],{"align":1001},"Sun's ",[1144,50459,50462],{"href":50460,"rel":50461},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSolar_azimuth_angle",[1148],"azimuth angle",", in degrees – its horizontal coordinate on the horizon",[955,50465,50466],{"align":1001},[618,50467,50468],{},"180",[955,50470,48398],{"align":1001},[937,50472,50473,50477,50481,50484,50489],{},[955,50474,50475],{"align":1001},[1705,50476,14251],{},[955,50478,50479],{"align":1001},[618,50480,5564],{},[955,50482,50483],{"align":1001},"Sky box scale",[955,50485,50486],{"align":1001},[618,50487,50488],{},"450000",[955,50490,48398],{"align":1001},[1331,50492,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":50494},[50495,50496],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Wrapper for the Three.js Sky add-on with sun position controls.",{},{"title":399,"description":50497},"z9xEmwuzWS7Jr3s3_7eT9BeV1McRoKp3ZlWGZa_0yWI",{"id":50502,"title":403,"body":50503,"description":50908,"extension":591,"links":592,"meta":50909,"navigation":594,"path":404,"seo":50910,"stem":405,"__hash__":50911},"docs\u002F2.api\u002F8.staging\u002Fsmoke.md",{"type":501,"value":50504,"toc":50902},[50505,50510,50516,50518,50523,50528,50698,50700,50892,50896,50900],[2367,50506,50507],{},[50508,50509],"staging-smoke",{},[614,50511,50512,50515],{},[618,50513,50514],{},"\u003CSmoke \u002F>"," is a component that renders a smoke in your scene. It is an abstraction that use a combination of textures, transparency and some calculation, to create a beautiful smoke - cloud - fog effect",[504,50517,15],{"id":624},[3292,50519,50520],{},[614,50521,50522],{},"Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component",[614,50524,49060,50525,50527],{},[618,50526,50514],{}," component without passing any props, but still if you want you can tweak the props to find the best setup for you",[626,50529,50531],{"className":628,"code":50530,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Smoke } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CSuspense>\n \u003CSmoke \u002F>\n \u003C\u002FSuspense>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,50532,50533,50553,50571,50590,50598,50602,50610,50618,50650,50658,50666,50674,50682,50690],{"__ignoreMap":576},[637,50534,50535,50537,50539,50541,50543,50545,50547,50549,50551],{"class":639,"line":577},[637,50536,643],{"class":642},[637,50538,647],{"class":646},[637,50540,651],{"class":650},[637,50542,654],{"class":650},[637,50544,657],{"class":642},[637,50546,660],{"class":642},[637,50548,664],{"class":663},[637,50550,660],{"class":642},[637,50552,669],{"class":642},[637,50554,50555,50557,50559,50561,50563,50565,50567,50569],{"class":639,"line":578},[637,50556,677],{"class":676},[637,50558,680],{"class":642},[637,50560,715],{"class":683},[637,50562,693],{"class":642},[637,50564,696],{"class":676},[637,50566,699],{"class":642},[637,50568,724],{"class":663},[637,50570,705],{"class":642},[637,50572,50573,50575,50577,50580,50582,50584,50586,50588],{"class":639,"line":708},[637,50574,677],{"class":676},[637,50576,680],{"class":642},[637,50578,50579],{"class":683}," Smoke",[637,50581,693],{"class":642},[637,50583,696],{"class":676},[637,50585,699],{"class":642},[637,50587,702],{"class":663},[637,50589,705],{"class":642},[637,50591,50592,50594,50596],{"class":639,"line":729},[637,50593,732],{"class":642},[637,50595,647],{"class":646},[637,50597,669],{"class":642},[637,50599,50600],{"class":639,"line":739},[637,50601,742],{"emptyLinePlaceholder":594},[637,50603,50604,50606,50608],{"class":639,"line":745},[637,50605,643],{"class":642},[637,50607,750],{"class":646},[637,50609,669],{"class":642},[637,50611,50612,50614,50616],{"class":639,"line":755},[637,50613,758],{"class":642},[637,50615,761],{"class":646},[637,50617,669],{"class":642},[637,50619,50620,50622,50624,50626,50628,50630,50632,50634,50636,50638,50640,50642,50644,50646,50648],{"class":639,"line":778},[637,50621,781],{"class":642},[637,50623,784],{"class":646},[637,50625,813],{"class":642},[637,50627,1491],{"class":650},[637,50629,657],{"class":642},[637,50631,660],{"class":642},[637,50633,1498],{"class":642},[637,50635,969],{"class":823},[637,50637,1503],{"class":642},[637,50639,2729],{"class":823},[637,50641,1503],{"class":642},[637,50643,7666],{"class":823},[637,50645,1513],{"class":642},[637,50647,660],{"class":642},[637,50649,787],{"class":642},[637,50651,50652,50654,50656],{"class":639,"line":790},[637,50653,781],{"class":642},[637,50655,22688],{"class":646},[637,50657,669],{"class":642},[637,50659,50660,50662,50664],{"class":639,"line":800},[637,50661,857],{"class":642},[637,50663,403],{"class":646},[637,50665,787],{"class":642},[637,50667,50668,50670,50672],{"class":639,"line":805},[637,50669,899],{"class":642},[637,50671,22688],{"class":646},[637,50673,669],{"class":642},[637,50675,50676,50678,50680],{"class":639,"line":831},[637,50677,781],{"class":642},[637,50679,10010],{"class":646},[637,50681,787],{"class":642},[637,50683,50684,50686,50688],{"class":639,"line":631},[637,50685,909],{"class":642},[637,50687,761],{"class":646},[637,50689,669],{"class":642},[637,50691,50692,50694,50696],{"class":639,"line":854},[637,50693,732],{"class":642},[637,50695,750],{"class":646},[637,50697,669],{"class":642},[504,50699,926],{"id":925},[931,50701,50702,50714],{},[934,50703,50704],{},[937,50705,50706,50708,50710,50712],{},[940,50707,8360],{"align":1001},[940,50709,6178],{"align":1001},[940,50711,945],{"align":1001},[940,50713,948],{"align":1001},[950,50715,50716,50734,50751,50768,50785,50802,50822,50840,50858,50876],{},[937,50717,50718,50722,50726,50729],{},[955,50719,50720],{"align":1001},[1705,50721,7770],{},[955,50723,50724],{"align":1001},[618,50725,7785],{},[955,50727,50728],{"align":1001},"The color of the smoke.",[955,50730,50731],{"align":1001},[618,50732,50733],{},"'#ffffff'",[937,50735,50736,50740,50744,50747],{},[955,50737,50738],{"align":1001},[1705,50739,12179],{},[955,50741,50742],{"align":1001},[618,50743,5564],{},[955,50745,50746],{"align":1001},"The strength of the opacity.",[955,50748,50749],{"align":1001},[618,50750,1545],{},[937,50752,50753,50757,50761,50764],{},[955,50754,50755],{"align":1001},[1705,50756,9976],{},[955,50758,50759],{"align":1001},[618,50760,5564],{},[955,50762,50763],{"align":1001},"The rotation speed of the smoke.",[955,50765,50766],{"align":1001},[618,50767,41457],{},[937,50769,50770,50774,50778,50781],{},[955,50771,50772],{"align":1001},[1705,50773,13664],{},[955,50775,50776],{"align":1001},[618,50777,5564],{},[955,50779,50780],{"align":1001},"The base depth.",[955,50782,50783],{"align":1001},[618,50784,30749],{},[937,50786,50787,50791,50795,50798],{},[955,50788,50789],{"align":1001},[1705,50790,32474],{},[955,50792,50793],{"align":1001},[618,50794,5564],{},[955,50796,50797],{"align":1001},"The number of smoke to render.",[955,50799,50800],{"align":1001},[618,50801,1510],{},[937,50803,50804,50808,50812,50815],{},[955,50805,50806],{"align":1001},[1705,50807,2801],{},[955,50809,50810],{"align":1001},[618,50811,3665],{},[955,50813,50814],{"align":1001},"The texture of the smoke.",[955,50816,50817],{"align":1001},[1144,50818,50821],{"href":50819,"rel":50820},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fclouds\u002FdefaultCloud.png",[1148],"link",[937,50823,50824,50829,50833,50836],{},[955,50825,50826],{"align":1001},[1705,50827,50828],{},"depthTest",[955,50830,50831],{"align":1001},[618,50832,18466],{},[955,50834,50835],{"align":1001},"The depthTest.",[955,50837,50838],{"align":1001},[618,50839,975],{},[937,50841,50842,50847,50851,50854],{},[955,50843,50844],{"align":1001},[1705,50845,50846],{},"spreadY",[955,50848,50849],{"align":1001},[618,50850,5564],{},[955,50852,50853],{"align":1001},"Spread on the Y axis.",[955,50855,50856],{"align":1001},[618,50857,2235],{},[937,50859,50860,50865,50869,50872],{},[955,50861,50862],{"align":1001},[1705,50863,50864],{},"spreadX",[955,50866,50867],{"align":1001},[618,50868,5564],{},[955,50870,50871],{"align":1001},"Spread on the X axis.",[955,50873,50874],{"align":1001},[618,50875,1545],{},[937,50877,50878,50882,50886,50888],{},[955,50879,50880],{"align":1001},[1705,50881,816],{},[955,50883,50884],{"align":1001},[618,50885,5564],{},[955,50887,816],{"align":1001},[955,50889,50890],{"align":1001},[618,50891,1925],{},[4215,50893,50895],{"id":50894},"default-texture","Default texture",[614,50897,50898],{},[9760,50899],{"alt":50895,"src":50819},[1331,50901,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":50903},[50904,50905],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926,"children":50906},[50907],{"id":50894,"depth":708,"text":50895},"Beautiful smoke, cloud, and fog effect using textures and transparency.",{},{"title":403,"description":50908},"vwnSNX06jUUY3lZUYaNYvnoK84rsl-FxeFCuDKNEtR0",{"id":50913,"title":407,"body":50914,"description":52817,"extension":591,"links":592,"meta":52818,"navigation":594,"path":408,"seo":52819,"stem":409,"__hash__":52820},"docs\u002F2.api\u002F8.staging\u002Fsparkles.md",{"type":501,"value":50915,"toc":52808},[50916,50922,50924,50928,51109,51113,51116,51408,51412,51430,51457,51463,51480,51781,51785,51801,51830,51840,52167,52169,52806],[614,50917,50918,50921],{},[618,50919,50920],{},"\u003CSparkles \u002F>"," makes sparkles on your geometry's vertices – optionally guided by a directional light.",[504,50923,15],{"id":624},[4215,50925,50927],{"id":50926},"basic","Basic",[626,50929,50932],{"className":628,"code":50930,"highlights":50931,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Sparkles } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CTresMesh>\n \u003CTresSphereGeometry \u002F>\n \u003CSparkles \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,805],[618,50933,50934,50954,50972,50992,51000,51004,51012,51020,51052,51060,51068,51077,51085,51093,51101],{"__ignoreMap":576},[637,50935,50936,50938,50940,50942,50944,50946,50948,50950,50952],{"class":639,"line":577},[637,50937,643],{"class":642},[637,50939,647],{"class":646},[637,50941,651],{"class":650},[637,50943,654],{"class":650},[637,50945,657],{"class":642},[637,50947,660],{"class":642},[637,50949,664],{"class":663},[637,50951,660],{"class":642},[637,50953,669],{"class":642},[637,50955,50956,50958,50960,50962,50964,50966,50968,50970],{"class":639,"line":578},[637,50957,677],{"class":676},[637,50959,680],{"class":642},[637,50961,715],{"class":683},[637,50963,693],{"class":642},[637,50965,696],{"class":676},[637,50967,699],{"class":642},[637,50969,724],{"class":663},[637,50971,705],{"class":642},[637,50973,50975,50977,50979,50982,50984,50986,50988,50990],{"class":50974,"line":708},[639,673],[637,50976,677],{"class":676},[637,50978,680],{"class":642},[637,50980,50981],{"class":683}," Sparkles",[637,50983,693],{"class":642},[637,50985,696],{"class":676},[637,50987,699],{"class":642},[637,50989,702],{"class":663},[637,50991,705],{"class":642},[637,50993,50994,50996,50998],{"class":639,"line":729},[637,50995,732],{"class":642},[637,50997,647],{"class":646},[637,50999,669],{"class":642},[637,51001,51002],{"class":639,"line":739},[637,51003,742],{"emptyLinePlaceholder":594},[637,51005,51006,51008,51010],{"class":639,"line":745},[637,51007,643],{"class":642},[637,51009,750],{"class":646},[637,51011,669],{"class":642},[637,51013,51014,51016,51018],{"class":639,"line":755},[637,51015,758],{"class":642},[637,51017,761],{"class":646},[637,51019,669],{"class":642},[637,51021,51022,51024,51026,51028,51030,51032,51034,51036,51038,51040,51042,51044,51046,51048,51050],{"class":639,"line":778},[637,51023,781],{"class":642},[637,51025,784],{"class":646},[637,51027,813],{"class":642},[637,51029,1491],{"class":650},[637,51031,657],{"class":642},[637,51033,660],{"class":642},[637,51035,1498],{"class":642},[637,51037,969],{"class":823},[637,51039,1503],{"class":642},[637,51041,2729],{"class":823},[637,51043,1503],{"class":642},[637,51045,7666],{"class":823},[637,51047,1513],{"class":642},[637,51049,660],{"class":642},[637,51051,787],{"class":642},[637,51053,51054,51056,51058],{"class":639,"line":790},[637,51055,781],{"class":642},[637,51057,860],{"class":646},[637,51059,669],{"class":642},[637,51061,51062,51064,51066],{"class":639,"line":800},[637,51063,857],{"class":642},[637,51065,4107],{"class":646},[637,51067,787],{"class":642},[637,51069,51071,51073,51075],{"class":51070,"line":805},[639,673],[637,51072,857],{"class":642},[637,51074,407],{"class":646},[637,51076,787],{"class":642},[637,51078,51079,51081,51083],{"class":639,"line":831},[637,51080,899],{"class":642},[637,51082,860],{"class":646},[637,51084,669],{"class":642},[637,51086,51087,51089,51091],{"class":639,"line":631},[637,51088,781],{"class":642},[637,51090,10010],{"class":646},[637,51092,787],{"class":642},[637,51094,51095,51097,51099],{"class":639,"line":854},[637,51096,909],{"class":642},[637,51098,761],{"class":646},[637,51100,669],{"class":642},[637,51102,51103,51105,51107],{"class":639,"line":865},[637,51104,732],{"class":642},[637,51106,750],{"class":646},[637,51108,669],{"class":642},[4215,51110,51112],{"id":51111},"with-tresdirectionallight","With TresDirectionalLight",[614,51114,51115],{},"By default, sparkles appear on the up-facing vertices. However, you can pass a directional light to the component. Moving the directional light will cause \"lit\" vertices to emit sparkles.",[626,51117,51120],{"className":628,"code":51118,"highlights":51119,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Sparkles } from '@tresjs\u002Fcientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CTresMesh>\n \u003CTresSphereGeometry \u002F>\n \u003CSparkles :directional-light=\"directionalLightRef\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresDirectionalLight\n ref=\"directionalLightRef\"\n :position=\"[3, 3, 3]\"\n :intensity=\"2\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[745,854,886],[618,51121,51122,51142,51160,51178,51196,51200,51214,51222,51226,51234,51242,51274,51282,51290,51313,51321,51327,51340,51366,51380,51384,51392,51400],{"__ignoreMap":576},[637,51123,51124,51126,51128,51130,51132,51134,51136,51138,51140],{"class":639,"line":577},[637,51125,643],{"class":642},[637,51127,647],{"class":646},[637,51129,651],{"class":650},[637,51131,654],{"class":650},[637,51133,657],{"class":642},[637,51135,660],{"class":642},[637,51137,664],{"class":663},[637,51139,660],{"class":642},[637,51141,669],{"class":642},[637,51143,51144,51146,51148,51150,51152,51154,51156,51158],{"class":639,"line":578},[637,51145,677],{"class":676},[637,51147,680],{"class":642},[637,51149,715],{"class":683},[637,51151,693],{"class":642},[637,51153,696],{"class":676},[637,51155,699],{"class":642},[637,51157,724],{"class":663},[637,51159,705],{"class":642},[637,51161,51162,51164,51166,51168,51170,51172,51174,51176],{"class":639,"line":708},[637,51163,677],{"class":676},[637,51165,680],{"class":642},[637,51167,50981],{"class":683},[637,51169,693],{"class":642},[637,51171,696],{"class":676},[637,51173,699],{"class":642},[637,51175,702],{"class":663},[637,51177,705],{"class":642},[637,51179,51180,51182,51184,51186,51188,51190,51192,51194],{"class":639,"line":729},[637,51181,677],{"class":676},[637,51183,680],{"class":642},[637,51185,3591],{"class":683},[637,51187,693],{"class":642},[637,51189,696],{"class":676},[637,51191,699],{"class":642},[637,51193,633],{"class":663},[637,51195,705],{"class":642},[637,51197,51198],{"class":639,"line":739},[637,51199,742],{"emptyLinePlaceholder":594},[637,51201,51203,51205,51208,51210,51212],{"class":51202,"line":745},[639,673],[637,51204,2487],{"class":650},[637,51206,51207],{"class":683}," directionalLightRef ",[637,51209,657],{"class":642},[637,51211,3591],{"class":2506},[637,51213,6744],{"class":683},[637,51215,51216,51218,51220],{"class":639,"line":755},[637,51217,732],{"class":642},[637,51219,647],{"class":646},[637,51221,669],{"class":642},[637,51223,51224],{"class":639,"line":778},[637,51225,742],{"emptyLinePlaceholder":594},[637,51227,51228,51230,51232],{"class":639,"line":790},[637,51229,643],{"class":642},[637,51231,750],{"class":646},[637,51233,669],{"class":642},[637,51235,51236,51238,51240],{"class":639,"line":800},[637,51237,758],{"class":642},[637,51239,761],{"class":646},[637,51241,669],{"class":642},[637,51243,51244,51246,51248,51250,51252,51254,51256,51258,51260,51262,51264,51266,51268,51270,51272],{"class":639,"line":805},[637,51245,781],{"class":642},[637,51247,784],{"class":646},[637,51249,813],{"class":642},[637,51251,1491],{"class":650},[637,51253,657],{"class":642},[637,51255,660],{"class":642},[637,51257,1498],{"class":642},[637,51259,969],{"class":823},[637,51261,1503],{"class":642},[637,51263,2729],{"class":823},[637,51265,1503],{"class":642},[637,51267,7666],{"class":823},[637,51269,1513],{"class":642},[637,51271,660],{"class":642},[637,51273,787],{"class":642},[637,51275,51276,51278,51280],{"class":639,"line":831},[637,51277,781],{"class":642},[637,51279,860],{"class":646},[637,51281,669],{"class":642},[637,51283,51284,51286,51288],{"class":639,"line":631},[637,51285,857],{"class":642},[637,51287,4107],{"class":646},[637,51289,787],{"class":642},[637,51291,51293,51295,51297,51299,51302,51304,51306,51309,51311],{"class":51292,"line":854},[639,673],[637,51294,857],{"class":642},[637,51296,407],{"class":646},[637,51298,813],{"class":642},[637,51300,51301],{"class":650},"directional-light",[637,51303,657],{"class":642},[637,51305,660],{"class":642},[637,51307,51308],{"class":683},"directionalLightRef",[637,51310,660],{"class":642},[637,51312,787],{"class":642},[637,51314,51315,51317,51319],{"class":639,"line":865},[637,51316,899],{"class":642},[637,51318,860],{"class":646},[637,51320,669],{"class":642},[637,51322,51323,51325],{"class":639,"line":876},[637,51324,781],{"class":642},[637,51326,18129],{"class":646},[637,51328,51330,51332,51334,51336,51338],{"class":51329,"line":886},[639,673],[637,51331,12986],{"class":650},[637,51333,657],{"class":642},[637,51335,660],{"class":642},[637,51337,51308],{"class":663},[637,51339,3224],{"class":642},[637,51341,51342,51344,51346,51348,51350,51352,51354,51356,51358,51360,51362,51364],{"class":639,"line":632},[637,51343,13000],{"class":642},[637,51345,1491],{"class":650},[637,51347,657],{"class":642},[637,51349,660],{"class":642},[637,51351,1498],{"class":642},[637,51353,2729],{"class":823},[637,51355,1503],{"class":642},[637,51357,2729],{"class":823},[637,51359,1503],{"class":642},[637,51361,2729],{"class":823},[637,51363,1513],{"class":642},[637,51365,3224],{"class":642},[637,51367,51368,51370,51372,51374,51376,51378],{"class":639,"line":906},[637,51369,13000],{"class":642},[637,51371,1918],{"class":650},[637,51373,657],{"class":642},[637,51375,660],{"class":642},[637,51377,824],{"class":823},[637,51379,3224],{"class":642},[637,51381,51382],{"class":639,"line":916},[637,51383,18174],{"class":642},[637,51385,51386,51388,51390],{"class":639,"line":2695},[637,51387,781],{"class":642},[637,51389,10010],{"class":646},[637,51391,787],{"class":642},[637,51393,51394,51396,51398],{"class":639,"line":2704},[637,51395,909],{"class":642},[637,51397,761],{"class":646},[637,51399,669],{"class":642},[637,51401,51402,51404,51406],{"class":639,"line":2738},[637,51403,732],{"class":642},[637,51405,750],{"class":646},[637,51407,669],{"class":642},[4215,51409,51411],{"id":51410},"sequences","Sequences",[614,51413,51414,51415,51418,51419,8437,51423,51425,51426,51429],{},"All props beginning with ",[618,51416,51417],{},":sequence-"," are used to define how a particle changes as it progresses ",[1144,51420,51422],{"href":51421},"#mixes","(See also: Mixes)",[618,51424,51417],{}," props are of the type ",[618,51427,51428],{},"Gradient\u003CT>",", which can be any one of:",[2285,51431,51432,51438,51444],{},[2288,51433,51434,51437],{},[618,51435,51436],{},"T",": a single value",[2288,51439,51440,51443],{},[618,51441,51442],{},"[T, T, T, ...]",": an evenly distributed series of values",[2288,51445,51446,51449,51450,51452,51453,2322,51455,1150],{},[618,51447,51448],{},"[[number, T], [number, T], ...]",": an unevently distributed series of values, where ",[618,51451,5564],{}," is a gradient \"stop\" from ",[618,51454,969],{},[618,51456,1925],{},[614,51458,51459,51460,1222],{},"For example, all of these are acceptable values for ",[618,51461,51462],{},"Gradient\u003CTresColor>",[2285,51464,51465,51470,51475],{},[2288,51466,51467],{},[618,51468,51469],{},"'red'",[2288,51471,51472],{},[618,51473,51474],{},"['red', 'blue', 'green']",[2288,51476,51477],{},[618,51478,51479],{},"[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]",[626,51481,51484],{"className":628,"code":51482,"highlights":51483,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Sparkles } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CTresMesh>\n \u003CTresSphereGeometry \u002F>\n \u003CSparkles\n :sequence-color=\"['red', 'blue', 'green']\"\n :sequence-alpha=\"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]\"\n :sequence-size=\"[0.0, 1.0, 0.5]\"\n \u002F>\n \u003C\u002FTresMesh>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[805,831,631,854],[618,51485,51486,51506,51524,51542,51550,51554,51562,51570,51602,51610,51618,51626,51668,51717,51745,51749,51757,51765,51773],{"__ignoreMap":576},[637,51487,51488,51490,51492,51494,51496,51498,51500,51502,51504],{"class":639,"line":577},[637,51489,643],{"class":642},[637,51491,647],{"class":646},[637,51493,651],{"class":650},[637,51495,654],{"class":650},[637,51497,657],{"class":642},[637,51499,660],{"class":642},[637,51501,664],{"class":663},[637,51503,660],{"class":642},[637,51505,669],{"class":642},[637,51507,51508,51510,51512,51514,51516,51518,51520,51522],{"class":639,"line":578},[637,51509,677],{"class":676},[637,51511,680],{"class":642},[637,51513,715],{"class":683},[637,51515,693],{"class":642},[637,51517,696],{"class":676},[637,51519,699],{"class":642},[637,51521,724],{"class":663},[637,51523,705],{"class":642},[637,51525,51526,51528,51530,51532,51534,51536,51538,51540],{"class":639,"line":708},[637,51527,677],{"class":676},[637,51529,680],{"class":642},[637,51531,50981],{"class":683},[637,51533,693],{"class":642},[637,51535,696],{"class":676},[637,51537,699],{"class":642},[637,51539,702],{"class":663},[637,51541,705],{"class":642},[637,51543,51544,51546,51548],{"class":639,"line":729},[637,51545,732],{"class":642},[637,51547,647],{"class":646},[637,51549,669],{"class":642},[637,51551,51552],{"class":639,"line":739},[637,51553,742],{"emptyLinePlaceholder":594},[637,51555,51556,51558,51560],{"class":639,"line":745},[637,51557,643],{"class":642},[637,51559,750],{"class":646},[637,51561,669],{"class":642},[637,51563,51564,51566,51568],{"class":639,"line":755},[637,51565,758],{"class":642},[637,51567,761],{"class":646},[637,51569,669],{"class":642},[637,51571,51572,51574,51576,51578,51580,51582,51584,51586,51588,51590,51592,51594,51596,51598,51600],{"class":639,"line":778},[637,51573,781],{"class":642},[637,51575,784],{"class":646},[637,51577,813],{"class":642},[637,51579,1491],{"class":650},[637,51581,657],{"class":642},[637,51583,660],{"class":642},[637,51585,1498],{"class":642},[637,51587,969],{"class":823},[637,51589,1503],{"class":642},[637,51591,2729],{"class":823},[637,51593,1503],{"class":642},[637,51595,7666],{"class":823},[637,51597,1513],{"class":642},[637,51599,660],{"class":642},[637,51601,787],{"class":642},[637,51603,51604,51606,51608],{"class":639,"line":790},[637,51605,781],{"class":642},[637,51607,860],{"class":646},[637,51609,669],{"class":642},[637,51611,51612,51614,51616],{"class":639,"line":800},[637,51613,857],{"class":642},[637,51615,4107],{"class":646},[637,51617,787],{"class":642},[637,51619,51621,51623],{"class":51620,"line":805},[639,673],[637,51622,857],{"class":642},[637,51624,51625],{"class":646},"Sparkles\n",[637,51627,51629,51631,51634,51636,51638,51640,51642,51644,51646,51648,51650,51653,51655,51657,51659,51662,51664,51666],{"class":51628,"line":831},[639,673],[637,51630,8241],{"class":642},[637,51632,51633],{"class":650},"sequence-color",[637,51635,657],{"class":642},[637,51637,660],{"class":642},[637,51639,1498],{"class":642},[637,51641,2512],{"class":642},[637,51643,39050],{"class":663},[637,51645,2512],{"class":642},[637,51647,1503],{"class":642},[637,51649,2512],{"class":642},[637,51651,51652],{"class":663},"blue",[637,51654,2512],{"class":642},[637,51656,1503],{"class":642},[637,51658,2512],{"class":642},[637,51660,51661],{"class":663},"green",[637,51663,2512],{"class":642},[637,51665,1513],{"class":642},[637,51667,3224],{"class":642},[637,51669,51671,51673,51676,51678,51680,51682,51684,51686,51688,51690,51693,51695,51697,51699,51701,51703,51705,51707,51709,51711,51713,51715],{"class":51670,"line":631},[639,673],[637,51672,8241],{"class":642},[637,51674,51675],{"class":650},"sequence-alpha",[637,51677,657],{"class":642},[637,51679,660],{"class":642},[637,51681,34925],{"class":642},[637,51683,14513],{"class":823},[637,51685,1503],{"class":642},[637,51687,14513],{"class":823},[637,51689,34938],{"class":642},[637,51691,51692],{"class":823},"0.10",[637,51694,1503],{"class":642},[637,51696,14391],{"class":823},[637,51698,34938],{"class":642},[637,51700,1545],{"class":823},[637,51702,1503],{"class":642},[637,51704,14391],{"class":823},[637,51706,34938],{"class":642},[637,51708,37288],{"class":823},[637,51710,1503],{"class":642},[637,51712,14513],{"class":823},[637,51714,34975],{"class":642},[637,51716,3224],{"class":642},[637,51718,51720,51722,51725,51727,51729,51731,51733,51735,51737,51739,51741,51743],{"class":51719,"line":854},[639,673],[637,51721,8241],{"class":642},[637,51723,51724],{"class":650},"sequence-size",[637,51726,657],{"class":642},[637,51728,660],{"class":642},[637,51730,1498],{"class":642},[637,51732,14513],{"class":823},[637,51734,1503],{"class":642},[637,51736,14391],{"class":823},[637,51738,1503],{"class":642},[637,51740,1545],{"class":823},[637,51742,1513],{"class":642},[637,51744,3224],{"class":642},[637,51746,51747],{"class":639,"line":865},[637,51748,8295],{"class":642},[637,51750,51751,51753,51755],{"class":639,"line":876},[637,51752,899],{"class":642},[637,51754,860],{"class":646},[637,51756,669],{"class":642},[637,51758,51759,51761,51763],{"class":639,"line":886},[637,51760,781],{"class":642},[637,51762,10010],{"class":646},[637,51764,787],{"class":642},[637,51766,51767,51769,51771],{"class":639,"line":632},[637,51768,909],{"class":642},[637,51770,761],{"class":646},[637,51772,669],{"class":642},[637,51774,51775,51777,51779],{"class":639,"line":906},[637,51776,732],{"class":642},[637,51778,750],{"class":646},[637,51780,669],{"class":642},[4215,51782,51784],{"id":51783},"mixes","Mixes",[614,51786,51414,51787,51790,51791,51793,51794,51797,51798,1150],{},[618,51788,51789],{},":mix-"," allow you to specify how a particle \"progresses\" through a corresponding ",[618,51792,51417],{}," prop. E.g., ",[618,51795,51796],{},":mix-alpha"," affects ",[618,51799,51800],{},":sequence-alpha",[2285,51802,51803,51821],{},[2288,51804,51805,51806,51808,51809,51811,51812,51814,51815],{},"If the ",[618,51807,51789],{}," prop is ",[618,51810,14513],{},", 'progress' through the ",[618,51813,51417],{}," is determined entirely by the light shining on the surface of the sparkling mesh.",[1144,51816,51818],{"href":51817},"#precisely",[51819,51820,1925],"sup",{},[2288,51822,51805,51823,51808,51825,51811,51827,51829],{},[618,51824,51789],{},[618,51826,14391],{},[618,51828,51417],{}," is determined entirely by the particle's lifetime.",[614,51831,51832,51835,51836,51839],{},[1144,51833],{"id":51834},"precisely"," More precisely, the value is determined by the dot product of the ",[618,51837,51838],{},"directionalLight","'s inverted normalized position and each of the sparkling mesh's vertex normals.",[626,51841,51844],{"className":628,"code":51842,"highlights":51843,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Sparkles } from '@tresjs\u002Fcientos'\nimport { shallowRef } from 'vue'\n\nconst directionalLightRef = shallowRef()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CTresMesh>\n \u003CTresSphereGeometry \u002F>\n \u003CSparkles\n :directional-light=\"directionalLightRef\"\n :mix-color=\"0.8\"\n :mix-alpha=\"0.5\"\n :mix-size=\"0.2\"\n \u002F>\n \u003C\u002FTresMesh>\n \u003CTresDirectionalLight\n ref=\"directionalLightRef\"\n :position=\"[3, 3, 3]\"\n \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,854,865,876,886,632],[618,51845,51846,51866,51884,51903,51921,51925,51937,51945,51949,51957,51965,51997,52005,52013,52020,52035,52051,52067,52083,52087,52095,52101,52113,52139,52143,52151,52159],{"__ignoreMap":576},[637,51847,51848,51850,51852,51854,51856,51858,51860,51862,51864],{"class":639,"line":577},[637,51849,643],{"class":642},[637,51851,647],{"class":646},[637,51853,651],{"class":650},[637,51855,654],{"class":650},[637,51857,657],{"class":642},[637,51859,660],{"class":642},[637,51861,664],{"class":663},[637,51863,660],{"class":642},[637,51865,669],{"class":642},[637,51867,51868,51870,51872,51874,51876,51878,51880,51882],{"class":639,"line":578},[637,51869,677],{"class":676},[637,51871,680],{"class":642},[637,51873,715],{"class":683},[637,51875,693],{"class":642},[637,51877,696],{"class":676},[637,51879,699],{"class":642},[637,51881,724],{"class":663},[637,51883,705],{"class":642},[637,51885,51887,51889,51891,51893,51895,51897,51899,51901],{"class":51886,"line":708},[639,673],[637,51888,677],{"class":676},[637,51890,680],{"class":642},[637,51892,50981],{"class":683},[637,51894,693],{"class":642},[637,51896,696],{"class":676},[637,51898,699],{"class":642},[637,51900,702],{"class":663},[637,51902,705],{"class":642},[637,51904,51905,51907,51909,51911,51913,51915,51917,51919],{"class":639,"line":729},[637,51906,677],{"class":676},[637,51908,680],{"class":642},[637,51910,3591],{"class":683},[637,51912,693],{"class":642},[637,51914,696],{"class":676},[637,51916,699],{"class":642},[637,51918,633],{"class":663},[637,51920,705],{"class":642},[637,51922,51923],{"class":639,"line":739},[637,51924,742],{"emptyLinePlaceholder":594},[637,51926,51927,51929,51931,51933,51935],{"class":639,"line":745},[637,51928,2487],{"class":650},[637,51930,51207],{"class":683},[637,51932,657],{"class":642},[637,51934,3591],{"class":2506},[637,51936,6744],{"class":683},[637,51938,51939,51941,51943],{"class":639,"line":755},[637,51940,732],{"class":642},[637,51942,647],{"class":646},[637,51944,669],{"class":642},[637,51946,51947],{"class":639,"line":778},[637,51948,742],{"emptyLinePlaceholder":594},[637,51950,51951,51953,51955],{"class":639,"line":790},[637,51952,643],{"class":642},[637,51954,750],{"class":646},[637,51956,669],{"class":642},[637,51958,51959,51961,51963],{"class":639,"line":800},[637,51960,758],{"class":642},[637,51962,761],{"class":646},[637,51964,669],{"class":642},[637,51966,51967,51969,51971,51973,51975,51977,51979,51981,51983,51985,51987,51989,51991,51993,51995],{"class":639,"line":805},[637,51968,781],{"class":642},[637,51970,784],{"class":646},[637,51972,813],{"class":642},[637,51974,1491],{"class":650},[637,51976,657],{"class":642},[637,51978,660],{"class":642},[637,51980,1498],{"class":642},[637,51982,969],{"class":823},[637,51984,1503],{"class":642},[637,51986,2729],{"class":823},[637,51988,1503],{"class":642},[637,51990,7666],{"class":823},[637,51992,1513],{"class":642},[637,51994,660],{"class":642},[637,51996,787],{"class":642},[637,51998,51999,52001,52003],{"class":639,"line":831},[637,52000,781],{"class":642},[637,52002,860],{"class":646},[637,52004,669],{"class":642},[637,52006,52007,52009,52011],{"class":639,"line":631},[637,52008,857],{"class":642},[637,52010,4107],{"class":646},[637,52012,787],{"class":642},[637,52014,52016,52018],{"class":52015,"line":854},[639,673],[637,52017,857],{"class":642},[637,52019,51625],{"class":646},[637,52021,52023,52025,52027,52029,52031,52033],{"class":52022,"line":865},[639,673],[637,52024,8241],{"class":642},[637,52026,51301],{"class":650},[637,52028,657],{"class":642},[637,52030,660],{"class":642},[637,52032,51308],{"class":683},[637,52034,3224],{"class":642},[637,52036,52038,52040,52043,52045,52047,52049],{"class":52037,"line":876},[639,673],[637,52039,8241],{"class":642},[637,52041,52042],{"class":650},"mix-color",[637,52044,657],{"class":642},[637,52046,660],{"class":642},[637,52048,25727],{"class":823},[637,52050,3224],{"class":642},[637,52052,52054,52056,52059,52061,52063,52065],{"class":52053,"line":886},[639,673],[637,52055,8241],{"class":642},[637,52057,52058],{"class":650},"mix-alpha",[637,52060,657],{"class":642},[637,52062,660],{"class":642},[637,52064,1545],{"class":823},[637,52066,3224],{"class":642},[637,52068,52070,52072,52075,52077,52079,52081],{"class":52069,"line":632},[639,673],[637,52071,8241],{"class":642},[637,52073,52074],{"class":650},"mix-size",[637,52076,657],{"class":642},[637,52078,660],{"class":642},[637,52080,5938],{"class":823},[637,52082,3224],{"class":642},[637,52084,52085],{"class":639,"line":906},[637,52086,8295],{"class":642},[637,52088,52089,52091,52093],{"class":639,"line":916},[637,52090,899],{"class":642},[637,52092,860],{"class":646},[637,52094,669],{"class":642},[637,52096,52097,52099],{"class":639,"line":2695},[637,52098,781],{"class":642},[637,52100,18129],{"class":646},[637,52102,52103,52105,52107,52109,52111],{"class":639,"line":2704},[637,52104,12986],{"class":650},[637,52106,657],{"class":642},[637,52108,660],{"class":642},[637,52110,51308],{"class":663},[637,52112,3224],{"class":642},[637,52114,52115,52117,52119,52121,52123,52125,52127,52129,52131,52133,52135,52137],{"class":639,"line":2738},[637,52116,13000],{"class":642},[637,52118,1491],{"class":650},[637,52120,657],{"class":642},[637,52122,660],{"class":642},[637,52124,1498],{"class":642},[637,52126,2729],{"class":823},[637,52128,1503],{"class":642},[637,52130,2729],{"class":823},[637,52132,1503],{"class":642},[637,52134,2729],{"class":823},[637,52136,1513],{"class":642},[637,52138,3224],{"class":642},[637,52140,52141],{"class":639,"line":2747},[637,52142,18174],{"class":642},[637,52144,52145,52147,52149],{"class":639,"line":2756},[637,52146,781],{"class":642},[637,52148,10010],{"class":646},[637,52150,787],{"class":642},[637,52152,52153,52155,52157],{"class":639,"line":2765},[637,52154,909],{"class":642},[637,52156,761],{"class":646},[637,52158,669],{"class":642},[637,52160,52161,52163,52165],{"class":639,"line":2787},[637,52162,732],{"class":642},[637,52164,750],{"class":646},[637,52166,669],{"class":642},[504,52168,926],{"id":925},[931,52170,52171,52179],{},[934,52172,52173],{},[937,52174,52175,52177],{},[940,52176,8360],{"align":1001},[940,52178,945],{"align":1001},[950,52180,52181,52203,52236,52258,52278,52298,52318,52339,52359,52379,52399,52418,52437,52456,52476,52503,52525,52547,52568,52589,52610,52644,52665,52685,52706,52726,52746,52768,52787],{},[937,52182,52183,52187],{},[955,52184,52185],{"align":1001},[1705,52186,2825],{},[955,52188,52189,52190,52192,52194,52195,52198,52200,52202],{"align":1001},"Type: ",[618,52191,43618],{},[7778,52193],{},"Default: ",[618,52196,52197],{},"'https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fasset...'",[7778,52199],{},[7778,52201],{},"Texture or image path for individual sparkles",[937,52204,52205,52209],{},[955,52206,52207],{"align":1001},[1705,52208,5333],{},[955,52210,52189,52211,52214,52194,52216,52218,52220,52222,52223,52225],{"align":1001},[618,52212,52213],{},"Object3D | BufferGeometry",[7778,52215],{},[618,52217,1183],{},[7778,52219],{},[7778,52221],{},"Vertices of the geometry will be used to emit sparkles. Geometry normals are used for sparkles' traveling direction and for responding to the directional light prop.",[7778,52224],{},[2285,52226,52227,52230,52233],{},[2288,52228,52229],{},"If provided, the component will use the passed geometry.",[2288,52231,52232],{},"If no geometry is provided, the component will try to make a copy of the parent object's geometry.",[2288,52234,52235],{},"If no parent geometry exists, the component will create and use an IcosphereGeometry.",[937,52237,52238,52242],{},[955,52239,52240],{"align":1001},[1705,52241,51838],{},[955,52243,52189,52244,52246,52194,52248,52250,52252,52254,52255,52257],{"align":1001},[618,52245,7845],{},[7778,52247],{},[618,52249,1183],{},[7778,52251],{},[7778,52253],{},"Particles \"light up\" when their normal \"faces\" the light. If no ",[618,52256,51838],{}," is provided, the default \"up\" vector will be used.",[937,52259,52260,52265],{},[955,52261,52262],{"align":1001},[1705,52263,52264],{},"lifetimeSec",[955,52266,52189,52267,52269,52194,52271,52273,52275,52277],{"align":1001},[618,52268,5564],{},[7778,52270],{},[618,52272,41457],{},[7778,52274],{},[7778,52276],{},"Particle lifetime in seconds",[937,52279,52280,52285],{},[955,52281,52282],{"align":1001},[1705,52283,52284],{},"cooldownSec",[955,52286,52189,52287,52289,52194,52291,52293,52295,52297],{"align":1001},[618,52288,5564],{},[7778,52290],{},[618,52292,14450],{},[7778,52294],{},[7778,52296],{},"Particle cooldown in seconds – time between lifetime end and respawn",[937,52299,52300,52305],{},[955,52301,52302],{"align":1001},[1705,52303,52304],{},"normalThreshold",[955,52306,52189,52307,52309,52194,52311,52313,52315,52317],{"align":1001},[618,52308,5564],{},[7778,52310],{},[618,52312,4120],{},[7778,52314],{},[7778,52316],{},"Number from 0-1 indicating how closely the particle needs to be faced towards the light to \"light up\". (Lower == more flexible)",[937,52319,52320,52325],{},[955,52321,52322],{"align":1001},[1705,52323,52324],{},"noiseScale",[955,52326,52189,52327,52329,52194,52331,52334,52336,52338],{"align":1001},[618,52328,5564],{},[7778,52330],{},[618,52332,52333],{},"3.0",[7778,52335],{},[7778,52337],{},"Scale of the noise period (lower == more slowly cycling noise)",[937,52340,52341,52346],{},[955,52342,52343],{"align":1001},[1705,52344,52345],{},"scaleNoise",[955,52347,52189,52348,52350,52194,52352,52354,52356,52358],{"align":1001},[618,52349,5564],{},[7778,52351],{},[618,52353,14391],{},[7778,52355],{},[7778,52357],{},"Noise coefficient applied to particle scale",[937,52360,52361,52366],{},[955,52362,52363],{"align":1001},[1705,52364,52365],{},"offsetNoise",[955,52367,52189,52368,52370,52194,52372,52374,52376,52378],{"align":1001},[618,52369,5564],{},[7778,52371],{},[618,52373,2235],{},[7778,52375],{},[7778,52377],{},"Noise coefficient applied to particle offset",[937,52380,52381,52386],{},[955,52382,52383],{"align":1001},[1705,52384,52385],{},"lifetimeNoise",[955,52387,52189,52388,52390,52194,52392,52394,52396,52398],{"align":1001},[618,52389,5564],{},[7778,52391],{},[618,52393,14513],{},[7778,52395],{},[7778,52397],{},"Noise coefficient applied to particle lifetime",[937,52400,52401,52405],{},[955,52402,52403],{"align":1001},[1705,52404,17604],{},[955,52406,52189,52407,52409,52194,52411,52413,52415,52417],{"align":1001},[618,52408,5564],{},[7778,52410],{},[618,52412,14391],{},[7778,52414],{},[7778,52416],{},"Particle scale multiplier",[937,52419,52420,52424],{},[955,52421,52422],{"align":1001},[1705,52423,48986],{},[955,52425,52189,52426,52428,52194,52430,52432,52434,52436],{"align":1001},[618,52427,5564],{},[7778,52429],{},[618,52431,14391],{},[7778,52433],{},[7778,52435],{},"Opacity multiplier",[937,52438,52439,52443],{},[955,52440,52441],{"align":1001},[1705,52442,42798],{},[955,52444,52189,52445,52447,52194,52449,52451,52453,52455],{"align":1001},[618,52446,5564],{},[7778,52448],{},[618,52450,14391],{},[7778,52452],{},[7778,52454],{},"Offset multiplier",[937,52457,52458,52463],{},[955,52459,52460],{"align":1001},[1705,52461,52462],{},"surfaceDistance",[955,52464,52189,52465,52467,52194,52469,52471,52473,52475],{"align":1001},[618,52466,5564],{},[7778,52468],{},[618,52470,14391],{},[7778,52472],{},[7778,52474],{},"Surface distance multiplier",[937,52477,52478,52483],{},[955,52479,52480],{"align":1001},[1705,52481,52482],{},"sequenceColor",[955,52484,52189,52485,52487,52194,52489,52492,52494,2512,52496,52499,52500,52502],{"align":1001},[618,52486,51462],{},[7778,52488],{},[618,52490,52491],{},"[[0.7, '#82dbc5'], [0.8, '#fbb03b']]",[7778,52493],{},[7778,52495],{},[1709,52497,52498],{},"Sequence' props: specify how a particle changes as it \"progresses\". See also \"mix","\" props.",[7778,52501],{},"Color sequence as particles progress",[937,52504,52505,52510],{},[955,52506,52507],{"align":1001},[1705,52508,52509],{},"sequenceAlpha",[955,52511,52189,52512,52515,52194,52517,52520,52522,52524],{"align":1001},[618,52513,52514],{},"Gradient\u003Cnumber>",[7778,52516],{},[618,52518,52519],{},"[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]",[7778,52521],{},[7778,52523],{},"Opacity sequence as particles progress",[937,52526,52527,52532],{},[955,52528,52529],{"align":1001},[1705,52530,52531],{},"sequenceOffset",[955,52533,52189,52534,52537,52194,52539,52542,52544,52546],{"align":1001},[618,52535,52536],{},"Gradient\u003C[number, number, number]>",[7778,52538],{},[618,52540,52541],{},"[0.0, 0.0, 0.0]",[7778,52543],{},[7778,52545],{},"Distance sequence as particles progress",[937,52548,52549,52554],{},[955,52550,52551],{"align":1001},[1705,52552,52553],{},"sequenceNoise",[955,52555,52189,52556,52558,52194,52560,52563,52565,52567],{"align":1001},[618,52557,52536],{},[7778,52559],{},[618,52561,52562],{},"[0.1, 0.1, 0.1]",[7778,52564],{},[7778,52566],{},"Noise sequence as particles progress",[937,52569,52570,52575],{},[955,52571,52572],{"align":1001},[1705,52573,52574],{},"sequenceSize",[955,52576,52189,52577,52579,52194,52581,52584,52586,52588],{"align":1001},[618,52578,52514],{},[7778,52580],{},[618,52582,52583],{},"[0.0, 1.0]",[7778,52585],{},[7778,52587],{},"Size sequence as particles progress",[937,52590,52591,52596],{},[955,52592,52593],{"align":1001},[1705,52594,52595],{},"sequenceSurfaceDistance",[955,52597,52189,52598,52600,52194,52602,52605,52607,52609],{"align":1001},[618,52599,52514],{},[7778,52601],{},[618,52603,52604],{},"[0.05, 0.08, 0.1]",[7778,52606],{},[7778,52608],{},"Distance from surface (along normal) as particles progress",[937,52611,52612,52617],{},[955,52613,52614],{"align":1001},[1705,52615,52616],{},"mixColor",[955,52618,52189,52619,52621,52194,52623,52625,52627,52629,52630,52632,52640,52641,52643],{"align":1001},[618,52620,5564],{},[7778,52622],{},[618,52624,1545],{},[7778,52626],{},[7778,52628],{},"'mix*' props: A particle \"progresses\" with a mix of two factors:",[7778,52631],{},[2285,52633,52634,52637],{},[2288,52635,52636],{},"its normal \"facing\" the directionalLight",[2288,52638,52639],{},"its lifetime","'mix*' props specify the relationship between the two factors.",[7778,52642],{},"How is a particle's progress for color calculated? (0: normal, 1: particle lifetime)",[937,52645,52646,52651],{},[955,52647,52648],{"align":1001},[1705,52649,52650],{},"mixAlpha",[955,52652,52189,52653,52655,52194,52657,52660,52662,52664],{"align":1001},[618,52654,5564],{},[7778,52656],{},[618,52658,52659],{},"1.",[7778,52661],{},[7778,52663],{},"How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime)",[937,52666,52667,52672],{},[955,52668,52669],{"align":1001},[1705,52670,52671],{},"mixOffset",[955,52673,52189,52674,52676,52194,52678,52680,52682,52684],{"align":1001},[618,52675,5564],{},[7778,52677],{},[618,52679,52659],{},[7778,52681],{},[7778,52683],{},"How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime)",[937,52686,52687,52692],{},[955,52688,52689],{"align":1001},[1705,52690,52691],{},"mixSize",[955,52693,52189,52694,52696,52194,52698,52701,52703,52705],{"align":1001},[618,52695,5564],{},[7778,52697],{},[618,52699,52700],{},"0.",[7778,52702],{},[7778,52704],{},"How is a particle's progress for size calculated? (0: normal, 1: particle lifetime)",[937,52707,52708,52713],{},[955,52709,52710],{"align":1001},[1705,52711,52712],{},"mixSurfaceDistance",[955,52714,52189,52715,52717,52194,52719,52721,52723,52725],{"align":1001},[618,52716,5564],{},[7778,52718],{},[618,52720,52659],{},[7778,52722],{},[7778,52724],{},"How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime)",[937,52727,52728,52733],{},[955,52729,52730],{"align":1001},[1705,52731,52732],{},"mixNoise",[955,52734,52189,52735,52737,52194,52739,52741,52743,52745],{"align":1001},[618,52736,5564],{},[7778,52738],{},[618,52740,52659],{},[7778,52742],{},[7778,52744],{},"How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime)",[937,52747,52748,52753],{},[955,52749,52750],{"align":1001},[1705,52751,52752],{},"blending",[955,52754,52189,52755,52758,52194,52760,52763,52765,52767],{"align":1001},[618,52756,52757],{},"Blending",[7778,52759],{},[618,52761,52762],{},"AdditiveBlending",[7778,52764],{},[7778,52766],{},"Material blending",[937,52769,52770,52774],{},[955,52771,52772],{"align":1001},[1705,52773,12191],{},[955,52775,52189,52776,52778,52194,52780,52782,52784,52786],{"align":1001},[618,52777,18466],{},[7778,52779],{},[618,52781,965],{},[7778,52783],{},[7778,52785],{},"Material transparency",[937,52788,52789,52793],{},[955,52790,52791],{"align":1001},[1705,52792,10812],{},[955,52794,52189,52795,52797,52194,52799,52801,52803,52805],{"align":1001},[618,52796,18466],{},[7778,52798],{},[618,52800,975],{},[7778,52802],{},[7778,52804],{},"Material depth write",[1331,52807,11724],{},{"title":576,"searchDepth":577,"depth":578,"links":52809},[52810,52816],{"id":624,"depth":578,"text":15,"children":52811},[52812,52813,52814,52815],{"id":50926,"depth":708,"text":50927},{"id":51111,"depth":708,"text":51112},{"id":51410,"depth":708,"text":51411},{"id":51783,"depth":708,"text":51784},{"id":925,"depth":578,"text":926},"Makes sparkles on geometry vertices, optionally guided by directional light.",{},{"title":407,"description":52817},"T9g6Ga8G0CX_8vRqPZSSbo3NzCJpdz5e8xdvOPKcQLw",{"id":52822,"title":411,"body":52823,"description":53513,"extension":591,"links":592,"meta":53514,"navigation":594,"path":412,"seo":53515,"stem":413,"__hash__":53516},"docs\u002F2.api\u002F8.staging\u002Fstage.md",{"type":501,"value":52824,"toc":53507},[52825,52830,52833,52847,52866,52915,52917,53286,53288,53399,53403,53406,53488,53504],[2367,52826,52827],{},[52828,52829],"staging-stage",{},[614,52831,52832],{},"This component creates a \"stage\" for your models. It sets up:",[2285,52834,52835,52838,52841,52844],{},[2288,52836,52837],{},"model lighting",[2288,52839,52840],{},"ground shadows",[2288,52842,52843],{},"zoom to fit",[2288,52845,52846],{},"environment",[2078,52848,52849,52852],{},[614,52850,52851],{},"If you are using other camera controls, be sure to make them the 'default'.",[626,52853,52854],{"className":628,"code":2103,"language":633,"meta":576,"style":576},[618,52855,52856],{"__ignoreMap":576},[637,52857,52858,52860,52862,52864],{"class":639,"line":577},[637,52859,643],{"class":642},[637,52861,795],{"class":646},[637,52863,1900],{"class":650},[637,52865,787],{"class":642},[2078,52867,52868,52871,52886],{},[614,52869,52870],{},"If you are using shadows='accumulative', enable shadows on your canvas and on your objects.",[626,52872,52874],{"className":628,"code":52873,"language":633,"meta":576,"style":576},"\u003CTresCanvas shadows \u002F>\n",[618,52875,52876],{"__ignoreMap":576},[637,52877,52878,52880,52882,52884],{"class":639,"line":577},[637,52879,643],{"class":642},[637,52881,761],{"class":646},[637,52883,45005],{"class":650},[637,52885,787],{"class":642},[626,52887,52889],{"className":628,"code":52888,"language":633,"meta":576,"style":576},"\u003CTresMesh cast-shadow \u002F>\n ...\n\u003C\u002FTresMesh>\n",[618,52890,52891,52901,52905],{"__ignoreMap":576},[637,52892,52893,52895,52897,52899],{"class":639,"line":577},[637,52894,643],{"class":642},[637,52896,860],{"class":646},[637,52898,17230],{"class":650},[637,52900,787],{"class":642},[637,52902,52903],{"class":639,"line":578},[637,52904,14685],{"class":683},[637,52906,52907,52909,52911,52913],{"class":639,"line":708},[637,52908,643],{"class":642},[637,52910,8769],{"class":683},[637,52912,860],{"class":646},[637,52914,669],{"class":642},[504,52916,15],{"id":624},[626,52918,52921],{"className":628,"code":52919,"highlights":52920,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Stage, OrbitControls, Plane } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003COrbitControls make-default \u002F>\n \u003CStage\n lighting=\"rembrandt\"\n shadows=\"contact\"\n :adjust-camera=\"true\"\n environment=\"city\"\n :intensity=\"0.5\"\n >\n \u003CTresMesh cast-shadow>\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"orange\" \u002F>\n \u003C\u002FTresMesh>\n \u003CPlane :position=\"[0, -2, 0]\" receive-shadow :args=\"[5, 5]\">\n \u003CTresMeshStandardMaterial \u002F>\n \u003C\u002FPlane>\n \u003C\u002FStage>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800,805,831,631,854,865],[618,52922,52923,52943,52961,52989,52997,53001,53009,53019,53051,53061,53069,53084,53099,53115,53129,53144,53148,53158,53166,53184,53192,53246,53254,53262,53270,53278],{"__ignoreMap":576},[637,52924,52925,52927,52929,52931,52933,52935,52937,52939,52941],{"class":639,"line":577},[637,52926,643],{"class":642},[637,52928,647],{"class":646},[637,52930,651],{"class":650},[637,52932,654],{"class":650},[637,52934,657],{"class":642},[637,52936,660],{"class":642},[637,52938,664],{"class":663},[637,52940,660],{"class":642},[637,52942,669],{"class":642},[637,52944,52945,52947,52949,52951,52953,52955,52957,52959],{"class":639,"line":578},[637,52946,677],{"class":676},[637,52948,680],{"class":642},[637,52950,715],{"class":683},[637,52952,693],{"class":642},[637,52954,696],{"class":676},[637,52956,699],{"class":642},[637,52958,724],{"class":663},[637,52960,705],{"class":642},[637,52962,52964,52966,52968,52971,52973,52975,52977,52979,52981,52983,52985,52987],{"class":52963,"line":708},[639,673],[637,52965,677],{"class":676},[637,52967,680],{"class":642},[637,52969,52970],{"class":683}," Stage",[637,52972,687],{"class":642},[637,52974,690],{"class":683},[637,52976,687],{"class":642},[637,52978,45615],{"class":683},[637,52980,693],{"class":642},[637,52982,696],{"class":676},[637,52984,699],{"class":642},[637,52986,702],{"class":663},[637,52988,705],{"class":642},[637,52990,52991,52993,52995],{"class":639,"line":729},[637,52992,732],{"class":642},[637,52994,647],{"class":646},[637,52996,669],{"class":642},[637,52998,52999],{"class":639,"line":739},[637,53000,742],{"emptyLinePlaceholder":594},[637,53002,53003,53005,53007],{"class":639,"line":745},[637,53004,643],{"class":642},[637,53006,750],{"class":646},[637,53008,669],{"class":642},[637,53010,53011,53013,53015,53017],{"class":639,"line":755},[637,53012,758],{"class":642},[637,53014,761],{"class":646},[637,53016,45005],{"class":650},[637,53018,669],{"class":642},[637,53020,53021,53023,53025,53027,53029,53031,53033,53035,53037,53039,53041,53043,53045,53047,53049],{"class":639,"line":778},[637,53022,781],{"class":642},[637,53024,784],{"class":646},[637,53026,813],{"class":642},[637,53028,1491],{"class":650},[637,53030,657],{"class":642},[637,53032,660],{"class":642},[637,53034,1498],{"class":642},[637,53036,969],{"class":823},[637,53038,1503],{"class":642},[637,53040,2729],{"class":823},[637,53042,1503],{"class":642},[637,53044,7666],{"class":823},[637,53046,1513],{"class":642},[637,53048,660],{"class":642},[637,53050,787],{"class":642},[637,53052,53053,53055,53057,53059],{"class":639,"line":790},[637,53054,781],{"class":642},[637,53056,795],{"class":646},[637,53058,1900],{"class":650},[637,53060,787],{"class":642},[637,53062,53064,53066],{"class":53063,"line":800},[639,673],[637,53065,781],{"class":642},[637,53067,53068],{"class":646},"Stage\n",[637,53070,53072,53075,53077,53079,53082],{"class":53071,"line":805},[639,673],[637,53073,53074],{"class":650}," lighting",[637,53076,657],{"class":642},[637,53078,660],{"class":642},[637,53080,53081],{"class":663},"rembrandt",[637,53083,3224],{"class":642},[637,53085,53087,53090,53092,53094,53097],{"class":53086,"line":831},[639,673],[637,53088,53089],{"class":650}," shadows",[637,53091,657],{"class":642},[637,53093,660],{"class":642},[637,53095,53096],{"class":663},"contact",[637,53098,3224],{"class":642},[637,53100,53102,53104,53107,53109,53111,53113],{"class":53101,"line":631},[639,673],[637,53103,13000],{"class":642},[637,53105,53106],{"class":650},"adjust-camera",[637,53108,657],{"class":642},[637,53110,660],{"class":642},[637,53112,965],{"class":4560},[637,53114,3224],{"class":642},[637,53116,53118,53121,53123,53125,53127],{"class":53117,"line":854},[639,673],[637,53119,53120],{"class":650}," environment",[637,53122,657],{"class":642},[637,53124,660],{"class":642},[637,53126,30712],{"class":663},[637,53128,3224],{"class":642},[637,53130,53132,53134,53136,53138,53140,53142],{"class":53131,"line":865},[639,673],[637,53133,13000],{"class":642},[637,53135,1918],{"class":650},[637,53137,657],{"class":642},[637,53139,660],{"class":642},[637,53141,1545],{"class":823},[637,53143,3224],{"class":642},[637,53145,53146],{"class":639,"line":876},[637,53147,13020],{"class":642},[637,53149,53150,53152,53154,53156],{"class":639,"line":886},[637,53151,857],{"class":642},[637,53153,860],{"class":646},[637,53155,17230],{"class":650},[637,53157,669],{"class":642},[637,53159,53160,53162,53164],{"class":639,"line":632},[637,53161,868],{"class":642},[637,53163,871],{"class":646},[637,53165,787],{"class":642},[637,53167,53168,53170,53172,53174,53176,53178,53180,53182],{"class":639,"line":906},[637,53169,868],{"class":642},[637,53171,2770],{"class":646},[637,53173,2773],{"class":650},[637,53175,657],{"class":642},[637,53177,660],{"class":642},[637,53179,14044],{"class":663},[637,53181,660],{"class":642},[637,53183,787],{"class":642},[637,53185,53186,53188,53190],{"class":639,"line":916},[637,53187,889],{"class":642},[637,53189,860],{"class":646},[637,53191,669],{"class":642},[637,53193,53194,53196,53198,53200,53202,53204,53206,53208,53210,53212,53214,53216,53218,53220,53222,53224,53226,53228,53230,53232,53234,53236,53238,53240,53242,53244],{"class":639,"line":2695},[637,53195,857],{"class":642},[637,53197,261],{"class":646},[637,53199,813],{"class":642},[637,53201,1491],{"class":650},[637,53203,657],{"class":642},[637,53205,660],{"class":642},[637,53207,1498],{"class":642},[637,53209,969],{"class":823},[637,53211,10090],{"class":642},[637,53213,824],{"class":823},[637,53215,1503],{"class":642},[637,53217,969],{"class":823},[637,53219,1513],{"class":642},[637,53221,660],{"class":642},[637,53223,45317],{"class":650},[637,53225,813],{"class":642},[637,53227,2021],{"class":650},[637,53229,657],{"class":642},[637,53231,660],{"class":642},[637,53233,1498],{"class":642},[637,53235,7666],{"class":823},[637,53237,1503],{"class":642},[637,53239,7666],{"class":823},[637,53241,1513],{"class":642},[637,53243,660],{"class":642},[637,53245,669],{"class":642},[637,53247,53248,53250,53252],{"class":639,"line":2704},[637,53249,868],{"class":642},[637,53251,2770],{"class":646},[637,53253,787],{"class":642},[637,53255,53256,53258,53260],{"class":639,"line":2738},[637,53257,889],{"class":642},[637,53259,261],{"class":646},[637,53261,669],{"class":642},[637,53263,53264,53266,53268],{"class":639,"line":2747},[637,53265,899],{"class":642},[637,53267,411],{"class":646},[637,53269,669],{"class":642},[637,53271,53272,53274,53276],{"class":639,"line":2756},[637,53273,909],{"class":642},[637,53275,761],{"class":646},[637,53277,669],{"class":642},[637,53279,53280,53282,53284],{"class":639,"line":2765},[637,53281,732],{"class":642},[637,53283,750],{"class":646},[637,53285,669],{"class":642},[504,53287,926],{"id":925},[931,53289,53290,53300],{},[934,53291,53292],{},[937,53293,53294,53296,53298],{},[940,53295,942],{"align":1001},[940,53297,945],{"align":1001},[940,53299,948],{"align":1001},[950,53301,53302,53320,53337,53355,53369,53385],{},[937,53303,53304,53309,53315],{},[955,53305,53306],{"align":1001},[1705,53307,53308],{},"lighting",[955,53310,53311,53312],{"align":1001},"Lighting setup. Options: ",[618,53313,53314],{},"null | undefined | false | 'rembrandt' | 'portrait' | 'upfront' | 'soft' | { main: [x, y, z], fill: [x, y, z] }",[955,53316,53317],{"align":1001},[618,53318,53319],{},"'rembrandt'",[937,53321,53322,53326,53332],{},[955,53323,53324],{"align":1001},[1705,53325,41382],{},[955,53327,53328,53329],{"align":1001},"Controls the ground shadows. Options: ",[618,53330,53331],{},"boolean | 'contact' | 'accumulative' | StageShadows | null",[955,53333,53334],{"align":1001},[618,53335,53336],{},"'contact'",[937,53338,53339,53344,53351],{},[955,53340,53341],{"align":1001},[1705,53342,53343],{},"adjustCamera",[955,53345,53346,53347,53350],{"align":1001},"Optionally wraps and thereby centers the models using ",[618,53348,53349],{},"\u003CBounds>",", can also be a camera offset",[955,53352,53353],{"align":1001},[618,53354,965],{},[937,53356,53357,53361,53364],{},[955,53358,53359],{"align":1001},[1705,53360,52846],{},[955,53362,53363],{"align":1001},"The default environment",[955,53365,53366],{"align":1001},[618,53367,53368],{},"'city'",[937,53370,53371,53375,53381],{},[955,53372,53373],{"align":1001},[1705,53374,1918],{},[955,53376,53377,53378,53380],{"align":1001},"Lighting intensity, ",[618,53379,969],{}," removes lights",[955,53382,53383],{"align":1001},[618,53384,1545],{},[937,53386,53387,53392,53395],{},[955,53388,53389],{"align":1001},[1705,53390,53391],{},"align",[955,53393,53394],{"align":1001},"To adjust alignment",[955,53396,53397],{"align":1001},[618,53398,1183],{},[4215,53400,53402],{"id":53401},"stageshadows-type","StageShadows Type",[614,53404,53405],{},"When using custom shadow configuration, you can pass an object with the following properties:",[931,53407,53408,53418],{},[934,53409,53410],{},[937,53411,53412,53414,53416],{},[940,53413,942],{"align":1001},[940,53415,945],{"align":1001},[940,53417,948],{"align":1001},[950,53419,53420,53434,53447,53461,53475],{},[937,53421,53422,53426,53432],{},[955,53423,53424],{"align":1001},[1705,53425,5729],{},[955,53427,53428,53429],{"align":1001},"Shadow type: ",[618,53430,53431],{},"'contact' | 'accumulative'",[955,53433,8776],{"align":1001},[937,53435,53436,53440,53443],{},[955,53437,53438],{"align":1001},[1705,53439,42798],{},[955,53441,53442],{"align":1001},"Distance of the shadow plane below the content",[955,53444,53445],{"align":1001},[618,53446,969],{},[937,53448,53449,53453,53456],{},[955,53450,53451],{"align":1001},[1705,53452,45127],{},[955,53454,53455],{"align":1001},"Shadow bias, inverted for the accumulative lights",[955,53457,53458],{"align":1001},[618,53459,53460],{},"-0.0001",[937,53462,53463,53468,53471],{},[955,53464,53465],{"align":1001},[1705,53466,53467],{},"normalBias",[955,53469,53470],{"align":1001},"Shadow normal bias",[955,53472,53473],{"align":1001},[618,53474,969],{},[937,53476,53477,53481,53484],{},[955,53478,53479],{"align":1001},[1705,53480,17604],{},[955,53482,53483],{"align":1001},"Shadow map size",[955,53485,53486],{"align":1001},[618,53487,41756],{},[614,53489,53490,53491,1503,53494,1723,53497,53500,53501,53503],{},"Additionally inherits all props from ",[618,53492,53493],{},"AccumulativeShadowsProps",[618,53495,53496],{},"RandomizedLightsProps",[618,53498,53499],{},"ContactShadowsProps",", except the randomized lights' ",[618,53502,17604],{},", which Stage derives from the content's bounds.",[1331,53505,53506],{},"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 .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 .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 .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 .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}",{"title":576,"searchDepth":577,"depth":578,"links":53508},[53509,53510],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926,"children":53511},[53512],{"id":53401,"depth":708,"text":53402},"Creates a complete stage setup with lighting, shadows, and environment.",{},{"title":411,"description":53513},"avgE4bj9UJvYcEKgnNib60hxfEYgw_t81-W6ZUVdSzw",{"id":53518,"title":415,"body":53519,"description":53806,"extension":591,"links":592,"meta":53807,"navigation":594,"path":416,"seo":53808,"stem":417,"__hash__":53809},"docs\u002F2.api\u002F8.staging\u002Fstars.md",{"type":501,"value":53520,"toc":53802},[53521,53526,53532,53534,53539,53696,53698,53800],[608,53522,53523],{},[53524,53525],"staging-stars",{},[614,53527,53528,53531],{},[618,53529,53530],{},"\u003CStars \u002F>"," is a component that renders a stars in the sky of your scene. It is an abstraction that use Points, PointsMaterial and BufferGeometry to create a beautiful stars effect",[504,53533,15],{"id":624},[614,53535,49060,53536,53538],{},[618,53537,53530],{}," component without passing any props,",[626,53540,53543],{"className":628,"code":53541,"highlights":53542,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Stars } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 3, 5]\" \u002F>\n \u003CStars \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790],[618,53544,53545,53565,53583,53603,53611,53615,53623,53631,53663,53672,53680,53688],{"__ignoreMap":576},[637,53546,53547,53549,53551,53553,53555,53557,53559,53561,53563],{"class":639,"line":577},[637,53548,643],{"class":642},[637,53550,647],{"class":646},[637,53552,651],{"class":650},[637,53554,654],{"class":650},[637,53556,657],{"class":642},[637,53558,660],{"class":642},[637,53560,664],{"class":663},[637,53562,660],{"class":642},[637,53564,669],{"class":642},[637,53566,53567,53569,53571,53573,53575,53577,53579,53581],{"class":639,"line":578},[637,53568,677],{"class":676},[637,53570,680],{"class":642},[637,53572,715],{"class":683},[637,53574,693],{"class":642},[637,53576,696],{"class":676},[637,53578,699],{"class":642},[637,53580,724],{"class":663},[637,53582,705],{"class":642},[637,53584,53586,53588,53590,53593,53595,53597,53599,53601],{"class":53585,"line":708},[639,673],[637,53587,677],{"class":676},[637,53589,680],{"class":642},[637,53591,53592],{"class":683}," Stars",[637,53594,693],{"class":642},[637,53596,696],{"class":676},[637,53598,699],{"class":642},[637,53600,702],{"class":663},[637,53602,705],{"class":642},[637,53604,53605,53607,53609],{"class":639,"line":729},[637,53606,732],{"class":642},[637,53608,647],{"class":646},[637,53610,669],{"class":642},[637,53612,53613],{"class":639,"line":739},[637,53614,742],{"emptyLinePlaceholder":594},[637,53616,53617,53619,53621],{"class":639,"line":745},[637,53618,643],{"class":642},[637,53620,750],{"class":646},[637,53622,669],{"class":642},[637,53624,53625,53627,53629],{"class":639,"line":755},[637,53626,758],{"class":642},[637,53628,761],{"class":646},[637,53630,669],{"class":642},[637,53632,53633,53635,53637,53639,53641,53643,53645,53647,53649,53651,53653,53655,53657,53659,53661],{"class":639,"line":778},[637,53634,781],{"class":642},[637,53636,784],{"class":646},[637,53638,813],{"class":642},[637,53640,1491],{"class":650},[637,53642,657],{"class":642},[637,53644,660],{"class":642},[637,53646,1498],{"class":642},[637,53648,969],{"class":823},[637,53650,1503],{"class":642},[637,53652,2729],{"class":823},[637,53654,1503],{"class":642},[637,53656,7666],{"class":823},[637,53658,1513],{"class":642},[637,53660,660],{"class":642},[637,53662,787],{"class":642},[637,53664,53666,53668,53670],{"class":53665,"line":790},[639,673],[637,53667,781],{"class":642},[637,53669,415],{"class":646},[637,53671,787],{"class":642},[637,53673,53674,53676,53678],{"class":639,"line":800},[637,53675,781],{"class":642},[637,53677,10010],{"class":646},[637,53679,787],{"class":642},[637,53681,53682,53684,53686],{"class":639,"line":805},[637,53683,909],{"class":642},[637,53685,761],{"class":646},[637,53687,669],{"class":642},[637,53689,53690,53692,53694],{"class":639,"line":831},[637,53691,732],{"class":642},[637,53693,750],{"class":646},[637,53695,669],{"class":642},[504,53697,926],{"id":925},[931,53699,53700,53710],{},[934,53701,53702],{},[937,53703,53704,53706,53708],{},[940,53705,942],{"align":1001},[940,53707,945],{"align":1001},[940,53709,948],{},[950,53711,53712,53723,53734,53745,53756,53767,53778,53789],{},[937,53713,53714,53718,53721],{},[955,53715,53716],{"align":1001},[1705,53717,17604],{},[955,53719,53720],{"align":1001},"The size of the stars",[955,53722,2235],{},[937,53724,53725,53729,53732],{},[955,53726,53727],{"align":1001},[1705,53728,50066],{},[955,53730,53731],{"align":1001},"keep the same size regardless distance.",[955,53733,965],{},[937,53735,53736,53740,53743],{},[955,53737,53738],{"align":1001},[1705,53739,12191],{},[955,53741,53742],{"align":1001},"show transparency on the stars texture",[955,53744,965],{},[937,53746,53747,53751,53754],{},[955,53748,53749],{"align":1001},[1705,53750,41707],{},[955,53752,53753],{"align":1001},"enables the WebGL to know when not to render the pixeltext.",[955,53755,1939],{},[937,53757,53758,53762,53765],{},[955,53759,53760],{"align":1001},[1705,53761,49977],{},[955,53763,53764],{"align":1001},"texture of the stars",[955,53766,3749],{},[937,53768,53769,53773,53776],{},[955,53770,53771],{"align":1001},[1705,53772,12418],{},[955,53774,53775],{"align":1001},"number of stars",[955,53777,9429],{},[937,53779,53780,53784,53787],{},[955,53781,53782],{"align":1001},[1705,53783,13664],{},[955,53785,53786],{"align":1001},"depth of star's shape",[955,53788,11917],{},[937,53790,53791,53795,53798],{},[955,53792,53793],{"align":1001},[1705,53794,45220],{},[955,53796,53797],{"align":1001},"Radius of star's shape",[955,53799,11706],{},[1331,53801,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":53803},[53804,53805],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Renders beautiful stars in the sky using Points and BufferGeometry.",{},{"title":415,"description":53806},"Hth9yEzN_KgLKS-QKylR25ofLqF86DItRzJAOv9FBUM",[53811,54752,55201,56406,56828,62733,63359,64198,65561,66781],{"id":53812,"title":425,"body":53813,"description":54748,"extension":591,"links":592,"meta":54749,"navigation":594,"path":426,"seo":54750,"stem":427,"__hash__":54751},"docs\u002F2.api\u002F9.objects\u002Fanimated-sprite.md",{"type":501,"value":53814,"toc":54730},[53815,53820,53835,53843,53845,54037,54047,54051,54057,54071,54080,54084,54091,54110,54114,54122,54126,54151,54153,54479,54481,54549,54552,54558,54562,54565,54570,54573,54585,54600,54602,54605,54642,54645,54657,54661,54669,54679,54685,54688,54718,54721,54728],[608,53816,53817],{},[53818,53819],"objects-animated-sprite",{},[614,53821,53822,53825,53826,53831,53832,53834],{},[618,53823,53824],{},"\u003CAnimatedSprite \u002F>"," displays 2D animations defined in a ",[1144,53827,53830],{"href":53828,"rel":53829},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTexture_atlas",[1148],"texture atlas",". A typical ",[618,53833,53824],{}," will use:",[2285,53836,53837,53840],{},[2288,53838,53839],{},"An image containing multiple sprites",[2288,53841,53842],{},"A JSON atlas containing the individual sprite coordinates in the image",[504,53844,15],{"id":624},[626,53846,53849],{"className":628,"code":53847,"highlights":53848,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { AnimatedSprite } from '@tresjs\u002Fcientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CAnimatedSprite\n image=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosTexture.png\"\n atlas=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosAtlas.json\"\n :animation=\"currentAnimation\"\n \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,800,805,831,631,854],[618,53850,53851,53871,53891,53895,53917,53925,53929,53937,53945,53953,53961,53976,53991,54008,54013,54021,54029],{"__ignoreMap":576},[637,53852,53853,53855,53857,53859,53861,53863,53865,53867,53869],{"class":639,"line":577},[637,53854,643],{"class":642},[637,53856,647],{"class":646},[637,53858,651],{"class":650},[637,53860,654],{"class":650},[637,53862,657],{"class":642},[637,53864,660],{"class":642},[637,53866,664],{"class":663},[637,53868,660],{"class":642},[637,53870,669],{"class":642},[637,53872,53874,53876,53878,53881,53883,53885,53887,53889],{"class":53873,"line":578},[639,673],[637,53875,677],{"class":676},[637,53877,680],{"class":642},[637,53879,53880],{"class":683}," AnimatedSprite",[637,53882,693],{"class":642},[637,53884,696],{"class":676},[637,53886,699],{"class":642},[637,53888,702],{"class":663},[637,53890,705],{"class":642},[637,53892,53893],{"class":639,"line":708},[637,53894,742],{"emptyLinePlaceholder":594},[637,53896,53897,53899,53902,53904,53906,53908,53910,53913,53915],{"class":639,"line":729},[637,53898,2487],{"class":650},[637,53900,53901],{"class":683}," currentAnimation ",[637,53903,657],{"class":642},[637,53905,3999],{"class":2506},[637,53907,2509],{"class":683},[637,53909,2512],{"class":642},[637,53911,53912],{"class":663},"cientosIdle",[637,53914,2512],{"class":642},[637,53916,2520],{"class":683},[637,53918,53919,53921,53923],{"class":639,"line":739},[637,53920,732],{"class":642},[637,53922,647],{"class":646},[637,53924,669],{"class":642},[637,53926,53927],{"class":639,"line":745},[637,53928,742],{"emptyLinePlaceholder":594},[637,53930,53931,53933,53935],{"class":639,"line":755},[637,53932,643],{"class":642},[637,53934,750],{"class":646},[637,53936,669],{"class":642},[637,53938,53939,53941,53943],{"class":639,"line":778},[637,53940,758],{"class":642},[637,53942,761],{"class":646},[637,53944,669],{"class":642},[637,53946,53947,53949,53951],{"class":639,"line":790},[637,53948,781],{"class":642},[637,53950,22688],{"class":646},[637,53952,669],{"class":642},[637,53954,53956,53958],{"class":53955,"line":800},[639,673],[637,53957,857],{"class":642},[637,53959,53960],{"class":646},"AnimatedSprite\n",[637,53962,53964,53967,53969,53971,53974],{"class":53963,"line":805},[639,673],[637,53965,53966],{"class":650}," image",[637,53968,657],{"class":642},[637,53970,660],{"class":642},[637,53972,53973],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosTexture.png",[637,53975,3224],{"class":642},[637,53977,53979,53982,53984,53986,53989],{"class":53978,"line":831},[639,673],[637,53980,53981],{"class":650}," atlas",[637,53983,657],{"class":642},[637,53985,660],{"class":642},[637,53987,53988],{"class":663},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosAtlas.json",[637,53990,3224],{"class":642},[637,53992,53994,53996,53999,54001,54003,54006],{"class":53993,"line":631},[639,673],[637,53995,8241],{"class":642},[637,53997,53998],{"class":650},"animation",[637,54000,657],{"class":642},[637,54002,660],{"class":642},[637,54004,54005],{"class":683},"currentAnimation",[637,54007,3224],{"class":642},[637,54009,54011],{"class":54010,"line":854},[639,673],[637,54012,8295],{"class":642},[637,54014,54015,54017,54019],{"class":639,"line":865},[637,54016,899],{"class":642},[637,54018,22688],{"class":646},[637,54020,669],{"class":642},[637,54022,54023,54025,54027],{"class":639,"line":876},[637,54024,909],{"class":642},[637,54026,761],{"class":646},[637,54028,669],{"class":642},[637,54030,54031,54033,54035],{"class":639,"line":886},[637,54032,732],{"class":642},[637,54034,750],{"class":646},[637,54036,669],{"class":642},[3292,54038,54039],{},[614,54040,54041,54043,54044,1150],{},[618,54042,53824],{}," loads resources asynchronously, so it must be wrapped in a ",[618,54045,54046],{},"\u003CSuspense \u002F>",[504,54048,54050],{"id":54049},"compiling-an-atlas","Compiling an atlas",[614,54052,54053,54054,54056],{},"In typical usage, ",[618,54055,53824],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[2285,54058,54059,54065],{},[2288,54060,54061],{},[1144,54062,54064],{"href":53973,"rel":54063},[1148],"example compiled texture",[2288,54066,54067],{},[1144,54068,54070],{"href":53988,"rel":54069},[1148],"example JSON atlas",[614,54072,54073,54074,54079],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[1144,54075,54078],{"href":54076,"rel":54077},"https:\u002F\u002Fwww.codeandweb.com\u002Ftexturepacker",[1148],"TexturePacker"," useful.",[504,54081,54083],{"id":54082},"without-an-atlas","Without an atlas",[614,54085,54086,54087,54090],{},"There may be cases where you don't want to supply an atlas to the ",[618,54088,54089],{},"atlas"," prop. To do so:",[2285,54092,54093,54096,54099,54102],{},[2288,54094,54095],{},"Compile your source images into a single image texture.",[2288,54097,54098],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[2288,54100,54101],{},"Ensure no extra padding has been added to the compiled image texture.",[2288,54103,54104,54105,54107,54108,1150],{},"Set the ",[618,54106,54089],{}," prop to number of columns, number of rows as ",[618,54109,30448],{},[504,54111,54113],{"id":54112},"spritesheets-in-the-wild","Spritesheets in the wild",[3292,54115,54116],{},[614,54117,54118,54119,54121],{},"In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ",[618,54120,53824],{},". In many cases, it's advisable to recompile the spritesheet.",[4215,54123,54125],{"id":54124},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[2285,54127,54128,54131,54134,54137,54148],{},[2288,54129,54130],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[2288,54132,54133],{},"Align the layers for animation. Toggling layer visibility on\u002Foff will show you how the animation will display, frame to frame.",[2288,54135,54136],{},"Export layers as individual images.",[2288,54138,54139,54140,54142,3287,54145,54147],{},"Name the individual images according to the following pattern: ",[7778,54141],{},[618,54143,54144],{},"[animation name][frame number].[extension]",[7778,54146],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[2288,54149,54150],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[504,54152,926],{"id":925},[931,54154,54155,54165],{},[934,54156,54157],{},[937,54158,54159,54161,54163],{},[940,54160,8360],{"align":1001},[940,54162,945],{"align":1001},[940,54164,948],{"align":1001},[950,54166,54167,54179,54217,54277,54291,54304,54327,54341,54355,54369,54383,54402,54425,54443,54461],{},[937,54168,54169,54172,54177],{},[955,54170,54171],{"align":1001},"image",[955,54173,54174,54176],{"align":1001},[618,54175,3665],{}," – URL of the image texture or an image dataURL. This prop is not reactive.",[955,54178],{"align":1001},[937,54180,54181,54183,54215],{},[955,54182,54089],{"align":1001},[955,54184,54185,54188,54189,54212,54214],{"align":1001},[618,54186,54187],{},"string | Atlasish"," – ",[2285,54190,54191,54196,54201,54206],{},[2288,54192,962,54193,54195],{},[618,54194,3665],{},", the URL of the JSON atlas.",[2288,54197,962,54198,54200],{},[618,54199,5564],{},", the number of columns in the texture.",[2288,54202,962,54203,54205],{},[618,54204,30448],{},", the number of columns\u002Frows in the texture.",[2288,54207,962,54208,54211],{},[618,54209,54210],{},"AtlasData",", the atlas as a JS object.",[7778,54213],{},"This prop is not reactive.",[955,54216],{"align":1001},[937,54218,54219,54222,54275],{},[955,54220,54221],{"align":1001},"definitions",[955,54223,54224,54227,54228,54230,54231,54233,54235,54236,54238,54240,54241],{"align":1001},[618,54225,54226],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[618,54229,54221],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[7778,54232],{},[7778,54234],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[7778,54237],{},[7778,54239],{},"Here is how various definition strings convert to arrays of frames for playback:",[2285,54242,54243,54250,54257,54263,54269],{},[2288,54244,54245,54246,54249],{},"\"0,2,1\" - ",[637,54247,54248],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[2288,54251,54252,54253,54256],{},"\"2(10)\" - ",[637,54254,54255],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[2288,54258,54259,54260],{},"\"1-4\" - ",[637,54261,54262],{},"1,2,3,4",[2288,54264,54265,54266],{},"\"10-5(2)\" - ",[637,54267,54268],{},"10,10,9,9,8,8,7,7,6,6,5,5",[2288,54270,54271,54272],{},"\"1-4(3),10(2)\" - ",[637,54273,54274],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[955,54276],{"align":1001},[937,54278,54279,54282,54287],{},[955,54280,54281],{"align":1001},"fps",[955,54283,54284,54286],{"align":1001},[618,54285,5564],{}," – Desired frames per second of the animation.",[955,54288,54289],{"align":1001},[618,54290,30008],{},[937,54292,54293,54295,54300],{},[955,54294,27218],{"align":1001},[955,54296,54297,54299],{"align":1001},[618,54298,18466],{}," – Whether or not the animation should loop.",[955,54301,54302],{"align":1001},[618,54303,965],{},[937,54305,54306,54308,54323],{},[955,54307,53998],{"align":1001},[955,54309,54310,54313,54314,54316,54317,54319,54320,54322],{"align":1001},[618,54311,54312],{},"string | [number, number] | number"," – If ",[618,54315,3665],{},", name of the animation to play. If ",[618,54318,30448],{},", start and end frames of the animation. If ",[618,54321,5564],{},", frame number to display.",[955,54324,54325],{"align":1001},[618,54326,969],{},[937,54328,54329,54332,54337],{},[955,54330,54331],{"align":1001},"paused",[955,54333,54334,54336],{"align":1001},[618,54335,18466],{}," – Whether the animation is paused.",[955,54338,54339],{"align":1001},[618,54340,975],{},[937,54342,54343,54346,54351],{},[955,54344,54345],{"align":1001},"reversed",[955,54347,54348,54350],{"align":1001},[618,54349,18466],{}," – Whether to play the animation in reverse.",[955,54352,54353],{"align":1001},[618,54354,975],{},[937,54356,54357,54360,54365],{},[955,54358,54359],{"align":1001},"flipX",[955,54361,54362,54364],{"align":1001},[618,54363,18466],{}," – Whether the sprite should be flipped, left to right.",[955,54366,54367],{"align":1001},[618,54368,975],{},[937,54370,54371,54374,54379],{},[955,54372,54373],{"align":1001},"resetOnEnd",[955,54375,54376,54378],{"align":1001},[618,54377,18466],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[955,54380,54381],{"align":1001},[618,54382,975],{},[937,54384,54385,54388,54398],{},[955,54386,54387],{"align":1001},"asSprite",[955,54389,54390,54392,54393],{"align":1001},[618,54391,18466],{}," – Whether to display the object as a THREE.Sprite. ",[1144,54394,54397],{"href":54395,"rel":54396},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=sprite#api\u002Fen\u002Fobjects\u002FSprite",[1148],"See THREE.Sprite",[955,54399,54400],{"align":1001},[618,54401,965],{},[937,54403,54404,54406,54420],{},[955,54405,30879],{"align":1001},[955,54407,54408,54411,54412,54415,54416,54419],{"align":1001},[618,54409,54410],{},"TresVector2"," – Anchor point of the object. A value of ",[637,54413,54414],{},"0.5, 0.5"," corresponds to the center. ",[637,54417,54418],{},"0, 0"," is left, bottom.",[955,54421,54422],{"align":1001},[618,54423,54424],{},"[0.5, 0.5]",[937,54426,54427,54429,54439],{},[955,54428,41707],{"align":1001},[955,54430,54431,54433,54434],{"align":1001},[618,54432,5564],{}," – Alpha test value for the material. ",[1144,54435,54438],{"href":54436,"rel":54437},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.alphaTest",[1148],"See THREE.Material.alphaTest",[955,54440,54441],{"align":1001},[618,54442,14513],{},[937,54444,54445,54447,54457],{},[955,54446,50828],{"align":1001},[955,54448,54449,54451,54452],{"align":1001},[618,54450,18466],{}," – Depth test value for the material. ",[1144,54453,54456],{"href":54454,"rel":54455},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.depthTest",[1148],"See THREE.Material.depthTest",[955,54458,54459],{"align":1001},[618,54460,965],{},[937,54462,54463,54465,54475],{},[955,54464,10812],{"align":1001},[955,54466,54467,54469,54470],{"align":1001},[618,54468,18466],{}," – Depth write value for the material. ",[1144,54471,54474],{"href":54472,"rel":54473},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.depthWrite",[1148],"See THREE.Material.depthWrite",[955,54476,54477],{"align":1001},[618,54478,965],{},[504,54480,15042],{"id":15041},[931,54482,54483,54494],{},[934,54484,54485],{},[937,54486,54487,54489,54491],{},[940,54488,5968],{},[940,54490,945],{},[940,54492,54493],{},"Argument",[950,54495,54496,54511,54531],{},[937,54497,54498,54503,54506],{},[955,54499,54500],{},[618,54501,54502],{},"frame",[955,54504,54505],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[955,54507,54508,54510],{},[618,54509,3665],{}," – Name of the newly displayed frame",[937,54512,54513,54517,54526],{},[955,54514,54515],{},[618,54516,15086],{},[955,54518,54519,54520,54523,54524],{},"Emitted when the animation ends – ",[618,54521,54522],{},"props.loop"," must be set to ",[618,54525,975],{},[955,54527,54528,54530],{},[618,54529,3665],{}," – Name of the ending frame",[937,54532,54533,54537,54544],{},[955,54534,54535],{},[618,54536,27218],{},[955,54538,54539,54540,54523,54542],{},"Emitted when the animation loops – ",[618,54541,54522],{},[618,54543,965],{},[955,54545,54546,54548],{},[618,54547,3665],{}," – Name of the frame at the end of the loop",[504,54550,54551],{"id":53998},"Animation",[614,54553,2867,54554,54557],{},[618,54555,54556],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[4215,54559,54561],{"id":54560},"using-named-animations-as-animation","Using named animations as animation",[614,54563,54564],{},"When individual files are converted to a spritesheet\u002Fatlas, typically the original images' filenames will be included in the atlas.",[614,54566,54567,54569],{},[618,54568,53824],{}," uses those filenames to automatically group images into animations.",[614,54571,54572],{},"Use either of the following naming conventions for your source images ...",[2285,54574,54575,54580],{},[2288,54576,54577],{},[618,54578,54579],{},"[animation name][frame number].[file_extension]",[2288,54581,54582],{},[618,54583,54584],{},"[animation name]_[frame number].[file_extension]",[614,54586,54587,54588,54590,54591,54594,54595,54597,54598,43633],{},"... then ",[618,54589,53824],{}," will automatically make all ",[618,54592,54593],{},"[animation name]"," available for playback. Just pass ",[618,54596,54593],{}," to the component's ",[618,54599,54556],{},[4215,54601,43739],{"id":43738},[614,54603,54604],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[931,54606,54607,54617],{},[934,54608,54609],{},[937,54610,54611,54614],{},[940,54612,54613],{},"Filenames",[940,54615,54616],{},"Animation name",[950,54618,54619,54626,54634],{},[937,54620,54621,54624],{},[955,54622,54623],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[955,54625,53912],{},[937,54627,54628,54631],{},[955,54629,54630],{},"cientosIdleToWalkTransition0000.png",[955,54632,54633],{},"cientosIdleToWalkTransition",[937,54635,54636,54639],{},[955,54637,54638],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[955,54640,54641],{},"cientosWalk",[504,54643,54644],{"id":54221},"Definitions",[614,54646,54647,54648,54651,54652,54656],{},"You can supply an object to the ",[618,54649,54650],{},":definitions"," prop. Any ",[1144,54653,54655],{"href":54654},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[4215,54658,54660],{"id":54659},"demo","Demo",[614,54662,54663,54664,51808,54666,1150],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[618,54665,54556],{},[618,54667,54668],{},"'idle'",[614,54670,54671,54672,54674,54675,54678],{},"But below, we've added a ",[618,54673,54650],{}," prop with this value for the ",[618,54676,54677],{},"idle"," key:",[626,54680,54683],{"className":54681,"code":54682,"language":32048},[32046],"'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n",[618,54684,54682],{"__ignoreMap":576},[614,54686,54687],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[2285,54689,54690,54699,54712],{},[2288,54691,54692,54695,54696,54698],{},[618,54693,54694],{},"0-5"," – Play all six images (",[618,54697,54694],{},") of the animation normally.",[2288,54700,54701,54704,54705,54708,54709,5786],{},[618,54702,54703],{},"0(10), 1-2, 3(20), 4-5"," – Play all six images again with a delay of ten frames at the bottom of the bounce (",[618,54706,54707],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[618,54710,54711],{},"3(20)",[2288,54713,54714,54717],{},[618,54715,54716],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[504,54719,54720],{"id":30879},"Center",[614,54722,54723,54724,54727],{},"In addition to being the sprite's anchor point, the ",[618,54725,54726],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1331,54729,47776],{},{"title":576,"searchDepth":577,"depth":578,"links":54731},[54732,54733,54734,54735,54738,54739,54740,54744,54747],{"id":624,"depth":578,"text":15},{"id":54049,"depth":578,"text":54050},{"id":54082,"depth":578,"text":54083},{"id":54112,"depth":578,"text":54113,"children":54736},[54737],{"id":54124,"depth":708,"text":54125},{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},{"id":53998,"depth":578,"text":54551,"children":54741},[54742,54743],{"id":54560,"depth":708,"text":54561},{"id":43738,"depth":708,"text":43739},{"id":54221,"depth":578,"text":54644,"children":54745},[54746],{"id":54659,"depth":708,"text":54660},{"id":30879,"depth":578,"text":54720},"Display 2D animations defined in a texture atlas.",{},{"title":425,"description":54748},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",{"id":54753,"title":429,"body":54754,"description":55197,"extension":591,"links":592,"meta":55198,"navigation":594,"path":430,"seo":55199,"stem":431,"__hash__":55200},"docs\u002F2.api\u002F9.objects\u002Fcube-camera.md",{"type":501,"value":54755,"toc":55193},[54756,54761,54771,54776,54778,55094,55096,55191],[608,54757,54758],{},[54759,54760],"objects-cube-camera",{},[614,54762,54763,54766,54767,54770],{},[618,54764,54765],{},"\u003CCubeCamera \u002F>"," creates a ",[618,54768,54769],{},"THREE.CubeCamera"," and uses it to render an environment map of your scene. The environment map is then applied to component's children.",[614,54772,54773,54775],{},[618,54774,54765],{}," makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.",[504,54777,15],{"id":624},[626,54779,54782],{"className":628,"code":54780,"highlights":54781,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { CubeCamera, OrbitControls } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CCubeCamera :resolution=\"256\" :frames=\"Infinity\">\n \u003CTresMesh>\n \u003CTresSphereGeometry :args=\"[1, 32, 32]\" \u002F>\n \u003CTresMeshStandardMaterial :metalness=\"1\" :roughness=\"0\" \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FCubeCamera>\n\n \u003CTresAmbientLight :intensity=\"0.5\" \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,800,865],[618,54783,54784,54804,54828,54836,54840,54848,54856,54888,54896,54900,54933,54941,54973,55005,55013,55022,55026,55046,55078,55086],{"__ignoreMap":576},[637,54785,54786,54788,54790,54792,54794,54796,54798,54800,54802],{"class":639,"line":577},[637,54787,643],{"class":642},[637,54789,647],{"class":646},[637,54791,651],{"class":650},[637,54793,654],{"class":650},[637,54795,657],{"class":642},[637,54797,660],{"class":642},[637,54799,664],{"class":663},[637,54801,660],{"class":642},[637,54803,669],{"class":642},[637,54805,54807,54809,54811,54814,54816,54818,54820,54822,54824,54826],{"class":54806,"line":578},[639,673],[637,54808,677],{"class":676},[637,54810,680],{"class":642},[637,54812,54813],{"class":683}," CubeCamera",[637,54815,687],{"class":642},[637,54817,690],{"class":683},[637,54819,693],{"class":642},[637,54821,696],{"class":676},[637,54823,699],{"class":642},[637,54825,702],{"class":663},[637,54827,705],{"class":642},[637,54829,54830,54832,54834],{"class":639,"line":708},[637,54831,732],{"class":642},[637,54833,647],{"class":646},[637,54835,669],{"class":642},[637,54837,54838],{"class":639,"line":729},[637,54839,742],{"emptyLinePlaceholder":594},[637,54841,54842,54844,54846],{"class":639,"line":739},[637,54843,643],{"class":642},[637,54845,750],{"class":646},[637,54847,669],{"class":642},[637,54849,54850,54852,54854],{"class":639,"line":745},[637,54851,758],{"class":642},[637,54853,761],{"class":646},[637,54855,669],{"class":642},[637,54857,54858,54860,54862,54864,54866,54868,54870,54872,54874,54876,54878,54880,54882,54884,54886],{"class":639,"line":755},[637,54859,781],{"class":642},[637,54861,784],{"class":646},[637,54863,813],{"class":642},[637,54865,1491],{"class":650},[637,54867,657],{"class":642},[637,54869,660],{"class":642},[637,54871,1498],{"class":642},[637,54873,969],{"class":823},[637,54875,1503],{"class":642},[637,54877,824],{"class":823},[637,54879,1503],{"class":642},[637,54881,7666],{"class":823},[637,54883,1513],{"class":642},[637,54885,660],{"class":642},[637,54887,787],{"class":642},[637,54889,54890,54892,54894],{"class":639,"line":778},[637,54891,781],{"class":642},[637,54893,795],{"class":646},[637,54895,787],{"class":642},[637,54897,54898],{"class":639,"line":790},[637,54899,742],{"emptyLinePlaceholder":594},[637,54901,54903,54905,54907,54909,54911,54913,54915,54917,54919,54921,54923,54925,54927,54929,54931],{"class":54902,"line":800},[639,673],[637,54904,781],{"class":642},[637,54906,429],{"class":646},[637,54908,813],{"class":642},[637,54910,29480],{"class":650},[637,54912,657],{"class":642},[637,54914,660],{"class":642},[637,54916,30261],{"class":823},[637,54918,660],{"class":642},[637,54920,813],{"class":642},[637,54922,41626],{"class":650},[637,54924,657],{"class":642},[637,54926,660],{"class":642},[637,54928,14244],{"class":642},[637,54930,660],{"class":642},[637,54932,669],{"class":642},[637,54934,54935,54937,54939],{"class":639,"line":805},[637,54936,857],{"class":642},[637,54938,860],{"class":646},[637,54940,669],{"class":642},[637,54942,54943,54945,54947,54949,54951,54953,54955,54957,54959,54961,54963,54965,54967,54969,54971],{"class":639,"line":831},[637,54944,868],{"class":642},[637,54946,4107],{"class":646},[637,54948,813],{"class":642},[637,54950,2021],{"class":650},[637,54952,657],{"class":642},[637,54954,660],{"class":642},[637,54956,1498],{"class":642},[637,54958,1925],{"class":823},[637,54960,1503],{"class":642},[637,54962,13043],{"class":823},[637,54964,1503],{"class":642},[637,54966,13043],{"class":823},[637,54968,1513],{"class":642},[637,54970,660],{"class":642},[637,54972,787],{"class":642},[637,54974,54975,54977,54979,54981,54983,54985,54987,54989,54991,54993,54995,54997,54999,55001,55003],{"class":639,"line":631},[637,54976,868],{"class":642},[637,54978,2770],{"class":646},[637,54980,813],{"class":642},[637,54982,22484],{"class":650},[637,54984,657],{"class":642},[637,54986,660],{"class":642},[637,54988,1925],{"class":823},[637,54990,660],{"class":642},[637,54992,813],{"class":642},[637,54994,22499],{"class":650},[637,54996,657],{"class":642},[637,54998,660],{"class":642},[637,55000,969],{"class":823},[637,55002,660],{"class":642},[637,55004,787],{"class":642},[637,55006,55007,55009,55011],{"class":639,"line":854},[637,55008,889],{"class":642},[637,55010,860],{"class":646},[637,55012,669],{"class":642},[637,55014,55016,55018,55020],{"class":55015,"line":865},[639,673],[637,55017,899],{"class":642},[637,55019,429],{"class":646},[637,55021,669],{"class":642},[637,55023,55024],{"class":639,"line":876},[637,55025,742],{"emptyLinePlaceholder":594},[637,55027,55028,55030,55032,55034,55036,55038,55040,55042,55044],{"class":639,"line":886},[637,55029,781],{"class":642},[637,55031,10010],{"class":646},[637,55033,813],{"class":642},[637,55035,1918],{"class":650},[637,55037,657],{"class":642},[637,55039,660],{"class":642},[637,55041,1545],{"class":823},[637,55043,660],{"class":642},[637,55045,787],{"class":642},[637,55047,55048,55050,55052,55054,55056,55058,55060,55062,55064,55066,55068,55070,55072,55074,55076],{"class":639,"line":632},[637,55049,781],{"class":642},[637,55051,10031],{"class":646},[637,55053,813],{"class":642},[637,55055,1491],{"class":650},[637,55057,657],{"class":642},[637,55059,660],{"class":642},[637,55061,1498],{"class":642},[637,55063,969],{"class":823},[637,55065,1503],{"class":642},[637,55067,824],{"class":823},[637,55069,1503],{"class":642},[637,55071,3900],{"class":823},[637,55073,1513],{"class":642},[637,55075,660],{"class":642},[637,55077,787],{"class":642},[637,55079,55080,55082,55084],{"class":639,"line":906},[637,55081,909],{"class":642},[637,55083,761],{"class":646},[637,55085,669],{"class":642},[637,55087,55088,55090,55092],{"class":639,"line":916},[637,55089,732],{"class":642},[637,55091,750],{"class":646},[637,55093,669],{"class":642},[504,55095,926],{"id":925},[931,55097,55098,55108],{},[934,55099,55100],{},[937,55101,55102,55104,55106],{},[940,55103,942],{"align":1001},[940,55105,945],{"align":1001},[940,55107,948],{},[950,55109,55110,55129,55143,55156,55169,55180],{},[937,55111,55112,55116,55125],{},[955,55113,55114],{"align":1001},[618,55115,41626],{},[955,55117,55118,55119,55121,55122,55124],{"align":1001},"Number of frames to render. Set to ",[618,55120,1925],{}," for a static scene. ",[618,55123,14244],{}," to update continuously.",[955,55126,55127],{},[618,55128,14244],{},[937,55130,55131,55135,55138],{},[955,55132,55133],{"align":1001},[618,55134,29480],{},[955,55136,55137],{"align":1001},"Resolution of the FBO",[955,55139,55140],{},[618,55141,55142],{},"255",[937,55144,55145,55149,55152],{},[955,55146,55147],{"align":1001},[618,55148,45507],{},[955,55150,55151],{"align":1001},"Camera near",[955,55153,55154],{},[618,55155,2235],{},[937,55157,55158,55162,55165],{},[955,55159,55160],{"align":1001},[618,55161,43267],{},[955,55163,55164],{"align":1001},"Camera far",[955,55166,55167],{},[618,55168,9586],{},[937,55170,55171,55175,55178],{},[955,55172,55173],{"align":1001},[618,55174,31301],{},[955,55176,55177],{"align":1001},"Custom environment map that is temporarily set as the scene's background",[955,55179],{},[937,55181,55182,55186,55189],{},[955,55183,55184],{"align":1001},[618,55185,42818],{},[955,55187,55188],{"align":1001},"Custom fog that is temporarily set as the scene's fog",[955,55190],{},[1331,55192,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":55194},[55195,55196],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Render environment maps for reflective objects.",{},{"title":429,"description":55197},"guPReQbllwq5wU5oLp9_7X7yFZih0xBoLQvebR42uzE",{"id":55202,"title":433,"body":55203,"description":56402,"extension":591,"links":592,"meta":56403,"navigation":594,"path":434,"seo":56404,"stem":435,"__hash__":56405},"docs\u002F2.api\u002F9.objects\u002Ffbo.md",{"type":501,"value":55204,"toc":56394},[55205,55210,55213,55220,55222,55909,55911,56024,56028,56030,56036,56043,56046,56305,56307,56391],[2367,55206,55207],{},[55208,55209],"objects-fbo",{},[614,55211,55212],{},"An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.",[614,55214,55215,55216,55219],{},"Cientos provides an ",[618,55217,55218],{},"\u003CFbo \u002F>"," component make it easy to use FBOs in your application.",[504,55221,15],{"id":624},[626,55223,55226],{"className":628,"code":55224,"highlights":55225,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Fbo, OrbitControls } from '@tresjs\u002Fcientos'\nimport type { TresObject } from '@tresjs\u002Fcore'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { shallowRef } from 'vue'\n\nconst fboRef = shallowRef\u003CInstanceType\u003Ctypeof Fbo> | null>(null)\nconst torusRef = shallowRef\u003CTresObject | null>(null)\n\nfunction onLoop({ elapsed }: { elapsed: number }) {\n if (!torusRef.value) { return }\n torusRef.value.rotation.x = elapsed * 0.745\n torusRef.value.rotation.y = elapsed * 0.361\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas :clear-color=\"0x222\" @loop=\"onLoop\">\n \u003CTresPerspectiveCamera :position=\"[0, 0.5, 5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CTresGridHelper :args=\"[10, 10]\" \u002F>\n \u003CFbo\n ref=\"fboRef\"\n :depth=\"false\"\n :settings=\"{ samples: 1 }\"\n \u002F>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n\n \u003CTresMeshBasicMaterial\n :color=\"0xFFFFFF\"\n :map=\"fboRef?.instance?.texture ?? null\"\n \u002F>\n \u003C\u002FTresMesh>\n\n \u003CTresMesh\n ref=\"torusRef\"\n :position=\"[3, 0, 0]\"\n >\n \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 100]\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,2738,2747,2756,2765],[618,55227,55228,55248,55272,55292,55310,55328,55332,55365,55391,55395,55419,55442,55468,55493,55497,55505,55509,55517,55550,55582,55590,55594,55622,55630,55644,55659,55683,55687,55695,55727,55731,55737,55752,55777,55781,55789,55793,55799,55811,55837,55841,55877,55885,55893,55901],{"__ignoreMap":576},[637,55229,55230,55232,55234,55236,55238,55240,55242,55244,55246],{"class":639,"line":577},[637,55231,643],{"class":642},[637,55233,647],{"class":646},[637,55235,651],{"class":650},[637,55237,654],{"class":650},[637,55239,657],{"class":642},[637,55241,660],{"class":642},[637,55243,664],{"class":663},[637,55245,660],{"class":642},[637,55247,669],{"class":642},[637,55249,55251,55253,55255,55258,55260,55262,55264,55266,55268,55270],{"class":55250,"line":578},[639,673],[637,55252,677],{"class":676},[637,55254,680],{"class":642},[637,55256,55257],{"class":683}," Fbo",[637,55259,687],{"class":642},[637,55261,690],{"class":683},[637,55263,693],{"class":642},[637,55265,696],{"class":676},[637,55267,699],{"class":642},[637,55269,702],{"class":663},[637,55271,705],{"class":642},[637,55273,55274,55276,55278,55280,55282,55284,55286,55288,55290],{"class":639,"line":708},[637,55275,677],{"class":676},[637,55277,3535],{"class":676},[637,55279,680],{"class":642},[637,55281,20737],{"class":683},[637,55283,693],{"class":642},[637,55285,696],{"class":676},[637,55287,699],{"class":642},[637,55289,724],{"class":663},[637,55291,705],{"class":642},[637,55293,55294,55296,55298,55300,55302,55304,55306,55308],{"class":639,"line":729},[637,55295,677],{"class":676},[637,55297,680],{"class":642},[637,55299,715],{"class":683},[637,55301,693],{"class":642},[637,55303,696],{"class":676},[637,55305,699],{"class":642},[637,55307,724],{"class":663},[637,55309,705],{"class":642},[637,55311,55312,55314,55316,55318,55320,55322,55324,55326],{"class":639,"line":739},[637,55313,677],{"class":676},[637,55315,680],{"class":642},[637,55317,3591],{"class":683},[637,55319,693],{"class":642},[637,55321,696],{"class":676},[637,55323,699],{"class":642},[637,55325,633],{"class":663},[637,55327,705],{"class":642},[637,55329,55330],{"class":639,"line":745},[637,55331,742],{"emptyLinePlaceholder":594},[637,55333,55334,55336,55339,55341,55343,55345,55347,55349,55351,55353,55355,55357,55359,55361,55363],{"class":639,"line":755},[637,55335,2487],{"class":650},[637,55337,55338],{"class":683}," fboRef ",[637,55340,657],{"class":642},[637,55342,3591],{"class":2506},[637,55344,643],{"class":642},[637,55346,19337],{"class":1204},[637,55348,19340],{"class":642},[637,55350,55257],{"class":683},[637,55352,3744],{"class":642},[637,55354,3738],{"class":642},[637,55356,3741],{"class":1204},[637,55358,3744],{"class":642},[637,55360,2509],{"class":683},[637,55362,3749],{"class":642},[637,55364,2520],{"class":683},[637,55366,55367,55369,55371,55373,55375,55377,55379,55381,55383,55385,55387,55389],{"class":639,"line":778},[637,55368,2487],{"class":650},[637,55370,12770],{"class":683},[637,55372,657],{"class":642},[637,55374,3591],{"class":2506},[637,55376,643],{"class":642},[637,55378,20784],{"class":1204},[637,55380,3738],{"class":642},[637,55382,3741],{"class":1204},[637,55384,3744],{"class":642},[637,55386,2509],{"class":683},[637,55388,3749],{"class":642},[637,55390,2520],{"class":683},[637,55392,55393],{"class":639,"line":790},[637,55394,742],{"emptyLinePlaceholder":594},[637,55396,55397,55399,55401,55403,55405,55407,55409,55411,55413,55415,55417],{"class":639,"line":800},[637,55398,41949],{"class":650},[637,55400,41952],{"class":2506},[637,55402,41955],{"class":642},[637,55404,41958],{"class":7047},[637,55406,41961],{"class":642},[637,55408,680],{"class":642},[637,55410,41958],{"class":646},[637,55412,1222],{"class":642},[637,55414,5569],{"class":1204},[637,55416,41972],{"class":642},[637,55418,1208],{"class":642},[637,55420,55421,55423,55425,55427,55429,55431,55433,55435,55437,55440],{"class":639,"line":805},[637,55422,22291],{"class":676},[637,55424,3167],{"class":646},[637,55426,23367],{"class":642},[637,55428,12950],{"class":683},[637,55430,1150],{"class":642},[637,55432,3778],{"class":683},[637,55434,4907],{"class":646},[637,55436,8709],{"class":642},[637,55438,55439],{"class":676}," return",[637,55441,18700],{"class":642},[637,55443,55444,55447,55449,55451,55453,55455,55457,55459,55461,55463,55465],{"class":639,"line":831},[637,55445,55446],{"class":683}," torusRef",[637,55448,1150],{"class":642},[637,55450,3778],{"class":683},[637,55452,1150],{"class":642},[637,55454,5838],{"class":683},[637,55456,1150],{"class":642},[637,55458,8063],{"class":683},[637,55460,2503],{"class":642},[637,55462,41958],{"class":683},[637,55464,42016],{"class":642},[637,55466,55467],{"class":823}," 0.745\n",[637,55469,55470,55472,55474,55476,55478,55480,55482,55484,55486,55488,55490],{"class":639,"line":631},[637,55471,55446],{"class":683},[637,55473,1150],{"class":642},[637,55475,3778],{"class":683},[637,55477,1150],{"class":642},[637,55479,5838],{"class":683},[637,55481,1150],{"class":642},[637,55483,42009],{"class":683},[637,55485,2503],{"class":642},[637,55487,41958],{"class":683},[637,55489,42016],{"class":642},[637,55491,55492],{"class":823}," 0.361\n",[637,55494,55495],{"class":639,"line":854},[637,55496,1329],{"class":642},[637,55498,55499,55501,55503],{"class":639,"line":865},[637,55500,732],{"class":642},[637,55502,647],{"class":646},[637,55504,669],{"class":642},[637,55506,55507],{"class":639,"line":876},[637,55508,742],{"emptyLinePlaceholder":594},[637,55510,55511,55513,55515],{"class":639,"line":886},[637,55512,643],{"class":642},[637,55514,750],{"class":646},[637,55516,669],{"class":642},[637,55518,55519,55521,55523,55525,55527,55529,55531,55534,55536,55538,55540,55542,55544,55546,55548],{"class":639,"line":632},[637,55520,758],{"class":642},[637,55522,761],{"class":646},[637,55524,813],{"class":642},[637,55526,9887],{"class":650},[637,55528,657],{"class":642},[637,55530,660],{"class":642},[637,55532,55533],{"class":823},"0x222",[637,55535,660],{"class":642},[637,55537,4417],{"class":642},[637,55539,27218],{"class":650},[637,55541,657],{"class":642},[637,55543,660],{"class":642},[637,55545,42109],{"class":683},[637,55547,660],{"class":642},[637,55549,669],{"class":642},[637,55551,55552,55554,55556,55558,55560,55562,55564,55566,55568,55570,55572,55574,55576,55578,55580],{"class":639,"line":906},[637,55553,781],{"class":642},[637,55555,784],{"class":646},[637,55557,813],{"class":642},[637,55559,1491],{"class":650},[637,55561,657],{"class":642},[637,55563,660],{"class":642},[637,55565,1498],{"class":642},[637,55567,969],{"class":823},[637,55569,1503],{"class":642},[637,55571,1545],{"class":823},[637,55573,1503],{"class":642},[637,55575,7666],{"class":823},[637,55577,1513],{"class":642},[637,55579,660],{"class":642},[637,55581,787],{"class":642},[637,55583,55584,55586,55588],{"class":639,"line":916},[637,55585,781],{"class":642},[637,55587,795],{"class":646},[637,55589,787],{"class":642},[637,55591,55592],{"class":639,"line":2695},[637,55593,742],{"emptyLinePlaceholder":594},[637,55595,55596,55598,55600,55602,55604,55606,55608,55610,55612,55614,55616,55618,55620],{"class":639,"line":2704},[637,55597,781],{"class":642},[637,55599,8311],{"class":646},[637,55601,813],{"class":642},[637,55603,2021],{"class":650},[637,55605,657],{"class":642},[637,55607,660],{"class":642},[637,55609,1498],{"class":642},[637,55611,1510],{"class":823},[637,55613,1503],{"class":642},[637,55615,1510],{"class":823},[637,55617,1513],{"class":642},[637,55619,660],{"class":642},[637,55621,787],{"class":642},[637,55623,55625,55627],{"class":55624,"line":2738},[639,673],[637,55626,781],{"class":642},[637,55628,55629],{"class":646},"Fbo\n",[637,55631,55633,55635,55637,55639,55642],{"class":55632,"line":2747},[639,673],[637,55634,12986],{"class":650},[637,55636,657],{"class":642},[637,55638,660],{"class":642},[637,55640,55641],{"class":663},"fboRef",[637,55643,3224],{"class":642},[637,55645,55647,55649,55651,55653,55655,55657],{"class":55646,"line":2756},[639,673],[637,55648,13000],{"class":642},[637,55650,13664],{"class":650},[637,55652,657],{"class":642},[637,55654,660],{"class":642},[637,55656,975],{"class":4560},[637,55658,3224],{"class":642},[637,55660,55662,55664,55667,55669,55671,55673,55675,55677,55679,55681],{"class":55661,"line":2765},[639,673],[637,55663,13000],{"class":642},[637,55665,55666],{"class":650},"settings",[637,55668,657],{"class":642},[637,55670,660],{"class":642},[637,55672,11393],{"class":642},[637,55674,31250],{"class":646},[637,55676,11398],{"class":642},[637,55678,1925],{"class":823},[637,55680,693],{"class":642},[637,55682,3224],{"class":642},[637,55684,55685],{"class":639,"line":2787},[637,55686,18174],{"class":642},[637,55688,55689,55691,55693],{"class":639,"line":2838},[637,55690,781],{"class":642},[637,55692,860],{"class":646},[637,55694,669],{"class":642},[637,55696,55697,55699,55701,55703,55705,55707,55709,55711,55713,55715,55717,55719,55721,55723,55725],{"class":639,"line":2847},[637,55698,857],{"class":642},[637,55700,871],{"class":646},[637,55702,813],{"class":642},[637,55704,2021],{"class":650},[637,55706,657],{"class":642},[637,55708,660],{"class":642},[637,55710,1498],{"class":642},[637,55712,1925],{"class":823},[637,55714,1503],{"class":642},[637,55716,1925],{"class":823},[637,55718,1503],{"class":642},[637,55720,1925],{"class":823},[637,55722,1513],{"class":642},[637,55724,660],{"class":642},[637,55726,787],{"class":642},[637,55728,55729],{"class":639,"line":2856},[637,55730,742],{"emptyLinePlaceholder":594},[637,55732,55733,55735],{"class":639,"line":4058},[637,55734,857],{"class":642},[637,55736,24357],{"class":646},[637,55738,55739,55741,55743,55745,55747,55750],{"class":639,"line":4102},[637,55740,8241],{"class":642},[637,55742,7770],{"class":650},[637,55744,657],{"class":642},[637,55746,660],{"class":642},[637,55748,55749],{"class":823},"0xFFFFFF",[637,55751,3224],{"class":642},[637,55753,55754,55756,55758,55760,55762,55764,55766,55768,55770,55772,55775],{"class":639,"line":4129},[637,55755,8241],{"class":642},[637,55757,2825],{"class":650},[637,55759,657],{"class":642},[637,55761,660],{"class":642},[637,55763,55641],{"class":683},[637,55765,3781],{"class":642},[637,55767,9626],{"class":683},[637,55769,3781],{"class":642},[637,55771,2801],{"class":683},[637,55773,55774],{"class":642}," ?? null",[637,55776,3224],{"class":642},[637,55778,55779],{"class":639,"line":4148},[637,55780,8295],{"class":642},[637,55782,55783,55785,55787],{"class":639,"line":4189},[637,55784,899],{"class":642},[637,55786,860],{"class":646},[637,55788,669],{"class":642},[637,55790,55791],{"class":639,"line":4198},[637,55792,742],{"emptyLinePlaceholder":594},[637,55794,55795,55797],{"class":639,"line":4207},[637,55796,781],{"class":642},[637,55798,5311],{"class":646},[637,55800,55801,55803,55805,55807,55809],{"class":639,"line":22477},[637,55802,12986],{"class":650},[637,55804,657],{"class":642},[637,55806,660],{"class":642},[637,55808,12950],{"class":663},[637,55810,3224],{"class":642},[637,55812,55813,55815,55817,55819,55821,55823,55825,55827,55829,55831,55833,55835],{"class":639,"line":22492},[637,55814,13000],{"class":642},[637,55816,1491],{"class":650},[637,55818,657],{"class":642},[637,55820,660],{"class":642},[637,55822,1498],{"class":642},[637,55824,2729],{"class":823},[637,55826,1503],{"class":642},[637,55828,969],{"class":823},[637,55830,1503],{"class":642},[637,55832,969],{"class":823},[637,55834,1513],{"class":642},[637,55836,3224],{"class":642},[637,55838,55839],{"class":639,"line":22507},[637,55840,13020],{"class":642},[637,55842,55843,55845,55847,55849,55851,55853,55855,55857,55859,55861,55863,55865,55867,55869,55871,55873,55875],{"class":639,"line":22512},[637,55844,857],{"class":642},[637,55846,12445],{"class":646},[637,55848,813],{"class":642},[637,55850,2021],{"class":650},[637,55852,657],{"class":642},[637,55854,660],{"class":642},[637,55856,1498],{"class":642},[637,55858,1925],{"class":823},[637,55860,1503],{"class":642},[637,55862,1545],{"class":823},[637,55864,1503],{"class":642},[637,55866,39098],{"class":823},[637,55868,1503],{"class":642},[637,55870,11706],{"class":823},[637,55872,1513],{"class":642},[637,55874,660],{"class":642},[637,55876,787],{"class":642},[637,55878,55879,55881,55883],{"class":639,"line":22519},[637,55880,857],{"class":642},[637,55882,881],{"class":646},[637,55884,787],{"class":642},[637,55886,55887,55889,55891],{"class":639,"line":22524},[637,55888,899],{"class":642},[637,55890,860],{"class":646},[637,55892,669],{"class":642},[637,55894,55895,55897,55899],{"class":639,"line":22530},[637,55896,909],{"class":642},[637,55898,761],{"class":646},[637,55900,669],{"class":642},[637,55902,55903,55905,55907],{"class":639,"line":22551},[637,55904,732],{"class":642},[637,55906,750],{"class":646},[637,55908,669],{"class":642},[504,55910,926],{"id":925},[931,55912,55913,55923],{},[934,55914,55915],{},[937,55916,55917,55919,55921],{},[940,55918,942],{"align":1001},[940,55920,945],{"align":1001},[940,55922,948],{},[950,55924,55925,55941,55957,55981,56006],{},[937,55926,55927,55933,55938],{},[955,55928,55929],{"align":1001},[1705,55930,55931],{},[618,55932,43239],{},[955,55934,55935,55937],{"align":1001},[618,55936,5564],{}," - The width of the FBO.",[955,55939,55940],{},"Width of the canvas",[937,55942,55943,55949,55954],{},[955,55944,55945],{"align":1001},[1705,55946,55947],{},[618,55948,43253],{},[955,55950,55951,55953],{"align":1001},[618,55952,5564],{}," - the height of the FBO",[955,55955,55956],{},"Height of the canvas",[937,55958,55959,55965,55977],{},[955,55960,55961],{"align":1001},[1705,55962,55963],{},[618,55964,13664],{},[955,55966,55967,55969,55970,1150],{"align":1001},[618,55968,18466],{}," - Whether or not the FBO should render the depth to a ",[1144,55971,55974],{"href":55972,"rel":55973},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=webglre#api\u002Fen\u002Frenderers\u002FWebGLRenderTarget.depthTexture",[1148],[618,55975,55976],{},"depthTexture",[955,55978,55979],{},[618,55980,975],{},[937,55982,55983,55989,56002],{},[955,55984,55985],{"align":1001},[1705,55986,55987],{},[618,55988,55666],{},[955,55990,55991,55994,55995],{"align":1001},[618,55992,55993],{},"WebGLRenderTargetOptions"," - Every other configuration property for the ",[1144,55996,55999,26345],{"href":55997,"rel":55998},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Frenderers\u002FWebGLRenderTarget",[1148],[618,56000,56001],{},"WebGLRenderTarget",[955,56003,56004],{},[618,56005,6334],{},[937,56007,56008,56015,56020],{},[955,56009,56010],{"align":1001},[1705,56011,56012],{},[618,56013,56014],{},"autoRender",[955,56016,56017,56019],{"align":1001},[618,56018,18466],{}," - Whether to automatically render the FBO on the default scene.",[955,56021,56022],{},[618,56023,965],{},[504,56025,56027],{"id":56026},"usefbo","useFBO",[614,56029,55212],{},[614,56031,56032,56033,56035],{},"Cientos provides a ",[618,56034,56027],{}," composable to make it easy to use FBOs in your application.",[3292,56037,56038],{},[614,56039,2867,56040,56042],{},[618,56041,56027],{}," composable must be used inside of a child component since it needs the context of TresCanvas.",[4215,56044,15],{"id":56045},"usage-1",[626,56047,56050],{"className":628,"code":56048,"highlights":56049,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { useFBO } from '@tresjs\u002Fcientos'\n\nconst fboTarget = useFBO({\n depth: true,\n width: 512,\n height: 512,\n settings: {\n samples: 1,\n },\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresMesh>\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n\n \u003CTresMeshBasicMaterial\n :color=\"0xFFFFFF\"\n :map=\"fboTarget?.texture ?? null\"\n \u002F>\n \u003C\u002FTresMesh>\n\u003C\u002Ftemplate>\n\n",[578,729,739,745,755,778,790,800,805,916],[618,56051,56052,56072,56092,56096,56112,56123,56134,56145,56155,56167,56172,56179,56187,56191,56199,56207,56239,56243,56249,56263,56285,56289,56297],{"__ignoreMap":576},[637,56053,56054,56056,56058,56060,56062,56064,56066,56068,56070],{"class":639,"line":577},[637,56055,643],{"class":642},[637,56057,647],{"class":646},[637,56059,651],{"class":650},[637,56061,654],{"class":650},[637,56063,657],{"class":642},[637,56065,660],{"class":642},[637,56067,664],{"class":663},[637,56069,660],{"class":642},[637,56071,669],{"class":642},[637,56073,56075,56077,56079,56082,56084,56086,56088,56090],{"class":56074,"line":578},[639,673],[637,56076,677],{"class":676},[637,56078,680],{"class":642},[637,56080,56081],{"class":683}," useFBO",[637,56083,693],{"class":642},[637,56085,696],{"class":676},[637,56087,699],{"class":642},[637,56089,702],{"class":663},[637,56091,705],{"class":642},[637,56093,56094],{"class":639,"line":708},[637,56095,742],{"emptyLinePlaceholder":594},[637,56097,56099,56101,56104,56106,56108,56110],{"class":56098,"line":729},[639,673],[637,56100,2487],{"class":650},[637,56102,56103],{"class":683}," fboTarget ",[637,56105,657],{"class":642},[637,56107,56081],{"class":2506},[637,56109,2509],{"class":683},[637,56111,3353],{"class":642},[637,56113,56115,56117,56119,56121],{"class":56114,"line":739},[639,673],[637,56116,1263],{"class":646},[637,56118,1222],{"class":642},[637,56120,4561],{"class":4560},[637,56122,2560],{"class":642},[637,56124,56126,56128,56130,56132],{"class":56125,"line":745},[639,673],[637,56127,1244],{"class":646},[637,56129,1222],{"class":642},[637,56131,44524],{"class":823},[637,56133,2560],{"class":642},[637,56135,56137,56139,56141,56143],{"class":56136,"line":755},[639,673],[637,56138,1254],{"class":646},[637,56140,1222],{"class":642},[637,56142,44524],{"class":823},[637,56144,2560],{"class":642},[637,56146,56148,56151,56153],{"class":56147,"line":778},[639,673],[637,56149,56150],{"class":646}," settings",[637,56152,1222],{"class":642},[637,56154,1208],{"class":642},[637,56156,56158,56161,56163,56165],{"class":56157,"line":790},[639,673],[637,56159,56160],{"class":646}," samples",[637,56162,1222],{"class":642},[637,56164,2631],{"class":823},[637,56166,2560],{"class":642},[637,56168,56170],{"class":56169,"line":800},[639,673],[637,56171,2667],{"class":642},[637,56173,56175,56177],{"class":56174,"line":805},[639,673],[637,56176,2500],{"class":642},[637,56178,2520],{"class":683},[637,56180,56181,56183,56185],{"class":639,"line":831},[637,56182,732],{"class":642},[637,56184,647],{"class":646},[637,56186,669],{"class":642},[637,56188,56189],{"class":639,"line":631},[637,56190,742],{"emptyLinePlaceholder":594},[637,56192,56193,56195,56197],{"class":639,"line":854},[637,56194,643],{"class":642},[637,56196,750],{"class":646},[637,56198,669],{"class":642},[637,56200,56201,56203,56205],{"class":639,"line":865},[637,56202,758],{"class":642},[637,56204,860],{"class":646},[637,56206,669],{"class":642},[637,56208,56209,56211,56213,56215,56217,56219,56221,56223,56225,56227,56229,56231,56233,56235,56237],{"class":639,"line":876},[637,56210,781],{"class":642},[637,56212,871],{"class":646},[637,56214,813],{"class":642},[637,56216,2021],{"class":650},[637,56218,657],{"class":642},[637,56220,660],{"class":642},[637,56222,1498],{"class":642},[637,56224,1925],{"class":823},[637,56226,1503],{"class":642},[637,56228,1925],{"class":823},[637,56230,1503],{"class":642},[637,56232,1925],{"class":823},[637,56234,1513],{"class":642},[637,56236,660],{"class":642},[637,56238,787],{"class":642},[637,56240,56241],{"class":639,"line":886},[637,56242,742],{"emptyLinePlaceholder":594},[637,56244,56245,56247],{"class":639,"line":632},[637,56246,781],{"class":642},[637,56248,24357],{"class":646},[637,56250,56251,56253,56255,56257,56259,56261],{"class":639,"line":906},[637,56252,13000],{"class":642},[637,56254,7770],{"class":650},[637,56256,657],{"class":642},[637,56258,660],{"class":642},[637,56260,55749],{"class":823},[637,56262,3224],{"class":642},[637,56264,56266,56268,56270,56272,56274,56277,56279,56281,56283],{"class":56265,"line":916},[639,673],[637,56267,13000],{"class":642},[637,56269,2825],{"class":650},[637,56271,657],{"class":642},[637,56273,660],{"class":642},[637,56275,56276],{"class":683},"fboTarget",[637,56278,3781],{"class":642},[637,56280,2801],{"class":683},[637,56282,55774],{"class":642},[637,56284,3224],{"class":642},[637,56286,56287],{"class":639,"line":2695},[637,56288,18174],{"class":642},[637,56290,56291,56293,56295],{"class":639,"line":2704},[637,56292,909],{"class":642},[637,56294,860],{"class":646},[637,56296,669],{"class":642},[637,56298,56299,56301,56303],{"class":639,"line":2738},[637,56300,732],{"class":642},[637,56302,750],{"class":646},[637,56304,669],{"class":642},[4215,56306,14787],{"id":18439},[931,56308,56309,56319],{},[934,56310,56311],{},[937,56312,56313,56315,56317],{},[940,56314,942],{"align":1001},[940,56316,945],{"align":1001},[940,56318,948],{},[950,56320,56321,56335,56349,56370],{},[937,56322,56323,56329,56333],{},[955,56324,56325],{"align":1001},[1705,56326,56327],{},[618,56328,43239],{},[955,56330,56331,55937],{"align":1001},[618,56332,5564],{},[955,56334,55940],{},[937,56336,56337,56343,56347],{},[955,56338,56339],{"align":1001},[1705,56340,56341],{},[618,56342,43253],{},[955,56344,56345,55953],{"align":1001},[618,56346,5564],{},[955,56348,55956],{},[937,56350,56351,56357,56366],{},[955,56352,56353],{"align":1001},[1705,56354,56355],{},[618,56356,13664],{},[955,56358,56359,55969,56361,1150],{"align":1001},[618,56360,18466],{},[1144,56362,56364],{"href":55972,"rel":56363},[1148],[618,56365,55976],{},[955,56367,56368],{},[618,56369,975],{},[937,56371,56372,56378,56387],{},[955,56373,56374],{"align":1001},[1705,56375,56376],{},[618,56377,55666],{},[955,56379,56380,55994,56382],{"align":1001},[618,56381,55993],{},[1144,56383,56385,26345],{"href":55997,"rel":56384},[1148],[618,56386,56001],{},[955,56388,56389],{},[618,56390,6334],{},[1331,56392,56393],{},"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 .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 .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 .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);}",{"title":576,"searchDepth":577,"depth":578,"links":56395},[56396,56397,56398],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":56026,"depth":578,"text":56027,"children":56399},[56400,56401],{"id":56045,"depth":708,"text":15},{"id":18439,"depth":708,"text":14787},"Render to texture using Frame Buffer Objects.",{},{"title":433,"description":56402},"ch0ffhPITGouVRylpEdp2CmD8Fl-JOZCHt9eio9zKpc",{"id":56407,"title":437,"body":56408,"description":56824,"extension":591,"links":592,"meta":56825,"navigation":594,"path":438,"seo":56826,"stem":439,"__hash__":56827},"docs\u002F2.api\u002F9.objects\u002Fgradient-texture.md",{"type":501,"value":56409,"toc":56820},[56410,56415,56424,56426,56677,56679,56818],[2367,56411,56412],{},[56413,56414],"objects-gradient-texture",{},[614,56416,56417,56420,56421,56423],{},[618,56418,56419],{},"\u003CGradientTexture \u002F>"," creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's ",[618,56422,2825],{}," by default.",[504,56425,15],{"id":624},[626,56427,56429],{"className":628,"code":56428,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { GradientTexture } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" \u002F>\n\n \u003CTresMesh>\n \u003CTresPlaneGeometry :args=\"[2, 2]\" \u002F>\n \u003CTresMeshBasicMaterial>\n \u003CGradientTexture\n :stops=\"[0, 1]\"\n :colors=\"['#ff0000', '#0000ff']\"\n \u002F>\n \u003C\u002FTresMeshBasicMaterial>\n \u003C\u002FTresMesh>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,56430,56431,56451,56470,56478,56482,56490,56498,56530,56534,56542,56570,56578,56585,56609,56640,56645,56653,56661,56669],{"__ignoreMap":576},[637,56432,56433,56435,56437,56439,56441,56443,56445,56447,56449],{"class":639,"line":577},[637,56434,643],{"class":642},[637,56436,647],{"class":646},[637,56438,651],{"class":650},[637,56440,654],{"class":650},[637,56442,657],{"class":642},[637,56444,660],{"class":642},[637,56446,664],{"class":663},[637,56448,660],{"class":642},[637,56450,669],{"class":642},[637,56452,56453,56455,56457,56460,56462,56464,56466,56468],{"class":639,"line":578},[637,56454,677],{"class":676},[637,56456,680],{"class":642},[637,56458,56459],{"class":683}," GradientTexture",[637,56461,693],{"class":642},[637,56463,696],{"class":676},[637,56465,699],{"class":642},[637,56467,702],{"class":663},[637,56469,705],{"class":642},[637,56471,56472,56474,56476],{"class":639,"line":708},[637,56473,732],{"class":642},[637,56475,647],{"class":646},[637,56477,669],{"class":642},[637,56479,56480],{"class":639,"line":729},[637,56481,742],{"emptyLinePlaceholder":594},[637,56483,56484,56486,56488],{"class":639,"line":739},[637,56485,643],{"class":642},[637,56487,750],{"class":646},[637,56489,669],{"class":642},[637,56491,56492,56494,56496],{"class":639,"line":745},[637,56493,758],{"class":642},[637,56495,761],{"class":646},[637,56497,669],{"class":642},[637,56499,56500,56502,56504,56506,56508,56510,56512,56514,56516,56518,56520,56522,56524,56526,56528],{"class":639,"line":755},[637,56501,781],{"class":642},[637,56503,784],{"class":646},[637,56505,813],{"class":642},[637,56507,1491],{"class":650},[637,56509,657],{"class":642},[637,56511,660],{"class":642},[637,56513,1498],{"class":642},[637,56515,969],{"class":823},[637,56517,1503],{"class":642},[637,56519,969],{"class":823},[637,56521,1503],{"class":642},[637,56523,7666],{"class":823},[637,56525,1513],{"class":642},[637,56527,660],{"class":642},[637,56529,787],{"class":642},[637,56531,56532],{"class":639,"line":778},[637,56533,742],{"emptyLinePlaceholder":594},[637,56535,56536,56538,56540],{"class":639,"line":790},[637,56537,781],{"class":642},[637,56539,860],{"class":646},[637,56541,669],{"class":642},[637,56543,56544,56546,56548,56550,56552,56554,56556,56558,56560,56562,56564,56566,56568],{"class":639,"line":800},[637,56545,857],{"class":642},[637,56547,29235],{"class":646},[637,56549,813],{"class":642},[637,56551,2021],{"class":650},[637,56553,657],{"class":642},[637,56555,660],{"class":642},[637,56557,1498],{"class":642},[637,56559,824],{"class":823},[637,56561,1503],{"class":642},[637,56563,824],{"class":823},[637,56565,1513],{"class":642},[637,56567,660],{"class":642},[637,56569,787],{"class":642},[637,56571,56572,56574,56576],{"class":639,"line":805},[637,56573,857],{"class":642},[637,56575,7695],{"class":646},[637,56577,669],{"class":642},[637,56579,56580,56582],{"class":639,"line":831},[637,56581,868],{"class":642},[637,56583,56584],{"class":646},"GradientTexture\n",[637,56586,56587,56590,56593,56595,56597,56599,56601,56603,56605,56607],{"class":639,"line":631},[637,56588,56589],{"class":642}," :",[637,56591,56592],{"class":650},"stops",[637,56594,657],{"class":642},[637,56596,660],{"class":642},[637,56598,1498],{"class":642},[637,56600,969],{"class":823},[637,56602,1503],{"class":642},[637,56604,1925],{"class":823},[637,56606,1513],{"class":642},[637,56608,3224],{"class":642},[637,56610,56611,56613,56616,56618,56620,56622,56624,56626,56628,56630,56632,56634,56636,56638],{"class":639,"line":854},[637,56612,56589],{"class":642},[637,56614,56615],{"class":650},"colors",[637,56617,657],{"class":642},[637,56619,660],{"class":642},[637,56621,1498],{"class":642},[637,56623,2512],{"class":642},[637,56625,7794],{"class":663},[637,56627,2512],{"class":642},[637,56629,1503],{"class":642},[637,56631,2512],{"class":642},[637,56633,5953],{"class":663},[637,56635,2512],{"class":642},[637,56637,1513],{"class":642},[637,56639,3224],{"class":642},[637,56641,56642],{"class":639,"line":865},[637,56643,56644],{"class":642}," \u002F>\n",[637,56646,56647,56649,56651],{"class":639,"line":876},[637,56648,889],{"class":642},[637,56650,7695],{"class":646},[637,56652,669],{"class":642},[637,56654,56655,56657,56659],{"class":639,"line":886},[637,56656,899],{"class":642},[637,56658,860],{"class":646},[637,56660,669],{"class":642},[637,56662,56663,56665,56667],{"class":639,"line":632},[637,56664,909],{"class":642},[637,56666,761],{"class":646},[637,56668,669],{"class":642},[637,56670,56671,56673,56675],{"class":639,"line":906},[637,56672,732],{"class":642},[637,56674,750],{"class":646},[637,56676,669],{"class":642},[504,56678,926],{"id":925},[931,56680,56681,56691],{},[934,56682,56683],{},[937,56684,56685,56687,56689],{},[940,56686,942],{"align":1001},[940,56688,945],{"align":1001},[940,56690,948],{},[950,56692,56693,56718,56732,56746,56759,56772,56789,56803],{},[937,56694,56695,56699,56716],{},[955,56696,56697],{"align":1001},[618,56698,56592],{},[955,56700,4442,56701,56703,56704,3156,56706,56708,56709,56712,56713,1150],{"align":1001},[618,56702,39297],{}," of values between ",[618,56705,969],{},[618,56707,1925],{}," representing the color positions in the gradient. ",[618,56710,56711],{},"stops.length"," should match ",[618,56714,56715],{},"color.length",[955,56717],{},[937,56719,56720,56724,56730],{},[955,56721,56722],{"align":1001},[618,56723,56615],{},[955,56725,4442,56726,56729],{"align":1001},[618,56727,56728],{},"THREE.ColorRepresentation[]"," representing the colors in the gradient.",[955,56731],{},[937,56733,56734,56738,56741],{},[955,56735,56736],{"align":1001},[618,56737,29658],{},[955,56739,56740],{"align":1001},"Where the component should be attached within its parent.",[955,56742,56743],{},[618,56744,56745],{},"'map'",[937,56747,56748,56752,56755],{},[955,56749,56750],{"align":1001},[618,56751,43253],{},[955,56753,56754],{"align":1001},"Height of the canvas used to draw the gradient.",[955,56756,56757],{},[618,56758,41756],{},[937,56760,56761,56765,56768],{},[955,56762,56763],{"align":1001},[618,56764,43239],{},[955,56766,56767],{"align":1001},"Width of the canvas used to draw the gradient.",[955,56769,56770],{},[618,56771,39098],{},[937,56773,56774,56778,56784],{},[955,56775,56776],{"align":1001},[618,56777,5729],{},[955,56779,56780,56783],{"align":1001},[618,56781,56782],{},"'linear' | 'radial'"," Type of gradient to draw.",[955,56785,56786],{},[618,56787,56788],{},"'linear'",[937,56790,56791,56796,56799],{},[955,56792,56793],{"align":1001},[618,56794,56795],{},"innerCircleRadius",[955,56797,56798],{"align":1001},"Radius of the inner circle of a radial gradient.",[955,56800,56801],{},[618,56802,969],{},[937,56804,56805,56810,56813],{},[955,56806,56807],{"align":1001},[618,56808,56809],{},"outerCircleRadius",[955,56811,56812],{"align":1001},"Radius of the outer circle of a radial gradient.",[955,56814,56815],{},[618,56816,56817],{},"'auto'",[1331,56819,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":56821},[56822,56823],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Create gradient textures for materials.",{},{"title":437,"description":56824},"vYfm15fEwNZgRGLtXSYlU49KPYrI7wEBqbJQsM4JeNo",{"id":56829,"title":441,"body":56830,"description":62729,"extension":591,"links":592,"meta":62730,"navigation":594,"path":442,"seo":62731,"stem":443,"__hash__":62732},"docs\u002F2.api\u002F9.objects\u002Fhtml.md",{"type":501,"value":56831,"toc":62708},[56832,56835,56848,56853,56855,57317,57321,57328,57333,57349,57357,57362,57502,57507,57511,57535,57540,57670,57674,57698,57701,57725,57741,57761,57766,57930,57934,57939,57962,57974,57979,59827,59829,59852,59872,59913,59916,59931,59942,59977,59984,60008,60025,60030,61608,61614,61620,61625,61825,61842,61844,62202,62204,62224,62228,62306,62308,62480,62684,62687,62705],[614,56833,56834],{},"This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.",[614,56836,56837,56838,3156,56840,56843,56844,56847],{},"🚀 Works seamlessly with both ",[1705,56839,13520],{},[1705,56841,56842],{},"OrthographicCamera"," — the active camera is automatically detected by the ",[618,56845,56846],{},"\u003CHtml>"," component.",[2367,56849,56850],{},[56851,56852],"objects-html",{},[504,56854,15],{"id":624},[626,56856,56859],{"className":628,"code":56857,"highlights":56858,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[2, 2, 5]\" \u002F>\n \u003COrbitControls \u002F>\n \u003CTresMesh :position=\"[1, 1, 1]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003CHtml\n center\n transform\n :distance-factor=\"4\"\n :position=\"[0, 0, 0.65]\"\n :scale=\"[0.75, 0.75, 0.75]\"\n >\n \u003Ch1 class=\"title\">I'm a Box 📦\u003C\u002Fh1>\n \u003C\u002FHtml>\n \u003C\u002FTresMesh>\n \u003CTresGridHelper \u002F>\n \u003CTresAmbientLight \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\u003Cstyle scoped>\n.title {\n background-color: #1e1e1e;\n color: #ffffff;\n font-size: 0.75rem;\n padding: 0.25rem;\n border-radius: 0.375rem;\n}\n\u003C\u002Fstyle>\n",[578,631,854,865,876,886,632],[618,56860,56861,56881,56905,56923,56931,56935,56943,56961,56993,57001,57033,57041,57049,57057,57063,57069,57085,57112,57139,57144,57173,57182,57190,57198,57206,57214,57222,57233,57241,57256,57269,57281,57293,57305,57309],{"__ignoreMap":576},[637,56862,56863,56865,56867,56869,56871,56873,56875,56877,56879],{"class":639,"line":577},[637,56864,643],{"class":642},[637,56866,647],{"class":646},[637,56868,651],{"class":650},[637,56870,654],{"class":650},[637,56872,657],{"class":642},[637,56874,660],{"class":642},[637,56876,664],{"class":663},[637,56878,660],{"class":642},[637,56880,669],{"class":642},[637,56882,56884,56886,56888,56891,56893,56895,56897,56899,56901,56903],{"class":56883,"line":578},[639,673],[637,56885,677],{"class":676},[637,56887,680],{"class":642},[637,56889,56890],{"class":683}," Html",[637,56892,687],{"class":642},[637,56894,690],{"class":683},[637,56896,693],{"class":642},[637,56898,696],{"class":676},[637,56900,699],{"class":642},[637,56902,702],{"class":663},[637,56904,705],{"class":642},[637,56906,56907,56909,56911,56913,56915,56917,56919,56921],{"class":639,"line":708},[637,56908,677],{"class":676},[637,56910,680],{"class":642},[637,56912,715],{"class":683},[637,56914,693],{"class":642},[637,56916,696],{"class":676},[637,56918,699],{"class":642},[637,56920,724],{"class":663},[637,56922,705],{"class":642},[637,56924,56925,56927,56929],{"class":639,"line":729},[637,56926,732],{"class":642},[637,56928,647],{"class":646},[637,56930,669],{"class":642},[637,56932,56933],{"class":639,"line":739},[637,56934,742],{"emptyLinePlaceholder":594},[637,56936,56937,56939,56941],{"class":639,"line":745},[637,56938,643],{"class":642},[637,56940,750],{"class":646},[637,56942,669],{"class":642},[637,56944,56945,56947,56949,56951,56953,56955,56957,56959],{"class":639,"line":755},[637,56946,758],{"class":642},[637,56948,761],{"class":646},[637,56950,764],{"class":650},[637,56952,657],{"class":642},[637,56954,660],{"class":642},[637,56956,12358],{"class":663},[637,56958,660],{"class":642},[637,56960,669],{"class":642},[637,56962,56963,56965,56967,56969,56971,56973,56975,56977,56979,56981,56983,56985,56987,56989,56991],{"class":639,"line":778},[637,56964,781],{"class":642},[637,56966,784],{"class":646},[637,56968,813],{"class":642},[637,56970,1491],{"class":650},[637,56972,657],{"class":642},[637,56974,660],{"class":642},[637,56976,1498],{"class":642},[637,56978,824],{"class":823},[637,56980,1503],{"class":642},[637,56982,824],{"class":823},[637,56984,1503],{"class":642},[637,56986,7666],{"class":823},[637,56988,1513],{"class":642},[637,56990,660],{"class":642},[637,56992,787],{"class":642},[637,56994,56995,56997,56999],{"class":639,"line":790},[637,56996,781],{"class":642},[637,56998,795],{"class":646},[637,57000,787],{"class":642},[637,57002,57003,57005,57007,57009,57011,57013,57015,57017,57019,57021,57023,57025,57027,57029,57031],{"class":639,"line":800},[637,57004,781],{"class":642},[637,57006,860],{"class":646},[637,57008,813],{"class":642},[637,57010,1491],{"class":650},[637,57012,657],{"class":642},[637,57014,660],{"class":642},[637,57016,1498],{"class":642},[637,57018,1925],{"class":823},[637,57020,1503],{"class":642},[637,57022,1925],{"class":823},[637,57024,1503],{"class":642},[637,57026,1925],{"class":823},[637,57028,1513],{"class":642},[637,57030,660],{"class":642},[637,57032,669],{"class":642},[637,57034,57035,57037,57039],{"class":639,"line":805},[637,57036,857],{"class":642},[637,57038,871],{"class":646},[637,57040,787],{"class":642},[637,57042,57043,57045,57047],{"class":639,"line":831},[637,57044,857],{"class":642},[637,57046,881],{"class":646},[637,57048,787],{"class":642},[637,57050,57052,57054],{"class":57051,"line":631},[639,673],[637,57053,857],{"class":642},[637,57055,57056],{"class":646},"Html\n",[637,57058,57060],{"class":57059,"line":854},[639,673],[637,57061,57062],{"class":650}," center\n",[637,57064,57066],{"class":57065,"line":865},[639,673],[637,57067,57068],{"class":650}," transform\n",[637,57070,57072,57074,57077,57079,57081,57083],{"class":57071,"line":876},[639,673],[637,57073,8241],{"class":642},[637,57075,57076],{"class":650},"distance-factor",[637,57078,657],{"class":642},[637,57080,660],{"class":642},[637,57082,3900],{"class":823},[637,57084,3224],{"class":642},[637,57086,57088,57090,57092,57094,57096,57098,57100,57102,57104,57106,57108,57110],{"class":57087,"line":886},[639,673],[637,57089,8241],{"class":642},[637,57091,1491],{"class":650},[637,57093,657],{"class":642},[637,57095,660],{"class":642},[637,57097,1498],{"class":642},[637,57099,969],{"class":823},[637,57101,1503],{"class":642},[637,57103,969],{"class":823},[637,57105,1503],{"class":642},[637,57107,2178],{"class":823},[637,57109,1513],{"class":642},[637,57111,3224],{"class":642},[637,57113,57115,57117,57119,57121,57123,57125,57127,57129,57131,57133,57135,57137],{"class":57114,"line":632},[639,673],[637,57116,8241],{"class":642},[637,57118,816],{"class":650},[637,57120,657],{"class":642},[637,57122,660],{"class":642},[637,57124,1498],{"class":642},[637,57126,2621],{"class":823},[637,57128,1503],{"class":642},[637,57130,2621],{"class":823},[637,57132,1503],{"class":642},[637,57134,2621],{"class":823},[637,57136,1513],{"class":642},[637,57138,3224],{"class":642},[637,57140,57141],{"class":639,"line":906},[637,57142,57143],{"class":642}," >\n",[637,57145,57146,57148,57151,57153,57155,57157,57160,57162,57164,57167,57169,57171],{"class":639,"line":916},[637,57147,868],{"class":642},[637,57149,57150],{"class":646},"h1",[637,57152,26345],{"class":650},[637,57154,657],{"class":642},[637,57156,660],{"class":642},[637,57158,57159],{"class":663},"title",[637,57161,660],{"class":642},[637,57163,3744],{"class":642},[637,57165,57166],{"class":683},"I'm a Box 📦",[637,57168,732],{"class":642},[637,57170,57150],{"class":646},[637,57172,669],{"class":642},[637,57174,57175,57177,57180],{"class":639,"line":2695},[637,57176,889],{"class":642},[637,57178,57179],{"class":646},"Html",[637,57181,669],{"class":642},[637,57183,57184,57186,57188],{"class":639,"line":2704},[637,57185,899],{"class":642},[637,57187,860],{"class":646},[637,57189,669],{"class":642},[637,57191,57192,57194,57196],{"class":639,"line":2738},[637,57193,781],{"class":642},[637,57195,8311],{"class":646},[637,57197,787],{"class":642},[637,57199,57200,57202,57204],{"class":639,"line":2747},[637,57201,781],{"class":642},[637,57203,10010],{"class":646},[637,57205,787],{"class":642},[637,57207,57208,57210,57212],{"class":639,"line":2756},[637,57209,909],{"class":642},[637,57211,761],{"class":646},[637,57213,669],{"class":642},[637,57215,57216,57218,57220],{"class":639,"line":2765},[637,57217,732],{"class":642},[637,57219,750],{"class":646},[637,57221,669],{"class":642},[637,57223,57224,57226,57228,57231],{"class":639,"line":2787},[637,57225,643],{"class":642},[637,57227,1331],{"class":646},[637,57229,57230],{"class":650}," scoped",[637,57232,669],{"class":642},[637,57234,57235,57237,57239],{"class":639,"line":2838},[637,57236,1150],{"class":642},[637,57238,57159],{"class":1204},[637,57240,1208],{"class":642},[637,57242,57243,57246,57248,57251,57254],{"class":639,"line":2847},[637,57244,57245],{"class":4293}," background-color",[637,57247,1222],{"class":642},[637,57249,57250],{"class":642}," #",[637,57252,57253],{"class":683},"1e1e1e",[637,57255,9822],{"class":642},[637,57257,57258,57260,57262,57264,57267],{"class":639,"line":2856},[637,57259,5685],{"class":4293},[637,57261,1222],{"class":642},[637,57263,57250],{"class":642},[637,57265,57266],{"class":683},"ffffff",[637,57268,9822],{"class":642},[637,57270,57271,57274,57276,57279],{"class":639,"line":4058},[637,57272,57273],{"class":4293}," font-size",[637,57275,1222],{"class":642},[637,57277,57278],{"class":823}," 0.75rem",[637,57280,9822],{"class":642},[637,57282,57283,57286,57288,57291],{"class":639,"line":4102},[637,57284,57285],{"class":4293}," padding",[637,57287,1222],{"class":642},[637,57289,57290],{"class":823}," 0.25rem",[637,57292,9822],{"class":642},[637,57294,57295,57298,57300,57303],{"class":639,"line":4129},[637,57296,57297],{"class":4293}," border-radius",[637,57299,1222],{"class":642},[637,57301,57302],{"class":823}," 0.375rem",[637,57304,9822],{"class":642},[637,57306,57307],{"class":639,"line":4148},[637,57308,1329],{"class":642},[637,57310,57311,57313,57315],{"class":639,"line":4189},[637,57312,732],{"class":642},[637,57314,1331],{"class":646},[637,57316,669],{"class":642},[504,57318,57320],{"id":57319},"occlusion","Occlusion",[614,57322,57323,57324,57327],{},"By default, the HTML content will be visible through other objects in the scene. You can use the ",[618,57325,57326],{},"occlude"," prop to make the HTML content occlude other objects in the scene.",[614,57329,57330,57331,43633],{},"Html can be hidden behind one or more objects in your scene using the ",[618,57332,57326],{},[626,57334,57336],{"className":628,"code":57335,"language":633,"meta":576,"style":576},"\u003CHtml occlude>\n",[618,57337,57338],{"__ignoreMap":576},[637,57339,57340,57342,57344,57347],{"class":639,"line":577},[637,57341,643],{"class":642},[637,57343,57179],{"class":646},[637,57345,57346],{"class":650}," occlude",[637,57348,669],{"class":642},[614,57350,962,57351,57353,57354,57356],{},[618,57352,57326],{},", then ",[618,57355,56846],{}," will be hidden by any objects that pass in front of its position.",[2367,57358,57359],{},[57360,57361],"objects-html-occlusion",{},[5519,57363,5521,57364,57367],{},[5523,57365,57366],{},"Demo code",[626,57368,57370],{"className":48293,"code":57369,"language":48295,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, -2]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003Chtml center transform occlude :distance-factor=\"4\" :position=\"[0, 0, 2]\" :z-index-range=\"[28, 0]\">\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C\u002Fh1>\n \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[618,57371,57372,57392,57400,57408,57458,57486,57494],{"__ignoreMap":576},[637,57373,57374,57376,57378,57381,57383,57385,57388,57390],{"class":639,"line":577},[637,57375,643],{"class":642},[637,57377,860],{"class":646},[637,57379,57380],{"class":650}," :position",[637,57382,657],{"class":642},[637,57384,660],{"class":642},[637,57386,57387],{"class":663},"[0, 1, -2]",[637,57389,660],{"class":642},[637,57391,669],{"class":642},[637,57393,57394,57396,57398],{"class":639,"line":578},[637,57395,758],{"class":642},[637,57397,871],{"class":646},[637,57399,787],{"class":642},[637,57401,57402,57404,57406],{"class":639,"line":708},[637,57403,758],{"class":642},[637,57405,881],{"class":646},[637,57407,787],{"class":642},[637,57409,57410,57412,57414,57417,57420,57422,57425,57427,57429,57431,57433,57435,57437,57439,57442,57444,57447,57449,57451,57454,57456],{"class":639,"line":729},[637,57411,758],{"class":642},[637,57413,48295],{"class":646},[637,57415,57416],{"class":650}," center",[637,57418,57419],{"class":650}," transform",[637,57421,57346],{"class":650},[637,57423,57424],{"class":650}," :distance-factor",[637,57426,657],{"class":642},[637,57428,660],{"class":642},[637,57430,3900],{"class":663},[637,57432,660],{"class":642},[637,57434,57380],{"class":650},[637,57436,657],{"class":642},[637,57438,660],{"class":642},[637,57440,57441],{"class":663},"[0, 0, 2]",[637,57443,660],{"class":642},[637,57445,57446],{"class":650}," :z-index-range",[637,57448,657],{"class":642},[637,57450,660],{"class":642},[637,57452,57453],{"class":663},"[28, 0]",[637,57455,660],{"class":642},[637,57457,669],{"class":642},[637,57459,57460,57462,57464,57466,57468,57470,57473,57475,57477,57480,57482,57484],{"class":639,"line":739},[637,57461,781],{"class":642},[637,57463,57150],{"class":646},[637,57465,26345],{"class":650},[637,57467,657],{"class":642},[637,57469,660],{"class":642},[637,57471,57472],{"class":663},"bg-white dark:bg-dark text-xs p-1 rounded",[637,57474,660],{"class":642},[637,57476,3744],{"class":642},[637,57478,57479],{"class":683},"Move camera",[637,57481,732],{"class":642},[637,57483,57150],{"class":646},[637,57485,669],{"class":642},[637,57487,57488,57490,57492],{"class":639,"line":745},[637,57489,909],{"class":642},[637,57491,48295],{"class":646},[637,57493,669],{"class":642},[637,57495,57496,57498,57500],{"class":639,"line":755},[637,57497,732],{"class":642},[637,57499,860],{"class":646},[637,57501,669],{"class":642},[614,57503,57504,57505,2100],{},"You can also choose which object or objects should occlude the HTML content by passing either a single object ref or an array of object refs to the ",[618,57506,57326],{},[4215,57508,57510],{"id":57509},"single-occluder","Single occluder",[626,57512,57514],{"className":628,"code":57513,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"[mesh]\">\n",[618,57515,57516],{"__ignoreMap":576},[637,57517,57518,57520,57522,57524,57526,57528,57531,57533],{"class":639,"line":577},[637,57519,643],{"class":642},[637,57521,57179],{"class":646},[637,57523,57346],{"class":650},[637,57525,657],{"class":642},[637,57527,660],{"class":642},[637,57529,57530],{"class":663},"[mesh]",[637,57532,660],{"class":642},[637,57534,669],{"class":642},[2367,57536,57537],{},[57538,57539],"objects-html-single-occluder",{},[5519,57541,5521,57542,57544],{},[5523,57543,57366],{},[626,57545,57547],{"className":48293,"code":57546,"language":48295,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003Chtml center transform :occlude=\"[sphereRef]\" :distance-factor=\"4\" :z-index-range=\"[28, 0]\">\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C\u002Fh1>\n \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[618,57548,57549,57568,57576,57584,57628,57654,57662],{"__ignoreMap":576},[637,57550,57551,57553,57555,57557,57559,57561,57564,57566],{"class":639,"line":577},[637,57552,643],{"class":642},[637,57554,860],{"class":646},[637,57556,57380],{"class":650},[637,57558,657],{"class":642},[637,57560,660],{"class":642},[637,57562,57563],{"class":663},"[0, 1, 0]",[637,57565,660],{"class":642},[637,57567,669],{"class":642},[637,57569,57570,57572,57574],{"class":639,"line":578},[637,57571,758],{"class":642},[637,57573,871],{"class":646},[637,57575,787],{"class":642},[637,57577,57578,57580,57582],{"class":639,"line":708},[637,57579,758],{"class":642},[637,57581,881],{"class":646},[637,57583,787],{"class":642},[637,57585,57586,57588,57590,57592,57594,57597,57599,57601,57604,57606,57608,57610,57612,57614,57616,57618,57620,57622,57624,57626],{"class":639,"line":729},[637,57587,758],{"class":642},[637,57589,48295],{"class":646},[637,57591,57416],{"class":650},[637,57593,57419],{"class":650},[637,57595,57596],{"class":650}," :occlude",[637,57598,657],{"class":642},[637,57600,660],{"class":642},[637,57602,57603],{"class":663},"[sphereRef]",[637,57605,660],{"class":642},[637,57607,57424],{"class":650},[637,57609,657],{"class":642},[637,57611,660],{"class":642},[637,57613,3900],{"class":663},[637,57615,660],{"class":642},[637,57617,57446],{"class":650},[637,57619,657],{"class":642},[637,57621,660],{"class":642},[637,57623,57453],{"class":663},[637,57625,660],{"class":642},[637,57627,669],{"class":642},[637,57629,57630,57632,57634,57636,57638,57640,57642,57644,57646,57648,57650,57652],{"class":639,"line":739},[637,57631,781],{"class":642},[637,57633,57150],{"class":646},[637,57635,26345],{"class":650},[637,57637,657],{"class":642},[637,57639,660],{"class":642},[637,57641,57472],{"class":663},[637,57643,660],{"class":642},[637,57645,3744],{"class":642},[637,57647,57479],{"class":683},[637,57649,732],{"class":642},[637,57651,57150],{"class":646},[637,57653,669],{"class":642},[637,57655,57656,57658,57660],{"class":639,"line":745},[637,57657,909],{"class":642},[637,57659,48295],{"class":646},[637,57661,669],{"class":642},[637,57663,57664,57666,57668],{"class":639,"line":755},[637,57665,732],{"class":642},[637,57667,860],{"class":646},[637,57669,669],{"class":642},[4215,57671,57673],{"id":57672},"multiple-occluders","Multiple occluders",[626,57675,57677],{"className":628,"code":57676,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"[mesh1, mesh2, mesh3, ...]\" \u002F>\n",[618,57678,57679],{"__ignoreMap":576},[637,57680,57681,57683,57685,57687,57689,57691,57694,57696],{"class":639,"line":577},[637,57682,643],{"class":642},[637,57684,57179],{"class":646},[637,57686,57346],{"class":650},[637,57688,657],{"class":642},[637,57690,660],{"class":642},[637,57692,57693],{"class":663},"[mesh1, mesh2, mesh3, ...]",[637,57695,660],{"class":642},[637,57697,787],{"class":642},[614,57699,57700],{},"OR",[626,57702,57704],{"className":628,"code":57703,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"meshesArray\" \u002F>\n",[618,57705,57706],{"__ignoreMap":576},[637,57707,57708,57710,57712,57714,57716,57718,57721,57723],{"class":639,"line":577},[637,57709,643],{"class":642},[637,57711,57179],{"class":646},[637,57713,57346],{"class":650},[637,57715,657],{"class":642},[637,57717,660],{"class":642},[637,57719,57720],{"class":663},"meshesArray",[637,57722,660],{"class":642},[637,57724,787],{"class":642},[614,57726,57727,57728,57730,57731,57735,57736,57740],{},"In the demo below, a ",[618,57729,8519],{}," loop generates multiple spheres around the cube.\nAll resulting ",[1705,57732,57733],{},[618,57734,4455],{}," instances are collected into an array and passed to the ",[1705,57737,57738],{},[618,57739,57326],{}," prop, allowing each sphere to occlude the HTML content.",[614,57742,57743,57744,57749,57750,57753,57754,3156,57757,57760],{},"This demo also uses the ",[1705,57745,57746],{},[618,57747,57748],{},"on-occlude"," event, which is triggered whenever the occlusion state changes.\nHere, the event updates a ",[1705,57751,57752],{},"reactive value"," to control element styles — for example, toggling between ",[1709,57755,57756],{},"light",[1709,57758,57759],{},"dark"," themes.",[2367,57762,57763],{},[57764,57765],"objects-html-occlude-complex-demo",{},[5519,57767,5521,57768,57770],{},[5523,57769,57366],{},[626,57771,57773],{"className":48293,"code":57772,"language":48295,"meta":576,"style":576},"\u003CTresMesh :position=\"[0, 1, 0]\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003Chtml\n v-bind=\"htmlProps\"\n :occlude=\"occluderRefs\"\n :distance-factor=\"4\"\n :z-index-range=\"[28, 0]\"\n @on-occlude=\"(event: boolean) => isOccluded = event\"\n >\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">Move camera\u003C\u002Fh1>\n \u003C\u002Fhtml>\n\u003C\u002FTresMesh>\n",[618,57774,57775,57793,57801,57809,57816,57830,57844,57857,57870,57884,57888,57914,57922],{"__ignoreMap":576},[637,57776,57777,57779,57781,57783,57785,57787,57789,57791],{"class":639,"line":577},[637,57778,643],{"class":642},[637,57780,860],{"class":646},[637,57782,57380],{"class":650},[637,57784,657],{"class":642},[637,57786,660],{"class":642},[637,57788,57563],{"class":663},[637,57790,660],{"class":642},[637,57792,669],{"class":642},[637,57794,57795,57797,57799],{"class":639,"line":578},[637,57796,758],{"class":642},[637,57798,871],{"class":646},[637,57800,787],{"class":642},[637,57802,57803,57805,57807],{"class":639,"line":708},[637,57804,758],{"class":642},[637,57806,881],{"class":646},[637,57808,787],{"class":642},[637,57810,57811,57813],{"class":639,"line":729},[637,57812,758],{"class":642},[637,57814,57815],{"class":646},"html\n",[637,57817,57818,57821,57823,57825,57828],{"class":639,"line":739},[637,57819,57820],{"class":650}," v-bind",[637,57822,657],{"class":642},[637,57824,660],{"class":642},[637,57826,57827],{"class":663},"htmlProps",[637,57829,3224],{"class":642},[637,57831,57832,57835,57837,57839,57842],{"class":639,"line":745},[637,57833,57834],{"class":650}," :occlude",[637,57836,657],{"class":642},[637,57838,660],{"class":642},[637,57840,57841],{"class":663},"occluderRefs",[637,57843,3224],{"class":642},[637,57845,57846,57849,57851,57853,57855],{"class":639,"line":755},[637,57847,57848],{"class":650}," :distance-factor",[637,57850,657],{"class":642},[637,57852,660],{"class":642},[637,57854,3900],{"class":663},[637,57856,3224],{"class":642},[637,57858,57859,57862,57864,57866,57868],{"class":639,"line":778},[637,57860,57861],{"class":650}," :z-index-range",[637,57863,657],{"class":642},[637,57865,660],{"class":642},[637,57867,57453],{"class":663},[637,57869,3224],{"class":642},[637,57871,57872,57875,57877,57879,57882],{"class":639,"line":790},[637,57873,57874],{"class":650}," @on-occlude",[637,57876,657],{"class":642},[637,57878,660],{"class":642},[637,57880,57881],{"class":663},"(event: boolean) => isOccluded = event",[637,57883,3224],{"class":642},[637,57885,57886],{"class":639,"line":800},[637,57887,5376],{"class":642},[637,57889,57890,57892,57894,57896,57898,57900,57902,57904,57906,57908,57910,57912],{"class":639,"line":805},[637,57891,781],{"class":642},[637,57893,57150],{"class":646},[637,57895,26345],{"class":650},[637,57897,657],{"class":642},[637,57899,660],{"class":642},[637,57901,57472],{"class":663},[637,57903,660],{"class":642},[637,57905,3744],{"class":642},[637,57907,57479],{"class":683},[637,57909,732],{"class":642},[637,57911,57150],{"class":646},[637,57913,669],{"class":642},[637,57915,57916,57918,57920],{"class":639,"line":831},[637,57917,909],{"class":642},[637,57919,48295],{"class":646},[637,57921,669],{"class":642},[637,57923,57924,57926,57928],{"class":639,"line":631},[637,57925,732],{"class":642},[637,57927,860],{"class":646},[637,57929,669],{"class":642},[4215,57931,57933],{"id":57932},"blending-occlusion","Blending Occlusion",[614,57935,57936,57938],{},[618,57937,56846],{}," can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using \"blending\" as the occlude prop.",[626,57940,57942],{"className":628,"code":57941,"language":633,"meta":576,"style":576},"\u003CHtml occlude=\"blending\">\n",[618,57943,57944],{"__ignoreMap":576},[637,57945,57946,57948,57950,57952,57954,57956,57958,57960],{"class":639,"line":577},[637,57947,643],{"class":642},[637,57949,57179],{"class":646},[637,57951,57346],{"class":650},[637,57953,657],{"class":642},[637,57955,660],{"class":642},[637,57957,52752],{"class":663},[637,57959,660],{"class":642},[637,57961,669],{"class":642},[614,57963,2867,57964,3287,57967,57970,57971,1150],{},[1705,57965,57966],{},"demo below ⬇️",[1709,57968,57969],{},"(left black example)"," shows a ",[1705,57972,57973],{},"basic usage example",[2367,57975,57976],{},[57977,57978],"objects-html-occlude-blending-demo",{},[5519,57980,5521,57981,57983],{},[5523,57982,57366],{},[626,57984,58022],{"className":628,"code":57985,"highlights":57986,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { shallowRef } from 'vue'\nimport { CircleGeometry, MeshStandardMaterial } from 'three'\n\nconst gl = {\n clearColor: '#82DBC5',\n clearAlpha: 1,\n shadows: true,\n alpha: true,\n}\n\nconst targetDirectionLightRef = shallowRef(null)\n\nconst geometries = [\n {\n component: 'TresBoxGeometry',\n args: [1, 1, 1],\n },\n {\n component: 'TresSphereGeometry',\n args: [0.7, 32, 32],\n },\n {\n component: 'TresTorusGeometry',\n args: [0.5, 0.2, 16, 100],\n bind: { castShadow: true, receiveShadow: true },\n },\n]\n\nconst customGeometry = shallowRef(new CircleGeometry(1.25, 32))\n\nconst customMaterial = shallowRef(new MeshStandardMaterial({\n color: 'red',\n side: 2,\n opacity: 1,\n transparent: true,\n}))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"html-demo-wrapper aspect-video\">\n \u003CTresCanvas v-bind=\"gl\">\n \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CLevioso\n v-for=\"(geometry, index) in geometries\"\n :key=\"`html-occlude-blending-demo-${index}`\"\n :speed=\"3\"\n :float-factor=\"3.5\"\n :rotation-factor=\"1\"\n :range=\"[-0.35, 0.35]\"\n >\n \u003CTresMesh :position=\"[index * 3.5 - 3.5, 1, 0]\" v-bind=\"geometry.bind\">\n \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FLevioso>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[-4, .75, -2]\"\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv class=\"text-center text-s p-2 bg-[#1B1C1E] text-light\">\n BASIC 💛 \u003Cbr \u002F>\n \u003Cem>occlude=blending\u003C\u002Fem>\n \u003C\u002Fdiv>\n \u003C\u002FHtml>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[0, .85, -2]\"\n :geometry=\"customGeometry\"\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv class=\"text-xs p-8 text-center bg-[#F6B03B] text-dark\">\n CUSTOM \u003Cbr \u002F> \u003Cstrong>CIRCLE \u003Cbr \u002F> GEOMETRY\u003C\u002Fstrong>\n \u003C\u002Fdiv>\n \u003C\u002FHtml>\n\n \u003CHtml\n ref=\"targetDirectionLightRef\"\n center\n transform\n occlude=\"blending\"\n :position=\"[4, .5, -2]\"\n :material=\"customMaterial\"\n receive-shadow\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv style=\"width: 100px; height: auto; aspect-ratio: 250\u002F250;\">\u003C\u002Fdiv>\n \u003C\u002FHtml>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[4, 2.5, -2]\"\n :z-index-range=\"[28, 0]\"\n >\n \u003Cdiv class=\"text-center text-xs p-2 text-dark bg-[#FF0000]\">\n \u003Cstrong>HTML + Custom material \u003C\u002Fstrong> \u003Cbr \u002F>\n \u003Cem>+ receive-shadow \u003C\u002Fem> ⬇️\n \u003C\u002Fdiv>\n \u003C\u002FHtml>\n\n \u003CTresDirectionalLight\n v-if=\"targetDirectionLightRef?.instance\"\n :target=\"targetDirectionLightRef?.instance\"\n :shadow-normalBias=\"0.075\"\n :position=\"[5, 0, 5]\"\n :intensity=\"2\"\n cast-shadow\n \u002F>\n\n \u003CTresGridHelper :position-y=\"-1\" \u002F>\n \u003CTresAmbientLight :intensity=\"1\" \u002F>\n \u003C\u002FTresCanvas>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n background-color: #82dbc5;\n}\n\u003C\u002Fstyle>\n\n",[578,4102,4148,4189,4198,4207,22477,22492,22782,22791,22812,22870,22927,22947,22976,22985,22994,57987,57988,22791,22812,22870,22927,22947,22976,22985,22994,57987,57988,57989,57990,57991,57992,57993,57994,57995,57996,57997,57998,57999,58000,58001,58002,58003,58004,58005,58006,58007,58008,58009,58010,58011,58012,58013,58014,58015,58016,58017,58018,58019,58020,58021],71,72,74,75,76,77,78,79,80,81,82,83,84,86,87,88,89,90,91,92,93,94,95,96,98,99,100,101,102,103,104,105,106,107,108,[618,58023,58024,58044,58071,58089,58107,58130,58134,58145,58160,58171,58182,58193,58197,58201,58218,58222,58233,58237,58252,58275,58279,58283,58297,58319,58323,58327,58341,58367,58394,58398,58402,58406,58435,58439,58461,58476,58488,58499,58511,58518,58526,58530,58538,58557,58576,58608,58616,58620,58627,58650,58669,58683,58699,58713,58735,58739,58796,58829,58837,58845,58853,58857,58864,58869,58874,58888,58916,58941,58946,58966,58978,58996,59005,59014,59019,59026,59031,59036,59049,59077,59093,59116,59121,59141,59179,59188,59197,59202,59209,59223,59228,59233,59246,59274,59290,59296,59319,59324,59348,59357,59362,59369,59374,59379,59392,59420,59443,59448,59468,59492,59513,59522,59531,59536,59543,59561,59580,59597,59624,59639,59645,59650,59655,59678,59699,59708,59717,59726,59731,59742,59752,59764,59775,59786,59799,59813,59818],{"__ignoreMap":576},[637,58025,58026,58028,58030,58032,58034,58036,58038,58040,58042],{"class":639,"line":577},[637,58027,643],{"class":642},[637,58029,647],{"class":646},[637,58031,651],{"class":650},[637,58033,654],{"class":650},[637,58035,657],{"class":642},[637,58037,660],{"class":642},[637,58039,664],{"class":663},[637,58041,660],{"class":642},[637,58043,669],{"class":642},[637,58045,58047,58049,58051,58053,58055,58057,58059,58061,58063,58065,58067,58069],{"class":58046,"line":578},[639,673],[637,58048,677],{"class":676},[637,58050,680],{"class":642},[637,58052,56890],{"class":683},[637,58054,687],{"class":642},[637,58056,9832],{"class":683},[637,58058,687],{"class":642},[637,58060,690],{"class":683},[637,58062,693],{"class":642},[637,58064,696],{"class":676},[637,58066,699],{"class":642},[637,58068,702],{"class":663},[637,58070,705],{"class":642},[637,58072,58073,58075,58077,58079,58081,58083,58085,58087],{"class":639,"line":708},[637,58074,677],{"class":676},[637,58076,680],{"class":642},[637,58078,715],{"class":683},[637,58080,693],{"class":642},[637,58082,696],{"class":676},[637,58084,699],{"class":642},[637,58086,724],{"class":663},[637,58088,705],{"class":642},[637,58090,58091,58093,58095,58097,58099,58101,58103,58105],{"class":639,"line":729},[637,58092,677],{"class":676},[637,58094,680],{"class":642},[637,58096,3591],{"class":683},[637,58098,693],{"class":642},[637,58100,696],{"class":676},[637,58102,699],{"class":642},[637,58104,633],{"class":663},[637,58106,705],{"class":642},[637,58108,58109,58111,58113,58116,58118,58120,58122,58124,58126,58128],{"class":639,"line":739},[637,58110,677],{"class":676},[637,58112,680],{"class":642},[637,58114,58115],{"class":683}," CircleGeometry",[637,58117,687],{"class":642},[637,58119,8625],{"class":683},[637,58121,693],{"class":642},[637,58123,696],{"class":676},[637,58125,699],{"class":642},[637,58127,4799],{"class":663},[637,58129,705],{"class":642},[637,58131,58132],{"class":639,"line":745},[637,58133,742],{"emptyLinePlaceholder":594},[637,58135,58136,58138,58141,58143],{"class":639,"line":755},[637,58137,2487],{"class":650},[637,58139,58140],{"class":683}," gl ",[637,58142,657],{"class":642},[637,58144,1208],{"class":642},[637,58146,58147,58150,58152,58154,58156,58158],{"class":639,"line":778},[637,58148,58149],{"class":646}," clearColor",[637,58151,1222],{"class":642},[637,58153,699],{"class":642},[637,58155,12358],{"class":663},[637,58157,2512],{"class":642},[637,58159,2560],{"class":642},[637,58161,58162,58165,58167,58169],{"class":639,"line":790},[637,58163,58164],{"class":646}," clearAlpha",[637,58166,1222],{"class":642},[637,58168,2631],{"class":823},[637,58170,2560],{"class":642},[637,58172,58173,58176,58178,58180],{"class":639,"line":800},[637,58174,58175],{"class":646}," shadows",[637,58177,1222],{"class":642},[637,58179,4561],{"class":4560},[637,58181,2560],{"class":642},[637,58183,58184,58187,58189,58191],{"class":639,"line":805},[637,58185,58186],{"class":646}," alpha",[637,58188,1222],{"class":642},[637,58190,4561],{"class":4560},[637,58192,2560],{"class":642},[637,58194,58195],{"class":639,"line":831},[637,58196,1329],{"class":642},[637,58198,58199],{"class":639,"line":631},[637,58200,742],{"emptyLinePlaceholder":594},[637,58202,58203,58205,58208,58210,58212,58214,58216],{"class":639,"line":854},[637,58204,2487],{"class":650},[637,58206,58207],{"class":683}," targetDirectionLightRef ",[637,58209,657],{"class":642},[637,58211,3591],{"class":2506},[637,58213,2509],{"class":683},[637,58215,3749],{"class":642},[637,58217,2520],{"class":683},[637,58219,58220],{"class":639,"line":865},[637,58221,742],{"emptyLinePlaceholder":594},[637,58223,58224,58226,58229,58231],{"class":639,"line":876},[637,58225,2487],{"class":650},[637,58227,58228],{"class":683}," geometries ",[637,58230,657],{"class":642},[637,58232,21719],{"class":683},[637,58234,58235],{"class":639,"line":886},[637,58236,2543],{"class":642},[637,58238,58239,58242,58244,58246,58248,58250],{"class":639,"line":632},[637,58240,58241],{"class":646}," component",[637,58243,1222],{"class":642},[637,58245,699],{"class":642},[637,58247,871],{"class":663},[637,58249,2512],{"class":642},[637,58251,2560],{"class":642},[637,58253,58254,58257,58259,58261,58263,58265,58267,58269,58271,58273],{"class":639,"line":906},[637,58255,58256],{"class":646}," args",[637,58258,1222],{"class":642},[637,58260,2570],{"class":683},[637,58262,1925],{"class":823},[637,58264,687],{"class":642},[637,58266,2631],{"class":823},[637,58268,687],{"class":642},[637,58270,2631],{"class":823},[637,58272,1513],{"class":683},[637,58274,2560],{"class":642},[637,58276,58277],{"class":639,"line":916},[637,58278,2667],{"class":642},[637,58280,58281],{"class":639,"line":2695},[637,58282,2543],{"class":642},[637,58284,58285,58287,58289,58291,58293,58295],{"class":639,"line":2704},[637,58286,58241],{"class":646},[637,58288,1222],{"class":642},[637,58290,699],{"class":642},[637,58292,4107],{"class":663},[637,58294,2512],{"class":642},[637,58296,2560],{"class":642},[637,58298,58299,58301,58303,58305,58307,58309,58311,58313,58315,58317],{"class":639,"line":2738},[637,58300,58256],{"class":646},[637,58302,1222],{"class":642},[637,58304,2570],{"class":683},[637,58306,4120],{"class":823},[637,58308,687],{"class":642},[637,58310,32842],{"class":823},[637,58312,687],{"class":642},[637,58314,32842],{"class":823},[637,58316,1513],{"class":683},[637,58318,2560],{"class":642},[637,58320,58321],{"class":639,"line":2747},[637,58322,2667],{"class":642},[637,58324,58325],{"class":639,"line":2756},[637,58326,2543],{"class":642},[637,58328,58329,58331,58333,58335,58337,58339],{"class":639,"line":2765},[637,58330,58241],{"class":646},[637,58332,1222],{"class":642},[637,58334,699],{"class":642},[637,58336,12445],{"class":663},[637,58338,2512],{"class":642},[637,58340,2560],{"class":642},[637,58342,58343,58345,58347,58349,58351,58353,58355,58357,58359,58361,58363,58365],{"class":639,"line":2787},[637,58344,58256],{"class":646},[637,58346,1222],{"class":642},[637,58348,2570],{"class":683},[637,58350,1545],{"class":823},[637,58352,687],{"class":642},[637,58354,36594],{"class":823},[637,58356,687],{"class":642},[637,58358,36599],{"class":823},[637,58360,687],{"class":642},[637,58362,7986],{"class":823},[637,58364,1513],{"class":683},[637,58366,2560],{"class":642},[637,58368,58369,58372,58374,58376,58379,58381,58383,58385,58388,58390,58392],{"class":639,"line":2838},[637,58370,58371],{"class":646}," bind",[637,58373,1222],{"class":642},[637,58375,680],{"class":642},[637,58377,58378],{"class":646}," castShadow",[637,58380,1222],{"class":642},[637,58382,4561],{"class":4560},[637,58384,687],{"class":642},[637,58386,58387],{"class":646}," receiveShadow",[637,58389,1222],{"class":642},[637,58391,4561],{"class":4560},[637,58393,7298],{"class":642},[637,58395,58396],{"class":639,"line":2847},[637,58397,2667],{"class":642},[637,58399,58400],{"class":639,"line":2856},[637,58401,21755],{"class":683},[637,58403,58404],{"class":639,"line":4058},[637,58405,742],{"emptyLinePlaceholder":594},[637,58407,58409,58411,58414,58416,58418,58420,58422,58424,58426,58429,58431,58433],{"class":58408,"line":4102},[639,673],[637,58410,2487],{"class":650},[637,58412,58413],{"class":683}," customGeometry ",[637,58415,657],{"class":642},[637,58417,3591],{"class":2506},[637,58419,2509],{"class":683},[637,58421,38189],{"class":642},[637,58423,58115],{"class":2506},[637,58425,2509],{"class":683},[637,58427,58428],{"class":823},"1.25",[637,58430,687],{"class":642},[637,58432,32842],{"class":823},[637,58434,7398],{"class":683},[637,58436,58437],{"class":639,"line":4129},[637,58438,742],{"emptyLinePlaceholder":594},[637,58440,58442,58444,58447,58449,58451,58453,58455,58457,58459],{"class":58441,"line":4148},[639,673],[637,58443,2487],{"class":650},[637,58445,58446],{"class":683}," customMaterial ",[637,58448,657],{"class":642},[637,58450,3591],{"class":2506},[637,58452,2509],{"class":683},[637,58454,38189],{"class":642},[637,58456,8625],{"class":2506},[637,58458,2509],{"class":683},[637,58460,3353],{"class":642},[637,58462,58464,58466,58468,58470,58472,58474],{"class":58463,"line":4189},[639,673],[637,58465,5685],{"class":646},[637,58467,1222],{"class":642},[637,58469,699],{"class":642},[637,58471,39050],{"class":663},[637,58473,2512],{"class":642},[637,58475,2560],{"class":642},[637,58477,58479,58482,58484,58486],{"class":58478,"line":4198},[639,673],[637,58480,58481],{"class":646}," side",[637,58483,1222],{"class":642},[637,58485,33693],{"class":823},[637,58487,2560],{"class":642},[637,58489,58491,58493,58495,58497],{"class":58490,"line":4207},[639,673],[637,58492,5697],{"class":646},[637,58494,1222],{"class":642},[637,58496,2631],{"class":823},[637,58498,2560],{"class":642},[637,58500,58502,58505,58507,58509],{"class":58501,"line":22477},[639,673],[637,58503,58504],{"class":646}," transparent",[637,58506,1222],{"class":642},[637,58508,4561],{"class":4560},[637,58510,2560],{"class":642},[637,58512,58514,58516],{"class":58513,"line":22492},[639,673],[637,58515,2500],{"class":642},[637,58517,7398],{"class":683},[637,58519,58520,58522,58524],{"class":639,"line":22507},[637,58521,732],{"class":642},[637,58523,647],{"class":646},[637,58525,669],{"class":642},[637,58527,58528],{"class":639,"line":22512},[637,58529,742],{"emptyLinePlaceholder":594},[637,58531,58532,58534,58536],{"class":639,"line":22519},[637,58533,643],{"class":642},[637,58535,750],{"class":646},[637,58537,669],{"class":642},[637,58539,58540,58542,58544,58546,58548,58550,58553,58555],{"class":639,"line":22524},[637,58541,758],{"class":642},[637,58543,4283],{"class":646},[637,58545,26345],{"class":650},[637,58547,657],{"class":642},[637,58549,660],{"class":642},[637,58551,58552],{"class":663},"html-demo-wrapper aspect-video",[637,58554,660],{"class":642},[637,58556,669],{"class":642},[637,58558,58559,58561,58563,58565,58567,58569,58572,58574],{"class":639,"line":22530},[637,58560,781],{"class":642},[637,58562,761],{"class":646},[637,58564,10598],{"class":650},[637,58566,657],{"class":642},[637,58568,660],{"class":642},[637,58570,58571],{"class":683},"gl",[637,58573,660],{"class":642},[637,58575,669],{"class":642},[637,58577,58578,58580,58582,58584,58586,58588,58590,58592,58594,58596,58598,58600,58602,58604,58606],{"class":639,"line":22551},[637,58579,857],{"class":642},[637,58581,784],{"class":646},[637,58583,813],{"class":642},[637,58585,1491],{"class":650},[637,58587,657],{"class":642},[637,58589,660],{"class":642},[637,58591,1498],{"class":642},[637,58593,969],{"class":823},[637,58595,1503],{"class":642},[637,58597,17251],{"class":823},[637,58599,1503],{"class":642},[637,58601,12004],{"class":823},[637,58603,1513],{"class":642},[637,58605,660],{"class":642},[637,58607,787],{"class":642},[637,58609,58610,58612,58614],{"class":639,"line":22557},[637,58611,857],{"class":642},[637,58613,795],{"class":646},[637,58615,787],{"class":642},[637,58617,58618],{"class":639,"line":22564},[637,58619,742],{"emptyLinePlaceholder":594},[637,58621,58622,58624],{"class":639,"line":22569},[637,58623,857],{"class":642},[637,58625,58626],{"class":646},"Levioso\n",[637,58628,58629,58631,58633,58635,58637,58639,58641,58643,58645,58648],{"class":639,"line":22590},[637,58630,8214],{"class":676},[637,58632,657],{"class":642},[637,58634,660],{"class":642},[637,58636,2509],{"class":642},[637,58638,5333],{"class":683},[637,58640,1503],{"class":642},[637,58642,8228],{"class":683},[637,58644,8231],{"class":642},[637,58646,58647],{"class":683},"geometries",[637,58649,3224],{"class":642},[637,58651,58652,58654,58656,58658,58660,58663,58665,58667],{"class":639,"line":22603},[637,58653,8241],{"class":642},[637,58655,8244],{"class":650},[637,58657,657],{"class":642},[637,58659,23415],{"class":642},[637,58661,58662],{"class":663},"html-occlude-blending-demo-",[637,58664,23421],{"class":642},[637,58666,8228],{"class":683},[637,58668,23426],{"class":642},[637,58670,58671,58673,58675,58677,58679,58681],{"class":639,"line":22629},[637,58672,8241],{"class":642},[637,58674,9976],{"class":650},[637,58676,657],{"class":642},[637,58678,660],{"class":642},[637,58680,2729],{"class":823},[637,58682,3224],{"class":642},[637,58684,58685,58687,58690,58692,58694,58697],{"class":639,"line":22634},[637,58686,8241],{"class":642},[637,58688,58689],{"class":650},"float-factor",[637,58691,657],{"class":642},[637,58693,660],{"class":642},[637,58695,58696],{"class":823},"3.5",[637,58698,3224],{"class":642},[637,58700,58701,58703,58705,58707,58709,58711],{"class":639,"line":22641},[637,58702,8241],{"class":642},[637,58704,43029],{"class":650},[637,58706,657],{"class":642},[637,58708,660],{"class":642},[637,58710,1925],{"class":823},[637,58712,3224],{"class":642},[637,58714,58715,58717,58719,58721,58723,58725,58727,58729,58731,58733],{"class":639,"line":22650},[637,58716,8241],{"class":642},[637,58718,10182],{"class":650},[637,58720,657],{"class":642},[637,58722,660],{"class":642},[637,58724,3947],{"class":642},[637,58726,8657],{"class":823},[637,58728,1503],{"class":642},[637,58730,8657],{"class":823},[637,58732,1513],{"class":642},[637,58734,3224],{"class":642},[637,58736,58737],{"class":639,"line":22655},[637,58738,57143],{"class":642},[637,58740,58741,58743,58745,58747,58749,58751,58753,58755,58757,58760,58762,58765,58767,58769,58771,58773,58775,58777,58779,58781,58783,58785,58787,58789,58792,58794],{"class":639,"line":22664},[637,58742,868],{"class":642},[637,58744,860],{"class":646},[637,58746,813],{"class":642},[637,58748,1491],{"class":650},[637,58750,657],{"class":642},[637,58752,660],{"class":642},[637,58754,1498],{"class":642},[637,58756,8228],{"class":683},[637,58758,58759],{"class":642}," * ",[637,58761,58696],{"class":823},[637,58763,58764],{"class":642}," - ",[637,58766,58696],{"class":823},[637,58768,1503],{"class":642},[637,58770,1925],{"class":823},[637,58772,1503],{"class":642},[637,58774,969],{"class":823},[637,58776,1513],{"class":642},[637,58778,660],{"class":642},[637,58780,10598],{"class":650},[637,58782,657],{"class":642},[637,58784,660],{"class":642},[637,58786,5333],{"class":683},[637,58788,1150],{"class":642},[637,58790,58791],{"class":683},"bind",[637,58793,660],{"class":642},[637,58795,669],{"class":642},[637,58797,58798,58800,58803,58806,58808,58810,58813,58815,58818,58820,58822,58825,58827],{"class":639,"line":22683},[637,58799,29340],{"class":642},[637,58801,58802],{"class":646},"component",[637,58804,58805],{"class":650}," :is",[637,58807,657],{"class":642},[637,58809,660],{"class":642},[637,58811,58812],{"class":663},"geometry.component",[637,58814,660],{"class":642},[637,58816,58817],{"class":650}," :args",[637,58819,657],{"class":642},[637,58821,660],{"class":642},[637,58823,58824],{"class":663},"geometry.args",[637,58826,660],{"class":642},[637,58828,787],{"class":642},[637,58830,58831,58833,58835],{"class":639,"line":22693},[637,58832,29340],{"class":642},[637,58834,881],{"class":646},[637,58836,787],{"class":642},[637,58838,58839,58841,58843],{"class":639,"line":22730},[637,58840,29397],{"class":642},[637,58842,860],{"class":646},[637,58844,669],{"class":642},[637,58846,58847,58849,58851],{"class":639,"line":22739},[637,58848,889],{"class":642},[637,58850,9971],{"class":646},[637,58852,669],{"class":642},[637,58854,58855],{"class":639,"line":22773},[637,58856,742],{"emptyLinePlaceholder":594},[637,58858,58860,58862],{"class":58859,"line":22782},[639,673],[637,58861,857],{"class":642},[637,58863,57056],{"class":646},[637,58865,58867],{"class":58866,"line":22791},[639,673],[637,58868,57062],{"class":650},[637,58870,58872],{"class":58871,"line":22812},[639,673],[637,58873,57068],{"class":650},[637,58875,58877,58880,58882,58884,58886],{"class":58876,"line":22870},[639,673],[637,58878,58879],{"class":650}," occlude",[637,58881,657],{"class":642},[637,58883,660],{"class":642},[637,58885,52752],{"class":663},[637,58887,3224],{"class":642},[637,58889,58891,58893,58895,58897,58899,58901,58903,58905,58908,58910,58912,58914],{"class":58890,"line":22927},[639,673],[637,58892,8241],{"class":642},[637,58894,1491],{"class":650},[637,58896,657],{"class":642},[637,58898,660],{"class":642},[637,58900,3947],{"class":642},[637,58902,3900],{"class":823},[637,58904,1503],{"class":642},[637,58906,58907],{"class":823},".75",[637,58909,10090],{"class":642},[637,58911,824],{"class":823},[637,58913,1513],{"class":642},[637,58915,3224],{"class":642},[637,58917,58919,58921,58924,58926,58928,58930,58933,58935,58937,58939],{"class":58918,"line":22947},[639,673],[637,58920,8241],{"class":642},[637,58922,58923],{"class":650},"z-index-range",[637,58925,657],{"class":642},[637,58927,660],{"class":642},[637,58929,1498],{"class":642},[637,58931,58932],{"class":823},"28",[637,58934,1503],{"class":642},[637,58936,969],{"class":823},[637,58938,1513],{"class":642},[637,58940,3224],{"class":642},[637,58942,58944],{"class":58943,"line":22976},[639,673],[637,58945,57143],{"class":642},[637,58947,58949,58951,58953,58955,58957,58959,58962,58964],{"class":58948,"line":22985},[639,673],[637,58950,868],{"class":642},[637,58952,4283],{"class":646},[637,58954,26345],{"class":650},[637,58956,657],{"class":642},[637,58958,660],{"class":642},[637,58960,58961],{"class":663},"text-center text-s p-2 bg-[#1B1C1E] text-light",[637,58963,660],{"class":642},[637,58965,669],{"class":642},[637,58967,58969,58972,58974,58976],{"class":58968,"line":22994},[639,673],[637,58970,58971],{"class":683}," BASIC 💛 ",[637,58973,643],{"class":642},[637,58975,7778],{"class":646},[637,58977,787],{"class":642},[637,58979,58981,58983,58985,58987,58990,58992,58994],{"class":58980,"line":57987},[639,673],[637,58982,29340],{"class":642},[637,58984,1709],{"class":646},[637,58986,3744],{"class":642},[637,58988,58989],{"class":683},"occlude=blending",[637,58991,732],{"class":642},[637,58993,1709],{"class":646},[637,58995,669],{"class":642},[637,58997,58999,59001,59003],{"class":58998,"line":57988},[639,673],[637,59000,29397],{"class":642},[637,59002,4283],{"class":646},[637,59004,669],{"class":642},[637,59006,59008,59010,59012],{"class":639,"line":59007},73,[637,59009,889],{"class":642},[637,59011,57179],{"class":646},[637,59013,669],{"class":642},[637,59015,59017],{"class":59016,"line":57989},[639,673],[637,59018,742],{"emptyLinePlaceholder":594},[637,59020,59022,59024],{"class":59021,"line":57990},[639,673],[637,59023,857],{"class":642},[637,59025,57056],{"class":646},[637,59027,59029],{"class":59028,"line":57991},[639,673],[637,59030,57062],{"class":650},[637,59032,59034],{"class":59033,"line":57992},[639,673],[637,59035,57068],{"class":650},[637,59037,59039,59041,59043,59045,59047],{"class":59038,"line":57993},[639,673],[637,59040,58879],{"class":650},[637,59042,657],{"class":642},[637,59044,660],{"class":642},[637,59046,52752],{"class":663},[637,59048,3224],{"class":642},[637,59050,59052,59054,59056,59058,59060,59062,59064,59066,59069,59071,59073,59075],{"class":59051,"line":57994},[639,673],[637,59053,8241],{"class":642},[637,59055,1491],{"class":650},[637,59057,657],{"class":642},[637,59059,660],{"class":642},[637,59061,1498],{"class":642},[637,59063,969],{"class":823},[637,59065,1503],{"class":642},[637,59067,59068],{"class":823},".85",[637,59070,10090],{"class":642},[637,59072,824],{"class":823},[637,59074,1513],{"class":642},[637,59076,3224],{"class":642},[637,59078,59080,59082,59084,59086,59088,59091],{"class":59079,"line":57995},[639,673],[637,59081,8241],{"class":642},[637,59083,5333],{"class":650},[637,59085,657],{"class":642},[637,59087,660],{"class":642},[637,59089,59090],{"class":683},"customGeometry",[637,59092,3224],{"class":642},[637,59094,59096,59098,59100,59102,59104,59106,59108,59110,59112,59114],{"class":59095,"line":57996},[639,673],[637,59097,8241],{"class":642},[637,59099,58923],{"class":650},[637,59101,657],{"class":642},[637,59103,660],{"class":642},[637,59105,1498],{"class":642},[637,59107,58932],{"class":823},[637,59109,1503],{"class":642},[637,59111,969],{"class":823},[637,59113,1513],{"class":642},[637,59115,3224],{"class":642},[637,59117,59119],{"class":59118,"line":57997},[639,673],[637,59120,57143],{"class":642},[637,59122,59124,59126,59128,59130,59132,59134,59137,59139],{"class":59123,"line":57998},[639,673],[637,59125,868],{"class":642},[637,59127,4283],{"class":646},[637,59129,26345],{"class":650},[637,59131,657],{"class":642},[637,59133,660],{"class":642},[637,59135,59136],{"class":663},"text-xs p-8 text-center bg-[#F6B03B] text-dark",[637,59138,660],{"class":642},[637,59140,669],{"class":642},[637,59142,59144,59147,59149,59151,59154,59157,59159,59161,59164,59166,59168,59170,59173,59175,59177],{"class":59143,"line":57999},[639,673],[637,59145,59146],{"class":683}," CUSTOM ",[637,59148,643],{"class":642},[637,59150,7778],{"class":646},[637,59152,59153],{"class":642}," \u002F>",[637,59155,59156],{"class":642}," \u003C",[637,59158,1705],{"class":646},[637,59160,3744],{"class":642},[637,59162,59163],{"class":683},"CIRCLE ",[637,59165,643],{"class":642},[637,59167,7778],{"class":646},[637,59169,59153],{"class":642},[637,59171,59172],{"class":683}," GEOMETRY",[637,59174,732],{"class":642},[637,59176,1705],{"class":646},[637,59178,669],{"class":642},[637,59180,59182,59184,59186],{"class":639,"line":59181},85,[637,59183,29397],{"class":642},[637,59185,4283],{"class":646},[637,59187,669],{"class":642},[637,59189,59191,59193,59195],{"class":59190,"line":58000},[639,673],[637,59192,889],{"class":642},[637,59194,57179],{"class":646},[637,59196,669],{"class":642},[637,59198,59200],{"class":59199,"line":58001},[639,673],[637,59201,742],{"emptyLinePlaceholder":594},[637,59203,59205,59207],{"class":59204,"line":58002},[639,673],[637,59206,857],{"class":642},[637,59208,57056],{"class":646},[637,59210,59212,59214,59216,59218,59221],{"class":59211,"line":58003},[639,673],[637,59213,27469],{"class":650},[637,59215,657],{"class":642},[637,59217,660],{"class":642},[637,59219,59220],{"class":663},"targetDirectionLightRef",[637,59222,3224],{"class":642},[637,59224,59226],{"class":59225,"line":58004},[639,673],[637,59227,57062],{"class":650},[637,59229,59231],{"class":59230,"line":58005},[639,673],[637,59232,57068],{"class":650},[637,59234,59236,59238,59240,59242,59244],{"class":59235,"line":58006},[639,673],[637,59237,58879],{"class":650},[637,59239,657],{"class":642},[637,59241,660],{"class":642},[637,59243,52752],{"class":663},[637,59245,3224],{"class":642},[637,59247,59249,59251,59253,59255,59257,59259,59261,59263,59266,59268,59270,59272],{"class":59248,"line":58007},[639,673],[637,59250,8241],{"class":642},[637,59252,1491],{"class":650},[637,59254,657],{"class":642},[637,59256,660],{"class":642},[637,59258,1498],{"class":642},[637,59260,3900],{"class":823},[637,59262,1503],{"class":642},[637,59264,59265],{"class":823},".5",[637,59267,10090],{"class":642},[637,59269,824],{"class":823},[637,59271,1513],{"class":642},[637,59273,3224],{"class":642},[637,59275,59277,59279,59281,59283,59285,59288],{"class":59276,"line":58008},[639,673],[637,59278,8241],{"class":642},[637,59280,5403],{"class":650},[637,59282,657],{"class":642},[637,59284,660],{"class":642},[637,59286,59287],{"class":683},"customMaterial",[637,59289,3224],{"class":642},[637,59291,59293],{"class":59292,"line":58009},[639,673],[637,59294,59295],{"class":650}," receive-shadow\n",[637,59297,59299,59301,59303,59305,59307,59309,59311,59313,59315,59317],{"class":59298,"line":58010},[639,673],[637,59300,8241],{"class":642},[637,59302,58923],{"class":650},[637,59304,657],{"class":642},[637,59306,660],{"class":642},[637,59308,1498],{"class":642},[637,59310,58932],{"class":823},[637,59312,1503],{"class":642},[637,59314,969],{"class":823},[637,59316,1513],{"class":642},[637,59318,3224],{"class":642},[637,59320,59322],{"class":639,"line":59321},97,[637,59323,57143],{"class":642},[637,59325,59327,59329,59331,59333,59335,59337,59340,59342,59344,59346],{"class":59326,"line":58011},[639,673],[637,59328,868],{"class":642},[637,59330,4283],{"class":646},[637,59332,4286],{"class":650},[637,59334,657],{"class":642},[637,59336,660],{"class":642},[637,59338,59339],{"class":663},"width: 100px; height: auto; aspect-ratio: 250\u002F250;",[637,59341,660],{"class":642},[637,59343,26381],{"class":642},[637,59345,4283],{"class":646},[637,59347,669],{"class":642},[637,59349,59351,59353,59355],{"class":59350,"line":58012},[639,673],[637,59352,889],{"class":642},[637,59354,57179],{"class":646},[637,59356,669],{"class":642},[637,59358,59360],{"class":59359,"line":58013},[639,673],[637,59361,742],{"emptyLinePlaceholder":594},[637,59363,59365,59367],{"class":59364,"line":58014},[639,673],[637,59366,857],{"class":642},[637,59368,57056],{"class":646},[637,59370,59372],{"class":59371,"line":58015},[639,673],[637,59373,57062],{"class":650},[637,59375,59377],{"class":59376,"line":58016},[639,673],[637,59378,57068],{"class":650},[637,59380,59382,59384,59386,59388,59390],{"class":59381,"line":58017},[639,673],[637,59383,58879],{"class":650},[637,59385,657],{"class":642},[637,59387,660],{"class":642},[637,59389,52752],{"class":663},[637,59391,3224],{"class":642},[637,59393,59395,59397,59399,59401,59403,59405,59407,59409,59412,59414,59416,59418],{"class":59394,"line":58018},[639,673],[637,59396,8241],{"class":642},[637,59398,1491],{"class":650},[637,59400,657],{"class":642},[637,59402,660],{"class":642},[637,59404,1498],{"class":642},[637,59406,3900],{"class":823},[637,59408,1503],{"class":642},[637,59410,59411],{"class":823},"2.5",[637,59413,10090],{"class":642},[637,59415,824],{"class":823},[637,59417,1513],{"class":642},[637,59419,3224],{"class":642},[637,59421,59423,59425,59427,59429,59431,59433,59435,59437,59439,59441],{"class":59422,"line":58019},[639,673],[637,59424,8241],{"class":642},[637,59426,58923],{"class":650},[637,59428,657],{"class":642},[637,59430,660],{"class":642},[637,59432,1498],{"class":642},[637,59434,58932],{"class":823},[637,59436,1503],{"class":642},[637,59438,969],{"class":823},[637,59440,1513],{"class":642},[637,59442,3224],{"class":642},[637,59444,59446],{"class":59445,"line":58020},[639,673],[637,59447,57143],{"class":642},[637,59449,59451,59453,59455,59457,59459,59461,59464,59466],{"class":59450,"line":58021},[639,673],[637,59452,868],{"class":642},[637,59454,4283],{"class":646},[637,59456,26345],{"class":650},[637,59458,657],{"class":642},[637,59460,660],{"class":642},[637,59462,59463],{"class":663},"text-center text-xs p-2 text-dark bg-[#FF0000]",[637,59465,660],{"class":642},[637,59467,669],{"class":642},[637,59469,59471,59473,59475,59477,59480,59482,59484,59486,59488,59490],{"class":639,"line":59470},109,[637,59472,29340],{"class":642},[637,59474,1705],{"class":646},[637,59476,3744],{"class":642},[637,59478,59479],{"class":683},"HTML + Custom material ",[637,59481,732],{"class":642},[637,59483,1705],{"class":646},[637,59485,3744],{"class":642},[637,59487,59156],{"class":642},[637,59489,7778],{"class":646},[637,59491,787],{"class":642},[637,59493,59495,59497,59499,59501,59504,59506,59508,59510],{"class":639,"line":59494},110,[637,59496,29340],{"class":642},[637,59498,1709],{"class":646},[637,59500,3744],{"class":642},[637,59502,59503],{"class":683},"+ receive-shadow ",[637,59505,732],{"class":642},[637,59507,1709],{"class":646},[637,59509,3744],{"class":642},[637,59511,59512],{"class":683}," ⬇️\n",[637,59514,59516,59518,59520],{"class":639,"line":59515},111,[637,59517,29397],{"class":642},[637,59519,4283],{"class":646},[637,59521,669],{"class":642},[637,59523,59525,59527,59529],{"class":639,"line":59524},112,[637,59526,889],{"class":642},[637,59528,57179],{"class":646},[637,59530,669],{"class":642},[637,59532,59534],{"class":639,"line":59533},113,[637,59535,742],{"emptyLinePlaceholder":594},[637,59537,59539,59541],{"class":639,"line":59538},114,[637,59540,857],{"class":642},[637,59542,18129],{"class":646},[637,59544,59546,59549,59551,59553,59555,59557,59559],{"class":639,"line":59545},115,[637,59547,59548],{"class":676}," v-if",[637,59550,657],{"class":642},[637,59552,660],{"class":642},[637,59554,59220],{"class":683},[637,59556,3781],{"class":642},[637,59558,9626],{"class":683},[637,59560,3224],{"class":642},[637,59562,59564,59566,59568,59570,59572,59574,59576,59578],{"class":639,"line":59563},116,[637,59565,8241],{"class":642},[637,59567,16246],{"class":650},[637,59569,657],{"class":642},[637,59571,660],{"class":642},[637,59573,59220],{"class":683},[637,59575,3781],{"class":642},[637,59577,9626],{"class":683},[637,59579,3224],{"class":642},[637,59581,59583,59585,59588,59590,59592,59595],{"class":639,"line":59582},117,[637,59584,8241],{"class":642},[637,59586,59587],{"class":650},"shadow-normalBias",[637,59589,657],{"class":642},[637,59591,660],{"class":642},[637,59593,59594],{"class":823},"0.075",[637,59596,3224],{"class":642},[637,59598,59600,59602,59604,59606,59608,59610,59612,59614,59616,59618,59620,59622],{"class":639,"line":59599},118,[637,59601,8241],{"class":642},[637,59603,1491],{"class":650},[637,59605,657],{"class":642},[637,59607,660],{"class":642},[637,59609,1498],{"class":642},[637,59611,7666],{"class":823},[637,59613,1503],{"class":642},[637,59615,969],{"class":823},[637,59617,1503],{"class":642},[637,59619,7666],{"class":823},[637,59621,1513],{"class":642},[637,59623,3224],{"class":642},[637,59625,59627,59629,59631,59633,59635,59637],{"class":639,"line":59626},119,[637,59628,8241],{"class":642},[637,59630,1918],{"class":650},[637,59632,657],{"class":642},[637,59634,660],{"class":642},[637,59636,824],{"class":823},[637,59638,3224],{"class":642},[637,59640,59642],{"class":639,"line":59641},120,[637,59643,59644],{"class":650}," cast-shadow\n",[637,59646,59648],{"class":639,"line":59647},121,[637,59649,8295],{"class":642},[637,59651,59653],{"class":639,"line":59652},122,[637,59654,742],{"emptyLinePlaceholder":594},[637,59656,59658,59660,59662,59664,59666,59668,59670,59672,59674,59676],{"class":639,"line":59657},123,[637,59659,857],{"class":642},[637,59661,8311],{"class":646},[637,59663,813],{"class":642},[637,59665,2000],{"class":650},[637,59667,657],{"class":642},[637,59669,660],{"class":642},[637,59671,8776],{"class":642},[637,59673,1925],{"class":823},[637,59675,660],{"class":642},[637,59677,787],{"class":642},[637,59679,59681,59683,59685,59687,59689,59691,59693,59695,59697],{"class":639,"line":59680},124,[637,59682,857],{"class":642},[637,59684,10010],{"class":646},[637,59686,813],{"class":642},[637,59688,1918],{"class":650},[637,59690,657],{"class":642},[637,59692,660],{"class":642},[637,59694,1925],{"class":823},[637,59696,660],{"class":642},[637,59698,787],{"class":642},[637,59700,59702,59704,59706],{"class":639,"line":59701},125,[637,59703,899],{"class":642},[637,59705,761],{"class":646},[637,59707,669],{"class":642},[637,59709,59711,59713,59715],{"class":639,"line":59710},126,[637,59712,909],{"class":642},[637,59714,4283],{"class":646},[637,59716,669],{"class":642},[637,59718,59720,59722,59724],{"class":639,"line":59719},127,[637,59721,732],{"class":642},[637,59723,750],{"class":646},[637,59725,669],{"class":642},[637,59727,59729],{"class":639,"line":59728},128,[637,59730,742],{"emptyLinePlaceholder":594},[637,59732,59734,59736,59738,59740],{"class":639,"line":59733},129,[637,59735,643],{"class":642},[637,59737,1331],{"class":646},[637,59739,57230],{"class":650},[637,59741,669],{"class":642},[637,59743,59745,59747,59750],{"class":639,"line":59744},130,[637,59746,1150],{"class":642},[637,59748,59749],{"class":1204},"html-demo-wrapper",[637,59751,1208],{"class":642},[637,59753,59755,59757,59759,59762],{"class":639,"line":59754},131,[637,59756,1244],{"class":4293},[637,59758,1222],{"class":642},[637,59760,59761],{"class":823}," 100%",[637,59763,9822],{"class":642},[637,59765,59767,59769,59771,59773],{"class":639,"line":59766},132,[637,59768,1254],{"class":4293},[637,59770,1222],{"class":642},[637,59772,59761],{"class":823},[637,59774,9822],{"class":642},[637,59776,59778,59780,59782,59784],{"class":639,"line":59777},133,[637,59779,5557],{"class":4293},[637,59781,1222],{"class":642},[637,59783,4298],{"class":683},[637,59785,9822],{"class":642},[637,59787,59789,59792,59794,59797],{"class":639,"line":59788},134,[637,59790,59791],{"class":4293}," overflow",[637,59793,1222],{"class":642},[637,59795,59796],{"class":683}," hidden",[637,59798,9822],{"class":642},[637,59800,59802,59804,59806,59808,59811],{"class":639,"line":59801},135,[637,59803,57245],{"class":4293},[637,59805,1222],{"class":642},[637,59807,57250],{"class":642},[637,59809,59810],{"class":683},"82dbc5",[637,59812,9822],{"class":642},[637,59814,59816],{"class":639,"line":59815},136,[637,59817,1329],{"class":642},[637,59819,59821,59823,59825],{"class":639,"line":59820},137,[637,59822,732],{"class":642},[637,59824,1331],{"class":646},[637,59826,669],{"class":642},[504,59828,48631],{"id":48630},[614,59830,59831,59832,59835,59836,59839,59840,59842,59843,59846,59847,59851],{},"By default, when using ",[618,59833,59834],{},"occlude=\"blending\"",", occlusion works correctly only with ",[1705,59837,59838],{},"rectangular HTML elements"," (using a ",[618,59841,35603],{},").\nFor ",[1709,59844,59845],{},"non-rectangular content",", you can use the ",[1705,59848,59849],{},[618,59850,5333],{}," prop to provide a matching custom geometry.",[614,59853,59854,59855,3287,59858,59861,59862,59868,59869,1150],{},"In the ",[1705,59856,59857],{},"demo above ⬆️",[1709,59859,59860],{},"(middle yellow example)",", a ",[1144,59863,59866],{"href":59864,"rel":59865},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FCircleGeometry",[1148],[618,59867,32800],{}," is used as a ",[1705,59870,59871],{},"custom geometry",[59873,59874,59875],"prose-list",{},[2285,59876,59877,59886],{},[2288,59878,2867,59879,59881,59882,59885],{},[618,59880,5333],{}," prop only defines the ",[1705,59883,59884],{},"occlusion shape"," in 3D and does not modify your HTML content.",[2288,59887,59888,59889,59896,59897,59900,59901,59904,59905,59912],{},"You can provide any ",[1144,59890,59893],{"href":59891,"rel":59892},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fcore\u002FBufferGeometry",[1148],[618,59894,59895],{},"BufferGeometry",", for example to simulate ",[1705,59898,59899],{},"CSS-like styles"," such as ",[618,59902,59903],{},"border-radius"," using a rounded rectangle or squircle geometry (see ",[1144,59906,59909],{"href":59907,"rel":59908},"https:\u002F\u002Fdiscourse.threejs.org\u002Ft\u002Froundedrectangle-squircle\u002F28645",[1148],[618,59910,59911],{},"RoundedRectangle \u002F Squircle geometry"," for example).",[4215,59914,59915],{"id":3081},"Custom Material",[614,59917,59918,59919,59921,59922,3287,59924,59861,59927,59930],{},"You can also assign material properties to the HTML content using the ",[618,59920,5403],{}," prop.\nIn the ",[1705,59923,59857],{},[1709,59925,59926],{},"(right red example)",[1705,59928,59929],{},"custom material"," is used with shadow.",[2078,59932,59933],{},[614,59934,2867,59935,59937,59938,6092,59940,1150],{},[618,59936,5403],{}," prop is only available when ",[618,59939,59834],{},[1705,59941,17533],{},[2078,59943,59944],{},[614,59945,59946,59947,3156,59951,59955,59956,59959,59960,59962,59963,59965,59966,5822,59970,8437,59975],{},"Enable shadows using the ",[1705,59948,59949],{},[618,59950,19565],{},[1705,59952,59953],{},[618,59954,19583],{}," props.\nShadows are supported ",[1705,59957,59958],{},"only"," when using a ",[1705,59961,59929],{},". By default, shadows do ",[1705,59964,6550],{}," work with ",[1709,59967,59968],{},[618,59969,3087],{},[1709,59971,59972],{},[618,59973,59974],{},"ShaderMaterial",[7778,59976],{},[504,59978,59980,59981],{"id":59979},"using-transition","Using ",[618,59982,59983],{},"\u003CTransition>",[614,59985,59986,59987,59993,59994,59996,59997,60000,60001,3156,60004,60007],{},"The native Vue ",[1144,59988,59991],{"href":59989,"rel":59990},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Ftransition",[1148],[618,59992,59983],{}," component works seamlessly with ",[618,59995,56846],{},".\nThis means you can ",[1705,59998,59999],{},"animate"," how your projected HTML content ",[1709,60002,60003],{},"enters",[1709,60005,60006],{},"leaves"," the scene, exactly as you would in a regular Vue application.",[2078,60009,60010],{},[614,60011,31638,60012,60015,60016,1503,60019,1723,60021,60024],{},[1705,60013,60014],{},"standard interactions"," are supported just like on a regular HTML element — ",[1705,60017,60018],{},"hover effects",[1705,60020,15041],{},[1709,60022,60023],{},"any kind of DOM interaction"," are fully possible.",[608,60026,60027],{},[60028,60029],"objects-html-transition-demo",{},[5519,60031,5521,60032,60034],{},[5523,60033,57366],{},[626,60035,60038],{"className":628,"code":60036,"highlights":60037,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Html, Levioso, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { ref } from 'vue'\n\nconst gl = {\n clearColor: '#82DBC5',\n clearAlpha: 0,\n shadows: true,\n alpha: true,\n antialias: true,\n}\n\nconst rootRef = ref\u003CHTMLElement>()\n\nconst bgColor = ref('#F6B03B')\n\nconst geometries = [\n {\n component: 'TresBoxGeometry',\n args: [1, 1, 1],\n },\n {\n component: 'TresSphereGeometry',\n args: [0.7, 32, 32],\n },\n {\n component: 'TresTorusGeometry',\n args: [0.5, 0.2, 16, 100],\n },\n {\n component: 'TresConeGeometry',\n args: [0.7, 1.4, 32],\n },\n]\n\nconst getRandomBackgroundColor = (): string => {\n const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']\n const idx = Math.floor(Math.random() * colors.length)\n return colors[idx] ?? '#F6B03B'\n}\n\nconst updateBackgroundColor = () => {\n bgColor.value = getRandomBackgroundColor()\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv ref=\"rootRef\" class=\"html-demo-wrapper\">\n \u003CTresCanvas v-bind=\"gl\" class=\"!pointer-events-none\">\n \u003CTresPerspectiveCamera :position=\"[0, 1.5, 7.5]\" \u002F>\n \u003COrbitControls :dom-element=\"rootRef\" \u002F>\n\n \u003CLevioso\n v-for=\"(geometry, index) in geometries\"\n :key=\"`html-occlude-blending-demo-${index}`\"\n :speed=\"3\"\n :float-factor=\"3.5\"\n :rotation-factor=\"1\"\n :range=\"[-0.4, 0.4]\"\n >\n \u003CTresMesh :position=\"[(index - (geometries.length - 1) \u002F 2) * 2, 1, 0]\">\n \u003Ccomponent :is=\"geometry.component\" :args=\"geometry.args\" \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FLevioso>\n\n \u003CHtml\n center\n transform\n occlude=\"blending\"\n :position=\"[0, .75, -2]\"\n :scale=\"1.15\"\n :z-index-range=\"[28, 0]\"\n >\n \u003CTransition name=\"transition-basic\">\n \u003Ch1\n v-if=\"showTransition\"\n :style=\"{ backgroundColor: bgColor }\"\n class=\"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg\"\n @click=\"updateBackgroundColor\"\n >\n \u003Cstrong>TRANSITION + \u003C\u002Fstrong>\u003Cbr \u002F>\n \u003Cem>occlude=blending 💛\u003C\u002Fem>\n \u003C\u002Fh1>\n \u003C\u002FTransition>\n \u003C\u002FHtml>\n\n \u003CTresGridHelper :position-y=\"-1.25\" \u002F>\n \u003CTresAmbientLight :intensity=\"1\" \u002F>\n \u003C\u002FTresCanvas>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.html-demo-wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n background-color: #82dbc5;\n}\n\n.html-demo-transition-heading:hover {\n transform: scale(1.05);\n}\n\n.transition-basic-enter-from,\n.transition-basic-leave-to {\n opacity: 0;\n transform: translateY(-20px);\n}\n\n.transition-basic-enter-active,\n.transition-basic-leave-active {\n transition: all 0.5s ease;\n}\n\n.transition-basic-enter-to,\n.transition-basic-leave-from {\n opacity: 1;\n transform: translateY(0);\n}\n\u003C\u002Fstyle>\n",[578,59007,57989,57990,57991,57992,57993,57994,57995,57996,57997,57998,57999,59181,58000,58001,58002,58003,58004,58005,58006],[618,60039,60040,60060,60087,60105,60123,60127,60137,60151,60161,60171,60181,60192,60196,60200,60220,60224,60246,60250,60260,60264,60278,60300,60304,60308,60322,60344,60348,60352,60366,60392,60396,60400,60415,60438,60442,60446,60450,60468,60541,60577,60598,60602,60606,60621,60637,60641,60649,60653,60661,60690,60719,60751,60772,60776,60782,60804,60822,60836,60850,60864,60886,60890,60946,60974,60982,60990,60998,61002,61008,61012,61016,61028,61054,61070,61093,61098,61118,61126,61141,61156,61171,61186,61192,61216,61234,61244,61253,61262,61267,61290,61311,61320,61329,61337,61341,61351,61359,61369,61379,61389,61399,61411,61415,61419,61432,61450,61454,61458,61467,61476,61486,61502,61506,61510,61519,61528,61546,61550,61554,61563,61572,61582,61596,61600],{"__ignoreMap":576},[637,60041,60042,60044,60046,60048,60050,60052,60054,60056,60058],{"class":639,"line":577},[637,60043,643],{"class":642},[637,60045,647],{"class":646},[637,60047,651],{"class":650},[637,60049,654],{"class":650},[637,60051,657],{"class":642},[637,60053,660],{"class":642},[637,60055,664],{"class":663},[637,60057,660],{"class":642},[637,60059,669],{"class":642},[637,60061,60063,60065,60067,60069,60071,60073,60075,60077,60079,60081,60083,60085],{"class":60062,"line":578},[639,673],[637,60064,677],{"class":676},[637,60066,680],{"class":642},[637,60068,56890],{"class":683},[637,60070,687],{"class":642},[637,60072,9832],{"class":683},[637,60074,687],{"class":642},[637,60076,690],{"class":683},[637,60078,693],{"class":642},[637,60080,696],{"class":676},[637,60082,699],{"class":642},[637,60084,702],{"class":663},[637,60086,705],{"class":642},[637,60088,60089,60091,60093,60095,60097,60099,60101,60103],{"class":639,"line":708},[637,60090,677],{"class":676},[637,60092,680],{"class":642},[637,60094,715],{"class":683},[637,60096,693],{"class":642},[637,60098,696],{"class":676},[637,60100,699],{"class":642},[637,60102,724],{"class":663},[637,60104,705],{"class":642},[637,60106,60107,60109,60111,60113,60115,60117,60119,60121],{"class":639,"line":729},[637,60108,677],{"class":676},[637,60110,680],{"class":642},[637,60112,3999],{"class":683},[637,60114,693],{"class":642},[637,60116,696],{"class":676},[637,60118,699],{"class":642},[637,60120,633],{"class":663},[637,60122,705],{"class":642},[637,60124,60125],{"class":639,"line":739},[637,60126,742],{"emptyLinePlaceholder":594},[637,60128,60129,60131,60133,60135],{"class":639,"line":745},[637,60130,2487],{"class":650},[637,60132,58140],{"class":683},[637,60134,657],{"class":642},[637,60136,1208],{"class":642},[637,60138,60139,60141,60143,60145,60147,60149],{"class":639,"line":755},[637,60140,58149],{"class":646},[637,60142,1222],{"class":642},[637,60144,699],{"class":642},[637,60146,12358],{"class":663},[637,60148,2512],{"class":642},[637,60150,2560],{"class":642},[637,60152,60153,60155,60157,60159],{"class":639,"line":778},[637,60154,58164],{"class":646},[637,60156,1222],{"class":642},[637,60158,2577],{"class":823},[637,60160,2560],{"class":642},[637,60162,60163,60165,60167,60169],{"class":639,"line":790},[637,60164,58175],{"class":646},[637,60166,1222],{"class":642},[637,60168,4561],{"class":4560},[637,60170,2560],{"class":642},[637,60172,60173,60175,60177,60179],{"class":639,"line":800},[637,60174,58186],{"class":646},[637,60176,1222],{"class":642},[637,60178,4561],{"class":4560},[637,60180,2560],{"class":642},[637,60182,60183,60186,60188,60190],{"class":639,"line":805},[637,60184,60185],{"class":646}," antialias",[637,60187,1222],{"class":642},[637,60189,4561],{"class":4560},[637,60191,2560],{"class":642},[637,60193,60194],{"class":639,"line":831},[637,60195,1329],{"class":642},[637,60197,60198],{"class":639,"line":631},[637,60199,742],{"emptyLinePlaceholder":594},[637,60201,60202,60204,60207,60209,60211,60213,60216,60218],{"class":639,"line":854},[637,60203,2487],{"class":650},[637,60205,60206],{"class":683}," rootRef ",[637,60208,657],{"class":642},[637,60210,3999],{"class":2506},[637,60212,643],{"class":642},[637,60214,60215],{"class":1204},"HTMLElement",[637,60217,3744],{"class":642},[637,60219,6744],{"class":683},[637,60221,60222],{"class":639,"line":865},[637,60223,742],{"emptyLinePlaceholder":594},[637,60225,60226,60228,60231,60233,60235,60237,60239,60242,60244],{"class":639,"line":876},[637,60227,2487],{"class":650},[637,60229,60230],{"class":683}," bgColor ",[637,60232,657],{"class":642},[637,60234,3999],{"class":2506},[637,60236,2509],{"class":683},[637,60238,2512],{"class":642},[637,60240,60241],{"class":663},"#F6B03B",[637,60243,2512],{"class":642},[637,60245,2520],{"class":683},[637,60247,60248],{"class":639,"line":886},[637,60249,742],{"emptyLinePlaceholder":594},[637,60251,60252,60254,60256,60258],{"class":639,"line":632},[637,60253,2487],{"class":650},[637,60255,58228],{"class":683},[637,60257,657],{"class":642},[637,60259,21719],{"class":683},[637,60261,60262],{"class":639,"line":906},[637,60263,2543],{"class":642},[637,60265,60266,60268,60270,60272,60274,60276],{"class":639,"line":916},[637,60267,58241],{"class":646},[637,60269,1222],{"class":642},[637,60271,699],{"class":642},[637,60273,871],{"class":663},[637,60275,2512],{"class":642},[637,60277,2560],{"class":642},[637,60279,60280,60282,60284,60286,60288,60290,60292,60294,60296,60298],{"class":639,"line":2695},[637,60281,58256],{"class":646},[637,60283,1222],{"class":642},[637,60285,2570],{"class":683},[637,60287,1925],{"class":823},[637,60289,687],{"class":642},[637,60291,2631],{"class":823},[637,60293,687],{"class":642},[637,60295,2631],{"class":823},[637,60297,1513],{"class":683},[637,60299,2560],{"class":642},[637,60301,60302],{"class":639,"line":2704},[637,60303,2667],{"class":642},[637,60305,60306],{"class":639,"line":2738},[637,60307,2543],{"class":642},[637,60309,60310,60312,60314,60316,60318,60320],{"class":639,"line":2747},[637,60311,58241],{"class":646},[637,60313,1222],{"class":642},[637,60315,699],{"class":642},[637,60317,4107],{"class":663},[637,60319,2512],{"class":642},[637,60321,2560],{"class":642},[637,60323,60324,60326,60328,60330,60332,60334,60336,60338,60340,60342],{"class":639,"line":2756},[637,60325,58256],{"class":646},[637,60327,1222],{"class":642},[637,60329,2570],{"class":683},[637,60331,4120],{"class":823},[637,60333,687],{"class":642},[637,60335,32842],{"class":823},[637,60337,687],{"class":642},[637,60339,32842],{"class":823},[637,60341,1513],{"class":683},[637,60343,2560],{"class":642},[637,60345,60346],{"class":639,"line":2765},[637,60347,2667],{"class":642},[637,60349,60350],{"class":639,"line":2787},[637,60351,2543],{"class":642},[637,60353,60354,60356,60358,60360,60362,60364],{"class":639,"line":2838},[637,60355,58241],{"class":646},[637,60357,1222],{"class":642},[637,60359,699],{"class":642},[637,60361,12445],{"class":663},[637,60363,2512],{"class":642},[637,60365,2560],{"class":642},[637,60367,60368,60370,60372,60374,60376,60378,60380,60382,60384,60386,60388,60390],{"class":639,"line":2847},[637,60369,58256],{"class":646},[637,60371,1222],{"class":642},[637,60373,2570],{"class":683},[637,60375,1545],{"class":823},[637,60377,687],{"class":642},[637,60379,36594],{"class":823},[637,60381,687],{"class":642},[637,60383,36599],{"class":823},[637,60385,687],{"class":642},[637,60387,7986],{"class":823},[637,60389,1513],{"class":683},[637,60391,2560],{"class":642},[637,60393,60394],{"class":639,"line":2856},[637,60395,2667],{"class":642},[637,60397,60398],{"class":639,"line":4058},[637,60399,2543],{"class":642},[637,60401,60402,60404,60406,60408,60411,60413],{"class":639,"line":4102},[637,60403,58241],{"class":646},[637,60405,1222],{"class":642},[637,60407,699],{"class":642},[637,60409,60410],{"class":663},"TresConeGeometry",[637,60412,2512],{"class":642},[637,60414,2560],{"class":642},[637,60416,60417,60419,60421,60423,60425,60427,60430,60432,60434,60436],{"class":639,"line":4129},[637,60418,58256],{"class":646},[637,60420,1222],{"class":642},[637,60422,2570],{"class":683},[637,60424,4120],{"class":823},[637,60426,687],{"class":642},[637,60428,60429],{"class":823}," 1.4",[637,60431,687],{"class":642},[637,60433,32842],{"class":823},[637,60435,1513],{"class":683},[637,60437,2560],{"class":642},[637,60439,60440],{"class":639,"line":4148},[637,60441,2667],{"class":642},[637,60443,60444],{"class":639,"line":4189},[637,60445,21755],{"class":683},[637,60447,60448],{"class":639,"line":4198},[637,60449,742],{"emptyLinePlaceholder":594},[637,60451,60452,60454,60457,60459,60462,60464,60466],{"class":639,"line":4207},[637,60453,2487],{"class":650},[637,60455,60456],{"class":683}," getRandomBackgroundColor ",[637,60458,657],{"class":642},[637,60460,60461],{"class":642}," ():",[637,60463,5549],{"class":1204},[637,60465,3770],{"class":650},[637,60467,1208],{"class":642},[637,60469,60470,60473,60476,60478,60480,60482,60484,60486,60488,60490,60492,60494,60496,60498,60501,60503,60505,60507,60510,60512,60514,60516,60519,60521,60523,60525,60528,60530,60532,60534,60537,60539],{"class":639,"line":22477},[637,60471,60472],{"class":650}," const",[637,60474,60475],{"class":683}," colors",[637,60477,2503],{"class":642},[637,60479,2570],{"class":646},[637,60481,2512],{"class":642},[637,60483,60241],{"class":663},[637,60485,2512],{"class":642},[637,60487,687],{"class":642},[637,60489,699],{"class":642},[637,60491,12358],{"class":663},[637,60493,2512],{"class":642},[637,60495,687],{"class":642},[637,60497,699],{"class":642},[637,60499,60500],{"class":663},"#FF5733",[637,60502,2512],{"class":642},[637,60504,687],{"class":642},[637,60506,699],{"class":642},[637,60508,60509],{"class":663},"#33FF57",[637,60511,2512],{"class":642},[637,60513,687],{"class":642},[637,60515,699],{"class":642},[637,60517,60518],{"class":663},"#3357FF",[637,60520,2512],{"class":642},[637,60522,687],{"class":642},[637,60524,699],{"class":642},[637,60526,60527],{"class":663},"#F333FF",[637,60529,2512],{"class":642},[637,60531,687],{"class":642},[637,60533,699],{"class":642},[637,60535,60536],{"class":663},"#33FFF5",[637,60538,2512],{"class":642},[637,60540,21755],{"class":646},[637,60542,60543,60545,60548,60550,60552,60554,60556,60558,60560,60562,60565,60567,60569,60571,60573,60575],{"class":639,"line":22492},[637,60544,60472],{"class":650},[637,60546,60547],{"class":683}," idx",[637,60549,2503],{"class":642},[637,60551,8758],{"class":683},[637,60553,1150],{"class":642},[637,60555,8763],{"class":2506},[637,60557,2509],{"class":646},[637,60559,29913],{"class":683},[637,60561,1150],{"class":642},[637,60563,60564],{"class":2506},"random",[637,60566,7193],{"class":646},[637,60568,24245],{"class":642},[637,60570,60475],{"class":683},[637,60572,1150],{"class":642},[637,60574,22309],{"class":683},[637,60576,2520],{"class":646},[637,60578,60579,60581,60583,60585,60588,60590,60592,60594,60596],{"class":639,"line":22507},[637,60580,24212],{"class":676},[637,60582,60475],{"class":683},[637,60584,1498],{"class":646},[637,60586,60587],{"class":683},"idx",[637,60589,5576],{"class":646},[637,60591,3787],{"class":642},[637,60593,699],{"class":642},[637,60595,60241],{"class":663},[637,60597,705],{"class":642},[637,60599,60600],{"class":639,"line":22512},[637,60601,1329],{"class":642},[637,60603,60604],{"class":639,"line":22519},[637,60605,742],{"emptyLinePlaceholder":594},[637,60607,60608,60610,60613,60615,60617,60619],{"class":639,"line":22524},[637,60609,2487],{"class":650},[637,60611,60612],{"class":683}," updateBackgroundColor ",[637,60614,657],{"class":642},[637,60616,7289],{"class":642},[637,60618,3770],{"class":650},[637,60620,1208],{"class":642},[637,60622,60623,60626,60628,60630,60632,60635],{"class":639,"line":22530},[637,60624,60625],{"class":683}," bgColor",[637,60627,1150],{"class":642},[637,60629,3778],{"class":683},[637,60631,2503],{"class":642},[637,60633,60634],{"class":2506}," getRandomBackgroundColor",[637,60636,6744],{"class":646},[637,60638,60639],{"class":639,"line":22551},[637,60640,1329],{"class":642},[637,60642,60643,60645,60647],{"class":639,"line":22557},[637,60644,732],{"class":642},[637,60646,647],{"class":646},[637,60648,669],{"class":642},[637,60650,60651],{"class":639,"line":22564},[637,60652,742],{"emptyLinePlaceholder":594},[637,60654,60655,60657,60659],{"class":639,"line":22569},[637,60656,643],{"class":642},[637,60658,750],{"class":646},[637,60660,669],{"class":642},[637,60662,60663,60665,60667,60669,60671,60673,60676,60678,60680,60682,60684,60686,60688],{"class":639,"line":22590},[637,60664,758],{"class":642},[637,60666,4283],{"class":646},[637,60668,3999],{"class":650},[637,60670,657],{"class":642},[637,60672,660],{"class":642},[637,60674,60675],{"class":663},"rootRef",[637,60677,660],{"class":642},[637,60679,26345],{"class":650},[637,60681,657],{"class":642},[637,60683,660],{"class":642},[637,60685,59749],{"class":663},[637,60687,660],{"class":642},[637,60689,669],{"class":642},[637,60691,60692,60694,60696,60698,60700,60702,60704,60706,60708,60710,60712,60715,60717],{"class":639,"line":22603},[637,60693,781],{"class":642},[637,60695,761],{"class":646},[637,60697,10598],{"class":650},[637,60699,657],{"class":642},[637,60701,660],{"class":642},[637,60703,58571],{"class":683},[637,60705,660],{"class":642},[637,60707,26345],{"class":650},[637,60709,657],{"class":642},[637,60711,660],{"class":642},[637,60713,60714],{"class":663},"!pointer-events-none",[637,60716,660],{"class":642},[637,60718,669],{"class":642},[637,60720,60721,60723,60725,60727,60729,60731,60733,60735,60737,60739,60741,60743,60745,60747,60749],{"class":639,"line":22629},[637,60722,857],{"class":642},[637,60724,784],{"class":646},[637,60726,813],{"class":642},[637,60728,1491],{"class":650},[637,60730,657],{"class":642},[637,60732,660],{"class":642},[637,60734,1498],{"class":642},[637,60736,969],{"class":823},[637,60738,1503],{"class":642},[637,60740,17251],{"class":823},[637,60742,1503],{"class":642},[637,60744,12004],{"class":823},[637,60746,1513],{"class":642},[637,60748,660],{"class":642},[637,60750,787],{"class":642},[637,60752,60753,60755,60757,60759,60762,60764,60766,60768,60770],{"class":639,"line":22634},[637,60754,857],{"class":642},[637,60756,795],{"class":646},[637,60758,813],{"class":642},[637,60760,60761],{"class":650},"dom-element",[637,60763,657],{"class":642},[637,60765,660],{"class":642},[637,60767,60675],{"class":683},[637,60769,660],{"class":642},[637,60771,787],{"class":642},[637,60773,60774],{"class":639,"line":22641},[637,60775,742],{"emptyLinePlaceholder":594},[637,60777,60778,60780],{"class":639,"line":22650},[637,60779,857],{"class":642},[637,60781,58626],{"class":646},[637,60783,60784,60786,60788,60790,60792,60794,60796,60798,60800,60802],{"class":639,"line":22655},[637,60785,8214],{"class":676},[637,60787,657],{"class":642},[637,60789,660],{"class":642},[637,60791,2509],{"class":642},[637,60793,5333],{"class":683},[637,60795,1503],{"class":642},[637,60797,8228],{"class":683},[637,60799,8231],{"class":642},[637,60801,58647],{"class":683},[637,60803,3224],{"class":642},[637,60805,60806,60808,60810,60812,60814,60816,60818,60820],{"class":639,"line":22664},[637,60807,8241],{"class":642},[637,60809,8244],{"class":650},[637,60811,657],{"class":642},[637,60813,23415],{"class":642},[637,60815,58662],{"class":663},[637,60817,23421],{"class":642},[637,60819,8228],{"class":683},[637,60821,23426],{"class":642},[637,60823,60824,60826,60828,60830,60832,60834],{"class":639,"line":22683},[637,60825,8241],{"class":642},[637,60827,9976],{"class":650},[637,60829,657],{"class":642},[637,60831,660],{"class":642},[637,60833,2729],{"class":823},[637,60835,3224],{"class":642},[637,60837,60838,60840,60842,60844,60846,60848],{"class":639,"line":22693},[637,60839,8241],{"class":642},[637,60841,58689],{"class":650},[637,60843,657],{"class":642},[637,60845,660],{"class":642},[637,60847,58696],{"class":823},[637,60849,3224],{"class":642},[637,60851,60852,60854,60856,60858,60860,60862],{"class":639,"line":22730},[637,60853,8241],{"class":642},[637,60855,43029],{"class":650},[637,60857,657],{"class":642},[637,60859,660],{"class":642},[637,60861,1925],{"class":823},[637,60863,3224],{"class":642},[637,60865,60866,60868,60870,60872,60874,60876,60878,60880,60882,60884],{"class":639,"line":22739},[637,60867,8241],{"class":642},[637,60869,10182],{"class":650},[637,60871,657],{"class":642},[637,60873,660],{"class":642},[637,60875,3947],{"class":642},[637,60877,41457],{"class":823},[637,60879,1503],{"class":642},[637,60881,41457],{"class":823},[637,60883,1513],{"class":642},[637,60885,3224],{"class":642},[637,60887,60888],{"class":639,"line":22773},[637,60889,57143],{"class":642},[637,60891,60892,60894,60896,60898,60900,60902,60904,60907,60909,60912,60914,60916,60918,60920,60922,60925,60927,60930,60932,60934,60936,60938,60940,60942,60944],{"class":639,"line":22782},[637,60893,868],{"class":642},[637,60895,860],{"class":646},[637,60897,813],{"class":642},[637,60899,1491],{"class":650},[637,60901,657],{"class":642},[637,60903,660],{"class":642},[637,60905,60906],{"class":642},"[(",[637,60908,8228],{"class":683},[637,60910,60911],{"class":642}," - (",[637,60913,58647],{"class":683},[637,60915,1150],{"class":642},[637,60917,22309],{"class":683},[637,60919,58764],{"class":642},[637,60921,1925],{"class":823},[637,60923,60924],{"class":642},") \u002F ",[637,60926,824],{"class":823},[637,60928,60929],{"class":642},") * ",[637,60931,824],{"class":823},[637,60933,1503],{"class":642},[637,60935,1925],{"class":823},[637,60937,1503],{"class":642},[637,60939,969],{"class":823},[637,60941,1513],{"class":642},[637,60943,660],{"class":642},[637,60945,669],{"class":642},[637,60947,60948,60950,60952,60954,60956,60958,60960,60962,60964,60966,60968,60970,60972],{"class":639,"line":22791},[637,60949,29340],{"class":642},[637,60951,58802],{"class":646},[637,60953,58805],{"class":650},[637,60955,657],{"class":642},[637,60957,660],{"class":642},[637,60959,58812],{"class":663},[637,60961,660],{"class":642},[637,60963,58817],{"class":650},[637,60965,657],{"class":642},[637,60967,660],{"class":642},[637,60969,58824],{"class":663},[637,60971,660],{"class":642},[637,60973,787],{"class":642},[637,60975,60976,60978,60980],{"class":639,"line":22812},[637,60977,29340],{"class":642},[637,60979,881],{"class":646},[637,60981,787],{"class":642},[637,60983,60984,60986,60988],{"class":639,"line":22870},[637,60985,29397],{"class":642},[637,60987,860],{"class":646},[637,60989,669],{"class":642},[637,60991,60992,60994,60996],{"class":639,"line":22927},[637,60993,889],{"class":642},[637,60995,9971],{"class":646},[637,60997,669],{"class":642},[637,60999,61000],{"class":639,"line":22947},[637,61001,742],{"emptyLinePlaceholder":594},[637,61003,61004,61006],{"class":639,"line":22976},[637,61005,857],{"class":642},[637,61007,57056],{"class":646},[637,61009,61010],{"class":639,"line":22985},[637,61011,57062],{"class":650},[637,61013,61014],{"class":639,"line":22994},[637,61015,57068],{"class":650},[637,61017,61018,61020,61022,61024,61026],{"class":639,"line":57987},[637,61019,58879],{"class":650},[637,61021,657],{"class":642},[637,61023,660],{"class":642},[637,61025,52752],{"class":663},[637,61027,3224],{"class":642},[637,61029,61030,61032,61034,61036,61038,61040,61042,61044,61046,61048,61050,61052],{"class":639,"line":57988},[637,61031,8241],{"class":642},[637,61033,1491],{"class":650},[637,61035,657],{"class":642},[637,61037,660],{"class":642},[637,61039,1498],{"class":642},[637,61041,969],{"class":823},[637,61043,1503],{"class":642},[637,61045,58907],{"class":823},[637,61047,10090],{"class":642},[637,61049,824],{"class":823},[637,61051,1513],{"class":642},[637,61053,3224],{"class":642},[637,61055,61057,61059,61061,61063,61065,61068],{"class":61056,"line":59007},[639,673],[637,61058,8241],{"class":642},[637,61060,816],{"class":650},[637,61062,657],{"class":642},[637,61064,660],{"class":642},[637,61066,61067],{"class":823},"1.15",[637,61069,3224],{"class":642},[637,61071,61073,61075,61077,61079,61081,61083,61085,61087,61089,61091],{"class":61072,"line":57989},[639,673],[637,61074,8241],{"class":642},[637,61076,58923],{"class":650},[637,61078,657],{"class":642},[637,61080,660],{"class":642},[637,61082,1498],{"class":642},[637,61084,58932],{"class":823},[637,61086,1503],{"class":642},[637,61088,969],{"class":823},[637,61090,1513],{"class":642},[637,61092,3224],{"class":642},[637,61094,61096],{"class":61095,"line":57990},[639,673],[637,61097,57143],{"class":642},[637,61099,61101,61103,61105,61107,61109,61111,61114,61116],{"class":61100,"line":57991},[639,673],[637,61102,868],{"class":642},[637,61104,26408],{"class":646},[637,61106,3927],{"class":650},[637,61108,657],{"class":642},[637,61110,660],{"class":642},[637,61112,61113],{"class":663},"transition-basic",[637,61115,660],{"class":642},[637,61117,669],{"class":642},[637,61119,61121,61123],{"class":61120,"line":57992},[639,673],[637,61122,29340],{"class":642},[637,61124,61125],{"class":646},"h1\n",[637,61127,61129,61132,61134,61136,61139],{"class":61128,"line":57993},[639,673],[637,61130,61131],{"class":650}," v-if",[637,61133,657],{"class":642},[637,61135,660],{"class":642},[637,61137,61138],{"class":663},"showTransition",[637,61140,3224],{"class":642},[637,61142,61144,61147,61149,61151,61154],{"class":61143,"line":57994},[639,673],[637,61145,61146],{"class":650}," :style",[637,61148,657],{"class":642},[637,61150,660],{"class":642},[637,61152,61153],{"class":663},"{ backgroundColor: bgColor }",[637,61155,3224],{"class":642},[637,61157,61159,61162,61164,61166,61169],{"class":61158,"line":57995},[639,673],[637,61160,61161],{"class":650}," class",[637,61163,657],{"class":642},[637,61165,660],{"class":642},[637,61167,61168],{"class":663},"html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg",[637,61170,3224],{"class":642},[637,61172,61174,61177,61179,61181,61184],{"class":61173,"line":57996},[639,673],[637,61175,61176],{"class":650}," @click",[637,61178,657],{"class":642},[637,61180,660],{"class":642},[637,61182,61183],{"class":663},"updateBackgroundColor",[637,61185,3224],{"class":642},[637,61187,61189],{"class":61188,"line":57997},[639,673],[637,61190,61191],{"class":642}," >\n",[637,61193,61195,61198,61200,61202,61205,61207,61209,61212,61214],{"class":61194,"line":57998},[639,673],[637,61196,61197],{"class":642}," \u003C",[637,61199,1705],{"class":646},[637,61201,3744],{"class":642},[637,61203,61204],{"class":683},"TRANSITION + ",[637,61206,732],{"class":642},[637,61208,1705],{"class":646},[637,61210,61211],{"class":642},">\u003C",[637,61213,7778],{"class":646},[637,61215,787],{"class":642},[637,61217,61219,61221,61223,61225,61228,61230,61232],{"class":61218,"line":57999},[639,673],[637,61220,61197],{"class":642},[637,61222,1709],{"class":646},[637,61224,3744],{"class":642},[637,61226,61227],{"class":683},"occlude=blending 💛",[637,61229,732],{"class":642},[637,61231,1709],{"class":646},[637,61233,669],{"class":642},[637,61235,61237,61240,61242],{"class":61236,"line":59181},[639,673],[637,61238,61239],{"class":642}," \u003C\u002F",[637,61241,57150],{"class":646},[637,61243,669],{"class":642},[637,61245,61247,61249,61251],{"class":61246,"line":58000},[639,673],[637,61248,29397],{"class":642},[637,61250,26408],{"class":646},[637,61252,669],{"class":642},[637,61254,61256,61258,61260],{"class":61255,"line":58001},[639,673],[637,61257,889],{"class":642},[637,61259,57179],{"class":646},[637,61261,669],{"class":642},[637,61263,61265],{"class":61264,"line":58002},[639,673],[637,61266,742],{"emptyLinePlaceholder":594},[637,61268,61270,61272,61274,61276,61278,61280,61282,61284,61286,61288],{"class":61269,"line":58003},[639,673],[637,61271,857],{"class":642},[637,61273,8311],{"class":646},[637,61275,813],{"class":642},[637,61277,2000],{"class":650},[637,61279,657],{"class":642},[637,61281,660],{"class":642},[637,61283,8776],{"class":642},[637,61285,58428],{"class":823},[637,61287,660],{"class":642},[637,61289,787],{"class":642},[637,61291,61293,61295,61297,61299,61301,61303,61305,61307,61309],{"class":61292,"line":58004},[639,673],[637,61294,857],{"class":642},[637,61296,10010],{"class":646},[637,61298,813],{"class":642},[637,61300,1918],{"class":650},[637,61302,657],{"class":642},[637,61304,660],{"class":642},[637,61306,1925],{"class":823},[637,61308,660],{"class":642},[637,61310,787],{"class":642},[637,61312,61314,61316,61318],{"class":61313,"line":58005},[639,673],[637,61315,899],{"class":642},[637,61317,761],{"class":646},[637,61319,669],{"class":642},[637,61321,61323,61325,61327],{"class":61322,"line":58006},[639,673],[637,61324,909],{"class":642},[637,61326,4283],{"class":646},[637,61328,669],{"class":642},[637,61330,61331,61333,61335],{"class":639,"line":58007},[637,61332,732],{"class":642},[637,61334,750],{"class":646},[637,61336,669],{"class":642},[637,61338,61339],{"class":639,"line":58008},[637,61340,742],{"emptyLinePlaceholder":594},[637,61342,61343,61345,61347,61349],{"class":639,"line":58009},[637,61344,643],{"class":642},[637,61346,1331],{"class":646},[637,61348,57230],{"class":650},[637,61350,669],{"class":642},[637,61352,61353,61355,61357],{"class":639,"line":58010},[637,61354,1150],{"class":642},[637,61356,59749],{"class":1204},[637,61358,1208],{"class":642},[637,61360,61361,61363,61365,61367],{"class":639,"line":59321},[637,61362,1244],{"class":4293},[637,61364,1222],{"class":642},[637,61366,59761],{"class":823},[637,61368,9822],{"class":642},[637,61370,61371,61373,61375,61377],{"class":639,"line":58011},[637,61372,1254],{"class":4293},[637,61374,1222],{"class":642},[637,61376,59761],{"class":823},[637,61378,9822],{"class":642},[637,61380,61381,61383,61385,61387],{"class":639,"line":58012},[637,61382,5557],{"class":4293},[637,61384,1222],{"class":642},[637,61386,4298],{"class":683},[637,61388,9822],{"class":642},[637,61390,61391,61393,61395,61397],{"class":639,"line":58013},[637,61392,59791],{"class":4293},[637,61394,1222],{"class":642},[637,61396,59796],{"class":683},[637,61398,9822],{"class":642},[637,61400,61401,61403,61405,61407,61409],{"class":639,"line":58014},[637,61402,57245],{"class":4293},[637,61404,1222],{"class":642},[637,61406,57250],{"class":642},[637,61408,59810],{"class":683},[637,61410,9822],{"class":642},[637,61412,61413],{"class":639,"line":58015},[637,61414,1329],{"class":642},[637,61416,61417],{"class":639,"line":58016},[637,61418,742],{"emptyLinePlaceholder":594},[637,61420,61421,61423,61426,61428,61430],{"class":639,"line":58017},[637,61422,1150],{"class":642},[637,61424,61425],{"class":1204},"html-demo-transition-heading",[637,61427,1222],{"class":642},[637,61429,9135],{"class":650},[637,61431,1208],{"class":642},[637,61433,61434,61437,61439,61442,61444,61447],{"class":639,"line":58018},[637,61435,61436],{"class":4293}," transform",[637,61438,1222],{"class":642},[637,61440,61441],{"class":2506}," scale",[637,61443,2509],{"class":642},[637,61445,61446],{"class":823},"1.05",[637,61448,61449],{"class":642},");\n",[637,61451,61452],{"class":639,"line":58019},[637,61453,1329],{"class":642},[637,61455,61456],{"class":639,"line":58020},[637,61457,742],{"emptyLinePlaceholder":594},[637,61459,61460,61462,61465],{"class":639,"line":58021},[637,61461,1150],{"class":642},[637,61463,61464],{"class":1204},"transition-basic-enter-from",[637,61466,2560],{"class":642},[637,61468,61469,61471,61474],{"class":639,"line":59470},[637,61470,1150],{"class":642},[637,61472,61473],{"class":1204},"transition-basic-leave-to",[637,61475,1208],{"class":642},[637,61477,61478,61480,61482,61484],{"class":639,"line":59494},[637,61479,5697],{"class":4293},[637,61481,1222],{"class":642},[637,61483,2577],{"class":823},[637,61485,9822],{"class":642},[637,61487,61488,61490,61492,61495,61497,61500],{"class":639,"line":59515},[637,61489,61436],{"class":4293},[637,61491,1222],{"class":642},[637,61493,61494],{"class":2506}," translateY",[637,61496,2509],{"class":642},[637,61498,61499],{"class":823},"-20px",[637,61501,61449],{"class":642},[637,61503,61504],{"class":639,"line":59524},[637,61505,1329],{"class":642},[637,61507,61508],{"class":639,"line":59533},[637,61509,742],{"emptyLinePlaceholder":594},[637,61511,61512,61514,61517],{"class":639,"line":59538},[637,61513,1150],{"class":642},[637,61515,61516],{"class":1204},"transition-basic-enter-active",[637,61518,2560],{"class":642},[637,61520,61521,61523,61526],{"class":639,"line":59545},[637,61522,1150],{"class":642},[637,61524,61525],{"class":1204},"transition-basic-leave-active",[637,61527,1208],{"class":642},[637,61529,61530,61533,61535,61538,61541,61544],{"class":639,"line":59563},[637,61531,61532],{"class":4293}," transition",[637,61534,1222],{"class":642},[637,61536,61537],{"class":683}," all ",[637,61539,61540],{"class":823},"0.5s",[637,61542,61543],{"class":683}," ease",[637,61545,9822],{"class":642},[637,61547,61548],{"class":639,"line":59582},[637,61549,1329],{"class":642},[637,61551,61552],{"class":639,"line":59599},[637,61553,742],{"emptyLinePlaceholder":594},[637,61555,61556,61558,61561],{"class":639,"line":59626},[637,61557,1150],{"class":642},[637,61559,61560],{"class":1204},"transition-basic-enter-to",[637,61562,2560],{"class":642},[637,61564,61565,61567,61570],{"class":639,"line":59641},[637,61566,1150],{"class":642},[637,61568,61569],{"class":1204},"transition-basic-leave-from",[637,61571,1208],{"class":642},[637,61573,61574,61576,61578,61580],{"class":639,"line":59647},[637,61575,5697],{"class":4293},[637,61577,1222],{"class":642},[637,61579,2631],{"class":823},[637,61581,9822],{"class":642},[637,61583,61584,61586,61588,61590,61592,61594],{"class":639,"line":59652},[637,61585,61436],{"class":4293},[637,61587,1222],{"class":642},[637,61589,61494],{"class":2506},[637,61591,2509],{"class":642},[637,61593,969],{"class":823},[637,61595,61449],{"class":642},[637,61597,61598],{"class":639,"line":59657},[637,61599,1329],{"class":642},[637,61601,61602,61604,61606],{"class":639,"line":59680},[637,61603,732],{"class":642},[637,61605,1331],{"class":646},[637,61607,669],{"class":642},[4215,61609,59980,61611],{"id":61610},"using-iframes",[618,61612,61613],{},"iframes",[614,61615,61616,61617,61619],{},"You can achieve pretty cool results with the ",[618,61618,57179],{}," component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage with a 3D model.",[2367,61621,61622],{},[61623,61624],"objects-html-iframe-demo",{},[5519,61626,5521,61627,61629],{},[5523,61628,57366],{},[626,61630,61632],{"className":48293,"code":61631,"language":48295,"meta":576,"style":576},"\u003Chtml\n transform\n center\n :cast-shadow=\"true\"\n :receive-shadow=\"true\"\n occlude=\"blending\"\n :z-index-range=\"[28, 0]\"\n :position-y=\"2.5\"\n :portal=\"portalRef\"\n :style=\"{ userSelect: 'none' }\"\n>\n \u003Ciframe class=\"w-[700px] h-[500px]\" src=\"https:\u002F\u002Ftresjs.org\" frameborder=\"0\" :width=\"700\" :height=\"500\">\u003C\u002Fiframe>\n\u003C\u002Fhtml>\n",[618,61633,61634,61640,61645,61650,61663,61676,61689,61702,61715,61729,61743,61747,61817],{"__ignoreMap":576},[637,61635,61636,61638],{"class":639,"line":577},[637,61637,643],{"class":642},[637,61639,57815],{"class":646},[637,61641,61642],{"class":639,"line":578},[637,61643,61644],{"class":650}," transform\n",[637,61646,61647],{"class":639,"line":708},[637,61648,61649],{"class":650}," center\n",[637,61651,61652,61655,61657,61659,61661],{"class":639,"line":729},[637,61653,61654],{"class":650}," :cast-shadow",[637,61656,657],{"class":642},[637,61658,660],{"class":642},[637,61660,965],{"class":663},[637,61662,3224],{"class":642},[637,61664,61665,61668,61670,61672,61674],{"class":639,"line":739},[637,61666,61667],{"class":650}," :receive-shadow",[637,61669,657],{"class":642},[637,61671,660],{"class":642},[637,61673,965],{"class":663},[637,61675,3224],{"class":642},[637,61677,61678,61681,61683,61685,61687],{"class":639,"line":745},[637,61679,61680],{"class":650}," occlude",[637,61682,657],{"class":642},[637,61684,660],{"class":642},[637,61686,52752],{"class":663},[637,61688,3224],{"class":642},[637,61690,61691,61694,61696,61698,61700],{"class":639,"line":755},[637,61692,61693],{"class":650}," :z-index-range",[637,61695,657],{"class":642},[637,61697,660],{"class":642},[637,61699,57453],{"class":663},[637,61701,3224],{"class":642},[637,61703,61704,61707,61709,61711,61713],{"class":639,"line":778},[637,61705,61706],{"class":650}," :position-y",[637,61708,657],{"class":642},[637,61710,660],{"class":642},[637,61712,59411],{"class":663},[637,61714,3224],{"class":642},[637,61716,61717,61720,61722,61724,61727],{"class":639,"line":790},[637,61718,61719],{"class":650}," :portal",[637,61721,657],{"class":642},[637,61723,660],{"class":642},[637,61725,61726],{"class":663},"portalRef",[637,61728,3224],{"class":642},[637,61730,61731,61734,61736,61738,61741],{"class":639,"line":800},[637,61732,61733],{"class":650}," :style",[637,61735,657],{"class":642},[637,61737,660],{"class":642},[637,61739,61740],{"class":663},"{ userSelect: 'none' }",[637,61742,3224],{"class":642},[637,61744,61745],{"class":639,"line":805},[637,61746,669],{"class":642},[637,61748,61749,61751,61754,61756,61758,61760,61763,61765,61768,61770,61772,61775,61777,61780,61782,61784,61786,61788,61791,61793,61795,61798,61800,61803,61805,61807,61809,61811,61813,61815],{"class":639,"line":831},[637,61750,758],{"class":642},[637,61752,61753],{"class":646},"iframe",[637,61755,26345],{"class":650},[637,61757,657],{"class":642},[637,61759,660],{"class":642},[637,61761,61762],{"class":663},"w-[700px] h-[500px]",[637,61764,660],{"class":642},[637,61766,61767],{"class":650}," src",[637,61769,657],{"class":642},[637,61771,660],{"class":642},[637,61773,61774],{"class":663},"https:\u002F\u002Ftresjs.org",[637,61776,660],{"class":642},[637,61778,61779],{"class":650}," frameborder",[637,61781,657],{"class":642},[637,61783,660],{"class":642},[637,61785,969],{"class":663},[637,61787,660],{"class":642},[637,61789,61790],{"class":650}," :width",[637,61792,657],{"class":642},[637,61794,660],{"class":642},[637,61796,61797],{"class":663},"700",[637,61799,660],{"class":642},[637,61801,61802],{"class":650}," :height",[637,61804,657],{"class":642},[637,61806,660],{"class":642},[637,61808,45528],{"class":663},[637,61810,660],{"class":642},[637,61812,26381],{"class":642},[637,61814,61753],{"class":646},[637,61816,669],{"class":642},[637,61818,61819,61821,61823],{"class":639,"line":631},[637,61820,732],{"class":642},[637,61822,48295],{"class":646},[637,61824,669],{"class":642},[61826,61827,61828],"info",{},[614,61829,61830,61831,61834,61835,61838,61839],{},"The demos use ",[618,61832,61833],{},":z-index-range=\"[28, 0]\""," simply to ensure the HTML elements stay below the documentation header (which uses ",[618,61836,61837],{},"z-index: 30",").\n",[1705,61840,61841],{},"This value is for the docs only — you can ignore it or adjust it as needed.",[504,61843,926],{"id":925},[931,61845,61846,61856],{},[934,61847,61848],{},[937,61849,61850,61852,61854],{},[940,61851,942],{},[940,61853,945],{},[940,61855,948],{},[950,61857,61858,61875,61890,61908,61932,61952,61969,61987,61998,62017,62040,62080,62117,62137,62170],{},[937,61859,61860,61864,61870],{},[955,61861,61862],{},[1705,61863,4910],{},[955,61865,61866,61867,1150],{},"Wrapping ",[1709,61868,61869],{},"HTML element",[955,61871,61872],{},[618,61873,61874],{},"'div'",[937,61876,61877,61882,61888],{},[955,61878,61879],{},[1705,61880,61881],{},"wrapperClass",[955,61883,2867,61884,61887],{},[618,61885,61886],{},"className"," of the wrapping element. element.",[955,61889],{},[937,61891,61892,61897,61904],{},[955,61893,61894],{},[1705,61895,61896],{},"prepend",[955,61898,61899,61900,61903],{},"Projects content ",[1709,61901,61902],{},"behind"," the canvas.",[955,61905,61906],{},[618,61907,975],{},[937,61909,61910,61914,61928],{},[955,61911,61912],{},[1705,61913,30879],{},[955,61915,1354,61916,8437,61919,61921,61922],{},[618,61917,61918],{},"transform: translate(-50%, -50%)",[7778,61920],{},"➡️ ",[1709,61923,61924,61925,61927],{},"Ignored in ",[1705,61926,12651],{}," mode.",[955,61929,61930],{},[618,61931,975],{},[937,61933,61934,61939,61948],{},[955,61935,61936],{},[1705,61937,61938],{},"fullscreen",[955,61940,61941,61942,61921,61944],{},"Aligns to the upper-left corner and fills the screen. ",[7778,61943],{},[1709,61945,61924,61946,61927],{},[1705,61947,12651],{},[955,61949,61950],{},[618,61951,975],{},[937,61953,61954,61959,61967],{},[955,61955,61956],{},[1705,61957,61958],{},"distanceFactor",[955,61960,61961,61962,61964,61965,1150],{},"Children are scaled by this factor and also by distance to a ",[618,61963,13520],{},", or zoom when using an ",[618,61966,56842],{},[955,61968],{},[937,61970,61971,61976,61982],{},[955,61972,61973],{},[1705,61974,61975],{},"zIndexRange",[955,61977,61978,61979,1150],{},"Defines the ",[1709,61980,61981],{},"Z-order range",[955,61983,61984],{},[618,61985,61986],{},"[16777271, 0]",[937,61988,61989,61993,61996],{},[955,61990,61991],{},[1705,61992,29541],{},[955,61994,61995],{},"Reference to a target container (for rendering into a different DOM node). container.",[955,61997],{},[937,61999,62000,62004,62013],{},[955,62001,62002],{},[1705,62003,12651],{},[955,62005,962,62006,62008,62009,62012],{},[618,62007,965],{},", applies ",[618,62010,62011],{},"matrix3d"," transformations — the element appears as if it is inside the 3D scene.",[955,62014,62015],{},[618,62016,975],{},[937,62018,62019,62024,62036],{},[955,62020,62021],{},[1705,62022,62023],{},"sprite",[955,62025,62026,62027,8437,62029,61921,62031],{},"Renders as a ",[1709,62028,62023],{},[7778,62030],{},[1709,62032,62033,62034,61927],{},"Only in ",[1705,62035,12651],{},[955,62037,62038],{},[618,62039,975],{},[937,62041,62042,62047,62071],{},[955,62043,62044],{},[1705,62045,62046],{},"calculatePosition",[955,62048,62049,62050,62052,3287,62055,3287,62058,62060,62061,62064,62065,61921,62067],{},"Callback function to override the default positioning logic. ",[7778,62051],{},[1705,62053,62054],{},"Type:",[618,62056,62057],{},"(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]",[7778,62059],{},"Receives the related 3D object, the active camera, and the current viewport size, and must return ",[618,62062,62063],{},"[x, y, z]"," pixel coordinates for placing the HTML element. ",[7778,62066],{},[1709,62068,61924,62069,61927],{},[1705,62070,12651],{},[955,62072,62073],{},[1144,62074,62077,62078],{"href":62075,"rel":62076},"https:\u002F\u002Fgithub.com\u002FTresjs\u002Fcientos\u002Fblob\u002Fmain\u002Fsrc\u002Fcore\u002Fmisc\u002Fhtml\u002Futils.ts#L9-L19",[1148],"Default ",[618,62079,62046],{},[937,62081,62082,62086,62115],{},[955,62083,62084],{},[1705,62085,57326],{},[955,62087,62088,62089,62091,62092,62094,62095,62098,62099,58764,62101,62104,62105,62091,62107,62110,62111,62114],{},"Enables occlusion. Possible values: ",[7778,62090],{},"- ",[618,62093,965],{}," → Occlusion against ",[1709,62096,62097],{},"all"," scene objects ",[7778,62100],{},[618,62102,62103],{},"Ref\u003CTresObject3D>[]"," → Occlusion is enabled only against the specified objects. ",[7778,62106],{},[618,62108,62109],{},"'blending'"," → Uses a ",[1709,62112,62113],{},"blending-based"," occlusion method (CSS-like depth blending).",[955,62116],{},[937,62118,62119,62123,62129],{},[955,62120,62121],{},[1705,62122,5333],{},[955,62124,62125,62126,62128],{},"Custom ",[618,62127,5333],{}," to be used.",[955,62130,62131],{},[1144,62132,62135],{"href":62133,"rel":62134},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=geometry#api\u002Fen\u002Fgeometries\u002FPlaneGeometry",[1148],[618,62136,35603],{},[937,62138,62139,62143,62168],{},[955,62140,62141],{},[1705,62142,5403],{},[955,62144,62145,3287,62151,3287,62153,62159,62160,3287,62162],{},[1705,62146,62147,62148,62150],{},"Custom shader ",[1709,62149,5403],{}," used for the occlusion mesh.",[7778,62152],{},[1705,62154,62155,62156,62158],{},"Only applies when ",[618,62157,59834],{}," is enabled"," (an occlusion mesh is created). ",[7778,62161],{},[1709,62163,62164,62165,62167],{},"Ignored in raycast occlusion modes (",[618,62166,965],{},", object refs).",[955,62169],{},[937,62171,62172,62177,62198],{},[955,62173,62174],{},[1705,62175,62176],{},"transparentMaterial",[955,62178,62179,3287,62185,3287,62187,3287,62192,3287,62194],{},[1705,62180,62181,62182,62184],{},"Enables ",[1709,62183,12191],{}," rendering for the occlusion material.",[7778,62186],{},[1705,62188,62155,62189,62191],{},[618,62190,59834],{}," creates an occlusion mesh.",[7778,62193],{},[1709,62195,62164,62196,62167],{},[618,62197,965],{},[955,62199,62200],{},[618,62201,975],{},[504,62203,15042],{"id":15041},[931,62205,62206,62214],{},[934,62207,62208],{},[937,62209,62210,62212],{},[940,62211,5968],{},[940,62213,945],{},[950,62215,62216],{},[937,62217,62218,62221],{},[955,62219,62220],{},"onOcclude",[955,62222,62223],{},"Called when the occlusion state changes.",[504,62225,62227],{"id":62226},"exposed-properties","Exposed properties",[931,62229,62230,62240],{},[934,62231,62232],{},[937,62233,62234,62236,62238],{},[940,62235,6175],{},[940,62237,6178],{},[940,62239,945],{},[950,62241,62242,62263,62283],{},[937,62243,62244,62248,62253],{},[955,62245,62246],{},[1705,62247,9626],{},[955,62249,62250],{},[618,62251,62252],{},"Ref\u003CTresObject3D | null>",[955,62254,62255,62256,62260,62261,1150],{},"Reference to the root ",[1705,62257,62258],{},[618,62259,5832],{}," used by ",[618,62262,56846],{},[937,62264,62265,62270,62274],{},[955,62266,62267],{},[1705,62268,62269],{},"isVisible",[955,62271,62272],{},[618,62273,18373],{},[955,62275,62276,62277,5822,62280,1150],{},"Reactive value that indicates whether the HTML content is ",[1705,62278,62279],{},"currently visible",[1705,62281,62282],{},"occluded",[937,62284,62285,62290,62294],{},[955,62286,62287],{},[1705,62288,62289],{},"occlusionMesh",[955,62291,62292],{},[618,62293,62252],{},[955,62295,62296,62297,62300,62301,6092,62303,62305],{},"Reference to the ",[1705,62298,62299],{},"occlusion mesh"," created when ",[618,62302,59834],{},[1705,62304,17533],{},". Used internally for geometry-based occlusion.",[504,62307,6468],{"id":6467},[2285,62309,62310,62343,62360,62415,62433],{},[2288,62311,62312,62313,62318,62319,62321,62322,5822,62325,62328,62329,62331,62332,62335,62336,62339,62340,62342],{},"✨ When using ",[1705,62314,62315],{},[618,62316,62317],{},"\u003CHtml occlude>",", if the ",[618,62320,56846],{}," component is ",[1705,62323,62324],{},"overlapping",[1705,62326,62327],{},"inside a 3D object",", it will be considered ",[1705,62330,62282],{}," and therefore ",[1705,62333,62334],{},"hidden",". To avoid this, ",[1705,62337,62338],{},"adjust the position"," of the ",[618,62341,56846],{}," component in your scene.",[2288,62344,62345,62346,62351,62352,62355,62356,62359],{},"🎨 When using ",[1705,62347,62348],{},[618,62349,62350],{},"\u003CHtml occlude=\"blending\">",", the HTML content is no longer ",[1705,62353,62354],{},"selectable"," because it is rendered ",[1705,62357,62358],{},"behind the canvas",". This is required to achieve the blending effect.",[2288,62361,62362,62363,62365,62366,62368,62369],{},"⚙️ When using a ",[1705,62364,59929],{}," with occlusion in ",[618,62367,52752],{}," mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️",[5519,62370,5521,62371,62374],{},[5523,62372,62373],{},"See more information",[14905,62375,62376,62387,62395,62402],{},[2288,62377,62378,62379,3167,62381,62383,62384,1150],{},"If you provide your own material, it must be ",[1705,62380,12191],{},[618,62382,3155],{},") with an ",[1705,62385,62386],{},"opacity \u003C 1",[2288,62388,62389,62390,62394],{},"If you are not providing a custom material, enable ",[1705,62391,62392],{},[618,62393,62176],{}," so the internal shader becomes transparent.",[2288,62396,62397,62398,62401],{},"The occlusion mesh requires a ",[1705,62399,62400],{},"fully transparent canvas background","; otherwise, thin borders or halo artifacts may appear.",[2288,62403,62404,62405,17323,62408,1503,62410,62412,62413,1150],{},"To compensate for the transparent canvas, you may ",[1705,62406,62407],{},"reapply your previous clear-color as a CSS background",[618,62409,48295],{},[618,62411,5022],{},", or a wrapper ",[618,62414,4283],{},[2288,62416,62417,62418,62422,62423,62425,62426,62428,62429,62432],{},"🔶 When using ",[1705,62419,62420],{},[618,62421,62176],{},", overlapping ",[618,62424,56846],{}," elements (especially multiple ",[618,62427,59834],{}," instances) may cause ",[1705,62430,62431],{},"z-index or depth-order artifacts",".\nThis happens because the occlusion mesh uses transparency in the WebGL layer while the DOM element uses CSS stacking order.",[2288,62434,62435,62436,62438,62439,62441,62442],{},"🔵 To avoid thin border artifacts when using ",[618,62437,59834],{},", make sure your ",[618,62440,3290],{}," is fully transparent:",[626,62443,62445],{"className":628,"code":62444,"language":633,"meta":576,"style":576},"\u003CTresCanvas :alpha=\"true\" :clearAlpha=\"0\" \u002F>\n",[618,62446,62447],{"__ignoreMap":576},[637,62448,62449,62451,62453,62455,62457,62459,62461,62463,62465,62467,62470,62472,62474,62476,62478],{"class":639,"line":577},[637,62450,643],{"class":642},[637,62452,761],{"class":646},[637,62454,813],{"class":642},[637,62456,48986],{"class":650},[637,62458,657],{"class":642},[637,62460,660],{"class":642},[637,62462,965],{"class":4560},[637,62464,660],{"class":642},[637,62466,813],{"class":642},[637,62468,62469],{"class":650},"clearAlpha",[637,62471,657],{"class":642},[637,62473,660],{"class":642},[637,62475,969],{"class":823},[637,62477,660],{"class":642},[637,62479,787],{"class":642},[931,62481,62482,62492],{},[934,62483,62484],{},[937,62485,62486,62488,62490],{},[940,62487,942],{},[940,62489,945],{},[940,62491,948],{},[950,62493,62494,62507,62518,62531,62547,62562,62573,62586,62597,62610,62623,62636,62657,62672],{},[937,62495,62496,62500,62503],{},[955,62497,62498],{},[1705,62499,4910],{},[955,62501,62502],{},"Wrapping html element.",[955,62504,62505],{},[618,62506,61874],{},[937,62508,62509,62513,62516],{},[955,62510,62511],{},[1705,62512,61881],{},[955,62514,62515],{},"The className of the wrapping element.",[955,62517],{},[937,62519,62520,62524,62527],{},[955,62521,62522],{},[1705,62523,61896],{},[955,62525,62526],{},"Project content behind the canvas.",[955,62528,62529],{},[618,62530,975],{},[937,62532,62533,62537,62543],{},[955,62534,62535],{},[1705,62536,30879],{},[955,62538,62539,62540],{},"Adds a -50%\u002F-50% CSS transform. ",[637,62541,62542],{},"Ignored in transform mode",[955,62544,62545],{},[618,62546,975],{},[937,62548,62549,62553,62558],{},[955,62550,62551],{},[1705,62552,61938],{},[955,62554,62555,62556],{},"Aligns to the upper-left corner, fills the screen. ",[637,62557,62542],{},[955,62559,62560],{},[618,62561,975],{},[937,62563,62564,62568,62571],{},[955,62565,62566],{},[1705,62567,61958],{},[955,62569,62570],{},"Children will be scaled by this factor, and also by distance to a PerspectiveCamera \u002F zoom by an OrthographicCamera.",[955,62572],{},[937,62574,62575,62579,62582],{},[955,62576,62577],{},[1705,62578,61975],{},[955,62580,62581],{},"Z-order range.",[955,62583,62584],{},[618,62585,61986],{},[937,62587,62588,62592,62595],{},[955,62589,62590],{},[1705,62591,29541],{},[955,62593,62594],{},"Reference to target container.",[955,62596],{},[937,62598,62599,62603,62606],{},[955,62600,62601],{},[1705,62602,12651],{},[955,62604,62605],{},"If true, applies matrix3d transformations.",[955,62607,62608],{},[618,62609,975],{},[937,62611,62612,62616,62619],{},[955,62613,62614],{},[1705,62615,62023],{},[955,62617,62618],{},"Renders as sprite, but only in transform mode.",[955,62620,62621],{},[618,62622,975],{},[937,62624,62625,62629,62634],{},[955,62626,62627],{},[1705,62628,62046],{},[955,62630,62631,62632],{},"Override default positioning function. ",[637,62633,62542],{},[955,62635],{},[937,62637,62638,62642,62655],{},[955,62639,62640],{},[1705,62641,57326],{},[955,62643,62644,62645,1503,62647,1503,62649,1737,62652,62654],{},"Can be ",[618,62646,965],{},[618,62648,62103],{},[618,62650,62651],{},"'raycast'",[618,62653,62109],{},". True occludes the entire scene.",[955,62656],{},[937,62658,62659,62663,62668],{},[955,62660,62661],{},[1705,62662,5333],{},[955,62664,62125,62665,62667],{},[618,62666,5333],{}," to be use",[955,62669,62670],{},[618,62671,35603],{},[937,62673,62674,62678,62682],{},[955,62675,62676],{},[1705,62677,5403],{},[955,62679,62147,62680,62667],{},[618,62681,5403],{},[955,62683],{},[504,62685,15042],{"id":62686},"events-1",[931,62688,62689,62697],{},[934,62690,62691],{},[937,62692,62693,62695],{},[940,62694,5968],{},[940,62696,945],{},[950,62698,62699],{},[937,62700,62701,62703],{},[955,62702,62220],{},[955,62704,62223],{},[1331,62706,62707],{},"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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":576,"searchDepth":577,"depth":578,"links":62709},[62710,62711,62716,62719,62724,62725,62726,62727,62728],{"id":624,"depth":578,"text":15},{"id":57319,"depth":578,"text":57320,"children":62712},[62713,62714,62715],{"id":57509,"depth":708,"text":57510},{"id":57672,"depth":708,"text":57673},{"id":57932,"depth":708,"text":57933},{"id":48630,"depth":578,"text":48631,"children":62717},[62718],{"id":3081,"depth":708,"text":59915},{"id":59979,"depth":578,"text":62720,"children":62721},"Using \u003CTransition>",[62722],{"id":61610,"depth":708,"text":62723},"Using iframes",{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},{"id":62226,"depth":578,"text":62227},{"id":6467,"depth":578,"text":6468},{"id":62686,"depth":578,"text":15042},"Allows you put DOM elements in your Tres.js scene.",{},{"title":441,"description":62729},"bmQxq5ycvwwoOaNRdE5rmWFB-PGm7ptZpQsjJyfxYsw",{"id":62734,"title":445,"body":62735,"description":63355,"extension":591,"links":592,"meta":63356,"navigation":594,"path":446,"seo":63357,"stem":447,"__hash__":63358},"docs\u002F2.api\u002F9.objects\u002Fimage.md",{"type":501,"value":62736,"toc":63350},[62737,62742,62748,62750,62944,62946,62953,63161,63163,63186,63348],[608,62738,62739],{},[62740,62741],"objects-image",{},[614,62743,62744,62747],{},[618,62745,62746],{},"\u003CImage \u002F>"," is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.",[504,62749,15],{"id":624},[626,62751,62754],{"className":628,"code":62752,"highlights":62753,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Image } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 5]\" \u002F>\n\n \u003CImage\n url=\"https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Ff\u002Ff0\u002FCyanistes_caeruleus_Oulu_20150516.JPG\"\n :scale=\"[2, 2]\"\n \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,800,805,831],[618,62755,62756,62776,62794,62814,62822,62826,62834,62842,62874,62878,62886,62901,62924,62928,62936],{"__ignoreMap":576},[637,62757,62758,62760,62762,62764,62766,62768,62770,62772,62774],{"class":639,"line":577},[637,62759,643],{"class":642},[637,62761,647],{"class":646},[637,62763,651],{"class":650},[637,62765,654],{"class":650},[637,62767,657],{"class":642},[637,62769,660],{"class":642},[637,62771,664],{"class":663},[637,62773,660],{"class":642},[637,62775,669],{"class":642},[637,62777,62778,62780,62782,62784,62786,62788,62790,62792],{"class":639,"line":578},[637,62779,677],{"class":676},[637,62781,680],{"class":642},[637,62783,715],{"class":683},[637,62785,693],{"class":642},[637,62787,696],{"class":676},[637,62789,699],{"class":642},[637,62791,724],{"class":663},[637,62793,705],{"class":642},[637,62795,62797,62799,62801,62804,62806,62808,62810,62812],{"class":62796,"line":708},[639,673],[637,62798,677],{"class":676},[637,62800,680],{"class":642},[637,62802,62803],{"class":683}," Image",[637,62805,693],{"class":642},[637,62807,696],{"class":676},[637,62809,699],{"class":642},[637,62811,702],{"class":663},[637,62813,705],{"class":642},[637,62815,62816,62818,62820],{"class":639,"line":729},[637,62817,732],{"class":642},[637,62819,647],{"class":646},[637,62821,669],{"class":642},[637,62823,62824],{"class":639,"line":739},[637,62825,742],{"emptyLinePlaceholder":594},[637,62827,62828,62830,62832],{"class":639,"line":745},[637,62829,643],{"class":642},[637,62831,750],{"class":646},[637,62833,669],{"class":642},[637,62835,62836,62838,62840],{"class":639,"line":755},[637,62837,758],{"class":642},[637,62839,761],{"class":646},[637,62841,669],{"class":642},[637,62843,62844,62846,62848,62850,62852,62854,62856,62858,62860,62862,62864,62866,62868,62870,62872],{"class":639,"line":778},[637,62845,781],{"class":642},[637,62847,784],{"class":646},[637,62849,813],{"class":642},[637,62851,1491],{"class":650},[637,62853,657],{"class":642},[637,62855,660],{"class":642},[637,62857,1498],{"class":642},[637,62859,969],{"class":823},[637,62861,1503],{"class":642},[637,62863,969],{"class":823},[637,62865,1503],{"class":642},[637,62867,7666],{"class":823},[637,62869,1513],{"class":642},[637,62871,660],{"class":642},[637,62873,787],{"class":642},[637,62875,62876],{"class":639,"line":790},[637,62877,742],{"emptyLinePlaceholder":594},[637,62879,62881,62883],{"class":62880,"line":800},[639,673],[637,62882,781],{"class":642},[637,62884,62885],{"class":646},"Image\n",[637,62887,62889,62892,62894,62896,62899],{"class":62888,"line":805},[639,673],[637,62890,62891],{"class":650}," url",[637,62893,657],{"class":642},[637,62895,660],{"class":642},[637,62897,62898],{"class":663},"https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Ff\u002Ff0\u002FCyanistes_caeruleus_Oulu_20150516.JPG",[637,62900,3224],{"class":642},[637,62902,62904,62906,62908,62910,62912,62914,62916,62918,62920,62922],{"class":62903,"line":831},[639,673],[637,62905,13000],{"class":642},[637,62907,816],{"class":650},[637,62909,657],{"class":642},[637,62911,660],{"class":642},[637,62913,1498],{"class":642},[637,62915,824],{"class":823},[637,62917,1503],{"class":642},[637,62919,824],{"class":823},[637,62921,1513],{"class":642},[637,62923,3224],{"class":642},[637,62925,62926],{"class":639,"line":631},[637,62927,18174],{"class":642},[637,62929,62930,62932,62934],{"class":639,"line":854},[637,62931,909],{"class":642},[637,62933,761],{"class":646},[637,62935,669],{"class":642},[637,62937,62938,62940,62942],{"class":639,"line":865},[637,62939,732],{"class":642},[637,62941,750],{"class":646},[637,62943,669],{"class":642},[504,62945,926],{"id":925},[3292,62947,62948],{},[614,62949,62950,62952],{},[618,62951,62746],{}," is a THREE.Mesh and most Mesh attributes can be used as props on the component.",[931,62954,62955,62965],{},[934,62956,62957],{},[937,62958,62959,62961,62963],{},[940,62960,942],{"align":1001},[940,62962,945],{"align":1001},[940,62964,948],{},[950,62966,62967,62980,62996,63009,63023,63039,63053,63071,63089,63104,63120,63138,63149],{},[937,62968,62969,62973,62976],{},[955,62970,62971],{"align":1001},[618,62972,32474],{},[955,62974,62975],{"align":1001},"Number of divisions in the default geometry.",[955,62977,62978],{},[618,62979,1925],{},[937,62981,62982,62986,62992],{},[955,62983,62984],{"align":1001},[618,62985,816],{},[955,62987,62988,62989],{"align":1001},"Scale of the geometry. ",[618,62990,62991],{},"number | [number, number]",[955,62993,62994],{},[618,62995,1925],{},[937,62997,62998,63002,63005],{},[955,62999,63000],{"align":1001},[618,63001,7770],{},[955,63003,63004],{"align":1001},"Color multiplied into the image texture.",[955,63006,63007],{},[618,63008,32659],{},[937,63010,63011,63016,63019],{},[955,63012,63013],{"align":1001},[618,63014,63015],{},"zoom",[955,63017,63018],{"align":1001},"Shrinks or enlarges the image texture.",[955,63020,63021],{},[618,63022,1925],{},[937,63024,63025,63029,63035],{},[955,63026,63027],{"align":1001},[618,63028,45220],{},[955,63030,63031,63032,63034],{"align":1001},"Border radius applied to the image texture. (Intended for rectangular geometries. Use with ",[618,63033,12191],{},".)",[955,63036,63037],{},[618,63038,969],{},[937,63040,63041,63046,63049],{},[955,63042,63043],{"align":1001},[618,63044,63045],{},"grayscale",[955,63047,63048],{"align":1001},"Power of grayscale effect. 0 is off. 1 is full grayscale.",[955,63050,63051],{},[618,63052,969],{},[937,63054,63055,63059,63067],{},[955,63056,63057],{"align":1001},[618,63058,41763],{},[955,63060,63061,63062],{"align":1001},"Whether this material is tone mapped according to the renderers toneMapping settings. ",[1144,63063,63066],{"href":63064,"rel":63065},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=material#api\u002Fen\u002Fmaterials\u002FMaterial.toneMapped",[1148],"See THREE.material.tonemapped",[955,63068,63069],{},[618,63070,969],{},[937,63072,63073,63077,63085],{},[955,63074,63075],{"align":1001},[618,63076,12191],{},[955,63078,63079,63080],{"align":1001},"Whether the image material should be transparent. ",[1144,63081,63084],{"href":63082,"rel":63083},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=material#api\u002Fen\u002Fmaterials\u002FMaterial.transparent",[1148],"See THREE.material.transparent",[955,63086,63087],{},[618,63088,975],{},[937,63090,63091,63095,63100],{},[955,63092,63093],{"align":1001},[618,63094,12191],{},[955,63096,63079,63097],{"align":1001},[1144,63098,63084],{"href":63082,"rel":63099},[1148],[955,63101,63102],{},[618,63103,975],{},[937,63105,63106,63110,63116],{},[955,63107,63108],{"align":1001},[618,63109,12179],{},[955,63111,63112,63113],{"align":1001},"Opacity of the image material. ",[1144,63114,63084],{"href":63082,"rel":63115},[1148],[955,63117,63118],{},[618,63119,1925],{},[937,63121,63122,63126,63134],{},[955,63123,63124],{"align":1001},[618,63125,27632],{},[955,63127,63128,63129],{"align":1001},"THREE.Side of the image material. ",[1144,63130,63133],{"href":63131,"rel":63132},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=material#api\u002Fen\u002Fmaterials\u002FMaterial.side",[1148],"See THREE.material.side",[955,63135,63136],{},[618,63137,28856],{},[937,63139,63140,63144,63147],{},[955,63141,63142],{"align":1001},[618,63143,2801],{},[955,63145,63146],{"align":1001},"Image texture to display on the geometry.",[955,63148],{},[937,63150,63151,63156,63159],{},[955,63152,63153],{"align":1001},[618,63154,63155],{},"url",[955,63157,63158],{"align":1001},"Image URL to load and display on the geometry.",[955,63160],{},[504,63162,6468],{"id":6467},[614,63164,63165,63166,63168,63169,63172,63173,63175,63176,63179,63180,5822,63183,5786],{},"By default, images loaded via the ",[618,63167,63155],{}," prop use the renderer’s output color space. For advanced control, pass a ",[618,63170,63171],{},"THREE.Texture"," via the ",[618,63174,2801],{}," prop and set its ",[618,63177,63178],{},"colorSpace"," (e.g., ",[618,63181,63182],{},"THREE.SRGBColorSpace",[618,63184,63185],{},"THREE.LinearSRGBColorSpace",[626,63187,63189],{"className":628,"code":63188,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { useTexture } from '@tresjs\u002Fcientos'\nimport { SRGBColorSpace } from 'three'\n\nconst { state } = useTexture(URL)\nwatch(state, (texture) => {\n texture.colorSpace = SRGBColorSpace \u002F\u002F assign a custom color space\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CImage :texture=\"texture\" \u002F>\n\u003C\u002Ftemplate>\n",[618,63190,63191,63201,63219,63237,63241,63259,63278,63294,63300,63308,63312,63320,63340],{"__ignoreMap":576},[637,63192,63193,63195,63197,63199],{"class":639,"line":577},[637,63194,643],{"class":642},[637,63196,647],{"class":646},[637,63198,651],{"class":650},[637,63200,669],{"class":642},[637,63202,63203,63205,63207,63209,63211,63213,63215,63217],{"class":639,"line":578},[637,63204,677],{"class":676},[637,63206,680],{"class":642},[637,63208,2431],{"class":683},[637,63210,693],{"class":642},[637,63212,696],{"class":676},[637,63214,699],{"class":642},[637,63216,702],{"class":663},[637,63218,705],{"class":642},[637,63220,63221,63223,63225,63227,63229,63231,63233,63235],{"class":639,"line":708},[637,63222,677],{"class":676},[637,63224,680],{"class":642},[637,63226,47279],{"class":683},[637,63228,693],{"class":642},[637,63230,696],{"class":676},[637,63232,699],{"class":642},[637,63234,4799],{"class":663},[637,63236,705],{"class":642},[637,63238,63239],{"class":639,"line":729},[637,63240,742],{"emptyLinePlaceholder":594},[637,63242,63243,63245,63247,63250,63252,63254,63256],{"class":639,"line":739},[637,63244,2487],{"class":650},[637,63246,680],{"class":642},[637,63248,63249],{"class":683}," state ",[637,63251,2500],{"class":642},[637,63253,2503],{"class":642},[637,63255,2431],{"class":2506},[637,63257,63258],{"class":683},"(URL)\n",[637,63260,63261,63263,63266,63268,63270,63272,63274,63276],{"class":639,"line":745},[637,63262,12798],{"class":2506},[637,63264,63265],{"class":683},"(state",[637,63267,687],{"class":642},[637,63269,3167],{"class":642},[637,63271,2801],{"class":7047},[637,63273,3433],{"class":642},[637,63275,3770],{"class":650},[637,63277,1208],{"class":642},[637,63279,63280,63283,63285,63287,63289,63291],{"class":639,"line":755},[637,63281,63282],{"class":683}," texture",[637,63284,1150],{"class":642},[637,63286,63178],{"class":683},[637,63288,2503],{"class":642},[637,63290,47279],{"class":683},[637,63292,63293],{"class":1213}," \u002F\u002F assign a custom color space\n",[637,63295,63296,63298],{"class":639,"line":778},[637,63297,2500],{"class":642},[637,63299,2520],{"class":683},[637,63301,63302,63304,63306],{"class":639,"line":790},[637,63303,732],{"class":642},[637,63305,647],{"class":646},[637,63307,669],{"class":642},[637,63309,63310],{"class":639,"line":800},[637,63311,742],{"emptyLinePlaceholder":594},[637,63313,63314,63316,63318],{"class":639,"line":805},[637,63315,643],{"class":642},[637,63317,750],{"class":646},[637,63319,669],{"class":642},[637,63321,63322,63324,63326,63328,63330,63332,63334,63336,63338],{"class":639,"line":831},[637,63323,758],{"class":642},[637,63325,445],{"class":646},[637,63327,813],{"class":642},[637,63329,2801],{"class":650},[637,63331,657],{"class":642},[637,63333,660],{"class":642},[637,63335,2801],{"class":683},[637,63337,660],{"class":642},[637,63339,787],{"class":642},[637,63341,63342,63344,63346],{"class":639,"line":631},[637,63343,732],{"class":642},[637,63345,750],{"class":646},[637,63347,669],{"class":642},[1331,63349,28387],{},{"title":576,"searchDepth":577,"depth":578,"links":63351},[63352,63353,63354],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":6467,"depth":578,"text":6468},"Display image textures with shader-based effects.",{},{"title":445,"description":63355},"Ih3plwx33rhfQDdou67XVLUqx8Myh4kGzqeuiGa_MsE",{"id":63360,"title":449,"body":63361,"description":64194,"extension":591,"links":592,"meta":64195,"navigation":594,"path":450,"seo":64196,"stem":451,"__hash__":64197},"docs\u002F2.api\u002F9.objects\u002Fmarching-cubes.md",{"type":501,"value":63362,"toc":64188},[63363,63368,63379,63382,63407,63409,64001,64003,64073,64077,64122,64126,64185],[608,63364,63365],{},[63366,63367],"objects-marching-cubes",{},[614,63369,63370,63373,63374,1150],{},[618,63371,63372],{},"\u003CMarchingCubes \u002F>"," is a wrapper around ",[1144,63375,63378],{"href":63376,"rel":63377},"https:\u002F\u002Fthreejs.org\u002Fexamples\u002F#webgl_marchingcubes",[1148],"THREE's Marching Cubes",[614,63380,63381],{},"It includes 3 components:",[2285,63383,63384,63397,63402],{},[2288,63385,63386,63388,63389,63392,63393,63396],{},[618,63387,63372],{}," – container element for ",[618,63390,63391],{},"\u003CMarchingCube \u002F>","s and ",[618,63394,63395],{},"\u003CMarchingPlane \u002F>","s",[2288,63398,63399,63401],{},[618,63400,63391],{}," - an individual metaball",[2288,63403,63404,63406],{},[618,63405,63395],{}," – optional bounding plane that interacts with the metaballs",[504,63408,15],{"id":624},[626,63410,63413],{"className":628,"code":63411,"highlights":63412,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs\u002Fcientos'\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { NoToneMapping, Vector3 } from 'three'\n\nconst rand = () => (Math.random() - 0.5) * 1.25\nconst positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#222\" :tone-mapping=\"NoToneMapping\">\n \u003CTresPerspectiveCamera \u002F>\n \u003COrbitControls \u002F>\n\n \u003CMarchingCubes :resolution=\"40\" :max-poly-count=\"40000\">\n \u003CMarchingPlane plane-type=\"y\" \u002F>\n \u003CMarchingCube\n v-for=\"position, i of positions\"\n :key=\"i\"\n :position=\"position\"\n \u002F>\n \u003CTresMeshPhongMaterial specular=\"#111111\" :shininess=\"30\" color=\"#049ef4\" :reflectivity=\"1\" \u002F>\n \u003C\u002FMarchingCubes>\n\n \u003CTresAxesHelper \u002F>\n \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[0, 200, 0]\" \u002F>\n \u003CTresDirectionalLight color=\"#ffffff\" :intensity=\"3\" :position=\"[100, 200, 100]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,865,876,886,632,906,916,2695,2704,2738],[618,63414,63415,63435,63469,63487,63510,63514,63547,63604,63612,63616,63624,63656,63664,63672,63676,63711,63732,63740,63762,63777,63792,63797,63855,63864,63868,63876,63931,63985,63993],{"__ignoreMap":576},[637,63416,63417,63419,63421,63423,63425,63427,63429,63431,63433],{"class":639,"line":577},[637,63418,643],{"class":642},[637,63420,647],{"class":646},[637,63422,651],{"class":650},[637,63424,654],{"class":650},[637,63426,657],{"class":642},[637,63428,660],{"class":642},[637,63430,664],{"class":663},[637,63432,660],{"class":642},[637,63434,669],{"class":642},[637,63436,63438,63440,63442,63445,63447,63450,63452,63455,63457,63459,63461,63463,63465,63467],{"class":63437,"line":578},[639,673],[637,63439,677],{"class":676},[637,63441,680],{"class":642},[637,63443,63444],{"class":683}," MarchingCube",[637,63446,687],{"class":642},[637,63448,63449],{"class":683}," MarchingCubes",[637,63451,687],{"class":642},[637,63453,63454],{"class":683}," MarchingPlane",[637,63456,687],{"class":642},[637,63458,690],{"class":683},[637,63460,693],{"class":642},[637,63462,696],{"class":676},[637,63464,699],{"class":642},[637,63466,702],{"class":663},[637,63468,705],{"class":642},[637,63470,63471,63473,63475,63477,63479,63481,63483,63485],{"class":639,"line":708},[637,63472,677],{"class":676},[637,63474,680],{"class":642},[637,63476,715],{"class":683},[637,63478,693],{"class":642},[637,63480,696],{"class":676},[637,63482,699],{"class":642},[637,63484,724],{"class":663},[637,63486,705],{"class":642},[637,63488,63489,63491,63493,63496,63498,63500,63502,63504,63506,63508],{"class":639,"line":729},[637,63490,677],{"class":676},[637,63492,680],{"class":642},[637,63494,63495],{"class":683}," NoToneMapping",[637,63497,687],{"class":642},[637,63499,32320],{"class":683},[637,63501,693],{"class":642},[637,63503,696],{"class":676},[637,63505,699],{"class":642},[637,63507,4799],{"class":663},[637,63509,705],{"class":642},[637,63511,63512],{"class":639,"line":739},[637,63513,742],{"emptyLinePlaceholder":594},[637,63515,63516,63518,63521,63523,63525,63527,63530,63532,63534,63536,63538,63540,63542,63544],{"class":639,"line":745},[637,63517,2487],{"class":650},[637,63519,63520],{"class":683}," rand ",[637,63522,657],{"class":642},[637,63524,7289],{"class":642},[637,63526,3770],{"class":650},[637,63528,63529],{"class":683}," (Math",[637,63531,1150],{"class":642},[637,63533,60564],{"class":2506},[637,63535,7193],{"class":683},[637,63537,8776],{"class":642},[637,63539,2582],{"class":823},[637,63541,4907],{"class":683},[637,63543,24245],{"class":642},[637,63545,63546],{"class":823}," 1.25\n",[637,63548,63549,63551,63554,63556,63558,63560,63562,63564,63566,63568,63570,63573,63575,63577,63579,63581,63583,63585,63588,63590,63592,63595,63597,63599,63601],{"class":639,"line":755},[637,63550,2487],{"class":650},[637,63552,63553],{"class":683}," positions ",[637,63555,657],{"class":642},[637,63557,8699],{"class":683},[637,63559,1150],{"class":642},[637,63561,8704],{"class":2506},[637,63563,2509],{"class":683},[637,63565,8709],{"class":642},[637,63567,8712],{"class":646},[637,63569,1222],{"class":642},[637,63571,63572],{"class":823}," 40",[637,63574,8720],{"class":642},[637,63576,7289],{"class":642},[637,63578,3770],{"class":650},[637,63580,8096],{"class":642},[637,63582,32320],{"class":2506},[637,63584,2509],{"class":683},[637,63586,63587],{"class":2506},"rand",[637,63589,3767],{"class":683},[637,63591,687],{"class":642},[637,63593,63594],{"class":2506}," rand",[637,63596,3767],{"class":683},[637,63598,687],{"class":642},[637,63600,63594],{"class":2506},[637,63602,63603],{"class":683},"()))\n",[637,63605,63606,63608,63610],{"class":639,"line":778},[637,63607,732],{"class":642},[637,63609,647],{"class":646},[637,63611,669],{"class":642},[637,63613,63614],{"class":639,"line":790},[637,63615,742],{"emptyLinePlaceholder":594},[637,63617,63618,63620,63622],{"class":639,"line":800},[637,63619,643],{"class":642},[637,63621,750],{"class":646},[637,63623,669],{"class":642},[637,63625,63626,63628,63630,63632,63634,63636,63638,63640,63642,63645,63647,63649,63652,63654],{"class":639,"line":805},[637,63627,758],{"class":642},[637,63629,761],{"class":646},[637,63631,764],{"class":650},[637,63633,657],{"class":642},[637,63635,660],{"class":642},[637,63637,771],{"class":663},[637,63639,660],{"class":642},[637,63641,813],{"class":642},[637,63643,63644],{"class":650},"tone-mapping",[637,63646,657],{"class":642},[637,63648,660],{"class":642},[637,63650,63651],{"class":683},"NoToneMapping",[637,63653,660],{"class":642},[637,63655,669],{"class":642},[637,63657,63658,63660,63662],{"class":639,"line":831},[637,63659,781],{"class":642},[637,63661,784],{"class":646},[637,63663,787],{"class":642},[637,63665,63666,63668,63670],{"class":639,"line":631},[637,63667,781],{"class":642},[637,63669,795],{"class":646},[637,63671,787],{"class":642},[637,63673,63674],{"class":639,"line":854},[637,63675,742],{"emptyLinePlaceholder":594},[637,63677,63679,63681,63683,63685,63687,63689,63691,63693,63695,63697,63700,63702,63704,63707,63709],{"class":63678,"line":865},[639,673],[637,63680,781],{"class":642},[637,63682,449],{"class":646},[637,63684,813],{"class":642},[637,63686,29480],{"class":650},[637,63688,657],{"class":642},[637,63690,660],{"class":642},[637,63692,37279],{"class":823},[637,63694,660],{"class":642},[637,63696,813],{"class":642},[637,63698,63699],{"class":650},"max-poly-count",[637,63701,657],{"class":642},[637,63703,660],{"class":642},[637,63705,63706],{"class":823},"40000",[637,63708,660],{"class":642},[637,63710,669],{"class":642},[637,63712,63714,63716,63719,63722,63724,63726,63728,63730],{"class":63713,"line":876},[639,673],[637,63715,857],{"class":642},[637,63717,63718],{"class":646},"MarchingPlane",[637,63720,63721],{"class":650}," plane-type",[637,63723,657],{"class":642},[637,63725,660],{"class":642},[637,63727,42009],{"class":663},[637,63729,660],{"class":642},[637,63731,787],{"class":642},[637,63733,63735,63737],{"class":63734,"line":886},[639,673],[637,63736,857],{"class":642},[637,63738,63739],{"class":646},"MarchingCube\n",[637,63741,63743,63745,63747,63749,63751,63753,63755,63758,63760],{"class":63742,"line":632},[639,673],[637,63744,8214],{"class":676},[637,63746,657],{"class":642},[637,63748,660],{"class":642},[637,63750,1491],{"class":683},[637,63752,1503],{"class":642},[637,63754,8900],{"class":683},[637,63756,63757],{"class":642}," of ",[637,63759,8234],{"class":683},[637,63761,3224],{"class":642},[637,63763,63765,63767,63769,63771,63773,63775],{"class":63764,"line":906},[639,673],[637,63766,8241],{"class":642},[637,63768,8244],{"class":650},[637,63770,657],{"class":642},[637,63772,660],{"class":642},[637,63774,8900],{"class":683},[637,63776,3224],{"class":642},[637,63778,63780,63782,63784,63786,63788,63790],{"class":63779,"line":916},[639,673],[637,63781,8241],{"class":642},[637,63783,1491],{"class":650},[637,63785,657],{"class":642},[637,63787,660],{"class":642},[637,63789,1491],{"class":683},[637,63791,3224],{"class":642},[637,63793,63795],{"class":63794,"line":2695},[639,673],[637,63796,8295],{"class":642},[637,63798,63800,63802,63804,63807,63809,63811,63814,63816,63818,63821,63823,63825,63827,63829,63831,63833,63835,63838,63840,63842,63845,63847,63849,63851,63853],{"class":63799,"line":2704},[639,673],[637,63801,857],{"class":642},[637,63803,11983],{"class":646},[637,63805,63806],{"class":650}," specular",[637,63808,657],{"class":642},[637,63810,660],{"class":642},[637,63812,63813],{"class":663},"#111111",[637,63815,660],{"class":642},[637,63817,813],{"class":642},[637,63819,63820],{"class":650},"shininess",[637,63822,657],{"class":642},[637,63824,660],{"class":642},[637,63826,30008],{"class":823},[637,63828,660],{"class":642},[637,63830,2773],{"class":650},[637,63832,657],{"class":642},[637,63834,660],{"class":642},[637,63836,63837],{"class":663},"#049ef4",[637,63839,660],{"class":642},[637,63841,813],{"class":642},[637,63843,63844],{"class":650},"reflectivity",[637,63846,657],{"class":642},[637,63848,660],{"class":642},[637,63850,1925],{"class":823},[637,63852,660],{"class":642},[637,63854,787],{"class":642},[637,63856,63858,63860,63862],{"class":63857,"line":2738},[639,673],[637,63859,899],{"class":642},[637,63861,449],{"class":646},[637,63863,669],{"class":642},[637,63865,63866],{"class":639,"line":2747},[637,63867,742],{"emptyLinePlaceholder":594},[637,63869,63870,63872,63874],{"class":639,"line":2756},[637,63871,781],{"class":642},[637,63873,810],{"class":646},[637,63875,787],{"class":642},[637,63877,63878,63880,63882,63884,63886,63888,63891,63893,63895,63897,63899,63901,63903,63905,63907,63909,63911,63913,63915,63917,63919,63921,63923,63925,63927,63929],{"class":639,"line":2765},[637,63879,781],{"class":642},[637,63881,10031],{"class":646},[637,63883,2773],{"class":650},[637,63885,657],{"class":642},[637,63887,660],{"class":642},[637,63889,63890],{"class":663},"#ffffff",[637,63892,660],{"class":642},[637,63894,813],{"class":642},[637,63896,1918],{"class":650},[637,63898,657],{"class":642},[637,63900,660],{"class":642},[637,63902,2729],{"class":823},[637,63904,660],{"class":642},[637,63906,813],{"class":642},[637,63908,1491],{"class":650},[637,63910,657],{"class":642},[637,63912,660],{"class":642},[637,63914,1498],{"class":642},[637,63916,969],{"class":823},[637,63918,1503],{"class":642},[637,63920,50242],{"class":823},[637,63922,1503],{"class":642},[637,63924,969],{"class":823},[637,63926,1513],{"class":642},[637,63928,660],{"class":642},[637,63930,787],{"class":642},[637,63932,63933,63935,63937,63939,63941,63943,63945,63947,63949,63951,63953,63955,63957,63959,63961,63963,63965,63967,63969,63971,63973,63975,63977,63979,63981,63983],{"class":639,"line":2787},[637,63934,781],{"class":642},[637,63936,10031],{"class":646},[637,63938,2773],{"class":650},[637,63940,657],{"class":642},[637,63942,660],{"class":642},[637,63944,63890],{"class":663},[637,63946,660],{"class":642},[637,63948,813],{"class":642},[637,63950,1918],{"class":650},[637,63952,657],{"class":642},[637,63954,660],{"class":642},[637,63956,2729],{"class":823},[637,63958,660],{"class":642},[637,63960,813],{"class":642},[637,63962,1491],{"class":650},[637,63964,657],{"class":642},[637,63966,660],{"class":642},[637,63968,1498],{"class":642},[637,63970,11706],{"class":823},[637,63972,1503],{"class":642},[637,63974,50242],{"class":823},[637,63976,1503],{"class":642},[637,63978,11706],{"class":823},[637,63980,1513],{"class":642},[637,63982,660],{"class":642},[637,63984,787],{"class":642},[637,63986,63987,63989,63991],{"class":639,"line":2838},[637,63988,909],{"class":642},[637,63990,761],{"class":646},[637,63992,669],{"class":642},[637,63994,63995,63997,63999],{"class":639,"line":2847},[637,63996,732],{"class":642},[637,63998,750],{"class":646},[637,64000,669],{"class":642},[504,64002,926],{"id":925},[931,64004,64005,64015],{},[934,64006,64007],{},[937,64008,64009,64011,64013],{},[940,64010,942],{"align":1001},[940,64012,945],{"align":1001},[940,64014,948],{},[950,64016,64017,64030,64045,64059],{},[937,64018,64019,64023,64026],{},[955,64020,64021],{"align":1001},[618,64022,29480],{},[955,64024,64025],{"align":1001},"Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory.",[955,64027,64028],{},[618,64029,58932],{},[937,64031,64032,64037,64040],{},[955,64033,64034],{"align":1001},[618,64035,64036],{},"maxPolyCount",[955,64038,64039],{"align":1001},"Maximum number of polygons to generate.",[955,64041,64042],{},[618,64043,64044],{},"10000",[937,64046,64047,64052,64055],{},[955,64048,64049],{"align":1001},[618,64050,64051],{},"enableUvs",[955,64053,64054],{"align":1001},"Whether UVs are enabled.",[955,64056,64057],{},[618,64058,975],{},[937,64060,64061,64066,64069],{},[955,64062,64063],{"align":1001},[618,64064,64065],{},"enableColors",[955,64067,64068],{"align":1001},"Whether vertex colors are enabled.",[955,64070,64071],{},[618,64072,975],{},[504,64074,64076],{"id":64075},"marchingcube-props","MarchingCube Props",[931,64078,64079,64089],{},[934,64080,64081],{},[937,64082,64083,64085,64087],{},[940,64084,942],{"align":1001},[940,64086,945],{"align":1001},[940,64088,948],{},[950,64090,64091,64105],{},[937,64092,64093,64098,64101],{},[955,64094,64095],{"align":1001},[618,64096,64097],{},"strength",[955,64099,64100],{"align":1001},"How strongly this cube affects the marching cube field.",[955,64102,64103],{},[618,64104,1545],{},[937,64106,64107,64112,64118],{},[955,64108,64109],{"align":1001},[618,64110,64111],{},"subtract",[955,64113,64114,64115,64117],{"align":1001},"How quickly strength moves to ",[618,64116,969],{}," over distance.",[955,64119,64120],{},[618,64121,11359],{},[504,64123,64125],{"id":64124},"marchingplane-props","MarchingPlane Props",[931,64127,64128,64138],{},[934,64129,64130],{},[937,64131,64132,64134,64136],{},[940,64133,942],{"align":1001},[940,64135,945],{"align":1001},[940,64137,948],{},[950,64139,64140,64158,64171],{},[937,64141,64142,64147,64153],{},[955,64143,64144],{"align":1001},[618,64145,64146],{},"planeType",[955,64148,64149,64150],{"align":1001},"Which axis the plane appears on. ",[618,64151,64152],{},"'x' | 'y' | 'z'",[955,64154,64155],{},[618,64156,64157],{},"'x'",[937,64159,64160,64164,64167],{},[955,64161,64162],{"align":1001},[618,64163,64097],{},[955,64165,64166],{"align":1001},"How strongly this plane affects the marching cube field.",[955,64168,64169],{},[618,64170,1545],{},[937,64172,64173,64177,64181],{},[955,64174,64175],{"align":1001},[618,64176,64111],{},[955,64178,64114,64179,64117],{"align":1001},[618,64180,969],{},[955,64182,64183],{},[618,64184,11359],{},[1331,64186,64187],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":576,"searchDepth":577,"depth":578,"links":64189},[64190,64191,64192,64193],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":64075,"depth":578,"text":64076},{"id":64124,"depth":578,"text":64125},"Create organic blob-like shapes using metaballs.",{},{"title":449,"description":64194},"dt9UUvCiy--PP6CSMtwwdcksel8iajosft8nxTQtolk",{"id":64199,"title":453,"body":64200,"description":65557,"extension":591,"links":592,"meta":65558,"navigation":594,"path":454,"seo":65559,"stem":455,"__hash__":65560},"docs\u002F2.api\u002F9.objects\u002Freflector.md",{"type":501,"value":64201,"toc":65550},[64202,64207,64221,64223,64486,64488,64571,64579,64583,64593,65231,65234,65237,65241,65547],[608,64203,64204],{},[64205,64206],"objects-reflector",{},[614,64208,2867,64209,64211,64212,64217,64218,64220],{},[618,64210,7526],{}," package provides an abstraction of the ",[1144,64213,64216],{"href":64214,"rel":64215},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fblob\u002Fdev\u002Fexamples\u002Fjsm\u002Fobjects\u002FReflector.js",[1148],"Reflector class",", which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from ",[618,64219,4455],{}," so all the default props can be passed as well:",[504,64222,15],{"id":624},[626,64224,64226],{"className":628,"code":64225,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 3]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003CSuspense>\n \u003CReflector\n :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n :position-y=\"-2\"\n color=\"#fff\"\n >\n \u003CTresCircleGeometry :args=\"[10, 10]\" \u002F>\n \u003C\u002FReflector>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,64227,64228,64248,64267,64275,64279,64287,64300,64332,64340,64344,64352,64359,64393,64409,64422,64426,64454,64462,64470,64478],{"__ignoreMap":576},[637,64229,64230,64232,64234,64236,64238,64240,64242,64244,64246],{"class":639,"line":577},[637,64231,643],{"class":642},[637,64233,647],{"class":646},[637,64235,651],{"class":650},[637,64237,654],{"class":650},[637,64239,657],{"class":642},[637,64241,660],{"class":642},[637,64243,664],{"class":663},[637,64245,660],{"class":642},[637,64247,669],{"class":642},[637,64249,64250,64252,64254,64257,64259,64261,64263,64265],{"class":639,"line":578},[637,64251,677],{"class":676},[637,64253,680],{"class":642},[637,64255,64256],{"class":683}," Reflector",[637,64258,693],{"class":642},[637,64260,696],{"class":676},[637,64262,699],{"class":642},[637,64264,702],{"class":663},[637,64266,705],{"class":642},[637,64268,64269,64271,64273],{"class":639,"line":708},[637,64270,732],{"class":642},[637,64272,647],{"class":646},[637,64274,669],{"class":642},[637,64276,64277],{"class":639,"line":729},[637,64278,742],{"emptyLinePlaceholder":594},[637,64280,64281,64283,64285],{"class":639,"line":739},[637,64282,643],{"class":642},[637,64284,750],{"class":646},[637,64286,669],{"class":642},[637,64288,64289,64291,64293,64295,64298],{"class":639,"line":745},[637,64290,758],{"class":642},[637,64292,761],{"class":646},[637,64294,45005],{"class":650},[637,64296,64297],{"class":650}," alpha",[637,64299,669],{"class":642},[637,64301,64302,64304,64306,64308,64310,64312,64314,64316,64318,64320,64322,64324,64326,64328,64330],{"class":639,"line":755},[637,64303,781],{"class":642},[637,64305,784],{"class":646},[637,64307,813],{"class":642},[637,64309,1491],{"class":650},[637,64311,657],{"class":642},[637,64313,660],{"class":642},[637,64315,1498],{"class":642},[637,64317,969],{"class":823},[637,64319,1503],{"class":642},[637,64321,969],{"class":823},[637,64323,1503],{"class":642},[637,64325,2729],{"class":823},[637,64327,1513],{"class":642},[637,64329,660],{"class":642},[637,64331,787],{"class":642},[637,64333,64334,64336,64338],{"class":639,"line":778},[637,64335,781],{"class":642},[637,64337,795],{"class":646},[637,64339,787],{"class":642},[637,64341,64342],{"class":639,"line":790},[637,64343,742],{"emptyLinePlaceholder":594},[637,64345,64346,64348,64350],{"class":639,"line":800},[637,64347,781],{"class":642},[637,64349,22688],{"class":646},[637,64351,669],{"class":642},[637,64353,64354,64356],{"class":639,"line":805},[637,64355,857],{"class":642},[637,64357,64358],{"class":646},"Reflector\n",[637,64360,64361,64363,64365,64367,64369,64371,64373,64375,64377,64379,64381,64383,64385,64387,64389,64391],{"class":639,"line":831},[637,64362,8241],{"class":642},[637,64364,5838],{"class":650},[637,64366,657],{"class":642},[637,64368,660],{"class":642},[637,64370,3947],{"class":642},[637,64372,29913],{"class":683},[637,64374,1150],{"class":642},[637,64376,29918],{"class":683},[637,64378,58759],{"class":642},[637,64380,1545],{"class":823},[637,64382,1503],{"class":642},[637,64384,969],{"class":823},[637,64386,1503],{"class":642},[637,64388,969],{"class":823},[637,64390,1513],{"class":642},[637,64392,3224],{"class":642},[637,64394,64395,64397,64399,64401,64403,64405,64407],{"class":639,"line":631},[637,64396,8241],{"class":642},[637,64398,2000],{"class":650},[637,64400,657],{"class":642},[637,64402,660],{"class":642},[637,64404,8776],{"class":642},[637,64406,824],{"class":823},[637,64408,3224],{"class":642},[637,64410,64411,64413,64415,64417,64420],{"class":639,"line":854},[637,64412,8943],{"class":650},[637,64414,657],{"class":642},[637,64416,660],{"class":642},[637,64418,64419],{"class":663},"#fff",[637,64421,3224],{"class":642},[637,64423,64424],{"class":639,"line":865},[637,64425,57143],{"class":642},[637,64427,64428,64430,64432,64434,64436,64438,64440,64442,64444,64446,64448,64450,64452],{"class":639,"line":876},[637,64429,868],{"class":642},[637,64431,10515],{"class":646},[637,64433,813],{"class":642},[637,64435,2021],{"class":650},[637,64437,657],{"class":642},[637,64439,660],{"class":642},[637,64441,1498],{"class":642},[637,64443,1510],{"class":823},[637,64445,1503],{"class":642},[637,64447,1510],{"class":823},[637,64449,1513],{"class":642},[637,64451,660],{"class":642},[637,64453,787],{"class":642},[637,64455,64456,64458,64460],{"class":639,"line":886},[637,64457,889],{"class":642},[637,64459,453],{"class":646},[637,64461,669],{"class":642},[637,64463,64464,64466,64468],{"class":639,"line":632},[637,64465,899],{"class":642},[637,64467,22688],{"class":646},[637,64469,669],{"class":642},[637,64471,64472,64474,64476],{"class":639,"line":906},[637,64473,909],{"class":642},[637,64475,761],{"class":646},[637,64477,669],{"class":642},[637,64479,64480,64482,64484],{"class":639,"line":916},[637,64481,732],{"class":642},[637,64483,750],{"class":646},[637,64485,669],{"class":642},[504,64487,926],{"id":925},[931,64489,64490,64500],{},[934,64491,64492],{},[937,64493,64494,64496,64498],{},[940,64495,942],{"align":1001},[940,64497,945],{"align":1001},[940,64499,948],{},[950,64501,64502,64514,64525,64536,64547,64559],{},[937,64503,64504,64508,64511],{},[955,64505,64506],{"align":1001},[1705,64507,7770],{},[955,64509,64510],{"align":1001},"The base color that's combine with the mirror effect",[955,64512,64513],{},"'#333'",[937,64515,64516,64520,64523],{},[955,64517,64518],{"align":1001},[1705,64519,48836],{},[955,64521,64522],{"align":1001},"the width of the texture to render on the mirror",[955,64524,29489],{},[937,64526,64527,64531,64534],{},[955,64528,64529],{"align":1001},[1705,64530,48853],{},[955,64532,64533],{"align":1001},"the height of the texture to render on the mirror",[955,64535,29489],{},[937,64537,64538,64542,64545],{},[955,64539,64540],{"align":1001},[1705,64541,48970],{},[955,64543,64544],{"align":1001},"to use the clipBias property",[955,64546,969],{},[937,64548,64549,64554,64557],{},[955,64550,64551],{"align":1001},[1705,64552,64553],{},"multisample",[955,64555,64556],{"align":1001},"how many samplers will be render",[955,64558,3900],{},[937,64560,64561,64566,64568],{},[955,64562,64563],{"align":1001},[1705,64564,64565],{},"shader",[955,64567,50814],{"align":1001},[955,64569,64570],{},"Reflector.ReflectorShader",[3292,64572,64573],{},[614,64574,64575,64576,64578],{},"All the props except the ",[618,64577,7770],{},", are not reactive",[504,64580,64582],{"id":64581},"custom-mirror-effect","Custom mirror effect",[614,64584,64585,64586,1503,64588,1723,64590,64592],{},"You can provide your own shader by passing a full shader object with ",[618,64587,27520],{},[618,64589,27493],{},[618,64591,27510],{},". The example below adds animated circular ripples emanating from the center of the surface, while preserving the color tint:",[626,64594,64596],{"className":628,"code":64595,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Reflector } from '@tresjs\u002Fcientos'\nimport { useLoop } from '@tresjs\u002Fcore'\nimport { shallowRef } from 'vue'\n\nconst reflectorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: \u002F* glsl *\u002F`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: \u002F* glsl *\u002F`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\n float blendOverlay(float base, float blend) {\n return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n }\n vec3 blendOverlay(vec3 base, vec3 blend) {\n return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n }\n void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = reflectorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CReflector\n ref=\"reflectorRef\"\n :rotation=\"[-Math.PI * 0.5, 0, 0]\"\n :position-y=\"-2\"\n color=\"#fff\"\n :shader=\"customShader\"\n >\n \u003CTresCircleGeometry :args=\"[10, 10]\" \u002F>\n \u003C\u002FReflector>\n\u003C\u002Ftemplate>\n",[618,64597,64598,64618,64636,64655,64673,64677,64690,64694,64705,64714,64730,64747,64764,64781,64785,64797,64802,64807,64812,64817,64822,64827,64832,64842,64853,64858,64863,64868,64872,64876,64881,64886,64891,64896,64901,64905,64909,64914,64919,64924,64929,64934,64939,64944,64949,64957,64961,64965,64982,64999,65028,65061,65067,65075,65079,65087,65093,65106,65140,65156,65168,65183,65187,65215,65223],{"__ignoreMap":576},[637,64599,64600,64602,64604,64606,64608,64610,64612,64614,64616],{"class":639,"line":577},[637,64601,643],{"class":642},[637,64603,647],{"class":646},[637,64605,651],{"class":650},[637,64607,654],{"class":650},[637,64609,657],{"class":642},[637,64611,660],{"class":642},[637,64613,664],{"class":663},[637,64615,660],{"class":642},[637,64617,669],{"class":642},[637,64619,64620,64622,64624,64626,64628,64630,64632,64634],{"class":639,"line":578},[637,64621,677],{"class":676},[637,64623,680],{"class":642},[637,64625,64256],{"class":683},[637,64627,693],{"class":642},[637,64629,696],{"class":676},[637,64631,699],{"class":642},[637,64633,702],{"class":663},[637,64635,705],{"class":642},[637,64637,64638,64640,64642,64645,64647,64649,64651,64653],{"class":639,"line":708},[637,64639,677],{"class":676},[637,64641,680],{"class":642},[637,64643,64644],{"class":683}," useLoop",[637,64646,693],{"class":642},[637,64648,696],{"class":676},[637,64650,699],{"class":642},[637,64652,724],{"class":663},[637,64654,705],{"class":642},[637,64656,64657,64659,64661,64663,64665,64667,64669,64671],{"class":639,"line":729},[637,64658,677],{"class":676},[637,64660,680],{"class":642},[637,64662,3591],{"class":683},[637,64664,693],{"class":642},[637,64666,696],{"class":676},[637,64668,699],{"class":642},[637,64670,633],{"class":663},[637,64672,705],{"class":642},[637,64674,64675],{"class":639,"line":739},[637,64676,742],{"emptyLinePlaceholder":594},[637,64678,64679,64681,64684,64686,64688],{"class":639,"line":745},[637,64680,2487],{"class":650},[637,64682,64683],{"class":683}," reflectorRef ",[637,64685,657],{"class":642},[637,64687,3591],{"class":2506},[637,64689,6744],{"class":683},[637,64691,64692],{"class":639,"line":755},[637,64693,742],{"emptyLinePlaceholder":594},[637,64695,64696,64698,64701,64703],{"class":639,"line":778},[637,64697,2487],{"class":650},[637,64699,64700],{"class":683}," customShader ",[637,64702,657],{"class":642},[637,64704,1208],{"class":642},[637,64706,64707,64710,64712],{"class":639,"line":790},[637,64708,64709],{"class":646}," uniforms",[637,64711,1222],{"class":642},[637,64713,1208],{"class":642},[637,64715,64716,64718,64720,64722,64724,64726,64728],{"class":639,"line":800},[637,64717,25361],{"class":646},[637,64719,1222],{"class":642},[637,64721,680],{"class":642},[637,64723,28179],{"class":646},[637,64725,1222],{"class":642},[637,64727,3741],{"class":642},[637,64729,7298],{"class":642},[637,64731,64732,64735,64737,64739,64741,64743,64745],{"class":639,"line":805},[637,64733,64734],{"class":646}," tDiffuse",[637,64736,1222],{"class":642},[637,64738,680],{"class":642},[637,64740,28179],{"class":646},[637,64742,1222],{"class":642},[637,64744,3741],{"class":642},[637,64746,7298],{"class":642},[637,64748,64749,64752,64754,64756,64758,64760,64762],{"class":639,"line":831},[637,64750,64751],{"class":646}," textureMatrix",[637,64753,1222],{"class":642},[637,64755,680],{"class":642},[637,64757,28179],{"class":646},[637,64759,1222],{"class":642},[637,64761,3741],{"class":642},[637,64763,7298],{"class":642},[637,64765,64766,64769,64771,64773,64775,64777,64779],{"class":639,"line":631},[637,64767,64768],{"class":646}," time",[637,64770,1222],{"class":642},[637,64772,680],{"class":642},[637,64774,28179],{"class":646},[637,64776,1222],{"class":642},[637,64778,2577],{"class":823},[637,64780,7298],{"class":642},[637,64782,64783],{"class":639,"line":854},[637,64784,2667],{"class":642},[637,64786,64787,64790,64792,64795],{"class":639,"line":865},[637,64788,64789],{"class":646}," vertexShader",[637,64791,1222],{"class":642},[637,64793,64794],{"class":1213}," \u002F* glsl *\u002F",[637,64796,23823],{"class":642},[637,64798,64799],{"class":639,"line":876},[637,64800,64801],{"class":663}," uniform mat4 textureMatrix;\n",[637,64803,64804],{"class":639,"line":886},[637,64805,64806],{"class":663}," varying vec4 vUv;\n",[637,64808,64809],{"class":639,"line":632},[637,64810,64811],{"class":663}," varying vec2 vPos;\n",[637,64813,64814],{"class":639,"line":906},[637,64815,64816],{"class":663}," void main() {\n",[637,64818,64819],{"class":639,"line":916},[637,64820,64821],{"class":663}," vUv = textureMatrix * vec4(position, 1.0);\n",[637,64823,64824],{"class":639,"line":2695},[637,64825,64826],{"class":663}," vPos = position.xy;\n",[637,64828,64829],{"class":639,"line":2704},[637,64830,64831],{"class":663}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[637,64833,64834,64837,64840],{"class":639,"line":2738},[637,64835,64836],{"class":663}," }",[637,64838,64839],{"class":642},"`",[637,64841,2560],{"class":642},[637,64843,64844,64847,64849,64851],{"class":639,"line":2747},[637,64845,64846],{"class":646}," fragmentShader",[637,64848,1222],{"class":642},[637,64850,64794],{"class":1213},[637,64852,23823],{"class":642},[637,64854,64855],{"class":639,"line":2756},[637,64856,64857],{"class":663}," uniform vec3 color;\n",[637,64859,64860],{"class":639,"line":2765},[637,64861,64862],{"class":663}," uniform sampler2D tDiffuse;\n",[637,64864,64865],{"class":639,"line":2787},[637,64866,64867],{"class":663}," uniform float time;\n",[637,64869,64870],{"class":639,"line":2838},[637,64871,64806],{"class":663},[637,64873,64874],{"class":639,"line":2847},[637,64875,64811],{"class":663},[637,64877,64878],{"class":639,"line":2856},[637,64879,64880],{"class":663}," float blendOverlay(float base, float blend) {\n",[637,64882,64883],{"class":639,"line":4058},[637,64884,64885],{"class":663}," return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n",[637,64887,64888],{"class":639,"line":4102},[637,64889,64890],{"class":663}," }\n",[637,64892,64893],{"class":639,"line":4129},[637,64894,64895],{"class":663}," vec3 blendOverlay(vec3 base, vec3 blend) {\n",[637,64897,64898],{"class":639,"line":4148},[637,64899,64900],{"class":663}," return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n",[637,64902,64903],{"class":639,"line":4189},[637,64904,64890],{"class":663},[637,64906,64907],{"class":639,"line":4198},[637,64908,64816],{"class":663},[637,64910,64911],{"class":639,"line":4207},[637,64912,64913],{"class":663}," float dist = length(vPos);\n",[637,64915,64916],{"class":639,"line":22477},[637,64917,64918],{"class":663}," float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n",[637,64920,64921],{"class":639,"line":22492},[637,64922,64923],{"class":663}," vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n",[637,64925,64926],{"class":639,"line":22507},[637,64927,64928],{"class":663}," vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n",[637,64930,64931],{"class":639,"line":22512},[637,64932,64933],{"class":663}," vec4 base = texture2DProj(tDiffuse, distortedUv);\n",[637,64935,64936],{"class":639,"line":22519},[637,64937,64938],{"class":663}," gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n",[637,64940,64941],{"class":639,"line":22524},[637,64942,64943],{"class":663}," #include \u003Ctonemapping_fragment>\n",[637,64945,64946],{"class":639,"line":22530},[637,64947,64948],{"class":663}," #include \u003Ccolorspace_fragment>\n",[637,64950,64951,64953,64955],{"class":639,"line":22551},[637,64952,64836],{"class":663},[637,64954,64839],{"class":642},[637,64956,2560],{"class":642},[637,64958,64959],{"class":639,"line":22557},[637,64960,1329],{"class":642},[637,64962,64963],{"class":639,"line":22564},[637,64964,742],{"emptyLinePlaceholder":594},[637,64966,64967,64969,64971,64974,64976,64978,64980],{"class":639,"line":22569},[637,64968,2487],{"class":650},[637,64970,680],{"class":642},[637,64972,64973],{"class":683}," onBeforeRender ",[637,64975,2500],{"class":642},[637,64977,2503],{"class":642},[637,64979,64644],{"class":2506},[637,64981,6744],{"class":683},[637,64983,64984,64987,64989,64991,64993,64995,64997],{"class":639,"line":22590},[637,64985,64986],{"class":2506},"onBeforeRender",[637,64988,2509],{"class":683},[637,64990,41955],{"class":642},[637,64992,41958],{"class":7047},[637,64994,41972],{"class":642},[637,64996,3770],{"class":650},[637,64998,1208],{"class":642},[637,65000,65001,65003,65006,65008,65011,65013,65015,65017,65019,65021,65023,65025],{"class":639,"line":22603},[637,65002,60472],{"class":650},[637,65004,65005],{"class":683}," uniforms",[637,65007,2503],{"class":642},[637,65009,65010],{"class":683}," reflectorRef",[637,65012,1150],{"class":642},[637,65014,3778],{"class":683},[637,65016,3781],{"class":642},[637,65018,9626],{"class":683},[637,65020,3781],{"class":642},[637,65022,5403],{"class":683},[637,65024,3781],{"class":642},[637,65026,65027],{"class":683},"uniforms\n",[637,65029,65030,65032,65034,65036,65038,65041,65043,65045,65047,65049,65051,65053,65055,65057,65059],{"class":639,"line":22629},[637,65031,22291],{"class":676},[637,65033,3167],{"class":646},[637,65035,27520],{"class":683},[637,65037,3781],{"class":642},[637,65039,65040],{"class":683},"time",[637,65042,4907],{"class":646},[637,65044,8709],{"class":642},[637,65046,65005],{"class":683},[637,65048,1150],{"class":642},[637,65050,65040],{"class":683},[637,65052,1150],{"class":642},[637,65054,3778],{"class":683},[637,65056,2503],{"class":642},[637,65058,41958],{"class":683},[637,65060,18700],{"class":642},[637,65062,65063,65065],{"class":639,"line":22634},[637,65064,2500],{"class":642},[637,65066,2520],{"class":683},[637,65068,65069,65071,65073],{"class":639,"line":22641},[637,65070,732],{"class":642},[637,65072,647],{"class":646},[637,65074,669],{"class":642},[637,65076,65077],{"class":639,"line":22650},[637,65078,742],{"emptyLinePlaceholder":594},[637,65080,65081,65083,65085],{"class":639,"line":22655},[637,65082,643],{"class":642},[637,65084,750],{"class":646},[637,65086,669],{"class":642},[637,65088,65089,65091],{"class":639,"line":22664},[637,65090,758],{"class":642},[637,65092,64358],{"class":646},[637,65094,65095,65097,65099,65101,65104],{"class":639,"line":22683},[637,65096,19460],{"class":650},[637,65098,657],{"class":642},[637,65100,660],{"class":642},[637,65102,65103],{"class":663},"reflectorRef",[637,65105,3224],{"class":642},[637,65107,65108,65110,65112,65114,65116,65118,65120,65122,65124,65126,65128,65130,65132,65134,65136,65138],{"class":639,"line":22693},[637,65109,5353],{"class":642},[637,65111,5838],{"class":650},[637,65113,657],{"class":642},[637,65115,660],{"class":642},[637,65117,3947],{"class":642},[637,65119,29913],{"class":683},[637,65121,1150],{"class":642},[637,65123,29918],{"class":683},[637,65125,58759],{"class":642},[637,65127,1545],{"class":823},[637,65129,1503],{"class":642},[637,65131,969],{"class":823},[637,65133,1503],{"class":642},[637,65135,969],{"class":823},[637,65137,1513],{"class":642},[637,65139,3224],{"class":642},[637,65141,65142,65144,65146,65148,65150,65152,65154],{"class":639,"line":22730},[637,65143,5353],{"class":642},[637,65145,2000],{"class":650},[637,65147,657],{"class":642},[637,65149,660],{"class":642},[637,65151,8776],{"class":642},[637,65153,824],{"class":823},[637,65155,3224],{"class":642},[637,65157,65158,65160,65162,65164,65166],{"class":639,"line":22739},[637,65159,25361],{"class":650},[637,65161,657],{"class":642},[637,65163,660],{"class":642},[637,65165,64419],{"class":663},[637,65167,3224],{"class":642},[637,65169,65170,65172,65174,65176,65178,65181],{"class":639,"line":22773},[637,65171,5353],{"class":642},[637,65173,64565],{"class":650},[637,65175,657],{"class":642},[637,65177,660],{"class":642},[637,65179,65180],{"class":683},"customShader",[637,65182,3224],{"class":642},[637,65184,65185],{"class":639,"line":22782},[637,65186,5376],{"class":642},[637,65188,65189,65191,65193,65195,65197,65199,65201,65203,65205,65207,65209,65211,65213],{"class":639,"line":22791},[637,65190,781],{"class":642},[637,65192,10515],{"class":646},[637,65194,813],{"class":642},[637,65196,2021],{"class":650},[637,65198,657],{"class":642},[637,65200,660],{"class":642},[637,65202,1498],{"class":642},[637,65204,1510],{"class":823},[637,65206,1503],{"class":642},[637,65208,1510],{"class":823},[637,65210,1513],{"class":642},[637,65212,660],{"class":642},[637,65214,787],{"class":642},[637,65216,65217,65219,65221],{"class":639,"line":22812},[637,65218,909],{"class":642},[637,65220,453],{"class":646},[637,65222,669],{"class":642},[637,65224,65225,65227,65229],{"class":639,"line":22870},[637,65226,732],{"class":642},[637,65228,750],{"class":646},[637,65230,669],{"class":642},[614,65232,65233],{},"The Reflector shader use the following configuration by default:",[614,65235,65236],{},"You can extend, modify or just play with them",[4215,65238,65240],{"id":65239},"default-shader","Default shader",[626,65242,65244],{"className":44419,"code":65243,"language":44421,"meta":576,"style":576},"const shader = {\n name: 'ReflectorShader',\n uniforms: {\n color: {\n value: null\n },\n tDiffuse: {\n value: null\n },\n textureMatrix: {\n value: null\n }\n },\n vertexShader: \u002F* glsl *\u002F`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n\n #include \u003Ccommon>\n #include \u003Clogdepthbuf_pars_vertex>\n\n void main() {\n vUv = textureMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n #include \u003Clogdepthbuf_vertex>\n\n }`,\n fragmentShader: \u002F* glsl *\u002F`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n varying vec4 vUv;\n\n #include \u003Clogdepthbuf_pars_fragment>\n\n float blendOverlay( float base, float blend ) {\n return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n }\n\n vec3 blendOverlay( vec3 base, vec3 blend ) {\n return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n }\n\n void main() {\n #include \u003Clogdepthbuf_fragment>\n\n vec4 base = texture2DProj( tDiffuse, vUv );\n gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`\n\n}\n",[618,65245,65246,65257,65273,65281,65289,65299,65304,65312,65320,65324,65332,65340,65344,65348,65358,65363,65368,65372,65377,65382,65386,65391,65396,65401,65405,65410,65414,65423,65433,65438,65443,65447,65451,65456,65460,65465,65470,65474,65478,65483,65488,65492,65496,65500,65505,65509,65514,65519,65523,65528,65533,65539,65543],{"__ignoreMap":576},[637,65247,65248,65250,65253,65255],{"class":639,"line":577},[637,65249,2487],{"class":650},[637,65251,65252],{"class":683}," shader ",[637,65254,657],{"class":642},[637,65256,1208],{"class":642},[637,65258,65259,65262,65264,65266,65269,65271],{"class":639,"line":578},[637,65260,65261],{"class":646}," name",[637,65263,1222],{"class":642},[637,65265,699],{"class":642},[637,65267,65268],{"class":663},"ReflectorShader",[637,65270,2512],{"class":642},[637,65272,2560],{"class":642},[637,65274,65275,65277,65279],{"class":639,"line":708},[637,65276,64709],{"class":646},[637,65278,1222],{"class":642},[637,65280,1208],{"class":642},[637,65282,65283,65285,65287],{"class":639,"line":729},[637,65284,25361],{"class":646},[637,65286,1222],{"class":642},[637,65288,1208],{"class":642},[637,65290,65291,65294,65296],{"class":639,"line":739},[637,65292,65293],{"class":646}," value",[637,65295,1222],{"class":642},[637,65297,65298],{"class":642}," null\n",[637,65300,65301],{"class":639,"line":745},[637,65302,65303],{"class":642}," },\n",[637,65305,65306,65308,65310],{"class":639,"line":755},[637,65307,64734],{"class":646},[637,65309,1222],{"class":642},[637,65311,1208],{"class":642},[637,65313,65314,65316,65318],{"class":639,"line":778},[637,65315,65293],{"class":646},[637,65317,1222],{"class":642},[637,65319,65298],{"class":642},[637,65321,65322],{"class":639,"line":790},[637,65323,65303],{"class":642},[637,65325,65326,65328,65330],{"class":639,"line":800},[637,65327,64751],{"class":646},[637,65329,1222],{"class":642},[637,65331,1208],{"class":642},[637,65333,65334,65336,65338],{"class":639,"line":805},[637,65335,65293],{"class":646},[637,65337,1222],{"class":642},[637,65339,65298],{"class":642},[637,65341,65342],{"class":639,"line":831},[637,65343,64890],{"class":642},[637,65345,65346],{"class":639,"line":631},[637,65347,2667],{"class":642},[637,65349,65350,65352,65354,65356],{"class":639,"line":854},[637,65351,64789],{"class":646},[637,65353,1222],{"class":642},[637,65355,64794],{"class":1213},[637,65357,23823],{"class":642},[637,65359,65360],{"class":639,"line":865},[637,65361,65362],{"class":663}," uniform mat4 textureMatrix;\n",[637,65364,65365],{"class":639,"line":876},[637,65366,65367],{"class":663}," varying vec4 vUv;\n",[637,65369,65370],{"class":639,"line":886},[637,65371,742],{"emptyLinePlaceholder":594},[637,65373,65374],{"class":639,"line":632},[637,65375,65376],{"class":663}," #include \u003Ccommon>\n",[637,65378,65379],{"class":639,"line":906},[637,65380,65381],{"class":663}," #include \u003Clogdepthbuf_pars_vertex>\n",[637,65383,65384],{"class":639,"line":916},[637,65385,742],{"emptyLinePlaceholder":594},[637,65387,65388],{"class":639,"line":2695},[637,65389,65390],{"class":663}," void main() {\n",[637,65392,65393],{"class":639,"line":2704},[637,65394,65395],{"class":663}," vUv = textureMatrix * vec4( position, 1.0 );\n",[637,65397,65398],{"class":639,"line":2738},[637,65399,65400],{"class":663}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[637,65402,65403],{"class":639,"line":2747},[637,65404,742],{"emptyLinePlaceholder":594},[637,65406,65407],{"class":639,"line":2756},[637,65408,65409],{"class":663}," #include \u003Clogdepthbuf_vertex>\n",[637,65411,65412],{"class":639,"line":2765},[637,65413,742],{"emptyLinePlaceholder":594},[637,65415,65416,65419,65421],{"class":639,"line":2787},[637,65417,65418],{"class":663}," }",[637,65420,64839],{"class":642},[637,65422,2560],{"class":642},[637,65424,65425,65427,65429,65431],{"class":639,"line":2838},[637,65426,64846],{"class":646},[637,65428,1222],{"class":642},[637,65430,64794],{"class":1213},[637,65432,23823],{"class":642},[637,65434,65435],{"class":639,"line":2847},[637,65436,65437],{"class":663}," uniform vec3 color;\n",[637,65439,65440],{"class":639,"line":2856},[637,65441,65442],{"class":663}," uniform sampler2D tDiffuse;\n",[637,65444,65445],{"class":639,"line":4058},[637,65446,65367],{"class":663},[637,65448,65449],{"class":639,"line":4102},[637,65450,742],{"emptyLinePlaceholder":594},[637,65452,65453],{"class":639,"line":4129},[637,65454,65455],{"class":663}," #include \u003Clogdepthbuf_pars_fragment>\n",[637,65457,65458],{"class":639,"line":4148},[637,65459,742],{"emptyLinePlaceholder":594},[637,65461,65462],{"class":639,"line":4189},[637,65463,65464],{"class":663}," float blendOverlay( float base, float blend ) {\n",[637,65466,65467],{"class":639,"line":4198},[637,65468,65469],{"class":663}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[637,65471,65472],{"class":639,"line":4207},[637,65473,8080],{"class":663},[637,65475,65476],{"class":639,"line":22477},[637,65477,742],{"emptyLinePlaceholder":594},[637,65479,65480],{"class":639,"line":22492},[637,65481,65482],{"class":663}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[637,65484,65485],{"class":639,"line":22507},[637,65486,65487],{"class":663}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[637,65489,65490],{"class":639,"line":22512},[637,65491,8080],{"class":663},[637,65493,65494],{"class":639,"line":22519},[637,65495,742],{"emptyLinePlaceholder":594},[637,65497,65498],{"class":639,"line":22524},[637,65499,65390],{"class":663},[637,65501,65502],{"class":639,"line":22530},[637,65503,65504],{"class":663}," #include \u003Clogdepthbuf_fragment>\n",[637,65506,65507],{"class":639,"line":22551},[637,65508,742],{"emptyLinePlaceholder":594},[637,65510,65511],{"class":639,"line":22557},[637,65512,65513],{"class":663}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[637,65515,65516],{"class":639,"line":22564},[637,65517,65518],{"class":663}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[637,65520,65521],{"class":639,"line":22569},[637,65522,742],{"emptyLinePlaceholder":594},[637,65524,65525],{"class":639,"line":22590},[637,65526,65527],{"class":663}," #include \u003Ctonemapping_fragment>\n",[637,65529,65530],{"class":639,"line":22603},[637,65531,65532],{"class":663}," #include \u003Ccolorspace_fragment>\n",[637,65534,65535,65537],{"class":639,"line":22629},[637,65536,65418],{"class":663},[637,65538,23823],{"class":642},[637,65540,65541],{"class":639,"line":22634},[637,65542,742],{"emptyLinePlaceholder":594},[637,65544,65545],{"class":639,"line":22641},[637,65546,1329],{"class":642},[1331,65548,65549],{},"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 .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":576,"searchDepth":577,"depth":578,"links":65551},[65552,65553,65554],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":64581,"depth":578,"text":64582,"children":65555},[65556],{"id":65239,"depth":708,"text":65240},"Create real-time reflections of your scene.",{},{"title":453,"description":65557},"hu0_cWNcLItstfep2oA3fWu44BIvehGORFbqaCgBRtM",{"id":65562,"title":457,"body":65563,"description":66777,"extension":591,"links":592,"meta":66778,"navigation":594,"path":458,"seo":66779,"stem":459,"__hash__":66780},"docs\u002F2.api\u002F9.objects\u002Frefractor.md",{"type":501,"value":65564,"toc":66770},[65565,65570,65583,65585,65868,65870,65964,65972,65976,65984,66533,66536,66538,66767],[608,65566,65567],{},[65568,65569],"objects-refractor",{},[614,65571,2867,65572,64211,65574,65579,65580,65582],{},[618,65573,7526],{},[1144,65575,65578],{"href":65576,"rel":65577},"https:\u002F\u002Fgithub.com\u002Fmrdoob\u002Fthree.js\u002Fblob\u002Fdev\u002Fexamples\u002Fjsm\u002Fobjects\u002FRefractor.js",[1148],"Refractor class",", which creates a Mesh that renders what is behind it with a refractive distortion effect — useful for glass panels, water surfaces, and other transmissive materials. This Mesh extends from ",[618,65581,4455],{}," so all the default props can be passed as well.",[504,65584,15],{"id":624},[626,65586,65588],{"className":628,"code":65587,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas shadows alpha>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 8]\" \u002F>\n \u003COrbitControls \u002F>\n\n \u003C!-- Place objects behind the refracting plane -->\n \u003CTresMesh :position=\"[-2, 0, -2]\">\n \u003CTresTorusKnotGeometry \u002F>\n \u003CTresMeshStandardMaterial color=\"hotpink\" \u002F>\n \u003C\u002FTresMesh>\n\n \u003CSuspense>\n \u003CRefractor color=\"#9ec8d4\">\n \u003CTresPlaneGeometry :args=\"[8, 5]\" \u002F>\n \u003C\u002FRefractor>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,65589,65590,65610,65629,65637,65641,65649,65661,65693,65701,65705,65710,65742,65750,65769,65777,65781,65789,65808,65836,65844,65852,65860],{"__ignoreMap":576},[637,65591,65592,65594,65596,65598,65600,65602,65604,65606,65608],{"class":639,"line":577},[637,65593,643],{"class":642},[637,65595,647],{"class":646},[637,65597,651],{"class":650},[637,65599,654],{"class":650},[637,65601,657],{"class":642},[637,65603,660],{"class":642},[637,65605,664],{"class":663},[637,65607,660],{"class":642},[637,65609,669],{"class":642},[637,65611,65612,65614,65616,65619,65621,65623,65625,65627],{"class":639,"line":578},[637,65613,677],{"class":676},[637,65615,680],{"class":642},[637,65617,65618],{"class":683}," Refractor",[637,65620,693],{"class":642},[637,65622,696],{"class":676},[637,65624,699],{"class":642},[637,65626,702],{"class":663},[637,65628,705],{"class":642},[637,65630,65631,65633,65635],{"class":639,"line":708},[637,65632,732],{"class":642},[637,65634,647],{"class":646},[637,65636,669],{"class":642},[637,65638,65639],{"class":639,"line":729},[637,65640,742],{"emptyLinePlaceholder":594},[637,65642,65643,65645,65647],{"class":639,"line":739},[637,65644,643],{"class":642},[637,65646,750],{"class":646},[637,65648,669],{"class":642},[637,65650,65651,65653,65655,65657,65659],{"class":639,"line":745},[637,65652,758],{"class":642},[637,65654,761],{"class":646},[637,65656,45005],{"class":650},[637,65658,64297],{"class":650},[637,65660,669],{"class":642},[637,65662,65663,65665,65667,65669,65671,65673,65675,65677,65679,65681,65683,65685,65687,65689,65691],{"class":639,"line":755},[637,65664,781],{"class":642},[637,65666,784],{"class":646},[637,65668,813],{"class":642},[637,65670,1491],{"class":650},[637,65672,657],{"class":642},[637,65674,660],{"class":642},[637,65676,1498],{"class":642},[637,65678,969],{"class":823},[637,65680,1503],{"class":642},[637,65682,824],{"class":823},[637,65684,1503],{"class":642},[637,65686,22756],{"class":823},[637,65688,1513],{"class":642},[637,65690,660],{"class":642},[637,65692,787],{"class":642},[637,65694,65695,65697,65699],{"class":639,"line":778},[637,65696,781],{"class":642},[637,65698,795],{"class":646},[637,65700,787],{"class":642},[637,65702,65703],{"class":639,"line":790},[637,65704,742],{"emptyLinePlaceholder":594},[637,65706,65707],{"class":639,"line":800},[637,65708,65709],{"class":1213}," \u003C!-- Place objects behind the refracting plane -->\n",[637,65711,65712,65714,65716,65718,65720,65722,65724,65726,65728,65730,65732,65734,65736,65738,65740],{"class":639,"line":805},[637,65713,781],{"class":642},[637,65715,860],{"class":646},[637,65717,813],{"class":642},[637,65719,1491],{"class":650},[637,65721,657],{"class":642},[637,65723,660],{"class":642},[637,65725,3947],{"class":642},[637,65727,824],{"class":823},[637,65729,1503],{"class":642},[637,65731,969],{"class":823},[637,65733,10090],{"class":642},[637,65735,824],{"class":823},[637,65737,1513],{"class":642},[637,65739,660],{"class":642},[637,65741,669],{"class":642},[637,65743,65744,65746,65748],{"class":639,"line":831},[637,65745,857],{"class":642},[637,65747,29343],{"class":646},[637,65749,787],{"class":642},[637,65751,65752,65754,65756,65758,65760,65762,65765,65767],{"class":639,"line":631},[637,65753,857],{"class":642},[637,65755,2770],{"class":646},[637,65757,2773],{"class":650},[637,65759,657],{"class":642},[637,65761,660],{"class":642},[637,65763,65764],{"class":663},"hotpink",[637,65766,660],{"class":642},[637,65768,787],{"class":642},[637,65770,65771,65773,65775],{"class":639,"line":854},[637,65772,899],{"class":642},[637,65774,860],{"class":646},[637,65776,669],{"class":642},[637,65778,65779],{"class":639,"line":865},[637,65780,742],{"emptyLinePlaceholder":594},[637,65782,65783,65785,65787],{"class":639,"line":876},[637,65784,781],{"class":642},[637,65786,22688],{"class":646},[637,65788,669],{"class":642},[637,65790,65791,65793,65795,65797,65799,65801,65804,65806],{"class":639,"line":886},[637,65792,857],{"class":642},[637,65794,457],{"class":646},[637,65796,2773],{"class":650},[637,65798,657],{"class":642},[637,65800,660],{"class":642},[637,65802,65803],{"class":663},"#9ec8d4",[637,65805,660],{"class":642},[637,65807,669],{"class":642},[637,65809,65810,65812,65814,65816,65818,65820,65822,65824,65826,65828,65830,65832,65834],{"class":639,"line":632},[637,65811,868],{"class":642},[637,65813,29235],{"class":646},[637,65815,813],{"class":642},[637,65817,2021],{"class":650},[637,65819,657],{"class":642},[637,65821,660],{"class":642},[637,65823,1498],{"class":642},[637,65825,22756],{"class":823},[637,65827,1503],{"class":642},[637,65829,7666],{"class":823},[637,65831,1513],{"class":642},[637,65833,660],{"class":642},[637,65835,787],{"class":642},[637,65837,65838,65840,65842],{"class":639,"line":906},[637,65839,889],{"class":642},[637,65841,457],{"class":646},[637,65843,669],{"class":642},[637,65845,65846,65848,65850],{"class":639,"line":916},[637,65847,899],{"class":642},[637,65849,22688],{"class":646},[637,65851,669],{"class":642},[637,65853,65854,65856,65858],{"class":639,"line":2695},[637,65855,909],{"class":642},[637,65857,761],{"class":646},[637,65859,669],{"class":642},[637,65861,65862,65864,65866],{"class":639,"line":2704},[637,65863,732],{"class":642},[637,65865,750],{"class":646},[637,65867,669],{"class":642},[504,65869,926],{"id":925},[931,65871,65872,65882],{},[934,65873,65874],{},[937,65875,65876,65878,65880],{},[940,65877,942],{"align":1001},[940,65879,945],{"align":1001},[940,65881,948],{},[950,65883,65884,65898,65911,65924,65937,65950],{},[937,65885,65886,65890,65893],{},[955,65887,65888],{"align":1001},[1705,65889,7770],{},[955,65891,65892],{"align":1001},"Color tint blended with the refracted image",[955,65894,65895],{},[618,65896,65897],{},"'#7f7f7f'",[937,65899,65900,65904,65907],{},[955,65901,65902],{"align":1001},[1705,65903,48836],{},[955,65905,65906],{"align":1001},"Width of the internal render target texture",[955,65908,65909],{},[618,65910,29489],{},[937,65912,65913,65917,65920],{},[955,65914,65915],{"align":1001},[1705,65916,48853],{},[955,65918,65919],{"align":1001},"Height of the internal render target texture",[955,65921,65922],{},[618,65923,29489],{},[937,65925,65926,65930,65933],{},[955,65927,65928],{"align":1001},[1705,65929,48970],{},[955,65931,65932],{"align":1001},"Clip bias for the virtual camera projection",[955,65934,65935],{},[618,65936,969],{},[937,65938,65939,65943,65946],{},[955,65940,65941],{"align":1001},[1705,65942,64553],{},[955,65944,65945],{"align":1001},"Number of MSAA samples for the render target",[955,65947,65948],{},[618,65949,3900],{},[937,65951,65952,65956,65959],{},[955,65953,65954],{"align":1001},[1705,65955,64565],{},[955,65957,65958],{"align":1001},"Custom shader object to override the built-in shader",[955,65960,65961],{},[618,65962,65963],{},"Refractor.RefractorShader",[3292,65965,65966],{},[614,65967,65968,65969,65971],{},"All the props except ",[618,65970,7770],{}," are not reactive",[504,65973,65975],{"id":65974},"custom-refraction-effect","Custom refraction effect",[614,65977,64585,65978,1503,65980,1723,65982,64592],{},[618,65979,27520],{},[618,65981,27493],{},[618,65983,27510],{},[626,65985,65987],{"className":628,"code":65986,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Refractor } from '@tresjs\u002Fcientos'\nimport { useLoop } from '@tresjs\u002Fcore'\nimport { shallowRef } from 'vue'\n\nconst refractorRef = shallowRef()\n\nconst customShader = {\n uniforms: {\n color: { value: null },\n tDiffuse: { value: null },\n textureMatrix: { value: null },\n time: { value: 0 },\n },\n vertexShader: \u002F* glsl *\u002F`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n varying vec2 vPos;\n void main() {\n vUv = textureMatrix * vec4(position, 1.0);\n vPos = position.xy;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }`,\n fragmentShader: \u002F* glsl *\u002F`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n uniform float time;\n varying vec4 vUv;\n varying vec2 vPos;\n float blendOverlay(float base, float blend) {\n return(base \u003C 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));\n }\n vec3 blendOverlay(vec3 base, vec3 blend) {\n return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g), blendOverlay(base.b, blend.b));\n }\n void main() {\n float dist = length(vPos);\n float wave = sin(dist * 6.0 - time * 4.0) * 0.02;\n vec2 dir = dist > 0.001 ? normalize(vPos) : vec2(0.0);\n vec4 distortedUv = vUv + vec4(dir * wave, 0.0, 0.0);\n vec4 base = texture2DProj(tDiffuse, distortedUv);\n gl_FragColor = vec4(blendOverlay(base.rgb, color), 1.0);\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`,\n}\n\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ elapsed }) => {\n const uniforms = refractorRef.value?.instance?.material?.uniforms\n if (uniforms?.time) { uniforms.time.value = elapsed }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CRefractor\n ref=\"refractorRef\"\n color=\"#9ec8d4\"\n :shader=\"customShader\"\n >\n \u003CTresPlaneGeometry :args=\"[8, 5]\" \u002F>\n \u003C\u002FRefractor>\n\u003C\u002Ftemplate>\n",[618,65988,65989,66009,66027,66045,66063,66067,66080,66084,66094,66102,66118,66134,66150,66166,66170,66180,66184,66188,66192,66196,66200,66204,66208,66216,66226,66230,66234,66238,66242,66246,66250,66254,66258,66262,66266,66270,66274,66278,66282,66286,66290,66294,66298,66302,66306,66314,66318,66322,66338,66354,66381,66413,66419,66427,66431,66439,66446,66459,66471,66485,66489,66517,66525],{"__ignoreMap":576},[637,65990,65991,65993,65995,65997,65999,66001,66003,66005,66007],{"class":639,"line":577},[637,65992,643],{"class":642},[637,65994,647],{"class":646},[637,65996,651],{"class":650},[637,65998,654],{"class":650},[637,66000,657],{"class":642},[637,66002,660],{"class":642},[637,66004,664],{"class":663},[637,66006,660],{"class":642},[637,66008,669],{"class":642},[637,66010,66011,66013,66015,66017,66019,66021,66023,66025],{"class":639,"line":578},[637,66012,677],{"class":676},[637,66014,680],{"class":642},[637,66016,65618],{"class":683},[637,66018,693],{"class":642},[637,66020,696],{"class":676},[637,66022,699],{"class":642},[637,66024,702],{"class":663},[637,66026,705],{"class":642},[637,66028,66029,66031,66033,66035,66037,66039,66041,66043],{"class":639,"line":708},[637,66030,677],{"class":676},[637,66032,680],{"class":642},[637,66034,64644],{"class":683},[637,66036,693],{"class":642},[637,66038,696],{"class":676},[637,66040,699],{"class":642},[637,66042,724],{"class":663},[637,66044,705],{"class":642},[637,66046,66047,66049,66051,66053,66055,66057,66059,66061],{"class":639,"line":729},[637,66048,677],{"class":676},[637,66050,680],{"class":642},[637,66052,3591],{"class":683},[637,66054,693],{"class":642},[637,66056,696],{"class":676},[637,66058,699],{"class":642},[637,66060,633],{"class":663},[637,66062,705],{"class":642},[637,66064,66065],{"class":639,"line":739},[637,66066,742],{"emptyLinePlaceholder":594},[637,66068,66069,66071,66074,66076,66078],{"class":639,"line":745},[637,66070,2487],{"class":650},[637,66072,66073],{"class":683}," refractorRef ",[637,66075,657],{"class":642},[637,66077,3591],{"class":2506},[637,66079,6744],{"class":683},[637,66081,66082],{"class":639,"line":755},[637,66083,742],{"emptyLinePlaceholder":594},[637,66085,66086,66088,66090,66092],{"class":639,"line":778},[637,66087,2487],{"class":650},[637,66089,64700],{"class":683},[637,66091,657],{"class":642},[637,66093,1208],{"class":642},[637,66095,66096,66098,66100],{"class":639,"line":790},[637,66097,64709],{"class":646},[637,66099,1222],{"class":642},[637,66101,1208],{"class":642},[637,66103,66104,66106,66108,66110,66112,66114,66116],{"class":639,"line":800},[637,66105,25361],{"class":646},[637,66107,1222],{"class":642},[637,66109,680],{"class":642},[637,66111,28179],{"class":646},[637,66113,1222],{"class":642},[637,66115,3741],{"class":642},[637,66117,7298],{"class":642},[637,66119,66120,66122,66124,66126,66128,66130,66132],{"class":639,"line":805},[637,66121,64734],{"class":646},[637,66123,1222],{"class":642},[637,66125,680],{"class":642},[637,66127,28179],{"class":646},[637,66129,1222],{"class":642},[637,66131,3741],{"class":642},[637,66133,7298],{"class":642},[637,66135,66136,66138,66140,66142,66144,66146,66148],{"class":639,"line":831},[637,66137,64751],{"class":646},[637,66139,1222],{"class":642},[637,66141,680],{"class":642},[637,66143,28179],{"class":646},[637,66145,1222],{"class":642},[637,66147,3741],{"class":642},[637,66149,7298],{"class":642},[637,66151,66152,66154,66156,66158,66160,66162,66164],{"class":639,"line":631},[637,66153,64768],{"class":646},[637,66155,1222],{"class":642},[637,66157,680],{"class":642},[637,66159,28179],{"class":646},[637,66161,1222],{"class":642},[637,66163,2577],{"class":823},[637,66165,7298],{"class":642},[637,66167,66168],{"class":639,"line":854},[637,66169,2667],{"class":642},[637,66171,66172,66174,66176,66178],{"class":639,"line":865},[637,66173,64789],{"class":646},[637,66175,1222],{"class":642},[637,66177,64794],{"class":1213},[637,66179,23823],{"class":642},[637,66181,66182],{"class":639,"line":876},[637,66183,64801],{"class":663},[637,66185,66186],{"class":639,"line":886},[637,66187,64806],{"class":663},[637,66189,66190],{"class":639,"line":632},[637,66191,64811],{"class":663},[637,66193,66194],{"class":639,"line":906},[637,66195,64816],{"class":663},[637,66197,66198],{"class":639,"line":916},[637,66199,64821],{"class":663},[637,66201,66202],{"class":639,"line":2695},[637,66203,64826],{"class":663},[637,66205,66206],{"class":639,"line":2704},[637,66207,64831],{"class":663},[637,66209,66210,66212,66214],{"class":639,"line":2738},[637,66211,64836],{"class":663},[637,66213,64839],{"class":642},[637,66215,2560],{"class":642},[637,66217,66218,66220,66222,66224],{"class":639,"line":2747},[637,66219,64846],{"class":646},[637,66221,1222],{"class":642},[637,66223,64794],{"class":1213},[637,66225,23823],{"class":642},[637,66227,66228],{"class":639,"line":2756},[637,66229,64857],{"class":663},[637,66231,66232],{"class":639,"line":2765},[637,66233,64862],{"class":663},[637,66235,66236],{"class":639,"line":2787},[637,66237,64867],{"class":663},[637,66239,66240],{"class":639,"line":2838},[637,66241,64806],{"class":663},[637,66243,66244],{"class":639,"line":2847},[637,66245,64811],{"class":663},[637,66247,66248],{"class":639,"line":2856},[637,66249,64880],{"class":663},[637,66251,66252],{"class":639,"line":4058},[637,66253,64885],{"class":663},[637,66255,66256],{"class":639,"line":4102},[637,66257,64890],{"class":663},[637,66259,66260],{"class":639,"line":4129},[637,66261,64895],{"class":663},[637,66263,66264],{"class":639,"line":4148},[637,66265,64900],{"class":663},[637,66267,66268],{"class":639,"line":4189},[637,66269,64890],{"class":663},[637,66271,66272],{"class":639,"line":4198},[637,66273,64816],{"class":663},[637,66275,66276],{"class":639,"line":4207},[637,66277,64913],{"class":663},[637,66279,66280],{"class":639,"line":22477},[637,66281,64918],{"class":663},[637,66283,66284],{"class":639,"line":22492},[637,66285,64923],{"class":663},[637,66287,66288],{"class":639,"line":22507},[637,66289,64928],{"class":663},[637,66291,66292],{"class":639,"line":22512},[637,66293,64933],{"class":663},[637,66295,66296],{"class":639,"line":22519},[637,66297,64938],{"class":663},[637,66299,66300],{"class":639,"line":22524},[637,66301,64943],{"class":663},[637,66303,66304],{"class":639,"line":22530},[637,66305,64948],{"class":663},[637,66307,66308,66310,66312],{"class":639,"line":22551},[637,66309,64836],{"class":663},[637,66311,64839],{"class":642},[637,66313,2560],{"class":642},[637,66315,66316],{"class":639,"line":22557},[637,66317,1329],{"class":642},[637,66319,66320],{"class":639,"line":22564},[637,66321,742],{"emptyLinePlaceholder":594},[637,66323,66324,66326,66328,66330,66332,66334,66336],{"class":639,"line":22569},[637,66325,2487],{"class":650},[637,66327,680],{"class":642},[637,66329,64973],{"class":683},[637,66331,2500],{"class":642},[637,66333,2503],{"class":642},[637,66335,64644],{"class":2506},[637,66337,6744],{"class":683},[637,66339,66340,66342,66344,66346,66348,66350,66352],{"class":639,"line":22590},[637,66341,64986],{"class":2506},[637,66343,2509],{"class":683},[637,66345,41955],{"class":642},[637,66347,41958],{"class":7047},[637,66349,41972],{"class":642},[637,66351,3770],{"class":650},[637,66353,1208],{"class":642},[637,66355,66356,66358,66360,66362,66365,66367,66369,66371,66373,66375,66377,66379],{"class":639,"line":22603},[637,66357,60472],{"class":650},[637,66359,65005],{"class":683},[637,66361,2503],{"class":642},[637,66363,66364],{"class":683}," refractorRef",[637,66366,1150],{"class":642},[637,66368,3778],{"class":683},[637,66370,3781],{"class":642},[637,66372,9626],{"class":683},[637,66374,3781],{"class":642},[637,66376,5403],{"class":683},[637,66378,3781],{"class":642},[637,66380,65027],{"class":683},[637,66382,66383,66385,66387,66389,66391,66393,66395,66397,66399,66401,66403,66405,66407,66409,66411],{"class":639,"line":22629},[637,66384,22291],{"class":676},[637,66386,3167],{"class":646},[637,66388,27520],{"class":683},[637,66390,3781],{"class":642},[637,66392,65040],{"class":683},[637,66394,4907],{"class":646},[637,66396,8709],{"class":642},[637,66398,65005],{"class":683},[637,66400,1150],{"class":642},[637,66402,65040],{"class":683},[637,66404,1150],{"class":642},[637,66406,3778],{"class":683},[637,66408,2503],{"class":642},[637,66410,41958],{"class":683},[637,66412,18700],{"class":642},[637,66414,66415,66417],{"class":639,"line":22634},[637,66416,2500],{"class":642},[637,66418,2520],{"class":683},[637,66420,66421,66423,66425],{"class":639,"line":22641},[637,66422,732],{"class":642},[637,66424,647],{"class":646},[637,66426,669],{"class":642},[637,66428,66429],{"class":639,"line":22650},[637,66430,742],{"emptyLinePlaceholder":594},[637,66432,66433,66435,66437],{"class":639,"line":22655},[637,66434,643],{"class":642},[637,66436,750],{"class":646},[637,66438,669],{"class":642},[637,66440,66441,66443],{"class":639,"line":22664},[637,66442,758],{"class":642},[637,66444,66445],{"class":646},"Refractor\n",[637,66447,66448,66450,66452,66454,66457],{"class":639,"line":22683},[637,66449,19460],{"class":650},[637,66451,657],{"class":642},[637,66453,660],{"class":642},[637,66455,66456],{"class":663},"refractorRef",[637,66458,3224],{"class":642},[637,66460,66461,66463,66465,66467,66469],{"class":639,"line":22693},[637,66462,25361],{"class":650},[637,66464,657],{"class":642},[637,66466,660],{"class":642},[637,66468,65803],{"class":663},[637,66470,3224],{"class":642},[637,66472,66473,66475,66477,66479,66481,66483],{"class":639,"line":22730},[637,66474,5353],{"class":642},[637,66476,64565],{"class":650},[637,66478,657],{"class":642},[637,66480,660],{"class":642},[637,66482,65180],{"class":683},[637,66484,3224],{"class":642},[637,66486,66487],{"class":639,"line":22739},[637,66488,5376],{"class":642},[637,66490,66491,66493,66495,66497,66499,66501,66503,66505,66507,66509,66511,66513,66515],{"class":639,"line":22773},[637,66492,781],{"class":642},[637,66494,29235],{"class":646},[637,66496,813],{"class":642},[637,66498,2021],{"class":650},[637,66500,657],{"class":642},[637,66502,660],{"class":642},[637,66504,1498],{"class":642},[637,66506,22756],{"class":823},[637,66508,1503],{"class":642},[637,66510,7666],{"class":823},[637,66512,1513],{"class":642},[637,66514,660],{"class":642},[637,66516,787],{"class":642},[637,66518,66519,66521,66523],{"class":639,"line":22782},[637,66520,909],{"class":642},[637,66522,457],{"class":646},[637,66524,669],{"class":642},[637,66526,66527,66529,66531],{"class":639,"line":22791},[637,66528,732],{"class":642},[637,66530,750],{"class":646},[637,66532,669],{"class":642},[614,66534,66535],{},"The Refractor shader uses the following configuration by default:",[4215,66537,65240],{"id":65239},[626,66539,66541],{"className":44419,"code":66540,"language":44421,"meta":576,"style":576},"const shader = {\n uniforms: {\n color: {\n value: null\n },\n tDiffuse: {\n value: null\n },\n textureMatrix: {\n value: null\n }\n },\n vertexShader: \u002F* glsl *\u002F`\n uniform mat4 textureMatrix;\n varying vec4 vUv;\n\n void main() {\n vUv = textureMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }`,\n fragmentShader: \u002F* glsl *\u002F`\n uniform vec3 color;\n uniform sampler2D tDiffuse;\n varying vec4 vUv;\n\n float blendOverlay( float base, float blend ) {\n return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n }\n\n vec3 blendOverlay( vec3 base, vec3 blend ) {\n return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n }\n\n void main() {\n vec4 base = texture2DProj( tDiffuse, vUv );\n gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n\n #include \u003Ctonemapping_fragment>\n #include \u003Ccolorspace_fragment>\n }`\n}\n",[618,66542,66543,66553,66561,66569,66577,66581,66589,66597,66601,66609,66617,66621,66625,66635,66639,66643,66647,66651,66656,66661,66669,66679,66683,66687,66691,66695,66700,66705,66709,66713,66718,66723,66727,66731,66735,66740,66745,66749,66753,66757,66763],{"__ignoreMap":576},[637,66544,66545,66547,66549,66551],{"class":639,"line":577},[637,66546,2487],{"class":650},[637,66548,65252],{"class":683},[637,66550,657],{"class":642},[637,66552,1208],{"class":642},[637,66554,66555,66557,66559],{"class":639,"line":578},[637,66556,64709],{"class":646},[637,66558,1222],{"class":642},[637,66560,1208],{"class":642},[637,66562,66563,66565,66567],{"class":639,"line":708},[637,66564,25361],{"class":646},[637,66566,1222],{"class":642},[637,66568,1208],{"class":642},[637,66570,66571,66573,66575],{"class":639,"line":729},[637,66572,65293],{"class":646},[637,66574,1222],{"class":642},[637,66576,65298],{"class":642},[637,66578,66579],{"class":639,"line":739},[637,66580,65303],{"class":642},[637,66582,66583,66585,66587],{"class":639,"line":745},[637,66584,64734],{"class":646},[637,66586,1222],{"class":642},[637,66588,1208],{"class":642},[637,66590,66591,66593,66595],{"class":639,"line":755},[637,66592,65293],{"class":646},[637,66594,1222],{"class":642},[637,66596,65298],{"class":642},[637,66598,66599],{"class":639,"line":778},[637,66600,65303],{"class":642},[637,66602,66603,66605,66607],{"class":639,"line":790},[637,66604,64751],{"class":646},[637,66606,1222],{"class":642},[637,66608,1208],{"class":642},[637,66610,66611,66613,66615],{"class":639,"line":800},[637,66612,65293],{"class":646},[637,66614,1222],{"class":642},[637,66616,65298],{"class":642},[637,66618,66619],{"class":639,"line":805},[637,66620,64890],{"class":642},[637,66622,66623],{"class":639,"line":831},[637,66624,2667],{"class":642},[637,66626,66627,66629,66631,66633],{"class":639,"line":631},[637,66628,64789],{"class":646},[637,66630,1222],{"class":642},[637,66632,64794],{"class":1213},[637,66634,23823],{"class":642},[637,66636,66637],{"class":639,"line":854},[637,66638,64801],{"class":663},[637,66640,66641],{"class":639,"line":865},[637,66642,64806],{"class":663},[637,66644,66645],{"class":639,"line":876},[637,66646,742],{"emptyLinePlaceholder":594},[637,66648,66649],{"class":639,"line":886},[637,66650,64816],{"class":663},[637,66652,66653],{"class":639,"line":632},[637,66654,66655],{"class":663}," vUv = textureMatrix * vec4( position, 1.0 );\n",[637,66657,66658],{"class":639,"line":906},[637,66659,66660],{"class":663}," gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n",[637,66662,66663,66665,66667],{"class":639,"line":916},[637,66664,64836],{"class":663},[637,66666,64839],{"class":642},[637,66668,2560],{"class":642},[637,66670,66671,66673,66675,66677],{"class":639,"line":2695},[637,66672,64846],{"class":646},[637,66674,1222],{"class":642},[637,66676,64794],{"class":1213},[637,66678,23823],{"class":642},[637,66680,66681],{"class":639,"line":2704},[637,66682,64857],{"class":663},[637,66684,66685],{"class":639,"line":2738},[637,66686,64862],{"class":663},[637,66688,66689],{"class":639,"line":2747},[637,66690,64806],{"class":663},[637,66692,66693],{"class":639,"line":2756},[637,66694,742],{"emptyLinePlaceholder":594},[637,66696,66697],{"class":639,"line":2765},[637,66698,66699],{"class":663}," float blendOverlay( float base, float blend ) {\n",[637,66701,66702],{"class":639,"line":2787},[637,66703,66704],{"class":663}," return( base \u003C 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );\n",[637,66706,66707],{"class":639,"line":2838},[637,66708,64890],{"class":663},[637,66710,66711],{"class":639,"line":2847},[637,66712,742],{"emptyLinePlaceholder":594},[637,66714,66715],{"class":639,"line":2856},[637,66716,66717],{"class":663}," vec3 blendOverlay( vec3 base, vec3 blend ) {\n",[637,66719,66720],{"class":639,"line":4058},[637,66721,66722],{"class":663}," return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );\n",[637,66724,66725],{"class":639,"line":4102},[637,66726,64890],{"class":663},[637,66728,66729],{"class":639,"line":4129},[637,66730,742],{"emptyLinePlaceholder":594},[637,66732,66733],{"class":639,"line":4148},[637,66734,64816],{"class":663},[637,66736,66737],{"class":639,"line":4189},[637,66738,66739],{"class":663}," vec4 base = texture2DProj( tDiffuse, vUv );\n",[637,66741,66742],{"class":639,"line":4198},[637,66743,66744],{"class":663}," gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );\n",[637,66746,66747],{"class":639,"line":4207},[637,66748,742],{"emptyLinePlaceholder":594},[637,66750,66751],{"class":639,"line":22477},[637,66752,64943],{"class":663},[637,66754,66755],{"class":639,"line":22492},[637,66756,64948],{"class":663},[637,66758,66759,66761],{"class":639,"line":22507},[637,66760,64836],{"class":663},[637,66762,23823],{"class":642},[637,66764,66765],{"class":639,"line":22512},[637,66766,1329],{"class":642},[1331,66768,66769],{},"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 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 .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 .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":576,"searchDepth":577,"depth":578,"links":66771},[66772,66773,66774],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":65974,"depth":578,"text":65975,"children":66775},[66776],{"id":65239,"depth":708,"text":65240},"Create real-time refractive (glass-like) surfaces in your scene.",{},{"title":457,"description":66777},"0S_zvDpr4VfCZrIb3n88oUTHkrLHsw7pJnIv_3ITHzM",{"id":66782,"title":461,"body":66783,"description":67321,"extension":591,"links":592,"meta":67322,"navigation":594,"path":462,"seo":67323,"stem":463,"__hash__":67324},"docs\u002F2.api\u002F9.objects\u002Ftext-3d.md",{"type":501,"value":66784,"toc":67317},[66785,66790,66801,66803,66822,66929,66944,67037,67040,67158,67160,67314],[608,66786,66787],{},[66788,66789],"objects-text",{},[614,66791,66792,66795,66796,38833],{},[618,66793,66794],{},"\u003CText3D \u002F>"," is a component that renders text in 3D. It is a wrapper around the ",[1144,66797,66800],{"href":66798,"rel":66799},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fgeometries\u002FTextGeometry",[1148],"TextGeometry",[504,66802,15],{"id":624},[614,66804,66805,66806,66808,66809,66812,66813,66816,66817],{},"To use the ",[618,66807,66794],{}," component you need to pass the ",[618,66810,66811],{},"font"," prop with the URL of the font JSON file you want to use. TextGeometry uses ",[618,66814,66815],{},"typeface",".json generated fonts, you can generate yours ",[1144,66818,66821],{"href":66819,"rel":66820},"http:\u002F\u002Fgero3.github.io\u002Ffacetype.js\u002F",[1148],"here",[626,66823,66825],{"className":628,"code":66824,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D\n text=\"TresJS\"\n font=\"\u002Ffonts\u002FFiraCodeRegular.json\"\n >\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FText3D>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,66826,66827,66835,66843,66851,66858,66871,66885,66889,66897,66905,66913,66921],{"__ignoreMap":576},[637,66828,66829,66831,66833],{"class":639,"line":577},[637,66830,643],{"class":642},[637,66832,750],{"class":646},[637,66834,669],{"class":642},[637,66836,66837,66839,66841],{"class":639,"line":578},[637,66838,758],{"class":642},[637,66840,761],{"class":646},[637,66842,669],{"class":642},[637,66844,66845,66847,66849],{"class":639,"line":708},[637,66846,781],{"class":642},[637,66848,22688],{"class":646},[637,66850,669],{"class":642},[637,66852,66853,66855],{"class":639,"line":729},[637,66854,857],{"class":642},[637,66856,66857],{"class":646},"Text3D\n",[637,66859,66860,66863,66865,66867,66869],{"class":639,"line":739},[637,66861,66862],{"class":650}," text",[637,66864,657],{"class":642},[637,66866,660],{"class":642},[637,66868,17800],{"class":663},[637,66870,3224],{"class":642},[637,66872,66873,66876,66878,66880,66883],{"class":639,"line":745},[637,66874,66875],{"class":650}," font",[637,66877,657],{"class":642},[637,66879,660],{"class":642},[637,66881,66882],{"class":663},"\u002Ffonts\u002FFiraCodeRegular.json",[637,66884,3224],{"class":642},[637,66886,66887],{"class":639,"line":755},[637,66888,57143],{"class":642},[637,66890,66891,66893,66895],{"class":639,"line":778},[637,66892,868],{"class":642},[637,66894,881],{"class":646},[637,66896,787],{"class":642},[637,66898,66899,66901,66903],{"class":639,"line":790},[637,66900,889],{"class":642},[637,66902,461],{"class":646},[637,66904,669],{"class":642},[637,66906,66907,66909,66911],{"class":639,"line":800},[637,66908,899],{"class":642},[637,66910,22688],{"class":646},[637,66912,669],{"class":642},[637,66914,66915,66917,66919],{"class":639,"line":805},[637,66916,909],{"class":642},[637,66918,761],{"class":646},[637,66920,669],{"class":642},[637,66922,66923,66925,66927],{"class":639,"line":831},[637,66924,732],{"class":642},[637,66926,750],{"class":646},[637,66928,669],{"class":642},[614,66930,66931,66932,66935,66936,66938,66939,4467,66941,66943],{},"Notice that you need to pass the ",[618,66933,66934],{},"\u003CTresMeshNormalMaterial \u002F>"," component as a child of the ",[618,66937,66794],{}," component. This is because ",[618,66940,66794],{},[618,66942,4455],{}," component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:",[626,66945,66947],{"className":628,"code":66946,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D font=\"\u002Ffonts\u002FFiraCodeRegular.json\">\n TresJS\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FText3D>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,66948,66949,66957,66965,66973,66992,66997,67005,67013,67021,67029],{"__ignoreMap":576},[637,66950,66951,66953,66955],{"class":639,"line":577},[637,66952,643],{"class":642},[637,66954,750],{"class":646},[637,66956,669],{"class":642},[637,66958,66959,66961,66963],{"class":639,"line":578},[637,66960,758],{"class":642},[637,66962,761],{"class":646},[637,66964,669],{"class":642},[637,66966,66967,66969,66971],{"class":639,"line":708},[637,66968,781],{"class":642},[637,66970,22688],{"class":646},[637,66972,669],{"class":642},[637,66974,66975,66977,66979,66982,66984,66986,66988,66990],{"class":639,"line":729},[637,66976,857],{"class":642},[637,66978,461],{"class":646},[637,66980,66981],{"class":650}," font",[637,66983,657],{"class":642},[637,66985,660],{"class":642},[637,66987,66882],{"class":663},[637,66989,660],{"class":642},[637,66991,669],{"class":642},[637,66993,66994],{"class":639,"line":739},[637,66995,66996],{"class":683}," TresJS\n",[637,66998,66999,67001,67003],{"class":639,"line":745},[637,67000,868],{"class":642},[637,67002,881],{"class":646},[637,67004,787],{"class":642},[637,67006,67007,67009,67011],{"class":639,"line":755},[637,67008,889],{"class":642},[637,67010,461],{"class":646},[637,67012,669],{"class":642},[637,67014,67015,67017,67019],{"class":639,"line":778},[637,67016,899],{"class":642},[637,67018,22688],{"class":646},[637,67020,669],{"class":642},[637,67022,67023,67025,67027],{"class":639,"line":790},[637,67024,909],{"class":642},[637,67026,761],{"class":646},[637,67028,669],{"class":642},[637,67030,67031,67033,67035],{"class":639,"line":800},[637,67032,732],{"class":642},[637,67034,750],{"class":646},[637,67036,669],{"class":642},[614,67038,67039],{},"In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update",[626,67041,67043],{"className":628,"code":67042,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003Cinput v-model=\"myReactiveText\" \u002F>\n \u003CTresCanvas>\n \u003CSuspense>\n \u003CText3D\n :text=\"myReactiveText\"\n font=\"\u002Ffonts\u002FFiraCodeRegular.json\"\n center\n need-updates\n \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,67044,67045,67053,67073,67081,67089,67095,67109,67121,67125,67130,67134,67142,67150],{"__ignoreMap":576},[637,67046,67047,67049,67051],{"class":639,"line":577},[637,67048,643],{"class":642},[637,67050,750],{"class":646},[637,67052,669],{"class":642},[637,67054,67055,67057,67060,67062,67064,67066,67069,67071],{"class":639,"line":578},[637,67056,758],{"class":642},[637,67058,67059],{"class":646},"input",[637,67061,2806],{"class":650},[637,67063,657],{"class":642},[637,67065,660],{"class":642},[637,67067,67068],{"class":663},"myReactiveText",[637,67070,660],{"class":642},[637,67072,787],{"class":642},[637,67074,67075,67077,67079],{"class":639,"line":708},[637,67076,758],{"class":642},[637,67078,761],{"class":646},[637,67080,669],{"class":642},[637,67082,67083,67085,67087],{"class":639,"line":729},[637,67084,781],{"class":642},[637,67086,22688],{"class":646},[637,67088,669],{"class":642},[637,67090,67091,67093],{"class":639,"line":739},[637,67092,857],{"class":642},[637,67094,66857],{"class":646},[637,67096,67097,67099,67101,67103,67105,67107],{"class":639,"line":745},[637,67098,8241],{"class":642},[637,67100,32048],{"class":650},[637,67102,657],{"class":642},[637,67104,660],{"class":642},[637,67106,67068],{"class":683},[637,67108,3224],{"class":642},[637,67110,67111,67113,67115,67117,67119],{"class":639,"line":755},[637,67112,66875],{"class":650},[637,67114,657],{"class":642},[637,67116,660],{"class":642},[637,67118,66882],{"class":663},[637,67120,3224],{"class":642},[637,67122,67123],{"class":639,"line":778},[637,67124,57062],{"class":650},[637,67126,67127],{"class":639,"line":790},[637,67128,67129],{"class":650}," need-updates\n",[637,67131,67132],{"class":639,"line":800},[637,67133,8295],{"class":642},[637,67135,67136,67138,67140],{"class":639,"line":805},[637,67137,899],{"class":642},[637,67139,22688],{"class":646},[637,67141,669],{"class":642},[637,67143,67144,67146,67148],{"class":639,"line":831},[637,67145,909],{"class":642},[637,67147,761],{"class":646},[637,67149,669],{"class":642},[637,67151,67152,67154,67156],{"class":639,"line":631},[637,67153,732],{"class":642},[637,67155,750],{"class":646},[637,67157,669],{"class":642},[504,67159,926],{"id":925},[931,67161,67162,67172],{},[934,67163,67164],{},[937,67165,67166,67168,67170],{},[940,67167,942],{"align":1001},[940,67169,945],{"align":1001},[940,67171,948],{},[950,67173,67174,67185,67196,67207,67218,67230,67242,67254,67267,67279,67291,67302],{},[937,67175,67176,67180,67183],{},[955,67177,67178],{"align":1001},[1705,67179,66811],{},[955,67181,67182],{"align":1001},"The font data or font name to use for the text.",[955,67184],{},[937,67186,67187,67191,67194],{},[955,67188,67189],{"align":1001},[1705,67190,32048],{},[955,67192,67193],{"align":1001},"The text to display.",[955,67195],{},[937,67197,67198,67202,67205],{},[955,67199,67200],{"align":1001},[1705,67201,17604],{},[955,67203,67204],{"align":1001},"The size of the text.",[955,67206,1545],{},[937,67208,67209,67213,67216],{},[955,67210,67211],{"align":1001},[1705,67212,43253],{},[955,67214,67215],{"align":1001},"The height of the text.",[955,67217,5938],{},[937,67219,67220,67225,67228],{},[955,67221,67222],{"align":1001},[1705,67223,67224],{},"curveSegments",[955,67226,67227],{"align":1001},"The number of curve segments to use when generating the text geometry.",[955,67229,7666],{},[937,67231,67232,67237,67240],{},[955,67233,67234],{"align":1001},[1705,67235,67236],{},"bevelEnabled",[955,67238,67239],{"align":1001},"A flag indicating whether beveling should be enabled for the text.",[955,67241,965],{},[937,67243,67244,67249,67252],{},[955,67245,67246],{"align":1001},[1705,67247,67248],{},"bevelThickness",[955,67250,67251],{"align":1001},"The thickness of the beveled edge on the text.",[955,67253,12210],{},[937,67255,67256,67261,67264],{},[955,67257,67258],{"align":1001},[1705,67259,67260],{},"bevelSize",[955,67262,67263],{"align":1001},"The size of the beveled edge on the text.",[955,67265,67266],{},"0.02",[937,67268,67269,67274,67277],{},[955,67270,67271],{"align":1001},[1705,67272,67273],{},"bevelOffset",[955,67275,67276],{"align":1001},"The offset of the beveled edge on the text.",[955,67278,969],{},[937,67280,67281,67286,67289],{},[955,67282,67283],{"align":1001},[1705,67284,67285],{},"bevelSegments",[955,67287,67288],{"align":1001},"The number of bevel segments to use when generating the text geometry.",[955,67290,3900],{},[937,67292,67293,67297,67300],{},[955,67294,67295],{"align":1001},[1705,67296,30879],{},[955,67298,67299],{"align":1001},"To center the text",[955,67301,975],{},[937,67303,67304,67309,67312],{},[955,67305,67306],{"align":1001},[1705,67307,67308],{},"needUpdates",[955,67310,67311],{"align":1001},"This props add reactivity",[955,67313,975],{},[1331,67315,67316],{},"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":576,"searchDepth":577,"depth":578,"links":67318},[67319,67320],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Render text in 3D using TextGeometry.",{},{"title":461,"description":67321},"rgS8k9FiKuZ8-M_ZsYlXXXkyBY7nAGEzt1AefjUv4W0",[67326,67900,68209,68617,69688,70321,70970],{"id":67327,"title":471,"body":67328,"description":67896,"extension":591,"links":592,"meta":67897,"navigation":594,"path":472,"seo":67898,"stem":473,"__hash__":67899},"docs\u002F2.api\u002Fmiscellaneous\u002Fbounds.md",{"type":501,"value":67329,"toc":67889},[67330,67335,67342,67360,67362,67729,67731,67859,67862,67876,67880,67886],[2367,67331,67332],{},[67333,67334],"miscellaneous-bounds",{},[614,67336,67337,67338,67341],{},"Calculates a boundary box and centers the camera accordingly. Its ",[618,67339,67340],{},"lookAt"," method accepts a target to look at imperatively e.g., after a click.",[2078,67343,67344,67346],{},[614,67345,52851],{},[626,67347,67348],{"className":628,"code":2103,"language":633,"meta":576,"style":576},[618,67349,67350],{"__ignoreMap":576},[637,67351,67352,67354,67356,67358],{"class":639,"line":577},[637,67353,643],{"class":642},[637,67355,795],{"class":646},[637,67357,1900],{"class":650},[637,67359,787],{"class":642},[504,67361,15],{"id":624},[626,67363,67366],{"className":628,"code":67364,"highlights":67365,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { Bounds, OrbitControls } from '@tresjs\u002Fcientos'\nimport { shallowRef } from 'vue'\n\nconst boundsRef = shallowRef()\nconst objectRef = shallowRef()\n\nfunction focusObject() {\n boundsRef.value?.instance.lookAt(objectRef.value)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003COrbitControls make-default \u002F>\n \u003CBounds ref=\"boundsRef\" clip use-mounted :offset=\"0.75\">\n \u003CTresMesh ref=\"objectRef\" @click=\"(e) => focusObject()\">\n \u003CTresBoxGeometry \u002F>\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTresMesh>\n \u003C\u002FBounds>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,745,755,790,800,805,632,2738],[618,67367,67368,67388,67406,67430,67448,67452,67466,67480,67484,67496,67525,67530,67538,67542,67550,67558,67590,67600,67638,67680,67688,67696,67704,67713,67721],{"__ignoreMap":576},[637,67369,67370,67372,67374,67376,67378,67380,67382,67384,67386],{"class":639,"line":577},[637,67371,643],{"class":642},[637,67373,647],{"class":646},[637,67375,651],{"class":650},[637,67377,654],{"class":650},[637,67379,657],{"class":642},[637,67381,660],{"class":642},[637,67383,664],{"class":663},[637,67385,660],{"class":642},[637,67387,669],{"class":642},[637,67389,67390,67392,67394,67396,67398,67400,67402,67404],{"class":639,"line":578},[637,67391,677],{"class":676},[637,67393,680],{"class":642},[637,67395,715],{"class":683},[637,67397,693],{"class":642},[637,67399,696],{"class":676},[637,67401,699],{"class":642},[637,67403,724],{"class":663},[637,67405,705],{"class":642},[637,67407,67409,67411,67413,67416,67418,67420,67422,67424,67426,67428],{"class":67408,"line":708},[639,673],[637,67410,677],{"class":676},[637,67412,680],{"class":642},[637,67414,67415],{"class":683}," Bounds",[637,67417,687],{"class":642},[637,67419,690],{"class":683},[637,67421,693],{"class":642},[637,67423,696],{"class":676},[637,67425,699],{"class":642},[637,67427,702],{"class":663},[637,67429,705],{"class":642},[637,67431,67432,67434,67436,67438,67440,67442,67444,67446],{"class":639,"line":729},[637,67433,677],{"class":676},[637,67435,680],{"class":642},[637,67437,3591],{"class":683},[637,67439,693],{"class":642},[637,67441,696],{"class":676},[637,67443,699],{"class":642},[637,67445,633],{"class":663},[637,67447,705],{"class":642},[637,67449,67450],{"class":639,"line":739},[637,67451,742],{"emptyLinePlaceholder":594},[637,67453,67455,67457,67460,67462,67464],{"class":67454,"line":745},[639,673],[637,67456,2487],{"class":650},[637,67458,67459],{"class":683}," boundsRef ",[637,67461,657],{"class":642},[637,67463,3591],{"class":2506},[637,67465,6744],{"class":683},[637,67467,67469,67471,67474,67476,67478],{"class":67468,"line":755},[639,673],[637,67470,2487],{"class":650},[637,67472,67473],{"class":683}," objectRef ",[637,67475,657],{"class":642},[637,67477,3591],{"class":2506},[637,67479,6744],{"class":683},[637,67481,67482],{"class":639,"line":778},[637,67483,742],{"emptyLinePlaceholder":594},[637,67485,67487,67489,67492,67494],{"class":67486,"line":790},[639,673],[637,67488,41949],{"class":650},[637,67490,67491],{"class":2506}," focusObject",[637,67493,3767],{"class":642},[637,67495,1208],{"class":642},[637,67497,67499,67502,67504,67506,67508,67510,67512,67514,67516,67519,67521,67523],{"class":67498,"line":800},[639,673],[637,67500,67501],{"class":683}," boundsRef",[637,67503,1150],{"class":642},[637,67505,3778],{"class":683},[637,67507,3781],{"class":642},[637,67509,9626],{"class":683},[637,67511,1150],{"class":642},[637,67513,67340],{"class":2506},[637,67515,2509],{"class":646},[637,67517,67518],{"class":683},"objectRef",[637,67520,1150],{"class":642},[637,67522,3778],{"class":683},[637,67524,2520],{"class":646},[637,67526,67528],{"class":67527,"line":805},[639,673],[637,67529,1329],{"class":642},[637,67531,67532,67534,67536],{"class":639,"line":831},[637,67533,732],{"class":642},[637,67535,647],{"class":646},[637,67537,669],{"class":642},[637,67539,67540],{"class":639,"line":631},[637,67541,742],{"emptyLinePlaceholder":594},[637,67543,67544,67546,67548],{"class":639,"line":854},[637,67545,643],{"class":642},[637,67547,750],{"class":646},[637,67549,669],{"class":642},[637,67551,67552,67554,67556],{"class":639,"line":865},[637,67553,758],{"class":642},[637,67555,761],{"class":646},[637,67557,669],{"class":642},[637,67559,67560,67562,67564,67566,67568,67570,67572,67574,67576,67578,67580,67582,67584,67586,67588],{"class":639,"line":876},[637,67561,781],{"class":642},[637,67563,784],{"class":646},[637,67565,813],{"class":642},[637,67567,1491],{"class":650},[637,67569,657],{"class":642},[637,67571,660],{"class":642},[637,67573,1498],{"class":642},[637,67575,969],{"class":823},[637,67577,1503],{"class":642},[637,67579,824],{"class":823},[637,67581,1503],{"class":642},[637,67583,7666],{"class":823},[637,67585,1513],{"class":642},[637,67587,660],{"class":642},[637,67589,787],{"class":642},[637,67591,67592,67594,67596,67598],{"class":639,"line":886},[637,67593,781],{"class":642},[637,67595,795],{"class":646},[637,67597,1900],{"class":650},[637,67599,787],{"class":642},[637,67601,67603,67605,67607,67609,67611,67613,67616,67618,67621,67624,67626,67628,67630,67632,67634,67636],{"class":67602,"line":632},[639,673],[637,67604,781],{"class":642},[637,67606,471],{"class":646},[637,67608,3999],{"class":650},[637,67610,657],{"class":642},[637,67612,660],{"class":642},[637,67614,67615],{"class":663},"boundsRef",[637,67617,660],{"class":642},[637,67619,67620],{"class":650}," clip",[637,67622,67623],{"class":650}," use-mounted",[637,67625,813],{"class":642},[637,67627,42798],{"class":650},[637,67629,657],{"class":642},[637,67631,660],{"class":642},[637,67633,2621],{"class":823},[637,67635,660],{"class":642},[637,67637,669],{"class":642},[637,67639,67640,67642,67644,67646,67648,67650,67652,67654,67656,67658,67660,67662,67664,67667,67669,67672,67674,67676,67678],{"class":639,"line":906},[637,67641,857],{"class":642},[637,67643,860],{"class":646},[637,67645,3999],{"class":650},[637,67647,657],{"class":642},[637,67649,660],{"class":642},[637,67651,67518],{"class":663},[637,67653,660],{"class":642},[637,67655,4417],{"class":642},[637,67657,9112],{"class":650},[637,67659,657],{"class":642},[637,67661,660],{"class":642},[637,67663,2509],{"class":642},[637,67665,67666],{"class":7047},"e",[637,67668,4907],{"class":642},[637,67670,67671],{"class":650},"=>",[637,67673,67491],{"class":2506},[637,67675,3767],{"class":642},[637,67677,660],{"class":642},[637,67679,669],{"class":642},[637,67681,67682,67684,67686],{"class":639,"line":916},[637,67683,868],{"class":642},[637,67685,871],{"class":646},[637,67687,787],{"class":642},[637,67689,67690,67692,67694],{"class":639,"line":2695},[637,67691,868],{"class":642},[637,67693,881],{"class":646},[637,67695,787],{"class":642},[637,67697,67698,67700,67702],{"class":639,"line":2704},[637,67699,889],{"class":642},[637,67701,860],{"class":646},[637,67703,669],{"class":642},[637,67705,67707,67709,67711],{"class":67706,"line":2738},[639,673],[637,67708,899],{"class":642},[637,67710,471],{"class":646},[637,67712,669],{"class":642},[637,67714,67715,67717,67719],{"class":639,"line":2747},[637,67716,909],{"class":642},[637,67718,761],{"class":646},[637,67720,669],{"class":642},[637,67722,67723,67725,67727],{"class":639,"line":2756},[637,67724,732],{"class":642},[637,67726,750],{"class":646},[637,67728,669],{"class":642},[504,67730,926],{"id":925},[931,67732,67733,67743],{},[934,67734,67735],{},[937,67736,67737,67739,67741],{},[940,67738,8360],{"align":1001},[940,67740,945],{"align":1001},[940,67742,948],{},[950,67744,67745,67762,67781,67798,67818,67839],{},[937,67746,67747,67752,67758],{},[955,67748,67749],{"align":1001},[618,67750,67751],{},"duration",[955,67753,67754,67755,67757],{"align":1001},"Duration of the ",[618,67756,67340],{}," animation in seconds",[955,67759,67760],{},[618,67761,14391],{},[937,67763,67764,67768,67777],{},[955,67765,67766],{"align":1001},[618,67767,42798],{},[955,67769,67770,67771,19604,67773,5822,67775],{"align":1001},"Additional distance from the target when using ",[618,67772,67340],{},[618,67774,7841],{},[618,67776,7845],{},[955,67778,67779],{},[618,67780,5938],{},[937,67782,67783,67788,67794],{},[955,67784,67785],{"align":1001},[618,67786,67787],{},"useResize",[955,67789,67790,67791,67793],{"align":1001},"Whether to re",[618,67792,67340],{}," the last target when the screen is resized",[955,67795,67796],{},[618,67797,975],{},[937,67799,67800,67805,67814],{},[955,67801,67802],{"align":1001},[618,67803,67804],{},"useMounted",[955,67806,67807,67808,67810,67811,67813],{"align":1001},"Whether to ",[618,67809,67340],{}," the ",[618,67812,471],{}," object when the component is mounts",[955,67815,67816],{},[618,67817,975],{},[937,67819,67820,67825,67835],{},[955,67821,67822],{"align":1001},[618,67823,67824],{},"clip",[955,67826,67827,67828,3156,67830,67832,67833],{"align":1001},"Whether to adjust the camera's ",[618,67829,45507],{},[618,67831,43267],{}," settings when using ",[618,67834,67340],{},[955,67836,67837],{},[618,67838,975],{},[937,67840,67841,67846,67856],{},[955,67842,67843],{"align":1001},[618,67844,67845],{},"easing",[955,67847,67848,67849,67852,67853],{"align":1001},"Animation's easing function. ",[618,67850,67851],{},"t"," and the returned value should be in the interval ",[618,67854,67855],{},"[0, 1]",[955,67857,67858],{},"Cubic ease out",[504,67860,67340],{"id":67861},"lookat",[614,67863,67864,3287,67867,67869,67870,1503,67872,5822,67874,1150],{},[618,67865,67866],{},"\u003CBounds \u002F>",[618,67868,67340],{}," points the camera at its first argument: an ",[618,67871,7845],{},[618,67873,7841],{},[618,67875,8411],{},[4215,67877,67879],{"id":67878},"method-signatures","Method Signatures",[626,67881,67884],{"className":67882,"code":67883,"language":32048},[32046],"\u002F**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly.\n *\u002F\nlookAt(object: Object3D): void\n\n\u002F**\n * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.\n *\u002F\nlookAt(object: Object3D, up: VectorFlexibleParams): void\n\n\u002F**\n * Centers the camera's viewport on a `Box3`.\n *\u002F\nlookAt(box3: Box3): void\n\n\u002F**\n * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.\n *\u002F\nlookAt(box3: Box3, up: VectorFlexibleParams): void\n\n\u002F**\n * Look at a `Vector3`.\n *\u002F\nlookAt(target: VectorFlexibleParams): void\n\n\u002F**\n * Look at a `Vector3`, if provided. Move the camera to `position`.\n *\u002F\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void\n\n\u002F**\n * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.\n *\u002F\nlookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void\n\n\u002F**\n * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.\n *\u002F\nlookAt(): void\n",[618,67885,67883],{"__ignoreMap":576},[1331,67887,67888],{},"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html 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":576,"searchDepth":577,"depth":578,"links":67890},[67891,67892,67893],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":67861,"depth":578,"text":67340,"children":67894},[67895],{"id":67878,"depth":708,"text":67879},"Calculate boundary box and center camera accordingly.",{},{"title":471,"description":67896},"99p1FD8mbl4hP9wZB60es2RXMg_34kRJyloKHcDBk80",{"id":67901,"title":475,"body":67902,"description":68205,"extension":591,"links":592,"meta":68206,"navigation":594,"path":476,"seo":68207,"stem":477,"__hash__":68208},"docs\u002F2.api\u002Fmiscellaneous\u002Fglobal-audio.md",{"type":501,"value":67903,"toc":68200},[67904,67912,67919,67921,68073,68079,68081,68174,68176,68198],[614,67905,2867,67906,9768,67908,67911],{},[618,67907,7526],{},[618,67909,67910],{},"\u003CGlobalAudio \u002F>"," component that serves to easily add a global sound to your scene.",[614,67913,32053,67914],{},[1144,67915,67918],{"href":67916,"rel":67917},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=audio#api\u002Fen\u002Faudio\u002FAudio",[1148],"Audio",[504,67920,15],{"id":624},[626,67922,67925],{"className":628,"code":67923,"highlights":67924,"language":633,"meta":576,"style":576},"\u003Cscript setup>\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { GlobalAudio } from '@tresjs\u002Fcientos'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" \u002F>\n \u003CGlobalAudio :src=\"exampleAudio\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[708,790],[618,67926,67927,67937,67955,67975,67983,67987,67995,68003,68035,68057,68065],{"__ignoreMap":576},[637,67928,67929,67931,67933,67935],{"class":639,"line":577},[637,67930,643],{"class":642},[637,67932,647],{"class":646},[637,67934,651],{"class":650},[637,67936,669],{"class":642},[637,67938,67939,67941,67943,67945,67947,67949,67951,67953],{"class":639,"line":578},[637,67940,677],{"class":676},[637,67942,680],{"class":642},[637,67944,715],{"class":683},[637,67946,693],{"class":642},[637,67948,696],{"class":676},[637,67950,699],{"class":642},[637,67952,724],{"class":663},[637,67954,705],{"class":642},[637,67956,67958,67960,67962,67965,67967,67969,67971,67973],{"class":67957,"line":708},[639,673],[637,67959,677],{"class":676},[637,67961,680],{"class":642},[637,67963,67964],{"class":683}," GlobalAudio",[637,67966,693],{"class":642},[637,67968,696],{"class":676},[637,67970,699],{"class":642},[637,67972,702],{"class":663},[637,67974,705],{"class":642},[637,67976,67977,67979,67981],{"class":639,"line":729},[637,67978,732],{"class":642},[637,67980,647],{"class":646},[637,67982,669],{"class":642},[637,67984,67985],{"class":639,"line":739},[637,67986,742],{"emptyLinePlaceholder":594},[637,67988,67989,67991,67993],{"class":639,"line":745},[637,67990,643],{"class":642},[637,67992,750],{"class":646},[637,67994,669],{"class":642},[637,67996,67997,67999,68001],{"class":639,"line":755},[637,67998,758],{"class":642},[637,68000,761],{"class":646},[637,68002,669],{"class":642},[637,68004,68005,68007,68009,68011,68013,68015,68017,68019,68021,68023,68025,68027,68029,68031,68033],{"class":639,"line":778},[637,68006,781],{"class":642},[637,68008,784],{"class":646},[637,68010,813],{"class":642},[637,68012,1491],{"class":650},[637,68014,657],{"class":642},[637,68016,660],{"class":642},[637,68018,1498],{"class":642},[637,68020,969],{"class":823},[637,68022,1503],{"class":642},[637,68024,969],{"class":823},[637,68026,1503],{"class":642},[637,68028,12004],{"class":823},[637,68030,1513],{"class":642},[637,68032,660],{"class":642},[637,68034,787],{"class":642},[637,68036,68038,68040,68042,68044,68046,68048,68050,68053,68055],{"class":68037,"line":790},[639,673],[637,68039,781],{"class":642},[637,68041,475],{"class":646},[637,68043,813],{"class":642},[637,68045,25789],{"class":650},[637,68047,657],{"class":642},[637,68049,660],{"class":642},[637,68051,68052],{"class":683},"exampleAudio",[637,68054,660],{"class":642},[637,68056,787],{"class":642},[637,68058,68059,68061,68063],{"class":639,"line":800},[637,68060,909],{"class":642},[637,68062,761],{"class":646},[637,68064,669],{"class":642},[637,68066,68067,68069,68071],{"class":639,"line":805},[637,68068,732],{"class":642},[637,68070,750],{"class":646},[637,68072,669],{"class":642},[614,68074,68075,68076,68078],{},"*The ",[618,68077,25789],{}," prop is required",[504,68080,926],{"id":925},[931,68082,68083,68093],{},[934,68084,68085],{},[937,68086,68087,68089,68091],{},[940,68088,942],{"align":1001},[940,68090,945],{"align":1001},[940,68092,948],{},[950,68094,68095,68106,68121,68133,68146,68160],{},[937,68096,68097,68101,68104],{},[955,68098,68099],{"align":1001},[618,68100,25789],{},[955,68102,68103],{"align":1001},"Path to your audio file",[955,68105],{},[937,68107,68108,68113,68116],{},[955,68109,68110],{"align":1001},[618,68111,68112],{},"playTrigger",[955,68114,68115],{"align":1001},"Id of the DOM element that triggers the play\u002Fpause state",[955,68117,68118],{},[618,68119,68120],{},"renderer.domElement",[937,68122,68123,68128,68131],{},[955,68124,68125],{"align":1001},[618,68126,68127],{},"stopTrigger",[955,68129,68130],{"align":1001},"Id of the DOM element that triggers the stop state",[955,68132],{},[937,68134,68135,68139,68142],{},[955,68136,68137],{"align":1001},[618,68138,27218],{},[955,68140,68141],{"align":1001},"If the audio must be replayed when ends",[955,68143,68144],{},[618,68145,975],{},[937,68147,68148,68153,68156],{},[955,68149,68150],{"align":1001},[618,68151,68152],{},"volume",[955,68154,68155],{"align":1001},"Volume of the audio",[955,68157,68158],{},[618,68159,1545],{},[937,68161,68162,68167,68170],{},[955,68163,68164],{"align":1001},[618,68165,68166],{},"playbackRate",[955,68168,68169],{"align":1001},"PlaybackRate of the audio",[955,68171,68172],{},[618,68173,1925],{},[504,68175,15042],{"id":15041},[931,68177,68178,68186],{},[934,68179,68180],{},[937,68181,68182,68184],{},[940,68183,5968],{"align":1001},[940,68185,945],{"align":1001},[950,68187,68188],{},[937,68189,68190,68195],{},[955,68191,68192],{"align":1001},[618,68193,68194],{},"isPlaying",[955,68196,68197],{"align":1001},"Dispatched when the Audio change its state (play, pause or stop)",[1331,68199,15139],{},{"title":576,"searchDepth":577,"depth":578,"links":68201},[68202,68203,68204],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},{"id":15041,"depth":578,"text":15042},"Add global sound to your scene.",{},{"title":475,"description":68205},"XaoiVKl16tz4uOX0ZskSCuPQUgYB0CYUZjEEuh4q_uU",{"id":68210,"title":479,"body":68211,"description":68613,"extension":591,"links":592,"meta":68614,"navigation":594,"path":480,"seo":68615,"stem":481,"__hash__":68616},"docs\u002F2.api\u002Fmiscellaneous\u002Fmouse-parallax.md",{"type":501,"value":68212,"toc":68609},[68213,68218,68230,68232,68238,68246,68255,68260,68546,68548,68607],[608,68214,68215],{},[68216,68217],"miscellaneous-mouse-parallax",{},[614,68219,68220,68223,68224,68229],{},[618,68221,68222],{},"\u003CMouseParallax \u002F>"," is a component that allows you to easily create a ",[1144,68225,68228],{"href":68226,"rel":68227},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FParallax",[1148],"parallax"," effect. The camera will update automatically according to the mouse position.",[504,68231,15],{"id":624},[614,68233,68234,68235,68237],{},"You only need to import and add it to your template as ",[618,68236,68222],{},". Additionally, you can pass the following props:",[614,68239,68240,68242,68243,1150],{},[618,68241,31887],{}," is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: ",[618,68244,68245],{},":factor=[x,y]",[614,68247,68248,68251,68252,1150],{},[618,68249,68250],{},"ease"," is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: ",[618,68253,68254],{},":ease=[x,y]",[614,68256,68257,68259],{},[618,68258,17590],{}," is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.",[626,68261,68264],{"className":628,"code":68262,"highlights":68263,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { MouseParallax, TorusKnot } from \"@tresjs\u002Fcientos\";\nimport { TresCanvas } from \"@tresjs\u002Fcore\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\">\n \u003CTresPerspectiveCamera :position=\"[0, 0, 7.5]\" :fov=\"75\" \u002F>\n \u003CTorusKnot>\n \u003CTresMeshToonMaterial color=\"orange\" \u002F>\n \u003C\u002FTorusKnot>\n \u003CMouseParallax :factor=\"5\" :ease=\"[3, 0.1]\" \u002F>\n \u003CTresAmbientLight \u002F>\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,831],[618,68265,68266,68286,68312,68332,68340,68344,68352,68370,68415,68423,68441,68449,68490,68498,68530,68538],{"__ignoreMap":576},[637,68267,68268,68270,68272,68274,68276,68278,68280,68282,68284],{"class":639,"line":577},[637,68269,643],{"class":642},[637,68271,647],{"class":646},[637,68273,651],{"class":650},[637,68275,654],{"class":650},[637,68277,657],{"class":642},[637,68279,660],{"class":642},[637,68281,664],{"class":663},[637,68283,660],{"class":642},[637,68285,669],{"class":642},[637,68287,68289,68291,68293,68296,68298,68300,68302,68304,68306,68308,68310],{"class":68288,"line":578},[639,673],[637,68290,677],{"class":676},[637,68292,680],{"class":642},[637,68294,68295],{"class":683}," MouseParallax",[637,68297,687],{"class":642},[637,68299,42920],{"class":683},[637,68301,693],{"class":642},[637,68303,696],{"class":676},[637,68305,9815],{"class":642},[637,68307,702],{"class":663},[637,68309,660],{"class":642},[637,68311,9822],{"class":642},[637,68313,68314,68316,68318,68320,68322,68324,68326,68328,68330],{"class":639,"line":708},[637,68315,677],{"class":676},[637,68317,680],{"class":642},[637,68319,715],{"class":683},[637,68321,693],{"class":642},[637,68323,696],{"class":676},[637,68325,9815],{"class":642},[637,68327,724],{"class":663},[637,68329,660],{"class":642},[637,68331,9822],{"class":642},[637,68333,68334,68336,68338],{"class":639,"line":729},[637,68335,732],{"class":642},[637,68337,647],{"class":646},[637,68339,669],{"class":642},[637,68341,68342],{"class":639,"line":739},[637,68343,742],{"emptyLinePlaceholder":594},[637,68345,68346,68348,68350],{"class":639,"line":745},[637,68347,643],{"class":642},[637,68349,750],{"class":646},[637,68351,669],{"class":642},[637,68353,68354,68356,68358,68360,68362,68364,68366,68368],{"class":639,"line":755},[637,68355,758],{"class":642},[637,68357,761],{"class":646},[637,68359,764],{"class":650},[637,68361,657],{"class":642},[637,68363,660],{"class":642},[637,68365,12358],{"class":663},[637,68367,660],{"class":642},[637,68369,669],{"class":642},[637,68371,68372,68374,68376,68378,68380,68382,68384,68386,68388,68390,68392,68394,68396,68398,68400,68402,68404,68406,68408,68411,68413],{"class":639,"line":778},[637,68373,781],{"class":642},[637,68375,784],{"class":646},[637,68377,813],{"class":642},[637,68379,1491],{"class":650},[637,68381,657],{"class":642},[637,68383,660],{"class":642},[637,68385,1498],{"class":642},[637,68387,969],{"class":823},[637,68389,1503],{"class":642},[637,68391,969],{"class":823},[637,68393,1503],{"class":642},[637,68395,12004],{"class":823},[637,68397,1513],{"class":642},[637,68399,660],{"class":642},[637,68401,813],{"class":642},[637,68403,34163],{"class":650},[637,68405,657],{"class":642},[637,68407,660],{"class":642},[637,68409,68410],{"class":823},"75",[637,68412,660],{"class":642},[637,68414,787],{"class":642},[637,68416,68417,68419,68421],{"class":639,"line":790},[637,68418,781],{"class":642},[637,68420,37913],{"class":646},[637,68422,669],{"class":642},[637,68424,68425,68427,68429,68431,68433,68435,68437,68439],{"class":639,"line":800},[637,68426,857],{"class":642},[637,68428,14035],{"class":646},[637,68430,2773],{"class":650},[637,68432,657],{"class":642},[637,68434,660],{"class":642},[637,68436,14044],{"class":663},[637,68438,660],{"class":642},[637,68440,787],{"class":642},[637,68442,68443,68445,68447],{"class":639,"line":805},[637,68444,899],{"class":642},[637,68446,37913],{"class":646},[637,68448,669],{"class":642},[637,68450,68452,68454,68456,68458,68460,68462,68464,68466,68468,68470,68472,68474,68476,68478,68480,68482,68484,68486,68488],{"class":68451,"line":831},[639,673],[637,68453,781],{"class":642},[637,68455,479],{"class":646},[637,68457,813],{"class":642},[637,68459,31887],{"class":650},[637,68461,657],{"class":642},[637,68463,660],{"class":642},[637,68465,7666],{"class":823},[637,68467,660],{"class":642},[637,68469,813],{"class":642},[637,68471,68250],{"class":650},[637,68473,657],{"class":642},[637,68475,660],{"class":642},[637,68477,1498],{"class":642},[637,68479,2729],{"class":823},[637,68481,1503],{"class":642},[637,68483,2235],{"class":823},[637,68485,1513],{"class":642},[637,68487,660],{"class":642},[637,68489,787],{"class":642},[637,68491,68492,68494,68496],{"class":639,"line":631},[637,68493,781],{"class":642},[637,68495,10010],{"class":646},[637,68497,787],{"class":642},[637,68499,68500,68502,68504,68506,68508,68510,68512,68514,68516,68518,68520,68522,68524,68526,68528],{"class":639,"line":854},[637,68501,781],{"class":642},[637,68503,10031],{"class":646},[637,68505,813],{"class":642},[637,68507,1491],{"class":650},[637,68509,657],{"class":642},[637,68511,660],{"class":642},[637,68513,1498],{"class":642},[637,68515,969],{"class":823},[637,68517,1503],{"class":642},[637,68519,824],{"class":823},[637,68521,1503],{"class":642},[637,68523,3900],{"class":823},[637,68525,1513],{"class":642},[637,68527,660],{"class":642},[637,68529,787],{"class":642},[637,68531,68532,68534,68536],{"class":639,"line":865},[637,68533,909],{"class":642},[637,68535,761],{"class":646},[637,68537,669],{"class":642},[637,68539,68540,68542,68544],{"class":639,"line":876},[637,68541,732],{"class":642},[637,68543,750],{"class":646},[637,68545,669],{"class":642},[504,68547,926],{"id":925},[931,68549,68550,68560],{},[934,68551,68552],{},[937,68553,68554,68556,68558],{},[940,68555,942],{"align":1001},[940,68557,945],{"align":1001},[940,68559,948],{},[950,68561,68562,68574,68585,68596],{},[937,68563,68564,68569,68572],{},[955,68565,68566],{"align":1001},[1705,68567,68568],{},"disabled",[955,68570,68571],{"align":1001},"Enable or disable the effect",[955,68573,975],{},[937,68575,68576,68580,68583],{},[955,68577,68578],{"align":1001},[1705,68579,31887],{},[955,68581,68582],{"align":1001},"Increase the range of the parallax",[955,68584,59411],{},[937,68586,68587,68591,68594],{},[955,68588,68589],{"align":1001},[1705,68590,68250],{},[955,68592,68593],{"align":1001},"Increase the camera movement speed",[955,68595,2235],{},[937,68597,68598,68602,68605],{},[955,68599,68600],{"align":1001},[1705,68601,17590],{},[955,68603,68604],{"align":1001},"Whether the mouse coordinates are calculated from the element or the window",[955,68606,975],{},[1331,68608,1680],{},{"title":576,"searchDepth":577,"depth":578,"links":68610},[68611,68612],{"id":624,"depth":578,"text":15},{"id":925,"depth":578,"text":926},"Create parallax effects based on mouse movement.",{},{"title":479,"description":68613},"-wMRikeU1CMiiuet3URQZ7L0rwjhY5Q0pVMViyyOwK0",{"id":68618,"title":483,"body":68619,"description":69684,"extension":591,"links":592,"meta":69685,"navigation":594,"path":484,"seo":69686,"stem":485,"__hash__":69687},"docs\u002F2.api\u002Fmiscellaneous\u002Fpositional-audio.md",{"type":501,"value":68620,"toc":69677},[68621,68626,68639,68649,68651,68666,68946,68974,68978,68984,68986,69179,69181,69253,69483,69645,69647,69674],[608,68622,68623],{},[68624,68625],"miscellaneous-positional-audio",{},[614,68627,2867,68628,64211,68630,68634,68635,68638],{},[618,68629,7526],{},[1144,68631,483],{"href":68632,"rel":68633},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=posi#api\u002Fen\u002Faudio\u002FPositionalAudio",[1148],".\n",[618,68636,68637],{},"\u003CPositionalAudio>"," is an object specifically designed for controlling sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience.",[614,68640,68641,68643,68644,38833],{},[618,68642,68637],{}," includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the ",[1144,68645,68648],{"href":68646,"rel":68647},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#examples\u002Fen\u002Fhelpers\u002FPositionalAudioHelper",[1148],"PositionalAudioHelper",[504,68650,15],{"id":624},[614,68652,2867,68653,68655,68656,68658,68659,68661,68662,68665],{},[618,68654,68637],{}," component is very simple to set up and use, allowing you to bring your 3D scenes to life. All you need to do is call the ",[618,68657,68637],{}," component and set the ",[618,68660,63155],{},". It must be wrapped around the ",[618,68663,68664],{},"\u003CSuspense>"," component to enable it to load your audio asynchronously. 💥",[626,68667,68670],{"className":628,"code":68668,"highlights":68669,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Box, PositionalAudio } from '@tresjs\u002Fcientos'\nimport { onUnmounted, shallowRef } from 'vue'\n\nconst positionalAudioRef = shallowRef(null)\n\nonUnmounted(() => {\n positionalAudioRef?.value?.dispose()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTresCanvas>\n \u003CBox :args=\"[1, 1, 1]\">\n \u003CTresMeshNormalMaterial \u002F>\n \u003CSuspense>\n \u003CPositionalAudio\n ref=\"positionalAudioRef\"\n url=\"your-sound.mp3\"\n \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FBox>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[578,886,632,906],[618,68671,68672,68692,68716,68738,68742,68759,68763,68775,68790,68796,68804,68808,68816,68824,68856,68864,68872,68880,68895,68910,68914,68922,68930,68938],{"__ignoreMap":576},[637,68673,68674,68676,68678,68680,68682,68684,68686,68688,68690],{"class":639,"line":577},[637,68675,643],{"class":642},[637,68677,647],{"class":646},[637,68679,651],{"class":650},[637,68681,654],{"class":650},[637,68683,657],{"class":642},[637,68685,660],{"class":642},[637,68687,664],{"class":663},[637,68689,660],{"class":642},[637,68691,669],{"class":642},[637,68693,68695,68697,68699,68701,68703,68706,68708,68710,68712,68714],{"class":68694,"line":578},[639,673],[637,68696,677],{"class":676},[637,68698,680],{"class":642},[637,68700,1401],{"class":683},[637,68702,687],{"class":642},[637,68704,68705],{"class":683}," PositionalAudio",[637,68707,693],{"class":642},[637,68709,696],{"class":676},[637,68711,699],{"class":642},[637,68713,702],{"class":663},[637,68715,705],{"class":642},[637,68717,68718,68720,68722,68724,68726,68728,68730,68732,68734,68736],{"class":639,"line":708},[637,68719,677],{"class":676},[637,68721,680],{"class":642},[637,68723,24807],{"class":683},[637,68725,687],{"class":642},[637,68727,3591],{"class":683},[637,68729,693],{"class":642},[637,68731,696],{"class":676},[637,68733,699],{"class":642},[637,68735,633],{"class":663},[637,68737,705],{"class":642},[637,68739,68740],{"class":639,"line":729},[637,68741,742],{"emptyLinePlaceholder":594},[637,68743,68744,68746,68749,68751,68753,68755,68757],{"class":639,"line":739},[637,68745,2487],{"class":650},[637,68747,68748],{"class":683}," positionalAudioRef ",[637,68750,657],{"class":642},[637,68752,3591],{"class":2506},[637,68754,2509],{"class":683},[637,68756,3749],{"class":642},[637,68758,2520],{"class":683},[637,68760,68761],{"class":639,"line":745},[637,68762,742],{"emptyLinePlaceholder":594},[637,68764,68765,68767,68769,68771,68773],{"class":639,"line":755},[637,68766,24854],{"class":2506},[637,68768,2509],{"class":683},[637,68770,3767],{"class":642},[637,68772,3770],{"class":650},[637,68774,1208],{"class":642},[637,68776,68777,68780,68782,68784,68786,68788],{"class":639,"line":778},[637,68778,68779],{"class":683}," positionalAudioRef",[637,68781,3781],{"class":642},[637,68783,3778],{"class":683},[637,68785,3781],{"class":642},[637,68787,23904],{"class":2506},[637,68789,6744],{"class":646},[637,68791,68792,68794],{"class":639,"line":790},[637,68793,2500],{"class":642},[637,68795,2520],{"class":683},[637,68797,68798,68800,68802],{"class":639,"line":800},[637,68799,732],{"class":642},[637,68801,647],{"class":646},[637,68803,669],{"class":642},[637,68805,68806],{"class":639,"line":805},[637,68807,742],{"emptyLinePlaceholder":594},[637,68809,68810,68812,68814],{"class":639,"line":831},[637,68811,643],{"class":642},[637,68813,750],{"class":646},[637,68815,669],{"class":642},[637,68817,68818,68820,68822],{"class":639,"line":631},[637,68819,758],{"class":642},[637,68821,761],{"class":646},[637,68823,669],{"class":642},[637,68825,68826,68828,68830,68832,68834,68836,68838,68840,68842,68844,68846,68848,68850,68852,68854],{"class":639,"line":854},[637,68827,781],{"class":642},[637,68829,217],{"class":646},[637,68831,813],{"class":642},[637,68833,2021],{"class":650},[637,68835,657],{"class":642},[637,68837,660],{"class":642},[637,68839,1498],{"class":642},[637,68841,1925],{"class":823},[637,68843,1503],{"class":642},[637,68845,1925],{"class":823},[637,68847,1503],{"class":642},[637,68849,1925],{"class":823},[637,68851,1513],{"class":642},[637,68853,660],{"class":642},[637,68855,669],{"class":642},[637,68857,68858,68860,68862],{"class":639,"line":865},[637,68859,857],{"class":642},[637,68861,881],{"class":646},[637,68863,787],{"class":642},[637,68865,68866,68868,68870],{"class":639,"line":876},[637,68867,857],{"class":642},[637,68869,22688],{"class":646},[637,68871,669],{"class":642},[637,68873,68875,68877],{"class":68874,"line":886},[639,673],[637,68876,868],{"class":642},[637,68878,68879],{"class":646},"PositionalAudio\n",[637,68881,68883,68886,68888,68890,68893],{"class":68882,"line":632},[639,673],[637,68884,68885],{"class":650}," ref",[637,68887,657],{"class":642},[637,68889,660],{"class":642},[637,68891,68892],{"class":663},"positionalAudioRef",[637,68894,3224],{"class":642},[637,68896,68898,68901,68903,68905,68908],{"class":68897,"line":906},[639,673],[637,68899,68900],{"class":650}," url",[637,68902,657],{"class":642},[637,68904,660],{"class":642},[637,68906,68907],{"class":663},"your-sound.mp3",[637,68909,3224],{"class":642},[637,68911,68912],{"class":639,"line":916},[637,68913,56644],{"class":642},[637,68915,68916,68918,68920],{"class":639,"line":2695},[637,68917,889],{"class":642},[637,68919,22688],{"class":646},[637,68921,669],{"class":642},[637,68923,68924,68926,68928],{"class":639,"line":2704},[637,68925,899],{"class":642},[637,68927,217],{"class":646},[637,68929,669],{"class":642},[637,68931,68932,68934,68936],{"class":639,"line":2738},[637,68933,909],{"class":642},[637,68935,761],{"class":646},[637,68937,669],{"class":642},[637,68939,68940,68942,68944],{"class":639,"line":2747},[637,68941,732],{"class":642},[637,68943,750],{"class":646},[637,68945,669],{"class":642},[3292,68947,68948],{},[614,68949,68950,68951,68954,68955,68962,68963,68966,68967,3156,68970,68973],{},"AudioContext is authorized when a user gesture has been made on the page. The property ",[618,68952,68953],{},":autoplay=\"true\""," cannot be activated if no user gesture has been made previously ",[1144,68956,68959],{"href":68957,"rel":68958},"https:\u002F\u002Fgoo.gl\u002F7K7WLu",[1148],[618,68960,68961],{},"read more",".\nIf you are sure that there will be a user gesture before your ",[618,68964,68965],{},"\u003CPositionAudio>"," component appears\u002Fis created, you can directly add ",[618,68968,68969],{},":ready=\"true\"",[618,68971,68972],{},"autoplay=\"true\""," for a direct launch.",[504,68975,68977],{"id":68976},"how-does-it-work","How does it work?",[9760,68979],{"className":68980,"src":68982,"alt":68983},[68981],"mx-auto","\u002Fcientos\u002Fsketch.jpg","Diagram explaining how positional audio works",[504,68985,926],{"id":925},[931,68987,68988,68998],{},[934,68989,68990],{},[937,68991,68992,68994,68996],{},[940,68993,942],{"align":1001},[940,68995,945],{"align":1001},[940,68997,948],{},[950,68999,69000,69015,69036,69056,69089,69107,69122,69139,69158],{},[937,69001,69002,69006,69013],{},[955,69003,69004],{"align":1001},[1705,69005,63155],{},[955,69007,69008,58764,69010,69012],{"align":1001},[618,69009,3665],{},[1705,69011,9559],{}," — The path or URL to the file.",[955,69014],{},[937,69016,69017,69022,69032],{},[955,69018,69019],{"align":1001},[1705,69020,69021],{},"helper",[955,69023,69024,69026,69027,3287,69029],{"align":1001},[618,69025,18466],{}," — Selects whether helper mode is enabled. ",[7778,69028],{},[1709,69030,69031],{},"(Useful for visualising the angle of sound propagation)",[955,69033,69034],{},[618,69035,975],{},[937,69037,69038,69042,69052],{},[955,69039,69040],{"align":1001},[1705,69041,14251],{},[955,69043,69044,69046,69047],{"align":1001},[618,69045,5564],{}," — The distance at which the volume reduction starts taking effect. ",[1709,69048,69049],{},[1705,69050,69051],{},"A non-negative number.",[955,69053,69054],{},[618,69055,1925],{},[937,69057,69058,69063,69085],{},[955,69059,69060],{"align":1001},[1705,69061,69062],{},"ready",[955,69064,69065,69067,69068,69070,69071,69074,69075,69078,69079,69082,69083],{"align":1001},[618,69066,18466],{}," — Tells ",[618,69069,68637],{}," that ",[618,69072,69073],{},"AudioContext"," is authorised because an user gesture has been made on the page. This is imperative, as ",[618,69076,69077],{},"autoplay"," cannot be activated if no user gesture has been made previously (",[1144,69080,68957],{"href":68957,"rel":69081},[1148],"). ",[7778,69084],{},[955,69086,69087],{},[618,69088,975],{},[937,69090,69091,69095,69103],{},[955,69092,69093],{"align":1001},[1705,69094,69077],{},[955,69096,69097,69099,69100,69102],{"align":1001},[618,69098,18466],{}," — Selects whether the audio is launched automatically. Please refer to the ",[618,69101,69062],{}," prop for a better understanding of how to use autoplay.",[955,69104,69105],{},[618,69106,975],{},[937,69108,69109,69113,69118],{},[955,69110,69111],{"align":1001},[1705,69112,27218],{},[955,69114,69115,69117],{"align":1001},[618,69116,18466],{}," — Specifies whether the audio should loop.",[955,69119,69120],{},[618,69121,975],{},[937,69123,69124,69129,69134],{},[955,69125,69126],{"align":1001},[1705,69127,69128],{},"innerAngle",[955,69130,69131,69133],{"align":1001},[618,69132,5564],{}," — A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction.",[955,69135,69136],{},[618,69137,69138],{},"360",[937,69140,69141,69146,69154],{},[955,69142,69143],{"align":1001},[1705,69144,69145],{},"outerAngle",[955,69147,69148,69150,69151,43633],{"align":1001},[618,69149,5564],{}," — A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of ",[618,69152,69153],{},"outerGain",[955,69155,69156],{},[618,69157,969],{},[937,69159,69160,69164,69175],{},[955,69161,69162],{"align":1001},[1705,69163,69153],{},[955,69165,69166,69168,69169,69171,69172,69174],{"align":1001},[618,69167,5564],{}," — A parameter for directional audio sources, this is the amount of volume reduction outside of the ",[618,69170,69145],{}," prop. When the value is ",[618,69173,969],{}," no sound can be heard.",[955,69176,69177],{},[618,69178,969],{},[504,69180,62227],{"id":62226},[931,69182,69183,69191],{},[934,69184,69185],{},[937,69186,69187,69189],{},[940,69188,5968],{"align":1001},[940,69190,945],{"align":1001},[950,69192,69193,69205,69218,69231,69244],{},[937,69194,69195,69199],{},[955,69196,69197],{"align":1001},[618,69198,9626],{},[955,69200,69201,69202,1150],{"align":1001},"Instance reference — Inheritance of ",[1144,69203,483],{"href":68632,"rel":69204},[1148],[937,69206,69207,69212],{},[955,69208,69209],{"align":1001},[618,69210,69211],{},"play()",[955,69213,69214,69215],{"align":1001},"Play audio — ",[1709,69216,69217],{},"Cannot be fired if audio is already running.",[937,69219,69220,69225],{},[955,69221,69222],{"align":1001},[618,69223,69224],{},"pause()",[955,69226,69227,69228],{"align":1001},"Pause audio — ",[1709,69229,69230],{},"Cannot be fired if audio is already paused.",[937,69232,69233,69238],{},[955,69234,69235],{"align":1001},[618,69236,69237],{},"stop()",[955,69239,69240,69241],{"align":1001},"Stop audio — ",[1709,69242,69243],{},"Cannot be fired if audio is already stopped.",[937,69245,69246,69250],{},[955,69247,69248],{"align":1001},[618,69249,26052],{},[955,69251,69252],{"align":1001},"Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists).",[626,69254,69258],{"className":69255,"code":69256,"language":69257,"meta":576,"style":576},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const positionalAudioRef = shallowRef(null)\n\nconsole.log(positionalAudioRef.value.instance) \u002F\u002F instance properties\n\nconst handlerAudio = (action: string) => {\n if (!positionalAudioRef.value) { return }\n\n const { play, pause, stop } = positionalAudioRef.value\n\n if (action === 'play') { play() }\n else if (action === 'pause') { pause() }\n else if (action === 'stop') { stop() }\n}\n","typescript",[618,69259,69260,69276,69280,69304,69308,69332,69354,69358,69388,69392,69419,69450,69479],{"__ignoreMap":576},[637,69261,69262,69264,69266,69268,69270,69272,69274],{"class":639,"line":577},[637,69263,2487],{"class":650},[637,69265,68748],{"class":683},[637,69267,657],{"class":642},[637,69269,3591],{"class":2506},[637,69271,2509],{"class":683},[637,69273,3749],{"class":642},[637,69275,2520],{"class":683},[637,69277,69278],{"class":639,"line":578},[637,69279,742],{"emptyLinePlaceholder":594},[637,69281,69282,69285,69287,69289,69292,69294,69296,69298,69301],{"class":639,"line":708},[637,69283,69284],{"class":683},"console",[637,69286,1150],{"class":642},[637,69288,7068],{"class":2506},[637,69290,69291],{"class":683},"(positionalAudioRef",[637,69293,1150],{"class":642},[637,69295,3778],{"class":683},[637,69297,1150],{"class":642},[637,69299,69300],{"class":683},"instance) ",[637,69302,69303],{"class":1213},"\u002F\u002F instance properties\n",[637,69305,69306],{"class":639,"line":729},[637,69307,742],{"emptyLinePlaceholder":594},[637,69309,69310,69312,69315,69317,69319,69322,69324,69326,69328,69330],{"class":639,"line":739},[637,69311,2487],{"class":650},[637,69313,69314],{"class":683}," handlerAudio ",[637,69316,657],{"class":642},[637,69318,3167],{"class":642},[637,69320,69321],{"class":7047},"action",[637,69323,1222],{"class":642},[637,69325,5549],{"class":1204},[637,69327,3433],{"class":642},[637,69329,3770],{"class":650},[637,69331,1208],{"class":642},[637,69333,69334,69336,69338,69340,69342,69344,69346,69348,69350,69352],{"class":639,"line":745},[637,69335,22291],{"class":676},[637,69337,3167],{"class":646},[637,69339,23367],{"class":642},[637,69341,68892],{"class":683},[637,69343,1150],{"class":642},[637,69345,3778],{"class":683},[637,69347,4907],{"class":646},[637,69349,8709],{"class":642},[637,69351,55439],{"class":676},[637,69353,18700],{"class":642},[637,69355,69356],{"class":639,"line":755},[637,69357,742],{"emptyLinePlaceholder":594},[637,69359,69360,69362,69364,69367,69369,69372,69374,69377,69379,69381,69384,69386],{"class":639,"line":778},[637,69361,60472],{"class":650},[637,69363,680],{"class":642},[637,69365,69366],{"class":683}," play",[637,69368,687],{"class":642},[637,69370,69371],{"class":683}," pause",[637,69373,687],{"class":642},[637,69375,69376],{"class":683}," stop",[637,69378,693],{"class":642},[637,69380,2503],{"class":642},[637,69382,69383],{"class":683}," positionalAudioRef",[637,69385,1150],{"class":642},[637,69387,25030],{"class":683},[637,69389,69390],{"class":639,"line":790},[637,69391,742],{"emptyLinePlaceholder":594},[637,69393,69394,69396,69398,69400,69402,69404,69407,69409,69411,69413,69415,69417],{"class":639,"line":800},[637,69395,22291],{"class":676},[637,69397,3167],{"class":646},[637,69399,69321],{"class":683},[637,69401,22312],{"class":642},[637,69403,699],{"class":642},[637,69405,69406],{"class":663},"play",[637,69408,2512],{"class":642},[637,69410,4907],{"class":646},[637,69412,8709],{"class":642},[637,69414,69366],{"class":2506},[637,69416,7193],{"class":646},[637,69418,1329],{"class":642},[637,69420,69421,69424,69427,69429,69431,69433,69435,69438,69440,69442,69444,69446,69448],{"class":639,"line":805},[637,69422,69423],{"class":676}," else",[637,69425,69426],{"class":676}," if",[637,69428,3167],{"class":646},[637,69430,69321],{"class":683},[637,69432,22312],{"class":642},[637,69434,699],{"class":642},[637,69436,69437],{"class":663},"pause",[637,69439,2512],{"class":642},[637,69441,4907],{"class":646},[637,69443,8709],{"class":642},[637,69445,69371],{"class":2506},[637,69447,7193],{"class":646},[637,69449,1329],{"class":642},[637,69451,69452,69454,69456,69458,69460,69462,69464,69467,69469,69471,69473,69475,69477],{"class":639,"line":831},[637,69453,69423],{"class":676},[637,69455,69426],{"class":676},[637,69457,3167],{"class":646},[637,69459,69321],{"class":683},[637,69461,22312],{"class":642},[637,69463,699],{"class":642},[637,69465,69466],{"class":663},"stop",[637,69468,2512],{"class":642},[637,69470,4907],{"class":646},[637,69472,8709],{"class":642},[637,69474,69376],{"class":2506},[637,69476,7193],{"class":646},[637,69478,1329],{"class":642},[637,69480,69481],{"class":639,"line":631},[637,69482,1329],{"class":642},[626,69484,69486],{"className":628,"code":69485,"language":633,"meta":576,"style":576},"\u003Ctemplate>\n \u003Cbutton @click=\"handlerAudio('play')\">play\u003C\u002Fbutton>\n \u003Cbutton @click=\"handlerAudio('pause')\">pause\u003C\u002Fbutton>\n \u003Cbutton @click=\"handlerAudio('stop')\">stop\u003C\u002Fbutton>\n\n \u003CTresCanvas>\n \u003CSphere>\n \u003CSuspense>\n \u003CPositionalAudio \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FSphere>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[618,69487,69488,69496,69523,69550,69577,69581,69589,69597,69605,69613,69621,69629,69637],{"__ignoreMap":576},[637,69489,69490,69492,69494],{"class":639,"line":577},[637,69491,643],{"class":642},[637,69493,750],{"class":646},[637,69495,669],{"class":642},[637,69497,69498,69500,69502,69504,69506,69508,69511,69513,69515,69517,69519,69521],{"class":639,"line":578},[637,69499,758],{"class":642},[637,69501,40441],{"class":646},[637,69503,40444],{"class":650},[637,69505,657],{"class":642},[637,69507,660],{"class":642},[637,69509,69510],{"class":663},"handlerAudio('play')",[637,69512,660],{"class":642},[637,69514,3744],{"class":642},[637,69516,69406],{"class":683},[637,69518,732],{"class":642},[637,69520,40441],{"class":646},[637,69522,669],{"class":642},[637,69524,69525,69527,69529,69531,69533,69535,69538,69540,69542,69544,69546,69548],{"class":639,"line":708},[637,69526,758],{"class":642},[637,69528,40441],{"class":646},[637,69530,40444],{"class":650},[637,69532,657],{"class":642},[637,69534,660],{"class":642},[637,69536,69537],{"class":663},"handlerAudio('pause')",[637,69539,660],{"class":642},[637,69541,3744],{"class":642},[637,69543,69437],{"class":683},[637,69545,732],{"class":642},[637,69547,40441],{"class":646},[637,69549,669],{"class":642},[637,69551,69552,69554,69556,69558,69560,69562,69565,69567,69569,69571,69573,69575],{"class":639,"line":729},[637,69553,758],{"class":642},[637,69555,40441],{"class":646},[637,69557,40444],{"class":650},[637,69559,657],{"class":642},[637,69561,660],{"class":642},[637,69563,69564],{"class":663},"handlerAudio('stop')",[637,69566,660],{"class":642},[637,69568,3744],{"class":642},[637,69570,69466],{"class":683},[637,69572,732],{"class":642},[637,69574,40441],{"class":646},[637,69576,669],{"class":642},[637,69578,69579],{"class":639,"line":739},[637,69580,742],{"emptyLinePlaceholder":594},[637,69582,69583,69585,69587],{"class":639,"line":745},[637,69584,758],{"class":642},[637,69586,761],{"class":646},[637,69588,669],{"class":642},[637,69590,69591,69593,69595],{"class":639,"line":755},[637,69592,781],{"class":642},[637,69594,285],{"class":646},[637,69596,669],{"class":642},[637,69598,69599,69601,69603],{"class":639,"line":778},[637,69600,857],{"class":642},[637,69602,22688],{"class":646},[637,69604,669],{"class":642},[637,69606,69607,69609,69611],{"class":639,"line":790},[637,69608,868],{"class":642},[637,69610,483],{"class":646},[637,69612,787],{"class":642},[637,69614,69615,69617,69619],{"class":639,"line":800},[637,69616,889],{"class":642},[637,69618,22688],{"class":646},[637,69620,669],{"class":642},[637,69622,69623,69625,69627],{"class":639,"line":805},[637,69624,899],{"class":642},[637,69626,285],{"class":646},[637,69628,669],{"class":642},[637,69630,69631,69633,69635],{"class":639,"line":831},[637,69632,909],{"class":642},[637,69634,761],{"class":646},[637,69636,669],{"class":642},[637,69638,69639,69641,69643],{"class":639,"line":631},[637,69640,732],{"class":642},[637,69642,750],{"class":646},[637,69644,669],{"class":642},[504,69646,15042],{"id":15041},[931,69648,69649,69657],{},[934,69650,69651],{},[937,69652,69653,69655],{},[940,69654,5968],{"align":1001},[940,69656,945],{"align":1001},[950,69658,69659],{},[937,69660,69661,69666],{},[955,69662,69663],{"align":1001},[618,69664,69665],{},"is-playing",[955,69667,69668,69669,3287,69671],{"align":1001},"Triggered when the audio changes its state (play, pause, or stop) ",[7778,69670],{},[618,69672,69673],{},"@is-playing=\"(e) => yourIsPlayingRef = e\"",[1331,69675,69676],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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":576,"searchDepth":577,"depth":578,"links":69678},[69679,69680,69681,69682,69683],{"id":624,"depth":578,"text":15},{"id":68976,"depth":578,"text":68977},{"id":925,"depth":578,"text":926},{"id":62226,"depth":578,"text":62227},{"id":15041,"depth":578,"text":15042},"Spatially positioned audio in 3D space.",{},{"title":483,"description":69684},"xH_wsh1QVfRcpinn-pgaEOd1Zj41KzkcipRCSY1fSvA",{"id":69689,"title":487,"body":69690,"description":70317,"extension":591,"links":592,"meta":70318,"navigation":594,"path":488,"seo":70319,"stem":489,"__hash__":70320},"docs\u002F2.api\u002Fmiscellaneous\u002Fuse-animations.md",{"type":501,"value":69691,"toc":70310},[69692,69705,69707,69711,69721,69948,69952,69959,70287,70289,70307],[614,69693,69694,69696,69697,69700,69701,38833],{},[618,69695,487],{}," is a composable that returns a ",[618,69698,69699],{},"shallowReactive"," with all the models actions based on the animations provided. It is a wrapper around the ",[1144,69702,9256],{"href":69703,"rel":69704},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fanimation\u002FAnimationMixer",[1148],[504,69706,15],{"id":624},[4215,69708,69710],{"id":69709},"basic-usage-automatic-updates","Basic Usage (Automatic Updates)",[614,69712,69713,69714,69716,69717,69720],{},"By default, ",[618,69715,487],{}," automatically updates the animation mixer on each frame using the ",[618,69718,69719],{},"useLoop"," composable:",[626,69722,69725],{"className":1190,"code":69723,"highlights":69724,"language":664,"meta":576,"style":576},"import { useAnimations, useGLTF } from '@tresjs\u002Fcientos'\n\nconst { state } = useGLTF('\u002Fmodels\u002Fugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions } = useAnimations(animations, model)\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n currentAction.value = newActions.Greeting\n currentAction.value.play()\n})\n",[577,755],[618,69726,69727,69751,69755,69780,69784,69818,69844,69868,69872,69885,69889,69909,69928,69942],{"__ignoreMap":576},[637,69728,69730,69732,69734,69737,69739,69741,69743,69745,69747,69749],{"class":69729,"line":577},[639,673],[637,69731,677],{"class":676},[637,69733,680],{"class":642},[637,69735,69736],{"class":683}," useAnimations",[637,69738,687],{"class":642},[637,69740,4510],{"class":683},[637,69742,693],{"class":642},[637,69744,696],{"class":676},[637,69746,699],{"class":642},[637,69748,702],{"class":663},[637,69750,705],{"class":642},[637,69752,69753],{"class":639,"line":578},[637,69754,742],{"emptyLinePlaceholder":594},[637,69756,69757,69759,69761,69763,69765,69767,69769,69771,69773,69776,69778],{"class":639,"line":708},[637,69758,2487],{"class":650},[637,69760,680],{"class":642},[637,69762,63249],{"class":683},[637,69764,2500],{"class":642},[637,69766,2503],{"class":642},[637,69768,4510],{"class":2506},[637,69770,2509],{"class":683},[637,69772,2512],{"class":642},[637,69774,69775],{"class":663},"\u002Fmodels\u002Fugly-naked-bunny.gltf",[637,69777,2512],{"class":642},[637,69779,2520],{"class":683},[637,69781,69782],{"class":639,"line":729},[637,69783,742],{"emptyLinePlaceholder":594},[637,69785,69786,69788,69791,69793,69795,69797,69799,69801,69803,69805,69807,69809,69812,69815],{"class":639,"line":739},[637,69787,2487],{"class":650},[637,69789,69790],{"class":683}," animations ",[637,69792,657],{"class":642},[637,69794,3582],{"class":2506},[637,69796,2509],{"class":683},[637,69798,3767],{"class":642},[637,69800,3770],{"class":650},[637,69802,2492],{"class":683},[637,69804,1150],{"class":642},[637,69806,3778],{"class":683},[637,69808,3781],{"class":642},[637,69810,69811],{"class":683},"animations ",[637,69813,69814],{"class":642},"||",[637,69816,69817],{"class":683}," [])\n",[637,69819,69820,69822,69824,69826,69828,69830,69832,69834,69836,69838,69840,69842],{"class":639,"line":745},[637,69821,2487],{"class":650},[637,69823,5194],{"class":683},[637,69825,657],{"class":642},[637,69827,3582],{"class":2506},[637,69829,2509],{"class":683},[637,69831,3767],{"class":642},[637,69833,3770],{"class":650},[637,69835,2492],{"class":683},[637,69837,3781],{"class":642},[637,69839,3778],{"class":683},[637,69841,3781],{"class":642},[637,69843,5242],{"class":683},[637,69845,69847,69849,69851,69854,69856,69858,69860,69863,69865],{"class":69846,"line":755},[639,673],[637,69848,2487],{"class":650},[637,69850,680],{"class":642},[637,69852,69853],{"class":683}," actions ",[637,69855,2500],{"class":642},[637,69857,2503],{"class":642},[637,69859,69736],{"class":2506},[637,69861,69862],{"class":683},"(animations",[637,69864,687],{"class":642},[637,69866,69867],{"class":683}," model)\n",[637,69869,69870],{"class":639,"line":778},[637,69871,742],{"emptyLinePlaceholder":594},[637,69873,69874,69876,69879,69881,69883],{"class":639,"line":790},[637,69875,2487],{"class":650},[637,69877,69878],{"class":683}," currentAction ",[637,69880,657],{"class":642},[637,69882,3999],{"class":2506},[637,69884,6744],{"class":683},[637,69886,69887],{"class":639,"line":800},[637,69888,742],{"emptyLinePlaceholder":594},[637,69890,69891,69893,69896,69898,69900,69903,69905,69907],{"class":639,"line":805},[637,69892,12798],{"class":2506},[637,69894,69895],{"class":683},"(actions",[637,69897,687],{"class":642},[637,69899,3167],{"class":642},[637,69901,69902],{"class":7047},"newActions",[637,69904,3433],{"class":642},[637,69906,3770],{"class":650},[637,69908,1208],{"class":642},[637,69910,69911,69914,69916,69918,69920,69923,69925],{"class":639,"line":831},[637,69912,69913],{"class":683}," currentAction",[637,69915,1150],{"class":642},[637,69917,3778],{"class":683},[637,69919,2503],{"class":642},[637,69921,69922],{"class":683}," newActions",[637,69924,1150],{"class":642},[637,69926,69927],{"class":683},"Greeting\n",[637,69929,69930,69932,69934,69936,69938,69940],{"class":639,"line":631},[637,69931,69913],{"class":683},[637,69933,1150],{"class":642},[637,69935,3778],{"class":683},[637,69937,1150],{"class":642},[637,69939,69406],{"class":2506},[637,69941,6744],{"class":646},[637,69943,69944,69946],{"class":639,"line":854},[637,69945,2500],{"class":642},[637,69947,2520],{"class":683},[4215,69949,69951],{"id":69950},"manual-updates","Manual Updates",[614,69953,69954,69955,69958],{},"To gain finer control over animation mixer updates, enable ",[618,69956,69957],{},"manualUpdate: true"," and manage the update cycle manually.",[626,69960,69963],{"className":1190,"code":69961,"highlights":69962,"language":664,"meta":576,"style":576},"import { useAnimations, useGLTF } from '@tresjs\u002Fcientos'\nimport { useLoop } from '@tresjs\u002Fcore'\n\nconst { state } = useGLTF('\u002Fmodels\u002Fugly-naked-bunny.gltf')\n\nconst animations = computed(() => state.value?.animations || [])\nconst model = computed(() => state?.value?.scene)\nconst { actions, mixer } = useAnimations(animations, model, {\n manualUpdate: true,\n})\n\n\u002F\u002F Handle updates manually\nconst { onBeforeRender } = useLoop()\nonBeforeRender(({ delta }) => {\n mixer.value.update(delta)\n})\n\nconst currentAction = ref()\n\nwatch(actions, (newActions) => {\n currentAction.value = newActions.Greeting\n currentAction.value.play()\n})\n",[577,778,790,800,865],[618,69964,69965,69988,70006,70010,70034,70038,70068,70094,70125,70137,70144,70148,70153,70169,70186,70207,70213,70217,70229,70233,70251,70267,70281],{"__ignoreMap":576},[637,69966,69968,69970,69972,69974,69976,69978,69980,69982,69984,69986],{"class":69967,"line":577},[639,673],[637,69969,677],{"class":676},[637,69971,680],{"class":642},[637,69973,69736],{"class":683},[637,69975,687],{"class":642},[637,69977,4510],{"class":683},[637,69979,693],{"class":642},[637,69981,696],{"class":676},[637,69983,699],{"class":642},[637,69985,702],{"class":663},[637,69987,705],{"class":642},[637,69989,69990,69992,69994,69996,69998,70000,70002,70004],{"class":639,"line":578},[637,69991,677],{"class":676},[637,69993,680],{"class":642},[637,69995,64644],{"class":683},[637,69997,693],{"class":642},[637,69999,696],{"class":676},[637,70001,699],{"class":642},[637,70003,724],{"class":663},[637,70005,705],{"class":642},[637,70007,70008],{"class":639,"line":708},[637,70009,742],{"emptyLinePlaceholder":594},[637,70011,70012,70014,70016,70018,70020,70022,70024,70026,70028,70030,70032],{"class":639,"line":729},[637,70013,2487],{"class":650},[637,70015,680],{"class":642},[637,70017,63249],{"class":683},[637,70019,2500],{"class":642},[637,70021,2503],{"class":642},[637,70023,4510],{"class":2506},[637,70025,2509],{"class":683},[637,70027,2512],{"class":642},[637,70029,69775],{"class":663},[637,70031,2512],{"class":642},[637,70033,2520],{"class":683},[637,70035,70036],{"class":639,"line":739},[637,70037,742],{"emptyLinePlaceholder":594},[637,70039,70040,70042,70044,70046,70048,70050,70052,70054,70056,70058,70060,70062,70064,70066],{"class":639,"line":745},[637,70041,2487],{"class":650},[637,70043,69790],{"class":683},[637,70045,657],{"class":642},[637,70047,3582],{"class":2506},[637,70049,2509],{"class":683},[637,70051,3767],{"class":642},[637,70053,3770],{"class":650},[637,70055,2492],{"class":683},[637,70057,1150],{"class":642},[637,70059,3778],{"class":683},[637,70061,3781],{"class":642},[637,70063,69811],{"class":683},[637,70065,69814],{"class":642},[637,70067,69817],{"class":683},[637,70069,70070,70072,70074,70076,70078,70080,70082,70084,70086,70088,70090,70092],{"class":639,"line":755},[637,70071,2487],{"class":650},[637,70073,5194],{"class":683},[637,70075,657],{"class":642},[637,70077,3582],{"class":2506},[637,70079,2509],{"class":683},[637,70081,3767],{"class":642},[637,70083,3770],{"class":650},[637,70085,2492],{"class":683},[637,70087,3781],{"class":642},[637,70089,3778],{"class":683},[637,70091,3781],{"class":642},[637,70093,5242],{"class":683},[637,70095,70097,70099,70101,70104,70106,70109,70111,70113,70115,70117,70119,70121,70123],{"class":70096,"line":778},[639,673],[637,70098,2487],{"class":650},[637,70100,680],{"class":642},[637,70102,70103],{"class":683}," actions",[637,70105,687],{"class":642},[637,70107,70108],{"class":683}," mixer ",[637,70110,2500],{"class":642},[637,70112,2503],{"class":642},[637,70114,69736],{"class":2506},[637,70116,69862],{"class":683},[637,70118,687],{"class":642},[637,70120,5233],{"class":683},[637,70122,687],{"class":642},[637,70124,1208],{"class":642},[637,70126,70128,70131,70133,70135],{"class":70127,"line":790},[639,673],[637,70129,70130],{"class":646}," manualUpdate",[637,70132,1222],{"class":642},[637,70134,4561],{"class":4560},[637,70136,2560],{"class":642},[637,70138,70140,70142],{"class":70139,"line":800},[639,673],[637,70141,2500],{"class":642},[637,70143,2520],{"class":683},[637,70145,70146],{"class":639,"line":805},[637,70147,742],{"emptyLinePlaceholder":594},[637,70149,70150],{"class":639,"line":831},[637,70151,70152],{"class":1213},"\u002F\u002F Handle updates manually\n",[637,70154,70155,70157,70159,70161,70163,70165,70167],{"class":639,"line":631},[637,70156,2487],{"class":650},[637,70158,680],{"class":642},[637,70160,64973],{"class":683},[637,70162,2500],{"class":642},[637,70164,2503],{"class":642},[637,70166,64644],{"class":2506},[637,70168,6744],{"class":683},[637,70170,70171,70173,70175,70177,70180,70182,70184],{"class":639,"line":854},[637,70172,64986],{"class":2506},[637,70174,2509],{"class":683},[637,70176,41955],{"class":642},[637,70178,70179],{"class":7047}," delta",[637,70181,41972],{"class":642},[637,70183,3770],{"class":650},[637,70185,1208],{"class":642},[637,70187,70189,70192,70194,70196,70198,70200,70202,70205],{"class":70188,"line":865},[639,673],[637,70190,70191],{"class":683}," mixer",[637,70193,1150],{"class":642},[637,70195,3778],{"class":683},[637,70197,1150],{"class":642},[637,70199,6012],{"class":2506},[637,70201,2509],{"class":646},[637,70203,70204],{"class":683},"delta",[637,70206,2520],{"class":646},[637,70208,70209,70211],{"class":639,"line":876},[637,70210,2500],{"class":642},[637,70212,2520],{"class":683},[637,70214,70215],{"class":639,"line":886},[637,70216,742],{"emptyLinePlaceholder":594},[637,70218,70219,70221,70223,70225,70227],{"class":639,"line":632},[637,70220,2487],{"class":650},[637,70222,69878],{"class":683},[637,70224,657],{"class":642},[637,70226,3999],{"class":2506},[637,70228,6744],{"class":683},[637,70230,70231],{"class":639,"line":906},[637,70232,742],{"emptyLinePlaceholder":594},[637,70234,70235,70237,70239,70241,70243,70245,70247,70249],{"class":639,"line":916},[637,70236,12798],{"class":2506},[637,70238,69895],{"class":683},[637,70240,687],{"class":642},[637,70242,3167],{"class":642},[637,70244,69902],{"class":7047},[637,70246,3433],{"class":642},[637,70248,3770],{"class":650},[637,70250,1208],{"class":642},[637,70252,70253,70255,70257,70259,70261,70263,70265],{"class":639,"line":2695},[637,70254,69913],{"class":683},[637,70256,1150],{"class":642},[637,70258,3778],{"class":683},[637,70260,2503],{"class":642},[637,70262,69922],{"class":683},[637,70264,1150],{"class":642},[637,70266,69927],{"class":683},[637,70268,70269,70271,70273,70275,70277,70279],{"class":639,"line":2704},[637,70270,69913],{"class":683},[637,70272,1150],{"class":642},[637,70274,3778],{"class":683},[637,70276,1150],{"class":642},[637,70278,69406],{"class":2506},[637,70280,6744],{"class":646},[637,70282,70283,70285],{"class":639,"line":2738},[637,70284,2500],{"class":642},[637,70286,2520],{"class":683},[504,70288,14787],{"id":18439},[2285,70290,70291],{},[2288,70292,70293,70296,70297,70299,70300,70302,70303,70306],{},[618,70294,70295],{},"manualUpdate"," (optional): Default is ",[618,70298,975],{},". If set to ",[618,70301,965],{},", disables automatic animation mixer updates. You'll need to call ",[618,70304,70305],{},"mixer.value.update(delta)"," manually.",[1331,70308,70309],{},"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 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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":576,"searchDepth":577,"depth":578,"links":70311},[70312,70316],{"id":624,"depth":578,"text":15,"children":70313},[70314,70315],{"id":69709,"depth":708,"text":69710},{"id":69950,"depth":708,"text":69951},{"id":18439,"depth":578,"text":14787},"Composable for managing model animations with AnimationMixer.",{},{"title":487,"description":70317},"TJcEqtFqnepbieID3hzHGMd0QylrwTz-3E1RokTEGoY",{"id":70322,"title":491,"body":70323,"description":70966,"extension":591,"links":592,"meta":70967,"navigation":594,"path":492,"seo":70968,"stem":493,"__hash__":70969},"docs\u002F2.api\u002Fmiscellaneous\u002Fuse-gltf-exporter.md",{"type":501,"value":70324,"toc":70960},[70325,70342,70344,70757,70761,70810,70812,70957],[614,70326,70327,70332,70333,70338,70339,70341],{},[1144,70328,70331],{"href":70329,"rel":70330},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002Findex.html?q=expo#examples\u002Fen\u002Fexporters\u002FGLTFExporter",[1148],"GLTFExporter"," is an addon in Three.js that allows you to download any object3D in a ",[1144,70334,70337],{"href":70335,"rel":70336},"https:\u002F\u002Fwww.khronos.org\u002Fgltf",[1148],"GLTF"," format. ",[1705,70340,17800],{}," provides a composable that simplifies this process with just a few lines of code.",[504,70343,39361],{"id":39360},[626,70345,70348],{"className":628,"code":70346,"highlights":70347,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs\u002Fcore'\nimport { useGLTFExporter } from '@tresjs\u002Fcientos'\nimport { shallowRef } from 'vue'\n\nconst boxRef = shallowRef()\n\n\u002F\u002F the second argument – options – is not required\nconst downloadBox = () => {\n useGLTFExporter(boxRef.value, { fileName: 'cube', binary: true })\n}\n\u003C\u002Fscript>\n\u003Ctemplate>\n \u003CTresCanvas clear-color=\"#82DBC5\" window-size >\n \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" \u002F>\n \u003CTresMesh\n ref=\"boxRef\"\n :position-z=\"30\"\n :scale=\"10\"\n @click=\"downloadBox\"\n >\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" \u002F>\n \u003CTresMeshStandardMaterial :color=\"0x00ff00\" \u002F>\n \u003C\u002FTresMesh>\n \u003CTresDirectionalLight :position=\"[0, 10, 10]\" \u002F>\n \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n\n",[708,800],[618,70349,70350,70370,70388,70408,70426,70430,70442,70446,70451,70466,70508,70512,70520,70528,70550,70582,70588,70600,70614,70628,70644,70648,70680,70701,70709,70741,70749],{"__ignoreMap":576},[637,70351,70352,70354,70356,70358,70360,70362,70364,70366,70368],{"class":639,"line":577},[637,70353,643],{"class":642},[637,70355,647],{"class":646},[637,70357,651],{"class":650},[637,70359,654],{"class":650},[637,70361,657],{"class":642},[637,70363,660],{"class":642},[637,70365,664],{"class":663},[637,70367,660],{"class":642},[637,70369,669],{"class":642},[637,70371,70372,70374,70376,70378,70380,70382,70384,70386],{"class":639,"line":578},[637,70373,677],{"class":676},[637,70375,680],{"class":642},[637,70377,715],{"class":683},[637,70379,693],{"class":642},[637,70381,696],{"class":676},[637,70383,699],{"class":642},[637,70385,724],{"class":663},[637,70387,705],{"class":642},[637,70389,70391,70393,70395,70398,70400,70402,70404,70406],{"class":70390,"line":708},[639,673],[637,70392,677],{"class":676},[637,70394,680],{"class":642},[637,70396,70397],{"class":683}," useGLTFExporter",[637,70399,693],{"class":642},[637,70401,696],{"class":676},[637,70403,699],{"class":642},[637,70405,702],{"class":663},[637,70407,705],{"class":642},[637,70409,70410,70412,70414,70416,70418,70420,70422,70424],{"class":639,"line":729},[637,70411,677],{"class":676},[637,70413,680],{"class":642},[637,70415,3591],{"class":683},[637,70417,693],{"class":642},[637,70419,696],{"class":676},[637,70421,699],{"class":642},[637,70423,633],{"class":663},[637,70425,705],{"class":642},[637,70427,70428],{"class":639,"line":739},[637,70429,742],{"emptyLinePlaceholder":594},[637,70431,70432,70434,70436,70438,70440],{"class":639,"line":745},[637,70433,2487],{"class":650},[637,70435,17086],{"class":683},[637,70437,657],{"class":642},[637,70439,3591],{"class":2506},[637,70441,6744],{"class":683},[637,70443,70444],{"class":639,"line":755},[637,70445,742],{"emptyLinePlaceholder":594},[637,70447,70448],{"class":639,"line":778},[637,70449,70450],{"class":1213},"\u002F\u002F the second argument – options – is not required\n",[637,70452,70453,70455,70458,70460,70462,70464],{"class":639,"line":790},[637,70454,2487],{"class":650},[637,70456,70457],{"class":683}," downloadBox ",[637,70459,657],{"class":642},[637,70461,7289],{"class":642},[637,70463,3770],{"class":650},[637,70465,1208],{"class":642},[637,70467,70469,70472,70474,70476,70478,70480,70482,70484,70487,70489,70491,70493,70495,70497,70500,70502,70504,70506],{"class":70468,"line":800},[639,673],[637,70470,70471],{"class":2506}," useGLTFExporter",[637,70473,2509],{"class":646},[637,70475,17183],{"class":683},[637,70477,1150],{"class":642},[637,70479,3778],{"class":683},[637,70481,687],{"class":642},[637,70483,680],{"class":642},[637,70485,70486],{"class":646}," fileName",[637,70488,1222],{"class":642},[637,70490,699],{"class":642},[637,70492,3934],{"class":663},[637,70494,2512],{"class":642},[637,70496,687],{"class":642},[637,70498,70499],{"class":646}," binary",[637,70501,1222],{"class":642},[637,70503,4561],{"class":4560},[637,70505,693],{"class":642},[637,70507,2520],{"class":646},[637,70509,70510],{"class":639,"line":805},[637,70511,1329],{"class":642},[637,70513,70514,70516,70518],{"class":639,"line":831},[637,70515,732],{"class":642},[637,70517,647],{"class":646},[637,70519,669],{"class":642},[637,70521,70522,70524,70526],{"class":639,"line":631},[637,70523,643],{"class":642},[637,70525,750],{"class":646},[637,70527,669],{"class":642},[637,70529,70530,70532,70534,70536,70538,70540,70542,70544,70547],{"class":639,"line":854},[637,70531,758],{"class":642},[637,70533,761],{"class":646},[637,70535,764],{"class":650},[637,70537,657],{"class":642},[637,70539,660],{"class":642},[637,70541,12358],{"class":663},[637,70543,660],{"class":642},[637,70545,70546],{"class":650}," window-size",[637,70548,70549],{"class":642}," >\n",[637,70551,70552,70554,70556,70558,70560,70562,70564,70566,70568,70570,70572,70574,70576,70578,70580],{"class":639,"line":865},[637,70553,781],{"class":642},[637,70555,784],{"class":646},[637,70557,813],{"class":642},[637,70559,1491],{"class":650},[637,70561,657],{"class":642},[637,70563,660],{"class":642},[637,70565,1498],{"class":642},[637,70567,969],{"class":823},[637,70569,1503],{"class":642},[637,70571,824],{"class":823},[637,70573,1503],{"class":642},[637,70575,7666],{"class":823},[637,70577,1513],{"class":642},[637,70579,660],{"class":642},[637,70581,787],{"class":642},[637,70583,70584,70586],{"class":639,"line":876},[637,70585,781],{"class":642},[637,70587,5311],{"class":646},[637,70589,70590,70592,70594,70596,70598],{"class":639,"line":886},[637,70591,12986],{"class":650},[637,70593,657],{"class":642},[637,70595,660],{"class":642},[637,70597,17183],{"class":663},[637,70599,3224],{"class":642},[637,70601,70602,70604,70606,70608,70610,70612],{"class":639,"line":632},[637,70603,13000],{"class":642},[637,70605,10569],{"class":650},[637,70607,657],{"class":642},[637,70609,660],{"class":642},[637,70611,30008],{"class":823},[637,70613,3224],{"class":642},[637,70615,70616,70618,70620,70622,70624,70626],{"class":639,"line":906},[637,70617,13000],{"class":642},[637,70619,816],{"class":650},[637,70621,657],{"class":642},[637,70623,660],{"class":642},[637,70625,1510],{"class":823},[637,70627,3224],{"class":642},[637,70629,70630,70633,70635,70637,70639,70642],{"class":639,"line":916},[637,70631,70632],{"class":642}," @",[637,70634,9112],{"class":650},[637,70636,657],{"class":642},[637,70638,660],{"class":642},[637,70640,70641],{"class":683},"downloadBox",[637,70643,3224],{"class":642},[637,70645,70646],{"class":639,"line":2695},[637,70647,13020],{"class":642},[637,70649,70650,70652,70654,70656,70658,70660,70662,70664,70666,70668,70670,70672,70674,70676,70678],{"class":639,"line":2704},[637,70651,857],{"class":642},[637,70653,871],{"class":646},[637,70655,813],{"class":642},[637,70657,2021],{"class":650},[637,70659,657],{"class":642},[637,70661,660],{"class":642},[637,70663,1498],{"class":642},[637,70665,1925],{"class":823},[637,70667,1503],{"class":642},[637,70669,1925],{"class":823},[637,70671,1503],{"class":642},[637,70673,1925],{"class":823},[637,70675,1513],{"class":642},[637,70677,660],{"class":642},[637,70679,787],{"class":642},[637,70681,70682,70684,70686,70688,70690,70692,70694,70697,70699],{"class":639,"line":2738},[637,70683,857],{"class":642},[637,70685,2770],{"class":646},[637,70687,813],{"class":642},[637,70689,7770],{"class":650},[637,70691,657],{"class":642},[637,70693,660],{"class":642},[637,70695,70696],{"class":823},"0x00ff00",[637,70698,660],{"class":642},[637,70700,787],{"class":642},[637,70702,70703,70705,70707],{"class":639,"line":2747},[637,70704,899],{"class":642},[637,70706,860],{"class":646},[637,70708,669],{"class":642},[637,70710,70711,70713,70715,70717,70719,70721,70723,70725,70727,70729,70731,70733,70735,70737,70739],{"class":639,"line":2756},[637,70712,781],{"class":642},[637,70714,10031],{"class":646},[637,70716,813],{"class":642},[637,70718,1491],{"class":650},[637,70720,657],{"class":642},[637,70722,660],{"class":642},[637,70724,1498],{"class":642},[637,70726,969],{"class":823},[637,70728,1503],{"class":642},[637,70730,1510],{"class":823},[637,70732,1503],{"class":642},[637,70734,1510],{"class":823},[637,70736,1513],{"class":642},[637,70738,660],{"class":642},[637,70740,787],{"class":642},[637,70742,70743,70745,70747],{"class":639,"line":2765},[637,70744,909],{"class":642},[637,70746,761],{"class":646},[637,70748,669],{"class":642},[637,70750,70751,70753,70755],{"class":639,"line":2787},[637,70752,732],{"class":642},[637,70754,750],{"class":646},[637,70756,669],{"class":642},[504,70758,70760],{"id":70759},"arguments","Arguments",[931,70762,70763,70775],{},[934,70764,70765],{},[937,70766,70767,70769,70771,70773],{},[940,70768,8360],{"align":1001},[940,70770,6178],{},[940,70772,948],{},[940,70774,945],{},[950,70776,70777,70793],{},[937,70778,70779,70784,70788,70790],{},[955,70780,70781],{"align":1001},[1705,70782,70783],{},"Selector",[955,70785,70786],{},[618,70787,7845],{},[955,70789,19523],{},[955,70791,70792],{},"The object to download. Could be an array of objects",[937,70794,70795,70799,70803,70807],{},[955,70796,70797],{"align":1001},[1705,70798,14787],{},[955,70800,70801],{},[618,70802,14787],{},[955,70804,70805],{},[618,70806,1183],{},[955,70808,70809],{},"Description below",[4215,70811,14787],{"id":18439},[931,70813,70814,70826],{},[934,70815,70816],{},[937,70817,70818,70820,70822,70824],{},[940,70819,8360],{"align":1001},[940,70821,6178],{"align":1001},[940,70823,948],{"align":1001},[940,70825,945],{"align":1001},[950,70827,70828,70847,70865,70883,70901,70920,70938],{},[937,70829,70830,70835,70840,70844],{},[955,70831,70832],{"align":1001},[1705,70833,70834],{},"trs",[955,70836,70837],{"align":1001},[618,70838,70839],{},"bool",[955,70841,70842],{"align":1001},[618,70843,975],{},[955,70845,70846],{"align":1001},"Export position, rotation and scale instead of matrix per node",[937,70848,70849,70854,70858,70862],{},[955,70850,70851],{"align":1001},[1705,70852,70853],{},"onlyVisible",[955,70855,70856],{"align":1001},[618,70857,70839],{},[955,70859,70860],{"align":1001},[618,70861,965],{},[955,70863,70864],{"align":1001},"Export only visible objects",[937,70866,70867,70872,70876,70880],{},[955,70868,70869],{"align":1001},[1705,70870,70871],{},"binary",[955,70873,70874],{"align":1001},[618,70875,70839],{},[955,70877,70878],{"align":1001},[618,70879,975],{},[955,70881,70882],{"align":1001},"Export in binary (.glb) format, returning an ArrayBuffer",[937,70884,70885,70890,70894,70898],{},[955,70886,70887],{"align":1001},[1705,70888,70889],{},"maxTextureSize",[955,70891,70892],{"align":1001},[618,70893,5564],{},[955,70895,70896],{"align":1001},[618,70897,14244],{},[955,70899,70900],{"align":1001},"Restricts the image maximum size (both width and height) to the given value",[937,70902,70903,70908,70913,70917],{},[955,70904,70905],{"align":1001},[1705,70906,70907],{},"animations",[955,70909,70910],{"align":1001},[618,70911,70912],{},"Array\u003CAnimationClip>",[955,70914,70915],{"align":1001},[618,70916,1183],{},[955,70918,70919],{"align":1001},"List of animations to be included in the export",[937,70921,70922,70927,70931,70935],{},[955,70923,70924],{"align":1001},[1705,70925,70926],{},"includeCustomExtensions",[955,70928,70929],{"align":1001},[618,70930,70839],{},[955,70932,70933],{"align":1001},[618,70934,975],{},[955,70936,70937],{"align":1001},"Export custom glTF extensions defined on an object's userData.gltfExtensions",[937,70939,70940,70945,70949,70954],{},[955,70941,70942],{"align":1001},[1705,70943,70944],{},"fileName",[955,70946,70947],{"align":1001},[618,70948,3665],{},[955,70950,70951],{"align":1001},[618,70952,70953],{},"Object name",[955,70955,70956],{"align":1001},"Name of the generated file",[1331,70958,70959],{},"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 .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 .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);}",{"title":576,"searchDepth":577,"depth":578,"links":70961},[70962,70963],{"id":39360,"depth":578,"text":39361},{"id":70759,"depth":578,"text":70760,"children":70964},[70965],{"id":18439,"depth":708,"text":14787},"Export 3D objects to GLTF format.",{},{"title":491,"description":70966},"RMYlhgEenD2JjVSHoqXD_ilu6cdNNok5afbVcapEUPE",{"id":70971,"title":495,"body":70972,"description":71260,"extension":591,"links":592,"meta":71261,"navigation":594,"path":496,"seo":71262,"stem":497,"__hash__":71263},"docs\u002F2.api\u002Fmiscellaneous\u002Fuse-intersect.md",{"type":501,"value":70973,"toc":71255},[70974,70991,70993,71009,71152,71154,71182,71186,71253],[614,70975,70976,70978,70979,59861,70982,70984,70985,70990],{},[618,70977,495],{}," is a function that returns ",[618,70980,70981],{},"intersect",[618,70983,18373],{}," that's updated when the observed object enters or leaves the screen. This relies on ",[1144,70986,70989],{"href":70987,"rel":70988},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fcore\u002FObject3D.onBeforeRender",[1148],"THREE.Object3D.onBeforeRender"," so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on other types like group, object3d, bone, etc.",[504,70992,15],{"id":624},[3292,70994,70995],{},[614,70996,70997,70999,71000,71002,71003,71005,71006,1150],{},[618,70998,495],{}," requires a ",[618,71001,761],{}," context, so it is only available in ",[618,71004,761],{}," descendant components' ",[618,71007,71008],{},"\u003Cscript setup>",[626,71010,71013],{"className":628,"code":71011,"highlights":71012,"language":633,"meta":576,"style":576},"\u003Cscript setup lang=\"ts\">\nimport { Torus, useIntersect } from '@tresjs\u002Fcientos'\n\nconst { ref, intersect, off } = useIntersect()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTorus ref=\"ref\">\n \u003CTresMeshNormalMaterial \u002F>\n \u003C\u002FTorus>\n\u003C\u002Ftemplate>\n",[578,729],[618,71014,71015,71035,71060,71064,71090,71098,71102,71110,71128,71136,71144],{"__ignoreMap":576},[637,71016,71017,71019,71021,71023,71025,71027,71029,71031,71033],{"class":639,"line":577},[637,71018,643],{"class":642},[637,71020,647],{"class":646},[637,71022,651],{"class":650},[637,71024,654],{"class":650},[637,71026,657],{"class":642},[637,71028,660],{"class":642},[637,71030,664],{"class":663},[637,71032,660],{"class":642},[637,71034,669],{"class":642},[637,71036,71038,71040,71042,71045,71047,71050,71052,71054,71056,71058],{"class":71037,"line":578},[639,673],[637,71039,677],{"class":676},[637,71041,680],{"class":642},[637,71043,71044],{"class":683}," Torus",[637,71046,687],{"class":642},[637,71048,71049],{"class":683}," useIntersect",[637,71051,693],{"class":642},[637,71053,696],{"class":676},[637,71055,699],{"class":642},[637,71057,702],{"class":663},[637,71059,705],{"class":642},[637,71061,71062],{"class":639,"line":708},[637,71063,742],{"emptyLinePlaceholder":594},[637,71065,71067,71069,71071,71073,71075,71078,71080,71082,71084,71086,71088],{"class":71066,"line":729},[639,673],[637,71068,2487],{"class":650},[637,71070,680],{"class":642},[637,71072,3999],{"class":683},[637,71074,687],{"class":642},[637,71076,71077],{"class":683}," intersect",[637,71079,687],{"class":642},[637,71081,7030],{"class":683},[637,71083,2500],{"class":642},[637,71085,2503],{"class":642},[637,71087,71049],{"class":2506},[637,71089,6744],{"class":683},[637,71091,71092,71094,71096],{"class":639,"line":739},[637,71093,732],{"class":642},[637,71095,647],{"class":646},[637,71097,669],{"class":642},[637,71099,71100],{"class":639,"line":745},[637,71101,742],{"emptyLinePlaceholder":594},[637,71103,71104,71106,71108],{"class":639,"line":755},[637,71105,643],{"class":642},[637,71107,750],{"class":646},[637,71109,669],{"class":642},[637,71111,71112,71114,71116,71118,71120,71122,71124,71126],{"class":639,"line":778},[637,71113,758],{"class":642},[637,71115,297],{"class":646},[637,71117,3999],{"class":650},[637,71119,657],{"class":642},[637,71121,660],{"class":642},[637,71123,6103],{"class":663},[637,71125,660],{"class":642},[637,71127,669],{"class":642},[637,71129,71130,71132,71134],{"class":639,"line":790},[637,71131,781],{"class":642},[637,71133,881],{"class":646},[637,71135,787],{"class":642},[637,71137,71138,71140,71142],{"class":639,"line":800},[637,71139,909],{"class":642},[637,71141,297],{"class":646},[637,71143,669],{"class":642},[637,71145,71146,71148,71150],{"class":639,"line":805},[637,71147,732],{"class":642},[637,71149,750],{"class":646},[637,71151,669],{"class":642},[504,71153,70760],{"id":70759},[931,71155,71156,71166],{},[934,71157,71158],{},[937,71159,71160,71162,71164],{},[940,71161,8360],{"align":1001},[940,71163,945],{},[940,71165,6178],{},[950,71167,71168],{},[937,71169,71170,71174,71177],{},[955,71171,71172],{"align":1001},[1705,71173,15065],{},[955,71175,71176],{},"Optional callback function triggered when the observed object enters or leaves the screen.",[955,71178,71179],{},[618,71180,71181],{},"(isIntersected: boolean) => void",[504,71183,71185],{"id":71184},"return","Return",[931,71187,71188,71198],{},[934,71189,71190],{},[937,71191,71192,71194,71196],{},[940,71193,8360],{"align":1001},[940,71195,945],{},[940,71197,6178],{},[950,71199,71200,71218,71233],{},[937,71201,71202,71206,71213],{},[955,71203,71204],{"align":1001},[1705,71205,6103],{},[955,71207,71208,71209,71212],{},"Vue ",[618,71210,71211],{},"ShallowRef"," to pass to the object to be observed.",[955,71214,71215],{},[618,71216,71217],{},"ShallowRef\u003CObject3D>",[937,71219,71220,71225,71228],{},[955,71221,71222],{"align":1001},[1705,71223,71224],{},"intersects",[955,71226,71227],{},"Updates when the observed object's intersect status changes.",[955,71229,71230],{},[618,71231,71232],{},"ShallowRef\u003Cboolean>",[937,71234,71235,71240,71249],{},[955,71236,71237],{"align":1001},[1705,71238,71239],{},"off",[955,71241,71242,71243,71245,71246,71248],{},"Calling this function stops ",[618,71244,495],{}," until ",[618,71247,6103],{}," changes.",[955,71250,71251],{},[618,71252,6230],{},[1331,71254,47776],{},{"title":576,"searchDepth":577,"depth":578,"links":71256},[71257,71258,71259],{"id":624,"depth":578,"text":15},{"id":70759,"depth":578,"text":70760},{"id":71184,"depth":578,"text":71185},"Detect when objects enter or leave the screen.",{},{"title":495,"description":71260},"QAcMQnGWf_fxqwXEeZxQJtNfPCiyyVyBtXuwXAh1Cg4",1791549570528]