[{"data":1,"prerenderedAt":1733},["ShallowReactive",2],{"navigation":3,"/api/staging/environment":498,"/api/staging/environment-surround":1728},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"Loading Models","/getting-started/loading-models","1.getting-started/4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","/api","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api/index",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","/api/abstractions","2.api/1.abstractions/index",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","/api/abstractions/align","2.api/1.abstractions/align",{"title":45,"path":46,"stem":47},"Billboard","/api/abstractions/billboard","2.api/1.abstractions/billboard",{"title":49,"path":50,"stem":51},"Camera Shake","/api/abstractions/camera-shake","2.api/1.abstractions/camera-shake",{"title":53,"path":54,"stem":55},"Decal","/api/abstractions/decal","2.api/1.abstractions/decal",{"title":57,"path":58,"stem":59},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":61,"path":62,"stem":63},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":65,"path":66,"stem":67},"Instances","/api/abstractions/instances","2.api/1.abstractions/instances",{"title":69,"path":70,"stem":71},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":73,"path":74,"stem":75},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":77,"path":78,"stem":79},"Merged","/api/abstractions/merged","2.api/1.abstractions/merged",{"title":81,"path":82,"stem":83},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":85,"path":86,"stem":87},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":89,"path":90,"stem":91},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","/api/controls","2.api/2.controls/index",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","/api/controls/keyboard-controls","2.api/2.controls/keyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","/api/controls/map-controls","2.api/2.controls/map-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","/api/controls/orbit-controls","2.api/2.controls/orbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","/api/controls/pointer-lock-controls","2.api/2.controls/pointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","/api/controls/transform-controls","2.api/2.controls/transform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","/api/loaders","2.api/3.loaders/index",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","/api/loaders/use-gltf","2.api/3.loaders/1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","/api/loaders/gltf-model","2.api/3.loaders/2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","/api/loaders/use-fbx","2.api/3.loaders/3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","/api/loaders/fbx-model","2.api/3.loaders/4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","/api/loaders/use-texture","2.api/3.loaders/5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","/api/loaders/use-textures","2.api/3.loaders/6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","/api/loaders/use-svg","2.api/3.loaders/7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","/api/loaders/use-progress","2.api/3.loaders/use-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","/api/loaders/use-video-texture","2.api/3.loaders/use-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","/api/materials","2.api/4.materials/index",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","/api/materials/custom-shader-material","2.api/4.materials/custom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","/api/materials/glass-material","2.api/4.materials/glass-material",{"title":183,"path":184,"stem":185},"Holographic Material","/api/materials/holographic-material","2.api/4.materials/holographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","/api/materials/mesh-discard-material","2.api/4.materials/mesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","/api/materials/mesh-portal-material","2.api/4.materials/mesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","/api/materials/mesh-reflection-material","2.api/4.materials/mesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","/api/materials/mesh-transmission-material","2.api/4.materials/mesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","/api/materials/point-material","2.api/4.materials/point-material",{"title":207,"path":208,"stem":209},"Wobble Material","/api/materials/wobble-material","2.api/4.materials/wobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","/api/shapes","2.api/5.shapes/index",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","/api/shapes/box","2.api/5.shapes/box",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","/api/shapes/catmullromcurve3","2.api/5.shapes/catmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","/api/shapes/circle","2.api/5.shapes/circle",{"title":229,"path":230,"stem":231},"Cone","/api/shapes/cone","2.api/5.shapes/cone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","/api/shapes/cubic-bezier-line","2.api/5.shapes/cubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","/api/shapes/cylinder","2.api/5.shapes/cylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","/api/shapes/dodecahedron","2.api/5.shapes/dodecahedron",{"title":245,"path":246,"stem":247},"Grid","/api/shapes/grid","2.api/5.shapes/grid",{"title":249,"path":250,"stem":251},"Icosahedron","/api/shapes/icosahedron","2.api/5.shapes/icosahedron",{"title":253,"path":254,"stem":255},"Line2","/api/shapes/line2","2.api/5.shapes/line2",{"title":257,"path":258,"stem":259},"Octahedron","/api/shapes/octahedron","2.api/5.shapes/octahedron",{"title":261,"path":262,"stem":263},"Plane","/api/shapes/plane","2.api/5.shapes/plane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","/api/shapes/quadratic-bezier-line","2.api/5.shapes/quadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","/api/shapes/ring","2.api/5.shapes/ring",{"title":273,"path":274,"stem":275},"Rounded Box","/api/shapes/rounded-box","2.api/5.shapes/rounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","/api/shapes/rounded-plane","2.api/5.shapes/rounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","/api/shapes/screen-quad","2.api/5.shapes/screen-quad",{"title":285,"path":286,"stem":287},"Sphere","/api/shapes/sphere","2.api/5.shapes/sphere",{"title":289,"path":290,"stem":291},"Superformula","/api/shapes/superformula","2.api/5.shapes/superformula",{"title":293,"path":294,"stem":295},"Tetrahedron","/api/shapes/tetrahedron","2.api/5.shapes/tetrahedron",{"title":297,"path":298,"stem":299},"Torus","/api/shapes/torus","2.api/5.shapes/torus",{"title":301,"path":302,"stem":303},"Torus Knot","/api/shapes/torus-knot","2.api/5.shapes/torus-knot",{"title":305,"path":306,"stem":307},"Tube","/api/shapes/tube","2.api/5.shapes/tube",{"title":309,"path":310,"stem":311,"children":312},"Debug/Performance","/api/debug-performance","2.api/6.debug-performance/index",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","/api/debug-performance/helper","2.api/6.debug-performance/helper",{"title":319,"path":320,"stem":321},"LOD","/api/debug-performance/lod","2.api/6.debug-performance/lod",{"title":323,"path":324,"stem":325},"Stats","/api/debug-performance/stats","2.api/6.debug-performance/stats",{"title":327,"path":328,"stem":329},"StatsGl","/api/debug-performance/stats-gl","2.api/6.debug-performance/stats-gl",{"title":331,"path":332,"stem":333},"useBVH","/api/debug-performance/use-bvh","2.api/6.debug-performance/use-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light/Shadow","/api/light-shadow","2.api/7.light-shadow/index",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","/api/light-shadow/accumulative-shadows","2.api/7.light-shadow/accumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","/api/light-shadow/bake-shadows","2.api/7.light-shadow/bake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","/api/light-shadow/circle-shadow","2.api/7.light-shadow/circle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","/api/light-shadow/contact-shadows","2.api/7.light-shadow/contact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","/api/light-shadow/lensflare","2.api/7.light-shadow/lensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","/api/light-shadow/randomized-lights","2.api/7.light-shadow/randomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","/api/light-shadow/soft-shadows","2.api/7.light-shadow/soft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","/api/staging","2.api/8.staging/index",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","/api/staging/environment","2.api/8.staging/1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","/api/staging/use-environment","2.api/8.staging/2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","/api/staging/lightformer","2.api/8.staging/3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","/api/staging/backdrop","2.api/8.staging/backdrop",{"title":391,"path":392,"stem":393},"Ocean","/api/staging/ocean","2.api/8.staging/ocean",{"title":395,"path":396,"stem":397},"Precipitation","/api/staging/precipitation","2.api/8.staging/precipitation",{"title":399,"path":400,"stem":401},"Sky","/api/staging/sky","2.api/8.staging/sky",{"title":403,"path":404,"stem":405},"Smoke","/api/staging/smoke","2.api/8.staging/smoke",{"title":407,"path":408,"stem":409},"Sparkles","/api/staging/sparkles","2.api/8.staging/sparkles",{"title":411,"path":412,"stem":413},"Stage","/api/staging/stage","2.api/8.staging/stage",{"title":415,"path":416,"stem":417},"Stars","/api/staging/stars","2.api/8.staging/stars",{"title":419,"path":420,"stem":421,"children":422},"Objects","/api/objects","2.api/9.objects/index",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","/api/objects/animated-sprite","2.api/9.objects/animated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","/api/objects/cube-camera","2.api/9.objects/cube-camera",{"title":433,"path":434,"stem":435},"Fbo","/api/objects/fbo","2.api/9.objects/fbo",{"title":437,"path":438,"stem":439},"GradientTexture","/api/objects/gradient-texture","2.api/9.objects/gradient-texture",{"title":441,"path":442,"stem":443},"HTML","/api/objects/html","2.api/9.objects/html",{"title":445,"path":446,"stem":447},"Image","/api/objects/image","2.api/9.objects/image",{"title":449,"path":450,"stem":451},"MarchingCubes","/api/objects/marching-cubes","2.api/9.objects/marching-cubes",{"title":453,"path":454,"stem":455},"Reflector","/api/objects/reflector","2.api/9.objects/reflector",{"title":457,"path":458,"stem":459},"Refractor","/api/objects/refractor","2.api/9.objects/refractor",{"title":461,"path":462,"stem":463},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":475,"path":476,"stem":477},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":479,"path":480,"stem":481},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":487,"path":488,"stem":489},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":499,"title":375,"body":500,"description":1722,"extension":1723,"links":1724,"meta":1725,"navigation":642,"path":376,"seo":1726,"stem":377,"__hash__":1727},"docs/2.api/8.staging/1.environment.md",{"type":501,"value":502,"toc":1709},"minimark",[503,509,522,529,533,778,785,811,817,821,832,1050,1054,1061,1086,1091,1111,1147,1161,1177,1196,1232,1236,1239,1326,1330,1336,1416,1422,1435,1439,1694,1697,1705],[504,505,506],"scene-controls-wrapper",{},[507,508],"staging-environment",{},[510,511,512,513,517,518,521],"p",{},"Is a component abstraction that automatically sets up a global cubemap, which affects the default ",[514,515,516],"code",{},"scene.environment",", and optionally ",[514,519,520],{},"scene.background",".",[510,523,524,525,528],{},"It uses the composable ",[526,527,379],"a",{"href":380}," under the hood to load the cubemap.",[530,531,15],"h2",{"id":532},"usage",[534,535,540],"pre",{"className":536,"code":537,"language":538,"meta":539,"style":539},"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","",[514,541,542,577,606,627,637,644,654,665,676,685,698,704,710,716,722,728,734,743,749,759,769],{"__ignoreMap":539},[543,544,547,551,555,559,562,565,568,572,574],"span",{"class":545,"line":546},"line",1,[543,548,550],{"class":549},"sMK4o","\u003C",[543,552,554],{"class":553},"swJcz","script",[543,556,558],{"class":557},"spNyl"," setup",[543,560,561],{"class":557}," lang",[543,563,564],{"class":549},"=",[543,566,567],{"class":549},"\"",[543,569,571],{"class":570},"sfazB","ts",[543,573,567],{"class":549},[543,575,576],{"class":549},">\n",[543,578,580,584,587,591,594,597,600,603],{"class":545,"line":579},2,[543,581,583],{"class":582},"s7zQu","import",[543,585,586],{"class":549}," {",[543,588,590],{"class":589},"sTEyZ"," TresCanvas",[543,592,593],{"class":549}," }",[543,595,596],{"class":582}," from",[543,598,599],{"class":549}," '",[543,601,602],{"class":570},"@tresjs/core",[543,604,605],{"class":549},"'\n",[543,607,609,611,613,616,618,620,622,625],{"class":545,"line":608},3,[543,610,583],{"class":582},[543,612,586],{"class":549},[543,614,615],{"class":589}," Environment",[543,617,593],{"class":549},[543,619,596],{"class":582},[543,621,599],{"class":549},[543,623,624],{"class":570},"@tresjs/cientos",[543,626,605],{"class":549},[543,628,630,633,635],{"class":545,"line":629},4,[543,631,632],{"class":549},"\u003C/",[543,634,554],{"class":553},[543,636,576],{"class":549},[543,638,640],{"class":545,"line":639},5,[543,641,643],{"emptyLinePlaceholder":642},true,"\n",[543,645,647,649,652],{"class":545,"line":646},6,[543,648,550],{"class":549},[543,650,651],{"class":553},"template",[543,653,576],{"class":549},[543,655,657,660,663],{"class":545,"line":656},7,[543,658,659],{"class":549},"  \u003C",[543,661,662],{"class":553},"TresCanvas",[543,664,576],{"class":549},[543,666,668,671,674],{"class":545,"line":667},8,[543,669,670],{"class":549},"    \u003C",[543,672,673],{"class":553},"Suspense",[543,675,576],{"class":549},[543,677,679,682],{"class":545,"line":678},9,[543,680,681],{"class":549},"      \u003C",[543,683,684],{"class":553},"Environment\n",[543,686,688,691,693,695],{"class":545,"line":687},10,[543,689,690],{"class":557},"        :files",[543,692,564],{"class":549},[543,694,567],{"class":549},[543,696,697],{"class":570},"[\n",[543,699,701],{"class":545,"line":700},11,[543,702,703],{"class":570},"          '/px.jpg',\n",[543,705,707],{"class":545,"line":706},12,[543,708,709],{"class":570},"          '/nx.jpg',\n",[543,711,713],{"class":545,"line":712},13,[543,714,715],{"class":570},"          '/py.jpg',\n",[543,717,719],{"class":545,"line":718},14,[543,720,721],{"class":570},"          '/ny.jpg',\n",[543,723,725],{"class":545,"line":724},15,[543,726,727],{"class":570},"          '/pz.jpg',\n",[543,729,731],{"class":545,"line":730},16,[543,732,733],{"class":570},"          '/nz.jpg',\n",[543,735,737,740],{"class":545,"line":736},17,[543,738,739],{"class":570},"        ]",[543,741,742],{"class":549},"\"\n",[543,744,746],{"class":545,"line":745},18,[543,747,748],{"class":549},"      />\n",[543,750,752,755,757],{"class":545,"line":751},19,[543,753,754],{"class":549},"    \u003C/",[543,756,673],{"class":553},[543,758,576],{"class":549},[543,760,762,765,767],{"class":545,"line":761},20,[543,763,764],{"class":549},"  \u003C/",[543,766,662],{"class":553},[543,768,576],{"class":549},[543,770,772,774,776],{"class":545,"line":771},21,[543,773,632],{"class":549},[543,775,651],{"class":553},[543,777,576],{"class":549},[510,779,780,781,784],{},"You can also pass the ",[514,782,783],{},".hdr"," file directly:",[534,786,788],{"className":536,"code":787,"language":538,"meta":539,"style":539},"\u003CSuspense>\n   \u003CEnvironment files=\"/sunset.hdr\" />\n\u003C/Suspense>\n",[514,789,790,798,803],{"__ignoreMap":539},[543,791,792,794,796],{"class":545,"line":546},[543,793,550],{"class":549},[543,795,673],{"class":553},[543,797,576],{"class":549},[543,799,800],{"class":545,"line":579},[543,801,802],{"class":589},"   \u003CEnvironment files=\"/sunset.hdr\" />\n",[543,804,805,807,809],{"class":545,"line":608},[543,806,632],{"class":549},[543,808,673],{"class":553},[543,810,576],{"class":549},[510,812,813],{},[814,815],"img",{"alt":375,"src":816},"/cientos/envmaps.png",[530,818,820],{"id":819},"texture-reference","Texture reference",[510,822,823,824,827,828,831],{},"You can access the model reference by passing a ",[514,825,826],{},"ref"," to the ",[514,829,830],{},"\u003CEnvironment />"," prop",[534,833,836],{"className":536,"code":834,"highlights":835,"language":538,"meta":539,"style":539},"\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",[629,646,678,718,736],[514,837,838,858,876,880,899,903,925,944,951,960,964,972,993,1002,1012,1033,1041],{"__ignoreMap":539},[543,839,840,842,844,846,848,850,852,854,856],{"class":545,"line":546},[543,841,550],{"class":549},[543,843,554],{"class":553},[543,845,558],{"class":557},[543,847,561],{"class":557},[543,849,564],{"class":549},[543,851,567],{"class":549},[543,853,571],{"class":570},[543,855,567],{"class":549},[543,857,576],{"class":549},[543,859,860,862,864,866,868,870,872,874],{"class":545,"line":579},[543,861,583],{"class":582},[543,863,586],{"class":549},[543,865,615],{"class":589},[543,867,593],{"class":549},[543,869,596],{"class":582},[543,871,599],{"class":549},[543,873,624],{"class":570},[543,875,605],{"class":549},[543,877,878],{"class":545,"line":608},[543,879,643],{"emptyLinePlaceholder":642},[543,881,884,887,890,892,896],{"class":882,"line":629},[545,883],"highlight",[543,885,886],{"class":557},"const",[543,888,889],{"class":589}," environmentRef ",[543,891,564],{"class":549},[543,893,895],{"class":894},"s2Zo4"," shallowRef",[543,897,898],{"class":589},"()\n",[543,900,901],{"class":545,"line":639},[543,902,643],{"emptyLinePlaceholder":642},[543,904,906,909,912,915,919,922],{"class":905,"line":646},[545,883],[543,907,908],{"class":894},"watch",[543,910,911],{"class":589},"(environmentRef",[543,913,914],{"class":549},",",[543,916,918],{"class":917},"sHdIc"," texture",[543,920,921],{"class":557}," =>",[543,923,924],{"class":549}," {\n",[543,926,927,930,932,935,938,941],{"class":545,"line":656},[543,928,929],{"class":589},"  console",[543,931,521],{"class":549},[543,933,934],{"class":894},"log",[543,936,937],{"class":553},"(",[543,939,940],{"class":589},"texture",[543,942,943],{"class":553},")\n",[543,945,946,949],{"class":545,"line":667},[543,947,948],{"class":549},"}",[543,950,943],{"class":589},[543,952,954,956,958],{"class":953,"line":678},[545,883],[543,955,632],{"class":549},[543,957,554],{"class":553},[543,959,576],{"class":549},[543,961,962],{"class":545,"line":687},[543,963,643],{"emptyLinePlaceholder":642},[543,965,966,968,970],{"class":545,"line":700},[543,967,550],{"class":549},[543,969,651],{"class":553},[543,971,576],{"class":549},[543,973,974,976,978,981,983,985,988,990],{"class":545,"line":706},[543,975,659],{"class":549},[543,977,375],{"class":553},[543,979,980],{"class":557}," ref",[543,982,564],{"class":549},[543,984,567],{"class":549},[543,986,987],{"class":570},"environmentRef",[543,989,567],{"class":549},[543,991,992],{"class":549}," />\n",[543,994,995,997,1000],{"class":545,"line":712},[543,996,659],{"class":549},[543,998,999],{"class":553},"TresMesh",[543,1001,576],{"class":549},[543,1003,1005,1007,1010],{"class":1004,"line":718},[545,883],[543,1006,670],{"class":549},[543,1008,1009],{"class":553},"TresSphereGeometry",[543,1011,992],{"class":549},[543,1013,1014,1016,1019,1022,1024,1026,1029,1031],{"class":545,"line":724},[543,1015,670],{"class":549},[543,1017,1018],{"class":553},"TresMeshStandardMaterial",[543,1020,1021],{"class":557}," :env-map",[543,1023,564],{"class":549},[543,1025,567],{"class":549},[543,1027,1028],{"class":570},"envMap",[543,1030,567],{"class":549},[543,1032,992],{"class":549},[543,1034,1035,1037,1039],{"class":545,"line":730},[543,1036,764],{"class":549},[543,1038,999],{"class":553},[543,1040,576],{"class":549},[543,1042,1044,1046,1048],{"class":1043,"line":736},[545,883],[543,1045,632],{"class":549},[543,1047,651],{"class":553},[543,1049,576],{"class":549},[530,1051,1053],{"id":1052},"presets","Presets",[510,1055,1056,1057,1060],{},"You can use one of the available presets by passing the ",[514,1058,1059],{},"preset"," prop:",[534,1062,1064],{"className":536,"code":1063,"language":538,"meta":539,"style":539},"\u003CEnvironment preset=\"city\" />\n",[514,1065,1066],{"__ignoreMap":539},[543,1067,1068,1070,1072,1075,1077,1079,1082,1084],{"class":545,"line":546},[543,1069,550],{"class":549},[543,1071,375],{"class":553},[543,1073,1074],{"class":557}," preset",[543,1076,564],{"class":549},[543,1078,567],{"class":549},[543,1080,1081],{"class":570},"city",[543,1083,567],{"class":549},[543,1085,992],{"class":549},[1087,1088,1090],"h3",{"id":1089},"preset-quality","Preset quality",[510,1092,1093,1094,1102,1103,1107,1108,1060],{},"Presets are served from the ",[526,1095,1099],{"href":1096,"rel":1097},"https://github.com/Tresjs/assets/tree/main/textures/hdr",[1098],"nofollow",[514,1100,1101],{},"Tresjs/assets"," CDN at ",[1104,1105,1106],"strong",{},"1K"," by default. For higher-fidelity scenes — reflective materials, large backgrounds, hero shots — you can opt into a higher-resolution variant with the ",[514,1109,1110],{},"quality",[534,1112,1114],{"className":536,"code":1113,"language":538,"meta":539,"style":539},"\u003CEnvironment preset=\"sunset\" quality=\"4k\" />\n",[514,1115,1116],{"__ignoreMap":539},[543,1117,1118,1120,1122,1124,1126,1128,1131,1133,1136,1138,1140,1143,1145],{"class":545,"line":546},[543,1119,550],{"class":549},[543,1121,375],{"class":553},[543,1123,1074],{"class":557},[543,1125,564],{"class":549},[543,1127,567],{"class":549},[543,1129,1130],{"class":570},"sunset",[543,1132,567],{"class":549},[543,1134,1135],{"class":557}," quality",[543,1137,564],{"class":549},[543,1139,567],{"class":549},[543,1141,1142],{"class":570},"4k",[543,1144,567],{"class":549},[543,1146,992],{"class":549},[510,1148,1149,1150,1153,1154,1157,1158,521],{},"Available tiers: ",[514,1151,1152],{},"'1k'"," (default), ",[514,1155,1156],{},"'2k'",", ",[514,1159,1160],{},"'4k'",[1162,1163,1164],"warning",{},[510,1165,1166,1167,1170,1171,1173,1174,1176],{},"Higher tiers are significantly larger: ",[1104,1168,1169],{},"4K HDRs are ≈30–60MB"," versus ≈1–3MB at 1K. Use ",[514,1172,1156],{}," / ",[514,1175,1160],{}," only when you need the extra detail, and prefer lazy-loading for large backgrounds.",[510,1178,1179,1180,1182,1183,1185,1186,1173,1189,1192,1193,1195],{},"The ",[514,1181,1110],{}," prop only applies when ",[514,1184,1059],{}," is set — it is ignored when loading via ",[514,1187,1188],{},"files",[514,1190,1191],{},"path",". An unsupported value falls back to ",[514,1194,1152],{}," with a console warning.",[1162,1197,1198],{},[510,1199,1200,1209,1210,1213,1214,1217,1218,1221,1222,1225,1226,1228,1229,1231],{},[1104,1201,1202,1204,1205,1208],{},[514,1203,1110],{}," has no visible effect when you pass ",[526,1206,1207],{"href":384},"Lightformers"," (or any children)."," With children present, ",[514,1211,1212],{},"\u003CEnvironment>"," bakes the environment and background into a ",[514,1215,1216],{},"WebGLCubeRenderTarget"," sized by the ",[514,1219,1220],{},"resolution"," prop (default ",[514,1223,1224],{},"256","), so a high-res preset gets downsampled to that cube — the background will look pixelated regardless of ",[514,1227,1110],{},". For a sharp high-res background, either omit the children or raise ",[514,1230,1220],{}," (a cube big enough to match 4K is expensive to render each frame).",[530,1233,1235],{"id":1234},"environment-rotation","Environment Rotation",[510,1237,1238],{},"The environment component supports both background and environment rotation. You can control them independently or sync them together:",[534,1240,1242],{"className":536,"code":1241,"language":538,"meta":539,"style":539},"\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",[514,1243,1244,1252,1258,1271,1285,1299,1313,1318],{"__ignoreMap":539},[543,1245,1246,1248,1250],{"class":545,"line":546},[543,1247,550],{"class":549},[543,1249,651],{"class":553},[543,1251,576],{"class":549},[543,1253,1254,1256],{"class":545,"line":579},[543,1255,659],{"class":549},[543,1257,684],{"class":553},[543,1259,1260,1263,1265,1267,1269],{"class":545,"line":608},[543,1261,1262],{"class":557},"    preset",[543,1264,564],{"class":549},[543,1266,567],{"class":549},[543,1268,1130],{"class":570},[543,1270,742],{"class":549},[543,1272,1273,1276,1278,1280,1283],{"class":545,"line":629},[543,1274,1275],{"class":557},"    :background",[543,1277,564],{"class":549},[543,1279,567],{"class":549},[543,1281,1282],{"class":570},"true",[543,1284,742],{"class":549},[543,1286,1287,1290,1292,1294,1297],{"class":545,"line":639},[543,1288,1289],{"class":557},"    :background-rotation",[543,1291,564],{"class":549},[543,1293,567],{"class":549},[543,1295,1296],{"class":570},"[0, Math.PI / 2, 0]",[543,1298,742],{"class":549},[543,1300,1301,1304,1306,1308,1311],{"class":545,"line":646},[543,1302,1303],{"class":557},"    :environment-rotation",[543,1305,564],{"class":549},[543,1307,567],{"class":549},[543,1309,1310],{"class":570},"[0, Math.PI / 4, 0]",[543,1312,742],{"class":549},[543,1314,1315],{"class":545,"line":656},[543,1316,1317],{"class":549},"  />\n",[543,1319,1320,1322,1324],{"class":545,"line":667},[543,1321,632],{"class":549},[543,1323,651],{"class":553},[543,1325,576],{"class":549},[1087,1327,1329],{"id":1328},"syncing-rotations","Syncing Rotations",[510,1331,1332,1333,1060],{},"You can sync the environment rotation with the background rotation using the ",[514,1334,1335],{},"syncMaterials",[534,1337,1339],{"className":536,"code":1338,"language":538,"meta":539,"style":539},"\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",[514,1340,1341,1349,1355,1367,1379,1392,1404,1408],{"__ignoreMap":539},[543,1342,1343,1345,1347],{"class":545,"line":546},[543,1344,550],{"class":549},[543,1346,651],{"class":553},[543,1348,576],{"class":549},[543,1350,1351,1353],{"class":545,"line":579},[543,1352,659],{"class":549},[543,1354,684],{"class":553},[543,1356,1357,1359,1361,1363,1365],{"class":545,"line":608},[543,1358,1262],{"class":557},[543,1360,564],{"class":549},[543,1362,567],{"class":549},[543,1364,1130],{"class":570},[543,1366,742],{"class":549},[543,1368,1369,1371,1373,1375,1377],{"class":545,"line":629},[543,1370,1275],{"class":557},[543,1372,564],{"class":549},[543,1374,567],{"class":549},[543,1376,1282],{"class":570},[543,1378,742],{"class":549},[543,1380,1381,1384,1386,1388,1390],{"class":545,"line":639},[543,1382,1383],{"class":557},"    :sync-materials",[543,1385,564],{"class":549},[543,1387,567],{"class":549},[543,1389,1282],{"class":570},[543,1391,742],{"class":549},[543,1393,1394,1396,1398,1400,1402],{"class":545,"line":646},[543,1395,1289],{"class":557},[543,1397,564],{"class":549},[543,1399,567],{"class":549},[543,1401,1296],{"class":570},[543,1403,742],{"class":549},[543,1405,1406],{"class":545,"line":656},[543,1407,1317],{"class":549},[543,1409,1410,1412,1414],{"class":545,"line":667},[543,1411,632],{"class":549},[543,1413,651],{"class":553},[543,1415,576],{"class":549},[510,1417,1418,1419,1421],{},"When ",[514,1420,1335],{}," is enabled:",[1423,1424,1425,1429,1432],"ul",{},[1426,1427,1428],"li",{},"The environment rotation will automatically match the background rotation",[1426,1430,1431],{},"All materials in the scene will update to reflect the new rotation",[1426,1433,1434],{},"This ensures visual consistency between the background and environment reflections",[530,1436,1438],{"id":1437},"props","Props",[1440,1441,1442,1459],"table",{},[1443,1444,1445],"thead",{},[1446,1447,1448,1453,1456],"tr",{},[1449,1450,1452],"th",{"align":1451},"left","Prop",[1449,1454,1455],{"align":1451},"Description",[1449,1457,1458],{},"Default",[1460,1461,1462,1477,1490,1510,1528,1541,1554,1580,1591,1604,1617,1630,1642,1654,1669,1683],"tbody",{},[1446,1463,1464,1469,1472],{},[1465,1466,1467],"td",{"align":1451},[514,1468,1188],{},[1465,1470,1471],{"align":1451},"Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file",[1465,1473,1474],{},[514,1475,1476],{},"undefined",[1446,1478,1479,1483,1486],{},[1465,1480,1481],{"align":1451},[514,1482,1191],{},[1465,1484,1485],{"align":1451},"Path to the environment map files",[1465,1487,1488],{},[514,1489,1476],{},[1446,1491,1492,1497,1500],{},[1465,1493,1494],{"align":1451},[514,1495,1496],{},"encoding",[1465,1498,1499],{"align":1451},"Encoding of the environment map",[1465,1501,1502,1505,1506,1509],{},[514,1503,1504],{},"SRGBColorSpace"," for array files, ",[514,1507,1508],{},"LinearEncoding"," for single texture",[1446,1511,1512,1517,1523],{},[1465,1513,1514],{"align":1451},[514,1515,1516],{},"background",[1465,1518,1519,1520,1522],{"align":1451},"If ",[514,1521,1282],{},", the environment map will be used as the scene background",[1465,1524,1525],{},[514,1526,1527],{},"false",[1446,1529,1530,1535,1538],{},[1465,1531,1532],{"align":1451},[514,1533,1534],{},"blur",[1465,1536,1537],{"align":1451},"Blur factor between 0 and 1 (only works with three 0.146 and up)",[1465,1539,1540],{},"0",[1446,1542,1543,1547,1550],{},[1465,1544,1545],{"align":1451},[514,1546,1059],{},[1465,1548,1549],{"align":1451},"Preset environment map",[1465,1551,1552],{},[514,1553,1476],{},[1446,1555,1556,1560,1576],{},[1465,1557,1558],{"align":1451},[514,1559,1110],{},[1465,1561,1562,1563,1566,1567,1566,1570,1572,1573,1575],{"align":1451},"Resolution variant of the preset HDR (",[514,1564,1565],{},"1k"," | ",[514,1568,1569],{},"2k",[514,1571,1142],{},"). Only applies when ",[514,1574,1059],{}," is set",[1465,1577,1578],{},[514,1579,1565],{},[1446,1581,1582,1586,1589],{},[1465,1583,1584],{"align":1451},[514,1585,1220],{},[1465,1587,1588],{"align":1451},"The resolution of the WebGLCubeRenderTarget",[1465,1590,1224],{},[1446,1592,1593,1598,1601],{},[1465,1594,1595],{"align":1451},[514,1596,1597],{},"near",[1465,1599,1600],{"align":1451},"The near of the CubeCamera",[1465,1602,1603],{},"1",[1446,1605,1606,1611,1614],{},[1465,1607,1608],{"align":1451},[514,1609,1610],{},"far",[1465,1612,1613],{"align":1451},"The far of the CubeCamera",[1465,1615,1616],{},"1000",[1446,1618,1619,1624,1627],{},[1465,1620,1621],{"align":1451},[514,1622,1623],{},"frames",[1465,1625,1626],{"align":1451},"The frames of the cubeCamera.update",[1465,1628,1629],{},"Infinity",[1446,1631,1632,1637,1640],{},[1465,1633,1634],{"align":1451},[514,1635,1636],{},"backgroundIntensity",[1465,1638,1639],{"align":1451},"Intensity of the background",[1465,1641,1603],{},[1446,1643,1644,1649,1652],{},[1465,1645,1646],{"align":1451},[514,1647,1648],{},"environmentIntensity",[1465,1650,1651],{"align":1451},"Intensity of the environment",[1465,1653,1603],{},[1446,1655,1656,1661,1664],{},[1465,1657,1658],{"align":1451},[514,1659,1660],{},"backgroundRotation",[1465,1662,1663],{"align":1451},"Rotation of the background (in radians)",[1465,1665,1666],{},[543,1667,1668],{},"0, 0, 0",[1446,1670,1671,1676,1679],{},[1465,1672,1673],{"align":1451},[514,1674,1675],{},"environmentRotation",[1465,1677,1678],{"align":1451},"Rotation of the environment (in radians)",[1465,1680,1681],{},[543,1682,1668],{},[1446,1684,1685,1689,1692],{},[1465,1686,1687],{"align":1451},[514,1688,1335],{},[1465,1690,1691],{"align":1451},"If true, environment rotation will sync with background rotation",[1465,1693,1527],{},[1087,1695,1053],{"id":1696},"presets-1",[534,1698,1703],{"className":1699,"code":1701,"language":1702},[1700],"language-text","sunset\nstudio\ncity\numbrellas\nnight\nforest\nsnow\ndawn\nhangar\nurban\nmodern\nshangai\n","text",[514,1704,1701],{"__ignoreMap":539},[1706,1707,1708],"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":539,"searchDepth":546,"depth":579,"links":1710},[1711,1712,1713,1716,1719],{"id":532,"depth":579,"text":15},{"id":819,"depth":579,"text":820},{"id":1052,"depth":579,"text":1053,"children":1714},[1715],{"id":1089,"depth":608,"text":1090},{"id":1234,"depth":579,"text":1235,"children":1717},[1718],{"id":1328,"depth":608,"text":1329},{"id":1437,"depth":579,"text":1438,"children":1720},[1721],{"id":1696,"depth":608,"text":1053},"Automatically sets up a global cubemap for scene environment and background.","md",null,{},{"title":375,"description":1722},"Jmd9cUvs-xIbV-RK7ZZXFZUkOqGMazbMRyhSpIpQ_LY",[1729,1731],{"title":369,"path":370,"stem":371,"description":1730,"children":-1},"All staging components",{"title":379,"path":380,"stem":381,"description":1732,"children":-1},"Composable that sets up a global cubemap for scene environment and background.",1787004681233]