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