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