Utilizing Three.js version 75
I am attempting to showcase cubes that alter color based on an integer value ranging from green to red. I have experimented with various methods but have hit a roadblock. Unfortunately, both cubeMat.material.color.setRGB and creating a new Three.Color do not seem to be effective. It's worth noting that I combine all geometries at the end for a single draw call, and I'm hoping this isn't causing the problem.
[UPDATE] I have verified that the RGB values are correctly set using getStyle; however, they are not rendering as expected. Each stack of cubes should exhibit different colors.
function colorData(percentage){
var rgbString = "",
r = parseInt(percentage * 25.5),
g = parseInt(((percentage * 25.5) - 255) * -1),
b = 0;
rgbString = "rgb("+r+","+g+",0)";
return rgbString;
}
...
var position = latLongToSphere(objectCoord[1], objectCoord[0], 300),
rgb = colorData(objectMag),
cubeColor = new THREE.Color(rgb),
cubeMat = new THREE.MeshBasicMaterial({color: cubeColor}),
cubeHeight = objectMag * 175,
cubeGeom = new THREE.BoxGeometry(3,3,cubeHeight,1,1,1),
cube = new THREE.Mesh(cubeGeom, cubeMat);
// set position of cube on globe, point to center, merge together for one draw call
cube.geometry.colorsNeedUpdate = true;
cube.position.set(position.x, position.y, position.z);
cube.lookAt(lookCenter);
cube.updateMatrix();
console.log(cube.material.color.getStyle());
geom.merge(cube.geometry, cube.matrix);