当前位置: > > > Three.js - 材质的使用详解4(线性几何体材质)

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

线性几何体材质(LineBasicMaterialLineDashedMaterial)比较特殊,只能用于一个特别的集合体: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 的值小于 1dashSize gapSize 就会增大。
  • 如果 scale 的值大于 1dashSize 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);
评论0