Three.js - 材质的使用详解4（线性几何体材质）

2017-10-24 发布：hangge 阅读：3102

线性几何体材质（LineBasicMaterial、LineDashedMaterial）比较特殊，只能用于一个特别的集合体：THREE.Line（线段）。顾名思义，这个几何体只是一条线，线段由顶点组成，不包含任何面。

一、THREE.LineBasicMaterial（实线）

这是用于线段的基础材质。

1，属性介绍

该材质非常简单，有如下几个属性：

名称	描述
color	该属性定义线的颜色。如果指定了 vertexColors。这个属性就会被忽略。
linewidth	该属性定义线的宽度。
linecap	这个属性定义了线框模式下顶点间线段的端点如何显示。可选值包括： round：圆（默认值） butt：平 square：方在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer 对象不支持该属性。
linejoin	这个属性定义了线段的连结点如何显示。可选值有： round：圆（默认值） bevel：斜角 miter：尖角如果我们一个使用低透明度和很大 wireframeLinewidth 值的例子里靠近观察，就可以看到这个属性的效果。 WebGLRenderer 对象不支持该属性。
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。如果 scale 的值小于 1：dashSize 和 gapSize 就会增大。如果 scale 的值大于 1：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);