How to rotate Shader Material

The code sandbox: https://codesandbox.io/s/friendly-cloud-c00zr?file=/src/main.js

The code in the sky.js file is an iteration of the original sky-sun-shader:

https://threejs.org/examples/webgl_shaders_sky.html

All that I have changed is the up position of the sky and its geometry from boxBuffer to sphereBuffer.

I’m trying to get the sky to rotate on its z-axis. For example if I rotate the sky by 180 degrees the shadow from the sun light should display in the opposite direction.

I’ve tried rotateZ to no avail.

The point of this is to be able to have the sky point towards a hypothetical north so the sun rises and sets in the correct location.

Is there a special way to rotate ShaderMaterial?

Many thanks in advance!

/cc

1 Like

Hey @Mugen87 . That link is the same question I recently threw up on SOF.

I think your question is a duplicate of: Rotate Sky Shader

That is also my post where I was trying to manipulate the up position of the sky-shader.

Now the problem I am trying to solve here is to be able to invoke something similar like rotateZ(radians) or some arbitrary number to orientate the sky’s hypothetical true north position so the sun rises and sets in the correct position with respect to a mapping context.

I’m assuming there is something that needs to be changed in the vertexShader or fragmentShader inside the sky.js.