在threejs中调整每个顶点的线条颜色答案

【问题标题】：adjusting the color of a line per vertex in threejs在threejs中调整每个顶点的线条颜色
【发布时间】：2013-12-15 23:10:33
【问题描述】：

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

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

但不幸的是，经过几个小时的尝试使其适应我的（更简单的）场景后，我无法提取我需要调整线条颜色的部分。有没有人对如何解决这个问题有更简单的解释？ ThreeJS 的 vertexMaterial 文档是空白的，对于线条它只讲了如何将线条的颜色作为一个整体来调整（line.material.color）。

这是我目前的代码：

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

感谢您提供的任何帮助。

【问题讨论】：

尝试将vertexColors: THREE.VertexColors 设置为AxisHelper.js。

标签： javascript three.js

【解决方案1】：

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

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

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);
在场景中添加线条

【讨论】：