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.

Answer 1

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...

Answer 2

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

Answer 3

当WIreframe设置为true时，color属性由多维数据集的一行或多个顶点获取，删除wireframe：true您将获得多维数据集的颜色...