Three js materials of different colors are showing up as one color

问题

Three js ver67

I have a 3D globe where I am trying to add cubes of different materials at every coordinate. A Quantile distribution is used to assign colors to density cubes (the height of the cube at a certain coordinate is determined by the population density at that coordinate). The function below adds density cubes to the scene –

function addDensity() {

    var materials = [];
    var totalGeom = new THREE.Geometry();
    var cubeMat;

    for (var i = 0; i < dataSetArray.length; i++) {

        var ptColor = dataSetArray[i].color;
        var value = dataSetArray[i].value;
        var position = latLongToVector3(dataSetArray[i].y, dataSetArray[i].x, 600, 1);

        var cubeGeom = new THREE.BoxGeometry(5, 5, 1 + value / 20);

            cubeMat = new THREE.MeshLambertMaterial({
                color: new THREE.Color(ptColor),
                opacity: 0.6
            });


        materials.push(cubeMat);

        var cubeMesh = new THREE.Mesh(cubeGeom, cubeMat);
        cubeMesh.position.copy(position);
        cubeMesh.lookAt(scene.position);
        cubeMesh.updateMatrix(); 

        totalGeom.merge(cubeMesh.geometry, cubeMesh.matrix);

    }
    var total = new THREE.Mesh(totalGeom, new THREE.MeshFaceMaterial(materials));
    scene.add(total);
}

dataSetArray is single dimension array of objects with properties – x,y,value,color. The value is the population density value and color is the assigned color. I have 7 colors –

var groupColors = [
    "rgb(255,0,0)",
    "rgb(255,127,0)",
    "rgb(255,255,0)",
    "rgb(0,255,0)",
    "rgb(0,0,255)",
    "rgb(75,0,130)",
    "rgb(143,0,255)"
];

Hence 7 buckets in my distribution. I should be seeing an equal distribution of 7 colors of density cubes on my globe. However I am always seeing one color, the first one rgb(255,0,0). I am at my wits end with this one. Not sure if I am making a simple mistake. Btw, I have checked and checked again the contents of dataSetArray. The color fields have the right colors. The colors are appropriately distributed among all the elements of the array.

Any help will be appreciated a lot!

来源：https://stackoverflow.com/questions/24433128/three-js-materials-of-different-colors-are-showing-up-as-one-color

标签

javascript

three.js