THREEJS - 自定义曲线绘制

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

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

THREEJS - 自定义曲线绘制相关推荐

R语言自定义变成进行决策曲线分析DCA曲线绘制（Decision Curve Analysis）
R语言自定义变成进行决策曲线分析DCA曲线绘制(Decision Curve Analysis) 我们可能使用别的语言获得了机器学习模型以及对应的预测概率和标签,我们想直接使用这些信息进行DCA曲线的 ...
自定义view实战(10)：贝塞尔曲线绘制小红点
前言上一篇文章用扇形图练习了一下安卓的多点触控,实现了单指旋转.二指放大.三指移动,四指以上同时按下进行复位的功能.今天这篇文章用很多应用常见的小红点,来练习一下贝塞尔曲线的使用. 需求这里想法来 ...
Android绘图机制（二）——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解
Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...
ST_Curve --- 一个专业的曲线绘制控件
一:什么是ST_Curve? ST_Curve是一个专业的曲线绘制控件,只要是xy坐标系的曲线,都可绘制,纵坐标只能显示为值,横坐标可以显示为值或者时间(如果你愿意为控件提供插件,则坐标可显示任意 ...
android运动轨迹怎么画,Android 利用三阶贝塞尔曲线绘制运动轨迹的示例
本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹效果图: xml布局: xmlns:tools="ht ...
android动画框架,GitHub - azhengyongqin/CustomAnimationFramework: Android自定义曲线路径动画框架...
Android自定义曲线路径动画框架最近在一个项目中需要一个像QQ打开个人爱好那样的动画效果如下图: 可以看出每个小球都是以顺时针旋转出来的,说明像这样的曲线动画用Android中自带的平移动画是很 ...
Python-Matplotlib可视化（3）——自定义样式绘制精美统计图
Python-Matplotlib可视化(3)--自定义样式绘制精美统计图前言控制线条样式和线宽线条样式线宽控制填充样式控制标记样式控制标记大小创建自定义标记总结--对标记进行更精细 ...
Python 科赫曲线绘制
科赫曲线绘制 #科赫曲线绘制 import turtle import time def koch(size, n):if n == 0:turtle.forward(size)else:for an ...
（一）QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现
系列文章目录提示:这里是该系列文章的所有文章的目录第一章: (一)QCustomPlot常见属性设置.多曲线绘制.动态曲线绘制.生成游标.矩形放大等功能实现第二章: (二)QCustomPlot ...

THREEJS - 自定义曲线绘制

THREEJS - 自定义曲线绘制相关推荐

最新文章

热门文章