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