I'm having trouble drawing three lines with different colors. They all end up being the same color, which is the last color specified in my code snippet below:
function initObject() {
var lineLength = 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(-lineLength, 0, 0));
geometry.vertices.push(new THREE.Vector3(lineLength, 0, 0));
var xLine = new THREE.LineSegments(geometry, xMat);
geometry = new THREE.Geometry(); // Resetting geometry for next line
geometry.vertices.push(new THREE.Vector3(0, lineLength, 0));
geometry.vertices.push(new THREE.Vector3(0, -lineLength, 0));
var yLine = new THREE.LineSegments(geometry, yMat);
geometry = new THREE.Geometry(); // Resetting geometry for next line
geometry.vertices.push(new THREE.Vector3(0, 0, lineLength));
geometry.vertices.push(new THREE.Vector3(0, 0, -lineLength));
var zLine = new THREE.LineSegments(geometry, zMat);
scene.add(xLine);
scene.add(yLine);
scene.add(zLine);
}
Can anyone help me solve this issue? Thank you so much!