THREEJS - 自定义曲线绘制

最新推荐文章于 2025-03-03 16:18:32 发布

Crimaster·W

最新推荐文章于 2025-03-03 16:18:32 发布

阅读量1.8k

点赞数

分类专栏： THREEJS JavaScript 文章标签： 3d

本文链接：https://blog.csdn.net/Kreme/article/details/120887191

版权

JavaScript 同时被 2 个专栏收录

21 篇文章

订阅专栏

THREEJS

10 篇文章

订阅专栏

今天来给大家分享一个自定义曲线绘制的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（）对象的使用，可以绘制任意形状，还可以利用自定义的曲线，运用到智慧城市的发光的车流线绘制，如有需要，可以私聊，本人已经写好完整的案例。

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