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