ThreeJS-3D教学九-line的绘制

three.js 画线比较繁琐一些，我们先展示正常的操作，先看效果图：

本案例用到的方法是：
LineBasicMaterial 和 LineSegments。

1、材质
Three.js中提供了两种线条材质：
LineDashedMaterial

const material = new THREE.LineDashedMaterial( {
	color: 0xffffff,
	linewidth: 1,
	scale: 1,
	dashSize: 3,  // 破折号的大小 。这是与笔划之间的间隙
	gapSize: 1  // 间隙的大小
} );

LineBasicMaterial

const material = new THREE.LineBasicMaterial( {
	color: 0xffffff,
	linewidth: 1
} );

2、geometry
Three.js中比较常用的三种线条Line，LineLoop，LineSegments

Line
Line用于将一系列点绘制成一条连续的线
LineLoop
用于将一系列点绘制成一条连续的线，它和Line几乎一样，唯一的区别就是所有点连接之后会将第一个点和最后一个点相连接
LineSegments
用于将两个点连接为一条线，它会将我们传递的一系列点自动分配成两个为一组，然后将分配好的两个点连接，这种先天实际项目中主要用于绘制具有相同开始点，结束点不同的线条

代码如下：

我们看到，并不那么复杂，但这里有个问题，我们会发现：LineBasicMaterial 的 linewidth 怎么设置都没有起作用，按照官方解释是：由于opengl核心库文件的限制，webgl渲染器在大部分平台上linewidth一直是1，无视你设置的值；上面两种材质都是这样，至于有宽度的线 后面我们会讲到