爲什麼顏色被最後一個覆蓋？

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