Three.js - Как повернуть шейдерный материал?

Question

Моя проблема в том, чтобы заставить небо вращаться вокруг оси Z. Например, если я поверну небо на 180 градусов, тень от солнечного света должна отображаться в противоположном направлении.

Песочница кода: https://codesandbox.io/s/friendly-cloud-c00zr?file=/src/main.js:

Здесь я создаю небо в main.js файл:

const createSky = () => {

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

я пытался rotateZ а также sky.rotation но безрезультатно.

Код в sky.js файл:

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

это модифицированная итерация исходного шейдера неба-солнца three.js:

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

Все, что я изменил, это up положение неба и его геометрия от boxBuffer к sphereBuffer.

Я бы разместил код здесь, но это более 200 строк кода.

Мне интересно, есть ли особый способ повернуть это ShaderMaterial в sky.js?

Answer 1

sky.material.uniforms.sunPosition.value.copy( light.position ); Похоже, вы можете использовать эту линию, чтобы солнце двигалось с востока на запад.

Здесь восток-запад находится на оси x, а север-юг - на оси 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 );

в цикле рендеринга:

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