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帧轮询函数中，更新圆柱比例，以及材质透明性；效果如下:

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 materials = [
      new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide,
        transparent: true
      }),
      new THREE.MeshBasicMaterial({
        transparent: true,
        opacity: 0,
        side: THREE.DoubleSide
      }),
      new THREE.MeshBasicMaterial({
        transparent: true,
        opacity: 0,
        side: THREE.DoubleSide
      })
    ]
                                            
                                        

上面创建一个圆柱体的材质，上下面为透明材质，侧面是纹理贴图；用下面的图片：

1.2创建圆柱体

                                            
let geometry = new THREE.CylinderGeometry(4, 4, 2, 64);
    let mesh = new THREE.Mesh(geometry, materials)
    scene.add(mesh)
                                            
                                        

1.3 最后一步，更新大小和透明度. 在animate中通过scale放大圆柱体，超过一定值再从头开始

                                            
let s = 0;
  let p = 1;
  function animate() {
    s += 0.01;
    p -= 0.015;
    if (s > 2) {
      s = 0;
      p = 1;
    }
    mesh.scale.set(1 + s, 1, 1 + s);
    mesh.material[0].opacity = p;
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  }