title: How to change cube's face color when click an object in Three.js?
body: <p>With Three.js, I want to change the color of face of the first object I clicked.</p>
  
  <p>Here is my function.</p>
  
  <pre><code>function onDocumentMouseDown(event) {
    raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length &gt; 0) {
      var i = 0;
      var faceIndex = parseInt(intersects[i].faceIndex / (2 * dimensions * dimensions));
      intersects[i].object.material.color.set(0xffffff);
      var nextColor = colors[parseInt(Math.random() * 6)];
      intersects[i].object.geometry.faces[faceIndex * 2].color.setHex(nextColor);
    }
    renderer.render(scene, camera);
  }
  </code></pre>
  
  <p>First I got the object, and calculate the face index. And I try to change the color, but it doesn't work. How to fix this function?</p>