Warum wird die Farbe durch die letzte überschrieben?

Question

Ich möchte drei Linien mit verschiedenen Farben zeichnen. Aber sie sind in der gleichen Farbe, die die letzte Farbe ist. Es ist mein Problem Code Ich denke:

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

Kann mir jemand helfen? Vielen Dank!

Answer 1

Sie arbeiten mit demselben Geometrieobjekt. Sie fügen alle Scheitelpunkte derselben Geometrie hinzu. Und Sie binden Materialien an die gleiche Geometrie. Dies verwirft effektiv frühere Bindungen (zuerst xMat und dann yMat) und behält nur die letzte Bindung (zMat) bei.

Ich empfehle, Ihre drei Zeilen in separate Geometrien aufzuteilen.

// 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