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