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