-2

我的问题是试图让天空在它的 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？

4

1 回答 1

-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
于 2020-05-12T11:35:31.953 回答