今天来给大家分享一个自定义曲线绘制的demo,这个demo主要是结合鼠标在三维空间点击的焦点获取、new THREE.CatmullRomCurve3()对象等。
-
我们需要在三维的scene内,监听鼠标的点击事件,绘制曲线的前提,需要一个平面,所以我们先在三维场景构建一个看不见的虚拟平面:
// 创建平面 let normal = new THREE.Vector3(0, 1, 0); // 构建向量 let VirtualPlane = new THREE.Plane(normal, 0); // 虚拟平面
-
创建好平面后,就是需要获取当前鼠标点击的位置,即鼠标点击与虚拟平面的交点:
/** * 获取射线与平面相交的交点 * @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; }
-
拿到鼠标点击的焦点,存入对应的数组,然后绘制曲线:
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()对象的使用,可以绘制任意形状,还可以利用自定义的曲线,运用到智慧城市的发光的车流线绘制,如有需要,可以私聊,本人已经写好完整的案例。
欢迎大家提意见或者建议,相互学习!!!!!!