# How to rotate environment map with mesh synchronously

**URL:** <https://discourse.threejs.org/t/how-to-rotate-environment-map-with-mesh-synchronously/74004>\
**Category:** Questions\
**Tags:** envmap\
**Created:** [November 14, 2024, 5:14am UTC](https://discourse.threejs.org/t/how-to-rotate-environment-map-with-mesh-synchronously/74004 "2024-11-14T05:14:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![QiuBin1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiubin1/32/43166_2.png) [@QiuBin1](https://discourse.threejs.org/u/QiuBin1)\
**Post date:** [November 14, 2024, 5:14am UTC](https://discourse.threejs.org/t/how-to-rotate-environment-map-with-mesh-synchronously/74004/1 "2024-11-14T05:14:57Z")

</div>

When I rotate some meshes in scene，I also wanted to apply the same rotation to the environment map.  
The code is as follows:

> **[EnvmapRotation - JSFiddle - Code Playground](https://jsfiddle.net/trigger0607/to4pv5n8/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

```javascript
const envMapRotation = new THREE.Euler().setFromQuaternion(
    boxMesh.quaternion.clone()
  )
boxMesh.material.envMapRotation.copy(envMapRotation)
scene.backgroundRotation.copy(envMapRotation)

```

If you just rotate the x axis or the y axis or the z axis. The result was correct, with the top of the boxmesh pointing toward the sky of the environment map;  
But If you rotate multiple axes at the same time,the boxmesh orientation is strange.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4b8890568ddaffbcfc285c289c7b042c447e2b9c.jpeg)

Does anyone know how to correctly set the ‘envMapRotation’? Thanks

---

<div class="post-metadata">

**Author:** ![torrent](https://avatars.discourse-cdn.com/v4/letter/t/4bbf92/32.png) [@torrent](https://discourse.threejs.org/u/torrent)\
**Post date:** [December 4, 2024, 4:23am UTC](https://discourse.threejs.org/t/how-to-rotate-environment-map-with-mesh-synchronously/74004/2 "2024-12-04T04:23:35Z")

</div>

Try applying the rotation to all the axis in reverse order, i.e. ZYX instead of XYZ. I had to do this to get rotations to look right when I was working on this:

> [@Need help writing a "true skybox" TSL shader node](https://discourse.threejs.org/t/need-help-writing-a-true-skybox-tsl-shader-node/74406/7):
>
> Figured it out. See code: const texture = await getSkyboxTexture(textureLoader) material.colorNode = THREE.Fn(() =\> { function rotateVector(vector, axis, angle) { const vxp = axis.cross(vector) const vxvxp = axis.cross(vxp) const a = angle.sin().mul(vxp) const b = angle.cos().oneMinus().mul(vxvxp) return vector.add(a).add(b) } const q = new THREE.Quaternion() const e = new THREE.Euler() const cameraWorldRotation = THREE.uniform("vec3").onRenderUpdate(() =\> { ca…

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [February 13, 2026, 10:28pm UTC](https://discourse.threejs.org/t/how-to-rotate-environment-map-with-mesh-synchronously/74004/3 "2026-02-13T22:28:41Z")

</div>

@QiuBin1 looks like you didn’t get a specific answer (though torrent tried to provide a possibility), probably because:

- your link does show any envMap example (did you paste the wrong demo?)
- it isn’t clear what you are trying to achieve

If you provide proper link and video, people will be more likely to help you.