How to create multicolored cube in a-frame?

Question

I am using this box primitive entity and I would like to make its various faces show different colors.

<a-entity id="box" geometry="primitive: box; width: 1; height: 1; depth: 1" position="2 1 0" rotation="0 30 0" multicolored-cube>

Here is the component I am using -

<script>
    AFRAME.registerComponent('multicolored-cube', {
        init: function() {
            var mesh = this.el.getObject3D('mesh');
            var geom = mesh.geometry;
            for (var i = 0; i < geom.faces.length; i++) {
                var face = geom.faces[i];
                face.color.setHex(Math.random() * 0xffffff);
            }
            this.el.setObject3D('mesh', mesh);
        }
    });
</script>

It still renders the cube with same colored faces.

Answer 1

We need to set the mesh.material.vertexColors = THREE.FaceColors;

AFRAME.registerComponent('multicolored-cube', {
  dependencies: ['geometry'],
  init: function() {
    var mesh = this.el.getObject3D('mesh');
    var geom = mesh.geometry;
    for (var i = 0; i < geom.faces.length; i++) {
      var face = geom.faces[i]; 
      face.color.setRGB(Math.random(), Math.random(), Math.random());
    }
    geom.colorsNeedUpdate = true;
    mesh.material.vertexColors = THREE.FaceColors;
  }
});

<a-scene>
  <a-entity geometry="primitive: box; buffer: false" 
            multicolored-cube position="0 1 -4" rotation="0 45 0"></a-entity>
</a-scene>

See example in codepen

See three.js question: Change the colors of a cube's faces