Question

我想绘制三条不同颜色的线条。但它们的颜色是最后一种颜色。我认为有我的问题代码：

function initObject() {
        var lineLenth = 10;
        geometry = new THREE.Geometry();
        var xMat = new THREE.LineBasicMaterial({color:0xdd5246, opacity:0.2});
        var yMat = new THREE.LineBasicMaterial({color:0xfac942, opacity:0.2});
        var zMat = new THREE.LineBasicMaterial({color:0x149b5a, opacity:0.2});
        geometry.vertices.push(new THREE.Vector3(-lineLenth, 0, 0));
        geometry.vertices.push(new THREE.Vector3(lineLenth, 0, 0));
        var xLine = new THREE.LineSegments(geometry, xMat);
        geometry.vertices.push(new THREE.Vector3(0, lineLenth, 0));
        geometry.vertices.push(new THREE.Vector3(0, -lineLenth, 0));
        var yLine = new THREE.LineSegments(geometry, yMat);
        geometry.vertices.push(new THREE.Vector3(0, 0, lineLenth));
        geometry.vertices.push(new THREE.Vector3(0, 0, -lineLenth));
        var zLine = new THREE.LineSegments(geometry, zMat);
        scene.add(xLine);
        scene.add(yLine);
        scene.add(zLine);
    }

有人能帮助我吗？非常感谢！

Answer 1

您在同一个几何对象上操作。您正在将所有顶点添加到同一几何体。而且您将材料绑定到相同的几何体。这有效地丢弃了先前的绑定（首先是xMat，然后是yMat），只保留最新的绑定（zMat）。

我建议将三条线分成不同的几何形状。

    // X line: 
    geometry = new THREE.Geometry();
    var xMat = new THREE.LineBasicMaterial({color:0xdd5246, opacity:0.2});
    geometry.vertices.push(new THREE.Vector3(-lineLenth, 0, 0));
    geometry.vertices.push(new THREE.Vector3(lineLenth, 0, 0));
    var xLine = new THREE.LineSegments(geometry, xMat);
    scene.add(xLine);

    // Y line:
    geometry = new THREE.Geometry();
    var yMat = new THREE.LineBasicMaterial({color:0xfac942, opacity:0.2});
    geometry.vertices.push(new THREE.Vector3(0, lineLenth, 0));
    geometry.vertices.push(new THREE.Vector3(0, -lineLenth, 0));
    var yLine = new THREE.LineSegments(geometry, yMat);
    scene.add(yLine);

    // Z line: ... you get the point

为什么颜色被最后一个覆盖？

1 个答案: