深入理解Three.js中线条Line,LinLoop,LineSegments
前言
在可视化开发中,无论是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的更多相关文章
- 深入理解Node.js中的垃圾回收和内存泄漏的捕获
深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...
- 深入理解three.js中光源
前言: Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.j ...
- 深入理解Three.js中透视投影照相机PerspectiveCamera
前言 在开始正式讲解透视摄像机前,我们先来理理three.js建模的流程.我们在开始创建一个模型的时候,首先需要创建我们模型需要的物体,这个物体可以是three.js中已经为我们封装好的,比如正方体, ...
- 深入理解Three.js中正交摄像机OrthographicCamera
前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用 ...
- 深入理解 React JS 中的 setState
此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...
- 从两个角度理解为什么 JS 中没有函数重载
函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表(参数个数.类型.顺序)的函数,这组函数被称为重载函数.重载函数通常用来声明一组功能相似的函数,这样做减少了函数名的数量,避免了名字空 ...
- 深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)
events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中 ...
- 理解 Node.js 中 Stream(流)
Stream(流) 是 Node.js 中处理流式数据的抽象接口. stream 模块用于构建实现了流接口的对象. Node.js 提供了多种流对象. 例如,对 HTTP 服务器的request请求和 ...
- 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]
转载自:http://gxxsite.com/content/view/id/132.html 在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore ...
随机推荐
- Java之戳中痛点 - (8)synchronized深度解析
概览: 简介:作用.地位.不控制并发的影响 用法:对象锁和类锁 多线程访问同步方法的7种情况 性质:可重入.不可中断 原理:加解锁原理.可重入原理.可见性原理 缺陷:效率低.不够灵活.无法预判是否成功 ...
- Java基础之Collection与Collections浅析
Java基础之Collection与Collections浅析 一.前言: 位于Java.util包下的Collection与Collections都是Java中重要的工具类,它们都是Java集合框架 ...
- python入门(三)列表、元组、range()、字典
列表(list) 列表简介:列表(list)是处理一组有序项目的数据结构.用方括号[]表示.可以进行添加,删除,替换,搜索操作.是可变的数据类型.列表可以嵌套和支持索引. name=[12," ...
- Android Studio安卓学习笔记(二)Android项目结构
上一篇代码,我们学习了Android的功能以及如何用Android Studio开发第一个安卓程序.下面就要介绍Android项目结构.为日后学习打基础. 一:Android项目结构 打开MyFris ...
- CF Edu54 E. Vasya and a Tree DFS+树状数组
Vasya and a Tree 题意: 给定一棵树,对树有3e5的操作,每次操作为,把树上某个节点的不超过d的子节点都加上值x; 思路: 多开一个vector记录每个点上的操作.dfs这颗树,同时以 ...
- uva 796 C - Critical Links(tarjan求桥)
题目链接:https://vjudge.net/contest/67418#problem/C 题意:求出桥的个数并且按顺序输出 题解:所谓桥就是去掉这条边后连通块增加,套用一下模版就行. #incl ...
- hdu5491 The Next 模拟
Let LL denote the number of 1s in integer DD’s binary representation. Given two integers S1S1 and S2 ...
- 深入理解 Java 中 SPI 机制
本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/vpy5DJ-hhn0iOyp747oL5A作者:姜柱 SPI(Service Provider ...
- Postgresql-rman
联机程序. 并且目标数据库必须处于归档模式. 支持在线全备, 增量备份, 归档备份 增量备份基于已经存在的一个全库备份 rman 本身使用pg_start_backup(), copy, pg_sto ...
- 【Offer】[50-1] 【第一个只出现一次的字符】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 在字符串中找出第一个只出现一次的字符.如输入"abaccdeff",则输出'b'. 牛客网刷题地址 思路分析 可以遍 ...