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()对象的使用,可以绘制任意形状,还可以利用自定义的曲线,运用到智慧城市的发光的车流线绘制,如有需要,可以私聊,本人已经写好完整的案例。

欢迎大家提意见或者建议,相互学习!!!!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值