Three.js着色器——UV动画

UV动画的实现方式，一种是通过Texture偏移属性offset实现UV动画，另一种方式是通过着色器代码的方式实现UV动画。

Texture偏移属性offset实现UV动画

.wrapS定义了纹理如何水平包裹，并对应于UV映射中的U.

.wrapT这定义了纹理垂直包裹的方式，与UV映射中的V相对应.

var texture = textureLoader.load('./大气.png');
// 设置重复的作用是：能够让一个效果循环
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

渲染函数周期性执行的过程中，Three.js纹理对象Texture的偏移属性offset两个分量x和y递增或递减。

// 渲染函数
function render() {
  // 每次渲染对纹理对象进行偏移，不停的偏移纹理，就产生了动画的效果
  texture.offset.x -= 0.001;
  texture.offset.y += 0.001;
  group.rotateY(-0.005)
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

着色器中uniform变量更新

通过自定着色器代码的方式实现UV动画，基本思路就是在片元着色器中声明一个时间变量time，然后在JavaScript代码中更新着色器中的时间变量time。时间变量time变化后，通过vec2 newT= vUv + vec2( -0.02, 0.02 ) * time;改变插值后的纹理坐标vUV，纹理坐标变化了，渲染的时候，纹理采样的结果肯定发生了变化。

片元着色器中声明的一个时间变量time

// 声明一个时间变量用来控制UV动画
uniform float time;
// 声明一个纹理对象变量
uniform sampler2D texture;
// 顶点片元化后有多少个片元就有多少个纹理坐标数据vUv
varying vec2 vUv;
void main() {
  vec2 newT= vUv + vec2( -0.02, 0.02 ) * time;
  //通过偏移后的纹理坐标newT采样像素
  gl_FragColor = texture2D( texture, newT );
  // 大气层整体透明度增加
  gl_FragColor.a *=0.6;
}

通过自定义着色器ShaderMaterial的属性.uniforms设置传递给片元着色器中的变量time的值

uniforms: {
  // 对应片元着色器中的时间变量time
  time: {
    value: 0.0
  },
},

在渲染函数中不停地更新ShaderMaterial对象uniforms属性的时间变量time的值，每次执行新的渲染，Threejs系统会自动更新片元着色器中的时间变量time的值。

// 创建一个时钟对象T
var T = new THREE.Clock();
// 渲染函数
function render() {
  // 获得两次渲染的时间间隔deltaTime
  var deltaTime = T.getDelta();

  // 更新uniforms中时间，这样就可以更新着色器中time变量的值
  material.uniforms.time.value += deltaTime;

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}