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

adjusting the color of a line per vertex in threejs

本文关键字：顶点 颜色 threejs 调整      更新时间：2024-01-12

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

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 } ) );

感谢您提供的任何帮助。

（以下函数示例：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);
  • 将线条添加到场景
相关文章：