Changing color of cube in three.js

Question

I'm trying to change the color of a cube based on a variable. I created two cubes and I want to change their color depending on the distance between them.

The cubes are created like this:

geometry = new THREE.CubeGeometry( 50, 50, 50 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); cube = new THREE.Mesh( geometry, material ); scene.add( cube ); 

Now I tried something like this:

if(distance > 20) { cube.material.color = 0xffffff; } 

But it does not work. I looked in the examples but couldn't find anything appropriate.

Answer 1

You are not specifying the color value correctly.

cube.material.color.setHex( 0xffffff ); 

Answer 2

cube.material.color  

will give you the THREE.Color object:

Color

which has a bunch of methods you can use to set the color.