CODEWITHSUNDEEP
javascript3dthree.js
JHacking
JHacking

Reputation: 118

Three.js - setting cube color?


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!!

Upvotes: 0

Views: 673

Answers (1)

BFG
BFG

Reputation: 793

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.

Upvotes: 1

Related Questions