THREEJS - 自定义曲线绘制

今天来给大家分享一个自定义曲线绘制的demo，这个demo主要是结合鼠标在三维空间点击的焦点获取、new THREE.CatmullRomCurve3（）对象等。

1. 我们需要在三维的scene内，监听鼠标的点击事件，绘制曲线的前提，需要一个平面，所以我们先在三维场景构建一个看不见的虚拟平面：

   // 创建平面
   let normal = new THREE.Vector3(0, 1, 0); // 构建向量
   let VirtualPlane = new THREE.Plane(normal, 0); // 虚拟平面
   

2. 创建好平面后，就是需要获取当前鼠标点击的位置，即鼠标点击与虚拟平面的交点：

   /**
    * 获取射线与平面相交的交点
    * @param {*} event：鼠标点击事件event
    * @returns
    */
   function getIntersects(event) {
       let mouse = new THREE.Vector2();
       mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
       mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
       let normal = new THREE.Vector3(0, 1, 0);
       // 创建平面
       let VirtualPlane = new THREE.Plane(normal, 0);
       // 从相机发出一条射线经过鼠标点击的位置
       raycaster.setFromCamera(mouse, camera);
       // 获取射线
       let ray = raycaster.ray;
   
       // 计算相机到射线的对象，可能有多个对象，返回一个数组，按照距离相机远近排列
       let intersects = ray.intersectPlane(VirtualPlane);
   
       // 返回向量
       return intersects;
   }
   

3. 拿到鼠标点击的焦点，存入对应的数组，然后绘制曲线：

   let pointsArray = [];
   pointsArray.push(intersects);
   if (pointsArray.length < 2) return; // 两点成线，少于两个点时不作绘制
   // 绘制曲线
   let curve = new THREE.CatmullRomCurve3(pointsArray);
   curve.curveType = 'chordal'; // 曲线类型
   curve.closed = false; // 曲线是否自动闭环
   let ponits = curve.getPoints(50); // 分段值，数值越大，曲线越圆滑
   let line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(ponits), new THREE.LineBasicMaterial({ color: 0x0cc7d8 })); // 构建三维曲线
   scene.add(line); // 加入场景
   

以上就是三维场景中，常见的曲线自定义绘制，根据上述的思路，可以在平面绘制任意图案，如线段、道路等等，同时结合new THREE.Shape（）对象的使用，可以绘制任意形状，还可以利用自定义的曲线，运用到智慧城市的发光的车流线绘制，如有需要，可以私聊，本人已经写好完整的案例。

欢迎大家提意见或者建议，相互学习！！！！！！