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.

score 84 · Answer 1 · answered Jan 06 '13 at 14:11

84

You are not specifying the color value correctly.

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

answered Jan 06 '13 at 14:11

WestLangley

102,557
10
276
276

2

You can also use the base-10 integer equivalent as the parameter for setHex, as the two equate in JS. – andrewb May 12 '16 at 00:47

score 16 · Answer 2 · edited Aug 28 '18 at 06:59

16

cube.material.color

will give you the THREE.Color object:

Color

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

edited Aug 28 '18 at 06:59

xxx

1,153
1
11
23

answered Mar 11 '15 at 23:48

k26dr

1,229
18
15

2

Need to have the actual method in the answer in case that link dies. – andrewb May 12 '16 at 00:47
Link died, correct answer is color.set(), 'cube.material.color.set( color )' – Ian Wise Jul 20 '17 at 05:29

Harun ERGUL · Answer 3 · 2019-03-04T14:56:57.470

9

My suggestion is attach a function to your object and then you can change the color of object during runtime easily.
Based on your code

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

//here is the funcion defined and attached to the  object
cube.setColor = function(color){
     cube.material.color.set(color);
}


cube.setColor(0xFFFFFF)  //change color using hex value or
cube.setColor("blue")    //set material color by using color name

scene.add( cube );

edited Mar 04 '19 at 14:56

answered Apr 21 '16 at 14:09

Harun ERGUL

5,770
5
53
62

9

Do not instantiate a new `Color`. Use `cube.material.color.set( color )`. – WestLangley Apr 21 '16 at 14:28

score 0 · Answer 4 · answered Dec 07 '21 at 13:53

0

In the material part you can provide a hexadecimal color value Like this meshMaterial = new THREE.MeshBasicMaterial({color:0xfffff}) In the following code hexadecimal value (0xffffff) is of colour white

answered Dec 07 '21 at 13:53

It's Joker

65
10

Changing color of cube in three.js

4 Answers4

Linked