CromeX CromeX - 22 days ago 6
Javascript Question

THREE.js Maintains a single color when using multiple BoxGeometries. Everything is constant

Simple Program to display the bars in a certain location with a certain height, with a certain color. New to Three.js, so learning about the framework.

When I run my script to load the bar position, colors, the lights, camera and the controls. I find that the Box colors are constant, with the basic mesh so I tried with a MeshPhongMaterial also constant. So I need a little help.

// Begin
function plotRF(bar_data){
// Bar Data
this.bars = bar_data
// Call the canvas for screan sizing
this.canvas = document.getElementById("BarCanvas")

// create the scene
scene = new THREE.Scene();

// Define the camera
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 8000 );
camera.position.z = 500;
camera.position.y = 500;
//camera.rotation.x = 90 * Math.PI / 180;

// Set the render engine
var renderer = new THREE.WebGLRenderer({ canvas: BarCanvas });
// Set the render size
renderer.setSize( this.canvas.width, this.canvas.height);

// Add some Lights
this.add_lights()
// Add controls
controls = new THREE.OrbitControls( camera, renderer.domElement );

// Define Geometry
//this.coords()
this.add_bars();

var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};

render();
};


plotRF.prototype.add_bars = function(){

// Bar height
var multiplier = 20;

// Bar Size
var lw = 5;

// loop through the Javascript data
for (i = 0; i< this.bars.length; i++){
var geo = new THREE.BoxGeometry( lw, lw, this.bars[i][0]*multiplier );
//geo.add(
var rfcolour = this.colorTable(this.bars[i][0]);
var mat = new THREE.MeshPhongMaterial( {
color: rfcolour,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading} );
//mat.wireframe = true;
cube = new THREE.Mesh( geo, mat );
cube.position.x = this.bars[i][1]/10;
cube.position.y = this.bars[i][2]/10;
cube.position.z = this.bars[i][0]*multiplier/2;
scene.add( cube );
console.log("bar added, x:" + this.bars[i][1] +", y:" + this.bars[i][2] + ", RF:" + this.bars[i][0]) ;
}
};

plotRF.prototype.colorTable = function(RF){

if (RF < 1 ) {
return new THREE.Color(255,0,0);
} else if (RF < 1.2) {
return new THREE.Color(240,50,50);
} else if (RF < 1.4) {
return new THREE.Color(230,100,100);
} else if (RF < 1.6) {
return new THREE.Color(220,150,150);
} else if (RF < 1.8) {
return new THREE.Color(210,200,200);
} else if (RF < 2.0) {
return new THREE.Color(200,220,220);
} else if (RF < 3.0) {
return new THREE.Color(150,220,220);
} else {
return new THREE.Color(100,240,240);
}

plotRF.prototype.add_lights = function(RF){

var lights = [];
lights[ 0 ] = new THREE.PointLight( 0xffffff, 0.8, 500 );
lights[ 1 ] = new THREE.PointLight( 0xffffff, 0.8, 500 );
lights[ 2 ] = new THREE.PointLight( 0xffffff, 0.8, 500 );

lights[ 0 ].position.set( 0, 2000, 0 );
lights[ 1 ].position.set( 1000, 2000, 1000 );
lights[ 2 ].position.set( - 1000, - 2000, - 1000 );

scene.add( lights[ 0 ] );
scene.add( lights[ 1 ] );
scene.add( lights[ 2 ] );
}


Figure of the constant colors is below. Note the colors are registering correctly the R,G,B values are correct in the THREE.Color function.

enter image description here

Answer

you have to set colors like it described in documentation, for example:

return new THREE.Color("rgb(255, 0, 0)"); // red