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