Three.js - 材质的使用详解4（线性几何体材质）
线性几何体材质（LineBasicMaterial、LineDashedMaterial）比较特殊，只能用于一个特别的集合体：THREE.Line（线段）。顾名思义，这个几何体只是一条线，线段由顶点组成，不包含任何面。
一、THREE.LineBasicMaterial（实线）
这是用于线段的基础材质。
1，属性介绍
该材质非常简单，有如下几个属性：
| 名称 | 描述 |
| color | 该属性定义线的颜色。如果指定了 vertexColors。这个属性就会被忽略。 |
| linewidth | 该属性定义线的宽度。 |
| linecap | 这个属性定义了线框模式下顶点间线段的端点如何显示。可选值包括：
|
| linejoin | 这个属性定义了线段的连结点如何显示。可选值有：
|
| vertexColors | 将这个属性设置成 THREE.VertexColors 值，就可以给每个顶点指定一种颜色。 |
| fog | 该属性指定当前材质是否受全局雾化效果设置的影响。 |
2，使用样例
这里我们在舞台上显示一条 gosper 曲线，同时对线段的每个顶点都会指定一种颜色。
//获取gosper曲线的x、y坐标点
var points = gosper(3, 60);
//为每个坐标创建一个顶点，并把它们放在lines属性中
var lines = new THREE.Geometry();
//同时每个坐标还会计算一个颜色值，用来设置colors属性
var colors = [];
var i = 0;
points.forEach(function (e) {
lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
colors[i] = new THREE.Color(0xffffff);
//这里使用setHSL()方法设置颜色（色调、饱和度、亮度）
colors[i].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8);
i++;
});
lines.colors = colors;
//创建线段基础材质
var material = new THREE.LineBasicMaterial({
opacity: 1.0,
linewidth: 1,
vertexColors: THREE.VertexColors
});
//通过创建的材质结合几何体即可创建一个 THREE.Line网格。
var line = new THREE.Line(lines, material);
line.position.set(25, -30, -60);
scene.add(line);
附：gosper曲线函数
//获取gosper曲线的x、y坐标点
function gosper(a, b) {
var turtle = [0, 0, 0];
var points = [];
var count = 0;
rg(a, b, turtle);
return points;
function rt(x) {
turtle[2] += x;
}
function lt(x) {
turtle[2] -= x;
}
function fd(dist) {
//ctx.beginPath();
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
//ctx.moveTo(turtle[0], turtle[1]);
var dir = turtle[2] * (Math.PI / 180);
turtle[0] += Math.cos(dir) * dist;
turtle[1] += Math.sin(dir) * dist;
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
//ctx.lineTo(turtle[0], turtle[1]);
//ctx.stroke();
}
function rg(st, ln, turtle) {
st--;
ln = ln / 2.6457;
if (st > 0) {
//ctx.strokeStyle = '#111';
rg(st, ln, turtle);
rt(60);
gl(st, ln, turtle);
rt(120);
gl(st, ln, turtle);
lt(60);
rg(st, ln, turtle);
lt(120);
rg(st, ln, turtle);
rg(st, ln, turtle);
lt(60);
gl(st, ln, turtle);
rt(60);
}
if (st == 0) {
fd(ln);
rt(60);
fd(ln);
rt(120);
fd(ln);
lt(60);
fd(ln);
lt(120);
fd(ln);
fd(ln);
lt(60);
fd(ln);
rt(60)
}
}
function gl(st, ln, turtle) {
st--;
ln = ln / 2.6457;
if (st > 0) {
//ctx.strokeStyle = '#555';
lt(60);
rg(st, ln, turtle);
rt(60);
gl(st, ln, turtle);
gl(st, ln, turtle);
rt(120);
gl(st, ln, turtle);
rt(60);
rg(st, ln, turtle);
lt(120);
rg(st, ln, turtle);
lt(60);
gl(st, ln, turtle);
}
if (st == 0) {
lt(60);
fd(ln);
rt(60);
fd(ln);
fd(ln);
rt(120);
fd(ln);
rt(60);
fd(ln);
lt(120);
fd(ln);
lt(60);
fd(ln);
}
}
}
二、THREE.LineDashedMaterial（虚线）
这种材质与 THREE.LineBasicMaterial 的区别是：可以通过指定虚线和空白间隙的长度来创建出虚线效果。
1，属性介绍
该材质除了拥有 THREE.LineBasicMaterial 全部的属性外，还有如下几个额外的属性，可以用来定义虚线的宽度和虚线之间的间隙的宽度。
| 名称 | 描述 |
| scale | 缩放 dashSize 和 gapSize。
|
| dashSize | 虚线段的长度。 |
| gapSize | 虚线间隔的宽度。 |
2，使用样例
这个材质的用法和上面的 THREE.LineBasicMaterial 基本一样。唯一的区别是必须调用 computeLineDistances() 方法来计算线段顶点之间的距离。如果不这么做，间隔就不会正确地显示。
//获取gosper曲线的x、y坐标点
var points = gosper(3, 60);
//为每个坐标创建一个顶点，并把它们放在lines属性中
var lines = new THREE.Geometry();
//同时每个坐标还会计算一个颜色值，用来设置colors属性
var colors = [];
var i = 0;
points.forEach(function (e) {
lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
colors[i] = new THREE.Color(0xffffff);
//这里使用setHSL()方法设置颜色（色调、饱和度、亮度）
colors[i].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8);
i++;
});
lines.colors = colors;
//使用虚线材质的话，必须调用 computeLineDistances()方法
lines.computeLineDistances();
//创建线段基础材质
var material = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 2,
gapSize: 2,
scale: 2
});
//通过创建的材质结合几何体即可创建一个 THREE.Line网格。
var line = new THREE.Line(lines, material);
line.position.set(25, -30, -60);
scene.add(line);
