Skip to content

Environment Maps ​

Render the current sky and clouds into an equirectangular RGBA16F THREE.Texture for water, mirrors, and glossy materials. See SkyEnvironment for the complete API.

For Water Pro specifically, prefer sky.createSkyProvider({ envMap: true }) — see Water Pro Integration.

Create an Environment Map ​

typescript
const env = sky.createEnvironmentMap({
  width: 512,
});

function animate() {
  sky.update(dt);
  env.update();
  postProcessing.render();
}

createEnvironmentMap returns a SkyEnvironment that shares the parent sky state. Call env.update() after sky.update() each frame to keep reflections current.

If the screen sky uses a cirrus texture, bind the same mask to a standalone environment map:

typescript
sky.setCirrusTexture(cirrusTexture);
env.setCirrusTexture(cirrusTexture);

Sample the Texture ​

Use equirectUVFromDir to sample the equirectangular texture from a world-space reflection direction:

typescript
import { equirectUVFromDir } from "threejs-sky-pro";
import { texture } from "three/tsl";

// Inside a TSL colorNode for a reflective surface:
const reflectDir = /* world-space reflection direction (vec3) */;
const skyReflection = texture(env.texture, equirectUVFromDir(reflectDir));

The convention matches three.js's TSL equirectUV(): +X at u = 0.5, +Z at u = 0.75, zenith at v = 1, nadir at v = 0.

Performance Settings ​

OptionDefaultEffect
width384Equirect width in pixels. 256 / 384 / 512 / 768 are common; height = width/2.
heightwidth / 2Equirect height in pixels.
cloudMarchSteps16Cloud raymarch steps for the bake.
cloudMipBase0Base-shape noise mip floor for the bake.
includeCloudstrueDisable to remove the cloud raymarch from reflections.
skipFrames4Skip frames between volumetric-cloud raymarches; cirrus/haze stays live.
initialBaketrueSet false to defer construction-time work until update() or bakeAll().

See Reflections for the full guide on tuning these, and SkyEnvironmentOptions for the full option reference.

Origin ​

By default the bake is captured at world origin. Move it via setOrigin — usually pinned to your reflective surface or to the camera:

typescript
env.setOrigin(camera.position);

For a flat water plane, keep Y at the surface height and follow the camera on X and Z. See Reflections.

See Also ​

Commercial License - All Rights Reserved.