Three.js实现抛物线动态流向效果

Three.js实现抛物线动态流向效果

老规矩，首先来看下最终实现的效果。

该效果可能会用在飞机航线起点到终点的演示、导弹发射轨迹效果演示等场景。掌握思路以后，效果实现起来非常简单，总结下来要点其实就两个：1.绘制抛物线；2.实现流向动态效果。下面就来看看具体实现过程吧。

创建三维场景

首先我们要创建一个三维场景，创建场景非常简单，仅仅一句代码就能实现。

const scene = new THREE.Scene();

创建了场景后，我们还不能显示任何东西，因为还需要用到渲染器和相机。

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 50; // 设置相机位置

three.js中相机有很多种，这里用到的是PerspectiveCamera相机。该类型是透视相机，可以用来模拟人眼所看到的景象，所以大多数三维场景渲染中都是使用的该相机。点击查看文档详情。

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

创建渲染器后，设置输出画布大小。具体属性和方法可点击查看文档。

然后需要添加一个方法，每隔一段时间调用该方法去渲染场景。

function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
// 必须调用一次
animate();

该方法中会用到一个全局方法requestAnimationFrame，不熟悉的请点击查看文档。

// 添加坐标轴辅助工具
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

为了能够更直观的感受三维空间感，我们还可以在场景中添加一个坐标轴辅助工具。红、绿、蓝分别表示x轴、y轴、z轴。如下图所示。

到现在为止，可以看到场景中的坐标轴了，但是我们通过拖动鼠标发现并不能移动和旋转场景，那是因为我们还没有添加控制器。控制器模块需要单独引入，可以在three.js代码仓库中找到相关代码。

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼（惯性），这将给控制器带来重量感，如果该值被启用，必须在动画循环里调用.update()
controls.dampingFactor = 0.05; // 阻尼惯性大小

注意： 当controls.enableDamping为true时，必须在动画循环里调用controls.update()方法。

function animate() {
  // controls.enableDamping设为true时（启用阻尼），必须在动画循环里调用.update()
  controls.update();

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

生成抛物线

生成一条抛物线需要用到three.js中的QuadraticBezierCurve3类。该类可以根据三个点坐标（起点、终点和一个控制点）创建一条平滑的三维二次贝塞尔曲线。点击查看文档。

const point1 = [50, 0, 0]; // 点1坐标
const point2 = [-50, 0, 0]; // 点2坐标
const controlPoint = [0, 50, 0]; // 控制点坐标

// 创建三维二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve3(
  new THREE.Vector3(point1[0], point1[1], point1[2]),
  new THREE.Vector3(controlPoint[0], controlPoint[1], controlPoint[2]),
  new THREE.Vector3(point2[0], point2[1], point2[2])
);

得到抛物线后，我们不能直接就用这个生成的曲线，因为我们还要实现流动的效果，该效果实现的原理是把曲线分割成很多条小线段，其中一条线段的颜色为高亮色，其余的线段颜色为暗色，每隔一定的时间就将高亮线段的前一线段颜色改为高亮色，原高亮线段改为暗色，这样通过设置合理的间隔时间，高亮线段的变化就连贯起来了，看起来就是流动的效果。

QuadraticBezierCurve3类继承于Curve类，上面有个getPoints()方法，该方法接收一个number类型的参数，作用是将曲线分割成指定的数量，并返回一个包含全部分割点的数组，数组长度为传入的参数大小加1。比如传入的参数是10，意思是将曲线分割成10段，那么返回的分割点数量就为11（1个起点、中间的9个分割点、1个终点）。具体可点击查看Curve类的文档详情。

const divisions = 30; // 曲线的分段数量
const points = curve.getPoints(divisions); // 返回 分段数量 + 1 个点，例如这里的points.length就为31

现在我们得到了31个点坐标，用这些点作为顶点创建Geometry。

// 创建Geometry
const geometry = new THREE.Geometry();
geometry.vertices = points; // 将上一步得到的点列表赋值给geometry的vertices属性

创建了geometry我们还要给它赋值一个顶点颜色数组，因为几何体的材质需要设置成顶点着色，后面要实现改变线段颜色的需求时，我们就只用改变顶点颜色数组就行。

// 设置顶点 colors 数组，与顶点数量和顺序保持一致。
geometry.colors = new Array(points.length).fill(
  new THREE.Color('#333300')
);

注意： colors的数量和顺序是和vertices一一对应的。colors中的第一个就是对应vertices中第一个顶点的颜色。
有了几何体，我们还需要材质才能创建网格。需要注意的是，我们需要将材质设置为顶点着色。

// 生成材质
const material = new THREE.LineBasicMaterial({
  vertexColors: THREE.VertexColors, // 顶点着色
  transparent: true, // 定义此材质是否透明
  side: THREE.DoubleSide,
});
const mesh = new THREE.Line(geometry, material);

到现在我们就已经创建好了抛物线，一定不要忘了将它添加进场景中去，这样才能渲染出来！

scene.add(mesh);

实现动态流向效果

上面提到过，我们要实现动态的流向效果，只需要每隔一段时间更新顶点颜色数组就可以了。所以我们需要在animate方法中添加更新顶点颜色的代码。

let colorIndex = 0; // 高亮颜色流动的索引值
let timestamp = 0; // 时间戳

function animate() {
  controls.update();
  // 时间间隔
  let now = new Date().getTime();
  if (now - timestamp > 30) {
    geometry.colors = new Array(divisions + 1)
      .fill(new THREE.Color('#333300'))
      .map((color, index) => {
        if (index === colorIndex) {
          return new THREE.Color('#ffff00');
        }
        return color;
      });
    // 如果geometry.colors数据发生变化，colorsNeedUpdate值需要被设置为true
    geometry.colorsNeedUpdate = true;
    timestamp = now;
    colorIndex++;
    if (colorIndex > divisions) {
      colorIndex = 0;
    }
  }
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

注意： 改变了顶点颜色数组后一定要将geometry.colorsNeedUpdate属性设置为true，这样three.js才知道顶点颜色数组发生了变化，非常重要！！！

现在，我们就完成了所有代码，实现了抛物线动态流向效果。

点击查看在线示例。
点击查看完整示例代码。

如果该文章对您有所帮助，请您一定不要吝啬您的鼓励。点赞、评论、分享、收藏、打赏都是您对我的鼓励和支持。
如果您有GitHub账号，还可以关注我~
最后，感谢大家的阅读，如有错误，还请各位批评指正。