Three.js 着色器 UV 动画

Question

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);
}