# 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:** 1\
**Showing post:** 2

<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…

---

_[View the full topic](https://discourse.threejs.org/t/how-to-rotate-environment-map-with-mesh-synchronously/74004)._