Adjusting HDRI Orientation in Three.js

Yes, you can adjust the HDRI orientation programmatically without modifying the HDRI file itself. When you've set your camera's up vector to (0,0,1) for CAD-style orientation but your HDRI background appears rotated, you can rotate the environment map to match your desired orientation.

Here's how you can do it:

Method 1: Rotate the Environment Map

You can rotate the environment map by applying a rotation to the scene background:

JAVASCRIPTCopied
// After loading your HDRI as an environment map
const envMap = /* your loaded environment map */;

// Create a rotation matrix to adjust orientation
const rotationMatrix = new THREE.Matrix4().makeRotationAxis(
  new THREE.Vector3(1, 0, 0), // X-axis rotation
  Math.PI/2 // 90 degrees in radians
);

// Apply the rotation to the environment map
envMap.transform(rotationMatrix);

// Set as scene background
scene.background = envMap;
scene.environment = envMap;

Method 2: Use an Environment Map Helper

You can also create a mesh with the environment texture and rotate that mesh:

JAVASCRIPTCopied
// Create a large sphere
const geometry = new THREE.SphereGeometry(1000, 64, 32);
// Flip the geometry inside out
geometry.scale(-1, 1, 1);

const material = new THREE.MeshBasicMaterial({
  map: /* your loaded HDRI texture */,
  side: THREE.BackSide
});

const skybox = new THREE.Mesh(geometry, material);
// Rotate the skybox to match your coordinate system
skybox.rotation.x = Math.PI/2; // Adjust as needed
scene.add(skybox);

Method 3: Using PMREMGenerator

If you're using the PMREMGenerator for your environment maps, you can apply the rotation before generating:

JAVASCRIPTCopied
const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

// Load your HDRI
new THREE.TextureLoader().load('your_hdri.hdr', function(texture) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  
  // Create a rotation matrix
  const rotationMatrix = new THREE.Matrix4().makeRotationAxis(
    new THREE.Vector3(1, 0, 0),
    Math.PI/2
  );
  
  // Apply rotation to texture matrix
  texture.matrix.premultiply(rotationMatrix);
  texture.needsUpdate = true;
  
  const envMap = pmremGenerator.fromEquirectangular(texture).texture;
  scene.background = envMap;
  scene.environment = envMap;
  
  texture.dispose();
  pmremGenerator.dispose();
});

You may need to experiment with different rotation axes and angles to get the exact orientation you want for your specific setup.