1 threejs实现流光效果

流光效果实现原理，在animate函数中，不断更新纹理的位置，达到纹理流动效果。效果如下

1.1 创建纹理

                                            
// -----------------------------------------------------------------
    // 创建纹理及材质
    // -----------------------------------------------------------------
    let texture = new THREE.TextureLoader().load("./statics/imgs/流光.jpg")
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
    texture.repeat.set(1, 1)
    texture.needsUpdate = true
    let material = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.BackSide,
      transparent: true
    })
                                            
                                        

图片如下，可以ps一张渐变效果图片都可以

wrapS:纹理在水平方向上纹理包裹方式，在UV映射中对应于U，默认THREE.ClampToEdgeWrapping，表示纹理边缘与网格的边缘贴合。中间部分等比缩放。还可以设置为：THREE.RepeatWrapping(重复平铺) 和 THREE.MirroredRepeatWrapping（先镜像再重复平铺）
wrapT:垂直方向，属性一样.
repeat:用来设置纹理分别在U、V方向重复多少次。如果设置等于1，则纹理不会重复；大于1会重复很多次

1.2 创建一个管道

                                            
// -----------------------------------------------------------------
    // 创建一个管道
    // -----------------------------------------------------------------
    // 创建顶点数组
    let points = [new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(100, 0, 0),
      new THREE.Vector3(100, 0, 100),
      new THREE.Vector3(0, 0, 100)
    ]
    // 创建一条平滑的三维样条曲线
    let curve = new THREE.CatmullRomCurve3(points)
    // 创建管道
    let tubeGeometry = new THREE.TubeGeometry(curve, 80, 1)
    let mesh = new THREE.Mesh(tubeGeometry, material);
    scene.add(mesh)
                                            
                                        

1.3 最后在animate函数中，每次将纹理偏移一定值，实现流动效果

                                            
animate();
  function animate() {
    if(texture) texture.offset.x -= 0.01
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);

  }
                                            
                                        

2 threejs实现扩散波效果

原理:用几何体-圆柱实现作为扩散波几何图形；在animate帧轮询函数中，更新圆柱比例，以及材质透明性；效果如下: