title: How to create multicolored cube in a-frame?
body: <p>I am using this box primitive entity and I would like to make its various faces show different colors.</p>
  
  <pre><code>&lt;a-entity id="box" geometry="primitive: box; width: 1; height: 1; depth: 1" position="2 1 0" rotation="0 30 0" multicolored-cube&gt;
  </code></pre>
  
  <p>Here is the component I am using - </p>
  
  <pre><code>&lt;script&gt;
      AFRAME.registerComponent('multicolored-cube', {
          init: function() {
              var mesh = this.el.getObject3D('mesh');
              var geom = mesh.geometry;
              for (var i = 0; i &lt; geom.faces.length; i++) {
                  var face = geom.faces[i];
                  face.color.setHex(Math.random() * 0xffffff);
              }
              this.el.setObject3D('mesh', mesh);
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>It still renders the cube with same colored faces.</p>