Three.js - setting cube color?

Question

I am trying to create a simple 3d game with three.js. I am trying to create coloured cubes, but all the cubes just stay the same color.

When I create a cube I do:

var geometry = new THREE.BoxGeometry(width, height, length);
var material = new THREE.MeshNormalMaterial({color: hexColor});
var cube = new THREE.Mesh(geometry, material);

(which is inside a function)
Then I use the function twice, hexColor being 0x0000ff(blue) and 0xff0000(red). The cubes do generate, but all the faces of the cubes are different colours. I have also tried

cube.material.color.setHex();

But it gives out Uncaught TypeError: Cannot read property 'setHex' of undefined

Help please!!

Answer 1

your issue is that THREE.MeshNormalMaterial() doesn't have a color property. Try using THREE.MeshBasicMaterial({ color: yourHexColor }); instead.

If you do that, your cube.material.color.setHex(yourHexColor); call should work just fine.

You can find all of the necessary information on the Three.js docs page and, if you're interested, take a look at the dedicated examples page .