Question

我有一条线穿过三个粒子云的点。我正在使用画布渲染器。我想从顶点到顶点随机改变线条的颜色。我看到了这个例子：

http://mrdoob.github.io/three.js/examples/webgl_custom_attributes_lines.html

但不幸的是，经过几个小时的尝试使其适应我（更简单）的情况，我无法提取我需要调整的部分颜色。有没有人对如何解决这个问题有一个更简单的解释？ vertexMaterial的ThreeJS文档是空白的，对于行，它只讨论如何调整整个行的颜色（line.material.color）。

这是我目前的代码：

line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: lineColor, opacity: lineVars.lineOpacity } ) );

感谢您提供的任何帮助。

Answer 1

（以下功能示例：http://webblocks.nl/tests/three/waves.html）

这就是我用三种颜色制作轴线的方法：

THREE.Scene.prototype.makeAxes = function(length) {
    length || (length = 5000);

    function v(x,y,z) {
        return new THREE.Vector3(x,y,z);
    }

    var colors = [0xFF0000, 0x00FF00, 0x0000FF]
    for ( var axis=0; axis<3; axis++ ) {
        var lineGeo = new THREE.Geometry();
        var from = [0, 0, 0], to = [0, 0, 0];
        from[axis] = -length;
        to[axis] = length;
        lineGeo.vertices.push(v.apply(null, from), v.apply(null, to));
        var lineMat = new THREE.LineBasicMaterial({
            color: colors[axis],
            lineWidth: 1
        });
        var line = new THREE.Line(lineGeo, lineMat);
        line.type = THREE.Lines;
        this.add(line);
    }
};

或更简单：

用颜色制作材料
var lineMat = new THREE.LineBasicMaterial({color: 0xFF0000, lineWidth: 1});
用材料创建线 var line = new THREE.Line(lineGeo, lineMat);
添加到场景的行

调整三个js中每个顶点的一条线的颜色

1 个答案: