前言
在可视化开发中, 无论是 2d(canvas) 开发还是 3d 开发, 线条的绘制应用都是比较普遍的. 比如绘制城市之间的迁徙图, 运行轨迹图等. 本文主要讲解的是 Three.JS 中三种线条 Line,LineLoop,LineSegments 之间的区别, 每种线条的原理和对应参数的含义, 以及如何选择使用场景等问题. Three.JS 中提供了两种线条材质, 分别是 LineBasicMaterial 和 LineDashedMaterial, 本文中讲解到的示例都使用 LineBasicMaterial 材质, 后续也会专门总结相关材质的文章为读者解答 Three.JS 相关材质的问题.
原理说明
Three.JS 中渲染线条提供了三个 API, 分别是 gl.LINE_STRIP,gl.LINES,gl.LINE_LOOP.gl.LINE_STRIP 用于渲染一系列的点, 会从第一个点开始到最后一个点依次连接起来; gl.LINES 用于渲染两两组合的点, 它会将我们传递的一系列点自动分配成两个点为一组, 然后将分成的每个组中的两个点连接; gl.LINE_LOOP 用于渲染一系列的点, 但是这个 API 和 gl.LINE_STRIP 最大的不同是所有点渲染完之后会将第一个点和最后一个点连接, 达到闭合状态.
1 Line
Line 用于将一系列点绘制成一条连续的线, Three.JS 渲染 Line 使用的是 gl.LINE_STRIP,Line 会将我们存储在 Geometry 的点依次连接起来形成线条, 这种线条在实际项目中一般用于绘制迁徙轨迹或者绘制已知点的线条. 创建一个 Line 的代码如下:
- var geometry = new THREE.Geometry();
- var lineMaterial = new THREE.LineBasicMaterial({
- color: '#ff0000'
- });
- geometry.vertices.push(
- new THREE.Vector3(20,20,0),
- new THREE.Vector3(20,-20,0),
- new THREE.Vector3(-20,-20,0),
- new THREE.Vector3(-20,20,0)
- )
- var line = new THREE.Line(geometry, lineMaterial);
- scene.add(line);EE.LineLoop(geometry, lineMaterial);
- scene.add(line);
2 LineLoop
LineLoop 用于将一系列点绘制成一条连续的线, 它和 Line 几乎一样, 唯一的区别就是所有点连接之后会将第一个点和最后一个点相连接, 这种线条在实际项目中用于绘制某个区域, 比如在地图上用线条勾选出某一区域. Three.JS 渲染 LineLoop 使用的是 gl.LINE_LOOP. 创建一个 LineLoop 的代码如下:
- var geometry = new THREE.Geometry();
- var lineMaterial = new THREE.LineBasicMaterial({
- color: '#ff0000'
- });
- geometry.vertices.push(
- new THREE.Vector3(20,20,0),
- new THREE.Vector3(20,-20,0),
- new THREE.Vector3(-20,-20,0),
- new THREE.Vector3(-20,20,0)
- )
- var line = new THREE.LineLoop(geometry, lineMaterial);
- scene.add(line);
3 LineSegments
LineSegments 用于将两个点连接为一条线, 它会将我们传递的一系列点自动分配成两个为一组, 然后将分配好的两个点连接, 这种先天实际项目中主要用于绘制具有相同开始点, 结束点不同的线条, 比如常用到的遗传图. Three.JS 渲染 LineSegments 使用的是 gl.LINES. 创建一个 LineSegments 的代码如下:
- var geometry = new THREE.Geometry();
- var lineMaterial = new THREE.LineBasicMaterial({
- color: '#ff0000'
- });
- geometry.vertices.push(
- new THREE.Vector3(20,20,0),
- new THREE.Vector3(20,-20,0),
- new THREE.Vector3(-20,-20,0),
- new THREE.Vector3(-20,20,0)
- )
- var line = new THREE.LineSegments(geometry, lineMaterial);
- scene.add(line);
基于上述讲解的知识点有一点需要说明下, 如果仅仅是绘制两个点之间的一条线段, 那么上述三种实现方式都是没有什么区别的, 实现效果都是一样的.
实例
该实例中, 充分应用了文章中讲解的三种线条 Line,LineLoop,LineSegments 构建了一个线条框架. 框架顶部具有相同的顶点, 从这个顶点到定点下正方形四边上的点之间的线条通过 LineSegments 来实现, 四周的四边形线条通过 LineLoop 来实现, 框架内部悬挂的球体连接的线使用 Line 来实现.
实例效果图如下:
预览地址: 深入理解 Three.JS 中线条 Line,LinLoop,LineSegments
后话
希望上述讲解能够帮助到阅读这篇博文的读者!!!
来源: https://www.cnblogs.com/gaozhiqiang/p/11592528.html