Environment Map Rotation in Three.js

Based on the documentation, you're using the envMapRotation property of MeshStandardMaterial correctly. This property allows you to rotate the environment map in radians, with a default value of (0,0,0).

The issue you're experiencing with multi-axis rotations might be related to how Euler angles work with quaternions. When converting from quaternions to Euler angles, the rotation order becomes important, and the default might not match what you expect visually.

Possible Solutions

1. Try different Euler rotation orders:

   JAVASCRIPTCopied
   const envMapRotation = new THREE.Euler().setFromQuaternion(
       boxMesh.quaternion.clone(),
       'XYZ' // Try different orders: 'XYZ', 'YXZ', 'ZXY', etc.
   )
   boxMesh.material.envMapRotation.copy(envMapRotation)
   scene.backgroundRotation.copy(envMapRotation)

2. Apply inverse rotation:
   Since you want the environment to appear as if it's fixed relative to the mesh, you might need to apply the inverse of the mesh's rotation:

   JAVASCRIPTCopied
   const inverseQuaternion = boxMesh.quaternion.clone().invert()
   const envMapRotation = new THREE.Euler().setFromQuaternion(inverseQuaternion)
   boxMesh.material.envMapRotation.copy(envMapRotation)
   scene.backgroundRotation.copy(envMapRotation)

3. Adjust the environment map intensity:
   If the environment map appears too strong or weak after rotation, you can adjust its intensity:

   JAVASCRIPTCopied
   boxMesh.material.envMapIntensity = 1.0 // Adjust as needed

Remember that for physically accurate rendering, you should use an environment map that has been preprocessed by the PMREMGenerator as mentioned in the documentation.

If these solutions don't resolve your issue, you might need to consider the specific requirements of your scene and how the environment map is created and applied.