title: How do I set colors for three js instanced objects?
body: <p>I have an a-frame component that leverages three js instancing to render a large number of spheres efficiently. Based on examples from the three js library such as <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_scatter.html" rel="nofollow noreferrer">https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_scatter.html</a>, I should be able to set the colors for each of the instanced renderings individually. I thought I had followed the example but my per instance colors are not taking effect. </p>
  
  <pre><code>AFRAME.registerComponent('spheres', {
      schema: {
          count: {type: 'number'},
          radius: {type: 'number'},
          scale: {type: 'number'},
          colors: {type: 'array'},
          positions: {type: 'array'}
      },
      init: function() {
          const {count, radius, scale, colors, positions} = this.data;  
  
          const material = new THREE.MeshNormalMaterial();
  
          const geometry = new THREE.SphereBufferGeometry( radius, 3, 2 );
          const instancedGeometry = new THREE.InstancedBufferGeometry().copy(geometry); 
          var instanceColors = [];
  
          for ( var i = 0; i &lt; count; i ++ ) {
  
              instanceColors.push( Math.random() );
              instanceColors.push( Math.random() );
              instanceColors.push( Math.random() );
  
          }
          instancedGeometry.setAttribute("instanceColor", new THREE.InstancedBufferAttribute( new Float32Array( instanceColors ), 3 ))
  
          instancedGeometry.computeVertexNormals();
  
          material.vertexColors = true;
  
          const matrix = new THREE.Matrix4();
          const mesh = new THREE.InstancedMesh( instancedGeometry, material, count );
  
          for ( var i = 0; i &lt; count; i ++ ) {
  
              this.setMatrix(positions[i], scale)( matrix );
              mesh.setMatrixAt( i, matrix );
  
          }
  
          this.el.object3D.add( mesh );
      },
  </code></pre>
  
  <p>What am I doing wrong?</p>