Three.js - 如何旋转着色器材质？答案

【问题标题】：Three.js - How to Rotate Shader Material?Three.js - 如何旋转着色器材质？
【发布时间】：2020-08-28 00:00:58
【问题描述】：

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

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

【问题讨论】：

只是链接到异地代码是堆栈溢出的主题。请在问题本身中发布足够的代码，以便无需查看场外即可回答。
道歉@gman 我已经相应地编辑了我的 q 我创建天空的位置以及我认为应该旋转它的位置。我唯一担心的是天空着色器有几百行着色语言代码，可能太多了，无法在此处发布。

标签： three.js fragment-shader vertex-shader shadermaterial

【解决方案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

【讨论】：