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