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