前言

在可视化开发中,无论是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

后话

希望上述讲解能够帮助到阅读这篇博文的读者!!!

深入理解Three.js中线条Line,LinLoop,LineSegments的更多相关文章

  1. 深入理解Node.js中的垃圾回收和内存泄漏的捕获

    深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...

  2. 深入理解three.js中光源

    前言: Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.j ...

  3. 深入理解Three.js中透视投影照相机PerspectiveCamera

    前言 在开始正式讲解透视摄像机前,我们先来理理three.js建模的流程.我们在开始创建一个模型的时候,首先需要创建我们模型需要的物体,这个物体可以是three.js中已经为我们封装好的,比如正方体, ...

  4. 深入理解Three.js中正交摄像机OrthographicCamera

    前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用 ...

  5. 深入理解 React JS 中的 setState

    此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...

  6. 从两个角度理解为什么 JS 中没有函数重载

    函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表(参数个数.类型.顺序)的函数,这组函数被称为重载函数.重载函数通常用来声明一组功能相似的函数,这样做减少了函数名的数量,避免了名字空 ...

  7. 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)

    events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...

  8. 理解 Node.js 中 Stream(流)

    Stream(流) 是 Node.js 中处理流式数据的抽象接口. stream 模块用于构建实现了流接口的对象. Node.js 提供了多种流对象. 例如,对 HTTP 服务器的request请求和 ...

  9. 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]

    转载自:http://gxxsite.com/content/view/id/132.html 在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore ...

随机推荐

  1. MySQL多表关联数据同时删除

    MySQL多表关联时的多表删除: DELETE t1, t2FROM    t1LEFT JOIN t2 ON t1.id = t2.idWHERE    t1.id = 25

  2. Shell-->变量的数值计算

    1.----------------------------->>>>>文件改名,使用命令mv 2.----------------------------->&g ...

  3. .NET Core 单元测试

    应用程序测试的类型很多,包括集成测试,Web 测试,负载测试等.在最底层的是单元测试,此测试可以测试单个软件组件或方法.单元测试一般只测试开发人员的代码,不应该测试基础结构普.问题,如数据库,文件系统 ...

  4. java IO流 之 FIle类基础

    package IO; import java.io.File;import java.io.IOException; public class FileIO { /** * 构建及获取文件名信息 * ...

  5. Spring MVC内容协商实现原理及自定义配置【享学Spring MVC】

    每篇一句 在绝对力量面前,一切技巧都是浮云 前言 上文 介绍了Http内容协商的一些概念,以及Spring MVC内置的4种协商方式使用介绍.本文主要针对Spring MVC内容协商方式:从步骤.原理 ...

  6. 05_指针之New()函数的使用

    1.new函数是一个内置函数,表达式new(T)创建一个未命名的T类型变量,初始化为T类型的零值,并返回其地址(地址类型为*T)2.p:=new(int),q:=new(int)==>p!=q ...

  7. Oracle性能图表工具:awrcrt.sql 介绍,更新到了2.14 (2018年3月31日更新)

    2018-03-31 awrcrt更新到了2.14版本, 下载地址为 https://pan.baidu.com/s/1IlYVrBJuZWwOljomVfta5g https://pan.baidu ...

  8. FineReport - 软件安装部署

    FineReport 软件安装与部署 FineReport试用码申请 在浏览器中输入网址:http://www.finereport.com/,进入帆软官网首页,点击免费试用,填写相关信息后,既可以收 ...

  9. Netty源码分析 (一)----- NioEventLoopGroup

    提到Netty首当其冲被提起的肯定是支持它承受高并发的线程模型,说到线程模型就不得不提到NioEventLoopGroup这个线程池,接下来进入正题. 线程模型 首先来看一段Netty的使用示例 pa ...

  10. Mysql高手系列 - 第4天:DDL常见操作汇总

    这是Mysql系列第4篇. 环境:mysql5.7.25,cmd命令中进行演示. DDL:Data Define Language数据定义语言,主要用来对数据库.表进行一些管理操作. 如:建库.删库. ...