[{"data":1,"prerenderedAt":1725},["ShallowReactive",2],{"navigation":3,"/api/staging/environment":490,"/api/staging/environment-surround":1720},[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":367,"body":492,"description":1714,"extension":1715,"links":1716,"meta":1717,"navigation":634,"path":368,"seo":1718,"stem":369,"__hash__":1719},"docs/2.api/8.staging/1.environment.md",{"type":493,"value":494,"toc":1701},"minimark",[495,501,514,521,525,770,777,803,809,813,824,1042,1046,1053,1078,1083,1103,1139,1153,1169,1188,1224,1228,1231,1318,1322,1328,1408,1414,1427,1431,1686,1689,1697],[496,497,498],"scene-controls-wrapper",{},[499,500],"staging-environment",{},[502,503,504,505,509,510,513],"p",{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[506,507,508],"code",{},"scene.environment",", and optionally ",[506,511,512],{},"scene.background",".",[502,515,516,517,520],{},"It uses the composable ",[518,519,371],"a",{"href":372}," under the hood to load the cubemap.",[522,523,15],"h2",{"id":524},"usage",[526,527,532],"pre",{"className":528,"code":529,"language":530,"meta":531,"style":531},"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","",[506,533,534,569,598,619,629,636,646,657,668,677,690,696,702,708,714,720,726,735,741,751,761],{"__ignoreMap":531},[535,536,539,543,547,551,554,557,560,564,566],"span",{"class":537,"line":538},"line",1,[535,540,542],{"class":541},"sMK4o","\u003C",[535,544,546],{"class":545},"swJcz","script",[535,548,550],{"class":549},"spNyl"," setup",[535,552,553],{"class":549}," lang",[535,555,556],{"class":541},"=",[535,558,559],{"class":541},"\"",[535,561,563],{"class":562},"sfazB","ts",[535,565,559],{"class":541},[535,567,568],{"class":541},">\n",[535,570,572,576,579,583,586,589,592,595],{"class":537,"line":571},2,[535,573,575],{"class":574},"s7zQu","import",[535,577,578],{"class":541}," {",[535,580,582],{"class":581},"sTEyZ"," TresCanvas",[535,584,585],{"class":541}," }",[535,587,588],{"class":574}," from",[535,590,591],{"class":541}," '",[535,593,594],{"class":562},"@tresjs/core",[535,596,597],{"class":541},"'\n",[535,599,601,603,605,608,610,612,614,617],{"class":537,"line":600},3,[535,602,575],{"class":574},[535,604,578],{"class":541},[535,606,607],{"class":581}," Environment",[535,609,585],{"class":541},[535,611,588],{"class":574},[535,613,591],{"class":541},[535,615,616],{"class":562},"@tresjs/cientos",[535,618,597],{"class":541},[535,620,622,625,627],{"class":537,"line":621},4,[535,623,624],{"class":541},"\u003C/",[535,626,546],{"class":545},[535,628,568],{"class":541},[535,630,632],{"class":537,"line":631},5,[535,633,635],{"emptyLinePlaceholder":634},true,"\n",[535,637,639,641,644],{"class":537,"line":638},6,[535,640,542],{"class":541},[535,642,643],{"class":545},"template",[535,645,568],{"class":541},[535,647,649,652,655],{"class":537,"line":648},7,[535,650,651],{"class":541},"  \u003C",[535,653,654],{"class":545},"TresCanvas",[535,656,568],{"class":541},[535,658,660,663,666],{"class":537,"line":659},8,[535,661,662],{"class":541},"    \u003C",[535,664,665],{"class":545},"Suspense",[535,667,568],{"class":541},[535,669,671,674],{"class":537,"line":670},9,[535,672,673],{"class":541},"      \u003C",[535,675,676],{"class":545},"Environment\n",[535,678,680,683,685,687],{"class":537,"line":679},10,[535,681,682],{"class":549},"        :files",[535,684,556],{"class":541},[535,686,559],{"class":541},[535,688,689],{"class":562},"[\n",[535,691,693],{"class":537,"line":692},11,[535,694,695],{"class":562},"          '/px.jpg',\n",[535,697,699],{"class":537,"line":698},12,[535,700,701],{"class":562},"          '/nx.jpg',\n",[535,703,705],{"class":537,"line":704},13,[535,706,707],{"class":562},"          '/py.jpg',\n",[535,709,711],{"class":537,"line":710},14,[535,712,713],{"class":562},"          '/ny.jpg',\n",[535,715,717],{"class":537,"line":716},15,[535,718,719],{"class":562},"          '/pz.jpg',\n",[535,721,723],{"class":537,"line":722},16,[535,724,725],{"class":562},"          '/nz.jpg',\n",[535,727,729,732],{"class":537,"line":728},17,[535,730,731],{"class":562},"        ]",[535,733,734],{"class":541},"\"\n",[535,736,738],{"class":537,"line":737},18,[535,739,740],{"class":541},"      />\n",[535,742,744,747,749],{"class":537,"line":743},19,[535,745,746],{"class":541},"    \u003C/",[535,748,665],{"class":545},[535,750,568],{"class":541},[535,752,754,757,759],{"class":537,"line":753},20,[535,755,756],{"class":541},"  \u003C/",[535,758,654],{"class":545},[535,760,568],{"class":541},[535,762,764,766,768],{"class":537,"line":763},21,[535,765,624],{"class":541},[535,767,643],{"class":545},[535,769,568],{"class":541},[502,771,772,773,776],{},"You can also pass the ",[506,774,775],{},".hdr"," file directly:",[526,778,780],{"className":528,"code":779,"language":530,"meta":531,"style":531},"\u003CSuspense>\n   \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[506,781,782,790,795],{"__ignoreMap":531},[535,783,784,786,788],{"class":537,"line":538},[535,785,542],{"class":541},[535,787,665],{"class":545},[535,789,568],{"class":541},[535,791,792],{"class":537,"line":571},[535,793,794],{"class":581},"   \u003CEnvironment files=\"/sunset.hdr\" />\n",[535,796,797,799,801],{"class":537,"line":600},[535,798,624],{"class":541},[535,800,665],{"class":545},[535,802,568],{"class":541},[502,804,805],{},[806,807],"img",{"alt":367,"src":808},"/cientos/envmaps.png",[522,810,812],{"id":811},"texture-reference","Texture reference",[502,814,815,816,819,820,823],{},"You can access the model reference by passing a ",[506,817,818],{},"ref"," to the ",[506,821,822],{},"\u003CEnvironment />"," prop",[526,825,828],{"className":528,"code":826,"highlights":827,"language":530,"meta":531,"style":531},"\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",[621,638,670,710,728],[506,829,830,850,868,872,891,895,917,936,943,952,956,964,985,994,1004,1025,1033],{"__ignoreMap":531},[535,831,832,834,836,838,840,842,844,846,848],{"class":537,"line":538},[535,833,542],{"class":541},[535,835,546],{"class":545},[535,837,550],{"class":549},[535,839,553],{"class":549},[535,841,556],{"class":541},[535,843,559],{"class":541},[535,845,563],{"class":562},[535,847,559],{"class":541},[535,849,568],{"class":541},[535,851,852,854,856,858,860,862,864,866],{"class":537,"line":571},[535,853,575],{"class":574},[535,855,578],{"class":541},[535,857,607],{"class":581},[535,859,585],{"class":541},[535,861,588],{"class":574},[535,863,591],{"class":541},[535,865,616],{"class":562},[535,867,597],{"class":541},[535,869,870],{"class":537,"line":600},[535,871,635],{"emptyLinePlaceholder":634},[535,873,876,879,882,884,888],{"class":874,"line":621},[537,875],"highlight",[535,877,878],{"class":549},"const",[535,880,881],{"class":581}," environmentRef ",[535,883,556],{"class":541},[535,885,887],{"class":886},"s2Zo4"," shallowRef",[535,889,890],{"class":581},"()\n",[535,892,893],{"class":537,"line":631},[535,894,635],{"emptyLinePlaceholder":634},[535,896,898,901,904,907,911,914],{"class":897,"line":638},[537,875],[535,899,900],{"class":886},"watch",[535,902,903],{"class":581},"(environmentRef",[535,905,906],{"class":541},",",[535,908,910],{"class":909},"sHdIc"," texture",[535,912,913],{"class":549}," =>",[535,915,916],{"class":541}," {\n",[535,918,919,922,924,927,930,933],{"class":537,"line":648},[535,920,921],{"class":581},"  console",[535,923,513],{"class":541},[535,925,926],{"class":886},"log",[535,928,929],{"class":545},"(",[535,931,932],{"class":581},"texture",[535,934,935],{"class":545},")\n",[535,937,938,941],{"class":537,"line":659},[535,939,940],{"class":541},"}",[535,942,935],{"class":581},[535,944,946,948,950],{"class":945,"line":670},[537,875],[535,947,624],{"class":541},[535,949,546],{"class":545},[535,951,568],{"class":541},[535,953,954],{"class":537,"line":679},[535,955,635],{"emptyLinePlaceholder":634},[535,957,958,960,962],{"class":537,"line":692},[535,959,542],{"class":541},[535,961,643],{"class":545},[535,963,568],{"class":541},[535,965,966,968,970,973,975,977,980,982],{"class":537,"line":698},[535,967,651],{"class":541},[535,969,367],{"class":545},[535,971,972],{"class":549}," ref",[535,974,556],{"class":541},[535,976,559],{"class":541},[535,978,979],{"class":562},"environmentRef",[535,981,559],{"class":541},[535,983,984],{"class":541}," />\n",[535,986,987,989,992],{"class":537,"line":704},[535,988,651],{"class":541},[535,990,991],{"class":545},"TresMesh",[535,993,568],{"class":541},[535,995,997,999,1002],{"class":996,"line":710},[537,875],[535,998,662],{"class":541},[535,1000,1001],{"class":545},"TresSphereGeometry",[535,1003,984],{"class":541},[535,1005,1006,1008,1011,1014,1016,1018,1021,1023],{"class":537,"line":716},[535,1007,662],{"class":541},[535,1009,1010],{"class":545},"TresMeshStandardMaterial",[535,1012,1013],{"class":549}," :env-map",[535,1015,556],{"class":541},[535,1017,559],{"class":541},[535,1019,1020],{"class":562},"envMap",[535,1022,559],{"class":541},[535,1024,984],{"class":541},[535,1026,1027,1029,1031],{"class":537,"line":722},[535,1028,756],{"class":541},[535,1030,991],{"class":545},[535,1032,568],{"class":541},[535,1034,1036,1038,1040],{"class":1035,"line":728},[537,875],[535,1037,624],{"class":541},[535,1039,643],{"class":545},[535,1041,568],{"class":541},[522,1043,1045],{"id":1044},"presets","Presets",[502,1047,1048,1049,1052],{},"You can use one of the available presets by passing the ",[506,1050,1051],{},"preset"," prop:",[526,1054,1056],{"className":528,"code":1055,"language":530,"meta":531,"style":531},"\u003CEnvironment preset=\"city\" />\n",[506,1057,1058],{"__ignoreMap":531},[535,1059,1060,1062,1064,1067,1069,1071,1074,1076],{"class":537,"line":538},[535,1061,542],{"class":541},[535,1063,367],{"class":545},[535,1065,1066],{"class":549}," preset",[535,1068,556],{"class":541},[535,1070,559],{"class":541},[535,1072,1073],{"class":562},"city",[535,1075,559],{"class":541},[535,1077,984],{"class":541},[1079,1080,1082],"h3",{"id":1081},"preset-quality","Preset quality",[502,1084,1085,1086,1094,1095,1099,1100,1052],{},"Presets are served from the ",[518,1087,1091],{"href":1088,"rel":1089},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1090],"nofollow",[506,1092,1093],{},"Tresjs/assets"," CDN at ",[1096,1097,1098],"strong",{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[506,1101,1102],{},"quality",[526,1104,1106],{"className":528,"code":1105,"language":530,"meta":531,"style":531},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[506,1107,1108],{"__ignoreMap":531},[535,1109,1110,1112,1114,1116,1118,1120,1123,1125,1128,1130,1132,1135,1137],{"class":537,"line":538},[535,1111,542],{"class":541},[535,1113,367],{"class":545},[535,1115,1066],{"class":549},[535,1117,556],{"class":541},[535,1119,559],{"class":541},[535,1121,1122],{"class":562},"sunset",[535,1124,559],{"class":541},[535,1126,1127],{"class":549}," quality",[535,1129,556],{"class":541},[535,1131,559],{"class":541},[535,1133,1134],{"class":562},"4k",[535,1136,559],{"class":541},[535,1138,984],{"class":541},[502,1140,1141,1142,1145,1146,1149,1150,513],{},"Available tiers: ",[506,1143,1144],{},"'1k'"," (default), ",[506,1147,1148],{},"'2k'",", ",[506,1151,1152],{},"'4k'",[1154,1155,1156],"warning",{},[502,1157,1158,1159,1162,1163,1165,1166,1168],{},"Higher tiers are significantly larger: ",[1096,1160,1161],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[506,1164,1148],{}," / ",[506,1167,1152],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[502,1170,1171,1172,1174,1175,1177,1178,1165,1181,1184,1185,1187],{},"The ",[506,1173,1102],{}," prop only applies when ",[506,1176,1051],{}," is set — it is ignored when loading via ",[506,1179,1180],{},"files",[506,1182,1183],{},"path",". An unsupported value falls back to ",[506,1186,1144],{}," with a console warning.",[1154,1189,1190],{},[502,1191,1192,1201,1202,1205,1206,1209,1210,1213,1214,1217,1218,1220,1221,1223],{},[1096,1193,1194,1196,1197,1200],{},[506,1195,1102],{}," has no visible effect when you pass ",[518,1198,1199],{"href":376},"Lightformers"," (or any children)."," With children present, ",[506,1203,1204],{},"\u003CEnvironment>"," bakes the environment and background into a ",[506,1207,1208],{},"WebGLCubeRenderTarget"," sized by the ",[506,1211,1212],{},"resolution"," prop (default ",[506,1215,1216],{},"256","), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[506,1219,1102],{},". For a sharp high-res background, either omit the children or raise ",[506,1222,1212],{}," (a cube big enough to match 4K is expensive to render each frame).",[522,1225,1227],{"id":1226},"environment-rotation","Environment Rotation",[502,1229,1230],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[526,1232,1234],{"className":528,"code":1233,"language":530,"meta":531,"style":531},"\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",[506,1235,1236,1244,1250,1263,1277,1291,1305,1310],{"__ignoreMap":531},[535,1237,1238,1240,1242],{"class":537,"line":538},[535,1239,542],{"class":541},[535,1241,643],{"class":545},[535,1243,568],{"class":541},[535,1245,1246,1248],{"class":537,"line":571},[535,1247,651],{"class":541},[535,1249,676],{"class":545},[535,1251,1252,1255,1257,1259,1261],{"class":537,"line":600},[535,1253,1254],{"class":549},"    preset",[535,1256,556],{"class":541},[535,1258,559],{"class":541},[535,1260,1122],{"class":562},[535,1262,734],{"class":541},[535,1264,1265,1268,1270,1272,1275],{"class":537,"line":621},[535,1266,1267],{"class":549},"    :background",[535,1269,556],{"class":541},[535,1271,559],{"class":541},[535,1273,1274],{"class":562},"true",[535,1276,734],{"class":541},[535,1278,1279,1282,1284,1286,1289],{"class":537,"line":631},[535,1280,1281],{"class":549},"    :background-rotation",[535,1283,556],{"class":541},[535,1285,559],{"class":541},[535,1287,1288],{"class":562},"[0, Math.PI / 2, 0]",[535,1290,734],{"class":541},[535,1292,1293,1296,1298,1300,1303],{"class":537,"line":638},[535,1294,1295],{"class":549},"    :environment-rotation",[535,1297,556],{"class":541},[535,1299,559],{"class":541},[535,1301,1302],{"class":562},"[0, Math.PI / 4, 0]",[535,1304,734],{"class":541},[535,1306,1307],{"class":537,"line":648},[535,1308,1309],{"class":541},"  />\n",[535,1311,1312,1314,1316],{"class":537,"line":659},[535,1313,624],{"class":541},[535,1315,643],{"class":545},[535,1317,568],{"class":541},[1079,1319,1321],{"id":1320},"syncing-rotations","Syncing Rotations",[502,1323,1324,1325,1052],{},"You can sync the environment rotation with the background rotation using the ",[506,1326,1327],{},"syncMaterials",[526,1329,1331],{"className":528,"code":1330,"language":530,"meta":531,"style":531},"\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",[506,1332,1333,1341,1347,1359,1371,1384,1396,1400],{"__ignoreMap":531},[535,1334,1335,1337,1339],{"class":537,"line":538},[535,1336,542],{"class":541},[535,1338,643],{"class":545},[535,1340,568],{"class":541},[535,1342,1343,1345],{"class":537,"line":571},[535,1344,651],{"class":541},[535,1346,676],{"class":545},[535,1348,1349,1351,1353,1355,1357],{"class":537,"line":600},[535,1350,1254],{"class":549},[535,1352,556],{"class":541},[535,1354,559],{"class":541},[535,1356,1122],{"class":562},[535,1358,734],{"class":541},[535,1360,1361,1363,1365,1367,1369],{"class":537,"line":621},[535,1362,1267],{"class":549},[535,1364,556],{"class":541},[535,1366,559],{"class":541},[535,1368,1274],{"class":562},[535,1370,734],{"class":541},[535,1372,1373,1376,1378,1380,1382],{"class":537,"line":631},[535,1374,1375],{"class":549},"    :sync-materials",[535,1377,556],{"class":541},[535,1379,559],{"class":541},[535,1381,1274],{"class":562},[535,1383,734],{"class":541},[535,1385,1386,1388,1390,1392,1394],{"class":537,"line":638},[535,1387,1281],{"class":549},[535,1389,556],{"class":541},[535,1391,559],{"class":541},[535,1393,1288],{"class":562},[535,1395,734],{"class":541},[535,1397,1398],{"class":537,"line":648},[535,1399,1309],{"class":541},[535,1401,1402,1404,1406],{"class":537,"line":659},[535,1403,624],{"class":541},[535,1405,643],{"class":545},[535,1407,568],{"class":541},[502,1409,1410,1411,1413],{},"When ",[506,1412,1327],{}," is enabled:",[1415,1416,1417,1421,1424],"ul",{},[1418,1419,1420],"li",{},"The environment rotation will automatically match the background rotation",[1418,1422,1423],{},"All materials in the scene will update to reflect the new rotation",[1418,1425,1426],{},"This ensures visual consistency between the background and environment reflections",[522,1428,1430],{"id":1429},"props","Props",[1432,1433,1434,1451],"table",{},[1435,1436,1437],"thead",{},[1438,1439,1440,1445,1448],"tr",{},[1441,1442,1444],"th",{"align":1443},"left","Prop",[1441,1446,1447],{"align":1443},"Description",[1441,1449,1450],{},"Default",[1452,1453,1454,1469,1482,1502,1520,1533,1546,1572,1583,1596,1609,1622,1634,1646,1661,1675],"tbody",{},[1438,1455,1456,1461,1464],{},[1457,1458,1459],"td",{"align":1443},[506,1460,1180],{},[1457,1462,1463],{"align":1443},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[1457,1465,1466],{},[506,1467,1468],{},"undefined",[1438,1470,1471,1475,1478],{},[1457,1472,1473],{"align":1443},[506,1474,1183],{},[1457,1476,1477],{"align":1443},"Path to the environment map files",[1457,1479,1480],{},[506,1481,1468],{},[1438,1483,1484,1489,1492],{},[1457,1485,1486],{"align":1443},[506,1487,1488],{},"encoding",[1457,1490,1491],{"align":1443},"Encoding of the environment map",[1457,1493,1494,1497,1498,1501],{},[506,1495,1496],{},"SRGBColorSpace"," for array files, ",[506,1499,1500],{},"LinearEncoding"," for single texture",[1438,1503,1504,1509,1515],{},[1457,1505,1506],{"align":1443},[506,1507,1508],{},"background",[1457,1510,1511,1512,1514],{"align":1443},"If ",[506,1513,1274],{},", the environment map will be used as the scene background",[1457,1516,1517],{},[506,1518,1519],{},"false",[1438,1521,1522,1527,1530],{},[1457,1523,1524],{"align":1443},[506,1525,1526],{},"blur",[1457,1528,1529],{"align":1443},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[1457,1531,1532],{},"0",[1438,1534,1535,1539,1542],{},[1457,1536,1537],{"align":1443},[506,1538,1051],{},[1457,1540,1541],{"align":1443},"Preset environment map",[1457,1543,1544],{},[506,1545,1468],{},[1438,1547,1548,1552,1568],{},[1457,1549,1550],{"align":1443},[506,1551,1102],{},[1457,1553,1554,1555,1558,1559,1558,1562,1564,1565,1567],{"align":1443},"Resolution variant of the preset HDR (",[506,1556,1557],{},"1k"," | ",[506,1560,1561],{},"2k",[506,1563,1134],{},"). Only applies when ",[506,1566,1051],{}," is set",[1457,1569,1570],{},[506,1571,1557],{},[1438,1573,1574,1578,1581],{},[1457,1575,1576],{"align":1443},[506,1577,1212],{},[1457,1579,1580],{"align":1443},"The resolution of the WebGLCubeRenderTarget",[1457,1582,1216],{},[1438,1584,1585,1590,1593],{},[1457,1586,1587],{"align":1443},[506,1588,1589],{},"near",[1457,1591,1592],{"align":1443},"The near of the CubeCamera",[1457,1594,1595],{},"1",[1438,1597,1598,1603,1606],{},[1457,1599,1600],{"align":1443},[506,1601,1602],{},"far",[1457,1604,1605],{"align":1443},"The far of the CubeCamera",[1457,1607,1608],{},"1000",[1438,1610,1611,1616,1619],{},[1457,1612,1613],{"align":1443},[506,1614,1615],{},"frames",[1457,1617,1618],{"align":1443},"The frames of the cubeCamera.update",[1457,1620,1621],{},"Infinity",[1438,1623,1624,1629,1632],{},[1457,1625,1626],{"align":1443},[506,1627,1628],{},"backgroundIntensity",[1457,1630,1631],{"align":1443},"Intensity of the background",[1457,1633,1595],{},[1438,1635,1636,1641,1644],{},[1457,1637,1638],{"align":1443},[506,1639,1640],{},"environmentIntensity",[1457,1642,1643],{"align":1443},"Intensity of the environment",[1457,1645,1595],{},[1438,1647,1648,1653,1656],{},[1457,1649,1650],{"align":1443},[506,1651,1652],{},"backgroundRotation",[1457,1654,1655],{"align":1443},"Rotation of the background (in radians)",[1457,1657,1658],{},[535,1659,1660],{},"0, 0, 0",[1438,1662,1663,1668,1671],{},[1457,1664,1665],{"align":1443},[506,1666,1667],{},"environmentRotation",[1457,1669,1670],{"align":1443},"Rotation of the environment (in radians)",[1457,1672,1673],{},[535,1674,1660],{},[1438,1676,1677,1681,1684],{},[1457,1678,1679],{"align":1443},[506,1680,1327],{},[1457,1682,1683],{"align":1443},"If true, environment rotation will sync with background rotation",[1457,1685,1519],{},[1079,1687,1045],{"id":1688},"presets-1",[526,1690,1695],{"className":1691,"code":1693,"language":1694},[1692],"language-text","sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n","text",[506,1696,1693],{"__ignoreMap":531},[1698,1699,1700],"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":531,"searchDepth":538,"depth":571,"links":1702},[1703,1704,1705,1708,1711],{"id":524,"depth":571,"text":15},{"id":811,"depth":571,"text":812},{"id":1044,"depth":571,"text":1045,"children":1706},[1707],{"id":1081,"depth":600,"text":1082},{"id":1226,"depth":571,"text":1227,"children":1709},[1710],{"id":1320,"depth":600,"text":1321},{"id":1429,"depth":571,"text":1430,"children":1712},[1713],{"id":1688,"depth":600,"text":1045},"Automatically sets up a global cubemap for scene environment and background.","md",null,{},{"title":367,"description":1714},"Jmd9cUvs-xIbV-RK7ZZXFZUkOqGMazbMRyhSpIpQ_LY",[1721,1723],{"title":361,"path":362,"stem":363,"description":1722,"children":-1},"All staging components",{"title":371,"path":372,"stem":373,"description":1724,"children":-1},"Composable that sets up a global cubemap for scene environment and background.",1785417273112]