Search code examples
three.jshdr

rotate hdr map in three.js

i have set x-axis as up axis in my three.js scene. Now all env maps (hdr) are wrong oriented. How can I fix? I tried by rotating the hdr file, but that does not work.

this.pmremGenerator = new THREE.PMREMGenerator(renderer as any);
new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('assets/').load('adams_place_bridge_1k.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  var envMap = this.pmremGenerator.fromEquirectangular(texture).texture;
  scene.background = envMap;
  scene.environment = envMap;
  texture.dispose();
});

Is there a workaround with cubemaps?

Solution

  • Since r162 it is possible to rotate the scene's background and environment. To do so, you can configure Scene.backgroundRotation and Scene.environmentRotation. Both are of type Euler and represent the rotation in radians.

    The following official example demonstrates this feature:

    https://threejs.org/examples/webgl_materials_envmaps

    Side note: The usage of PMREMGenerator on app level is not necessary in latest releases anymore. Environment maps are internally pre-processed with PMREMGenerator if they are used with PBR materials or if you configure a blurry background via Scene.backgroundBlurriness.