threeJs 实现路径移动/飞线效果/拖尾效果

在threejs实现路径移动很简单，也是类似飞线效果，拖尾效果
先来看看效果

路径移动

首先我们先生成路径

// 先生成起始点和终止点
// 起始点
    const source = new THREE.Vector3(
      options.source.x,
      options.source.y,
      options.source.z,
    )
    // 终止点
    const target = new THREE.Vector3(
      options.target.x,
      options.target.y,
      options.target.z,
    )

然后添加曲线设置

    const curve = new THREE.QuadraticBezierCurve3(
      source, center, target
    )

计算点的个数

const len = parseInt(source.distanceTo(target));
const points = curve.getPoints(len);
const positions = []
const aPositions = []
points.forEach((item, index) => {
      positions.push(item.x, item.y, item.z)
      aPositions.push(index)
    })

接下来重点，着色器材质的编写（拖尾效果）

// 顶点着色器
attribute float a_position;
        
        uniform float u_time;
        uniform float u_size;
        uniform float u_range;
        uniform float u_total;
      
        varying float v_opacity;
        
        void main() {
           float size = u_size;
           float total_number = u_total * mod(u_time, 1.0);
           
           if (total_number > a_position && total_number < a_position + u_range) {
           
             // 拖尾效果
             float index = (a_position + u_range - total_number) / u_range;
             size *= index;
             
             
             v_opacity = 1.0;
           } else {
             v_opacity = 0.0;
           }
           
           gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
           gl_PointSize = size / 10.0;
        }

// 片元着色器
uniform vec3 u_color;
        varying float v_opacity;
        
        void main() {
          gl_FragColor = vec4(u_color, v_opacity);
        }

然后就可以大功告成了

这是完整代码，有需要的同学自行下载吧

完整代码下载地址