Three.js - How to Rotate Shader Material?

Question

My problem is 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.

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

This is where I create the sky in the main.js file:

const createSky = () => {

  const sky = new Sky();
  sky.scale.setScalar(1000);
  sky.castShadow = true;
  return sky;
};

I’ve tried rotateZ and sky.rotation to no avail.

The code in the sky.js file:

https://codesandbox.io/s/little-microservice-7nh53?file=/src/sky.js

is a modified iteration of the original three.js 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 would post the code here but it but it's over 200 lines of code.

I am wondering if there is a special way to rotate this ShaderMaterial in sky.js?

Just linking to code offsite is off topic for stack overflow. Please post enough code in the question itself that it can be answered without having to look offsite. — user128511
– user128511, Commented May 12, 2020 at 11:40
Apologies @gman I've edited my q accordingly where I create the sky and where I think I should be rotating it. My only concern is that the sky-shaders are couple of hundred lines of code in shading language and is probably too much to post here. — akexinad
– akexinad, Commented May 12, 2020 at 20:38

Ethan Hermsey · Accepted Answer · 2020-05-13 07:25:53Z

-1

sky.material.uniforms.sunPosition.value.copy( light.position ); It looks like you can use this line to have the sun move from east to west.

Here the east-west is on the x axis and north-south is on z;

let sunPivot = new THREE.Object3D();

//add the light to the pivot at an offset off 100 units( can be changed );
light.positions.set( -100, 0, 0); 
sunPivot.add( light );

in the render loop:

sunPivot.rotateZ( 0.005 ); //arbitrary rotation speed
light.getWorldPosition( sky.material.uniforms.sunPosition.value ); //the uniform value as target (puts the world position of the light into the sunPosition.value

edited May 13, 2020 at 7:25

answered May 12, 2020 at 11:35

Ethan Hermsey

9305 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js - How to Rotate Shader Material?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related