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 sky-sun-shader的修改后的迭代：

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