Change color of 3D Cube created using Three.js

Question

Help! How do you change the colors of a 3D cube from the defaults in the Three.js examples?

Here is what I have so far -

HTML

<div id="container"></div>

JS

// revolutions per second
var angularSpeed = 0.2;
var lastTime = 0;

// this function is executed on each animation frame
function animate() {
  // update
  var time = (new Date()).getTime();
  var timeDiff = time - lastTime;
  var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
  cube.y += angleChange;
  lastTime = time;

  // render
  renderer.render(scene, camera);

  // request new frame
  requestAnimationFrame(function () {
    animate();
  });
}

// renderer
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

// camera
var camera = new THREE.PerspectiveCamera(45, 
                 window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 700;

// scene
var scene = new THREE.Scene();

// cube Length, Height, Width
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), 
      new THREE.MeshBasicMaterial({
          wireframe: true,
          color: '#ff0000'
}));
cube.rotation.x = Math.PI * 0.1;
cube.rotation.y = Math.PI * 0.3;
scene.add(cube);

// start animation
animate();

Here is a Fiddle for it.

http://stackoverflow.com/questions/11252592/how-to-change-face-color-in-three-js — woodlumhoodlum, Feb 13 '14 at 17:14
Or http://stackoverflow.com/questions/8820591/how-to-use-multiple-materials-in-a-three-js-cube — Ethan Brown, Feb 13 '14 at 17:58

score 1 · Answer 1 · answered Feb 13 '14 at 22:00

in this bit:

var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), new THREE.MeshBasicMaterial({ wireframe: true, color: '#ff0000'

change the MeshBasicMaterial color to the hexcode of the color you want

I'm still trying to get the simple cube example they showed to even load on my browser though...

Shiva · Accepted Answer · 2014-02-14T17:09:22.483

1

MeshNormalMaterial doesn't support either color or Ambient properties which are used to manipulate the colors of materials

so just use THREE.MeshBasicMaterial({color:0xFF0000}) with the color property set.

or you can use setHex function on the material afterwards to change the material's color that was previously created.

Check this fiddle for a demo

edited Feb 14 '14 at 17:09

answered Feb 14 '14 at 07:08

Shiva

6,677
4
36
61

Thanks!!! It worked, One more question, Like you are changing color click, can we change the the dimension also??? I have posted this question in SO http://stackoverflow.com/q/21783976/2719346 Can you please look int it?? – UID Feb 14 '14 at 16:15

score 0 · Answer 3 · answered Mar 12 '14 at 11:31

0

When WIreframe is set to true the color property is taken by the line or vertices of the cube, remove wireframe:true you will get the color of cube...

answered Mar 12 '14 at 11:31

user3363468

15
1
5

Change color of 3D Cube created using Three.js

3 Answers3