CODEWITHSUNDEEP
javascriptcolorsthree.js
user1952715
user1952715

Reputation: 461

Changing color of cube in three.js

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.

Upvotes: 46

Views: 89869

Answers (4)

It's Joker
It's Joker

Reputation: 65

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

Upvotes: 0

Harun ERGUL
Harun ERGUL

Reputation: 5942

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 );

Upvotes: 10

k26dr
k26dr

Reputation: 1327

cube.material.color

will give you the THREE.Color object:

Color

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

Upvotes: 17

WestLangley
WestLangley

Reputation: 104763

You are not specifying the color value correctly.

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

Upvotes: 85

Related Questions