web-dev-qa-db-fra.com

Changer la couleur du cube en three.js

J'essaie de changer la couleur d'un cube en fonction d'une variable. J'ai créé deux cubes et je veux changer leur couleur en fonction de la distance entre eux.

Les cubes sont créés comme ceci:

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

Maintenant, j'ai essayé quelque chose comme ça:

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

Mais ça ne marche pas. J'ai regardé dans les exemples mais je n'ai rien trouvé de approprié.

colorsthree.js
23
user1952715

Vous ne spécifiez pas la valeur de couleur correctement.

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

vous donnera l'objet THREE.Color:

Couleur

qui a un tas de méthodes que vous pouvez utiliser pour définir la couleur.

8
k26dr

Ma suggestion est d'attacher une fonction à votre objet et vous pouvez ensuite changer facilement la couleur de l'objet pendant l'exécution.
Basé sur votre 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 );
3
Harun ERGUL