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。

我会 post 这里的代码，但是它超过了 200 行代码。

我想知道是否有特殊的方法可以在 sky.js 中旋转这个 ShaderMaterial？

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

Three.js - 如何旋转着色器 Material？

Three.js - How to Rotate Shader Material?

vertex-shader

fragment-shader

shadermaterial