Looking to create a simple program using Three.js to display bars at specific locations with varying heights and colors. As a beginner in Three.js, I am currently exploring the framework.
When running my script to set up the bar positions, colors, lights, camera, and controls, I noticed that the colors of the boxes remain constant even when using MeshPhongMaterial. I could use some assistance in resolving this issue.
// Getting Started
function plotRF(bar_data){
// Bar Data
this.bars = bar_data
// Accessing the canvas for screen sizing
this.canvas = document.getElementById("BarCanvas")
// Creating the scene
scene = new THREE.Scene();
// Defining the camera
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 8000 );
camera.position.z = 500;
camera.position.y = 500;
// Setting up the renderer
var renderer = new THREE.WebGLRenderer({ canvas: BarCanvas });
// Adjusting the render size
renderer.setSize( this.canvas.width, this.canvas.height);
// Adding lights
this.add_lights()
// Integrating controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
// Creating Geometry
this.add_bars();
var render = function () {
requestAnimationFrame( render );
renderer.render(scene, camera);
};
render();
};
plotRF.prototype.add_bars = function(){
// Multiplier for bar height
var multiplier = 20;
// Size of the bars
var lw = 5;
// Looping through the data
for (i = 0; i < this.bars.length; i++){
var geo = new THREE.BoxGeometry( lw, lw, this.bars[i][0]*multiplier );
var rfcolour = this.colorTable(this.bars[i][0]);
var mat = new THREE.MeshPhongMaterial({
color: rfcolour,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
});
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]);
}
An illustration showcasing the constant colors can be viewed below. Please note that the colors accurately reflect the R,G,B values used in the THREE.Color function.