title: how can I update THREE.Sprite color
body: <p><a href="http://jsfiddle.net/yeehawjared/3xmfrojk/" rel="nofollow">jsfiddle here</a></p>
  
  <p>I create a material with a default color, in this case <code>0xffffff</code>.</p>
  
  <p>Then later, I want to change the color.  I can't figure out where to change it - <code>particle.color = 0xffffff * Math.random();</code> doesn't work.  There is no <code>particle.color</code>, but there is a <code>particle.material.color</code>, which if I change gives me an error.</p>
  
  <p>Do I need to create new materials for every sprite?  Is there a way I can simply change the color of a THREE.Sprite?</p>
  
  <pre><code>var material = new THREE.SpriteCanvasMaterial({
          color: 0xffffff,
          program: function (context) {
              context.beginPath();
              context.arc(0, 0, 0.5, 0, PI2, true);
              context.fill();
          }
      });
  
      for (var i = 0; i &lt; 50; i++) {
  
          particle = new THREE.Sprite(material);
          particle.position.x = Math.random() * 2 - 1;
          particle.position.y = Math.random() * 2 - 1;
          particle.position.z = Math.random() * 2 - 1;
          particle.position.normalize();
          particle.position.multiplyScalar(Math.random() * 10 + 450);
          particle.scale.x = particle.scale.y = 20;
          particle.color = 0xffffff * Math.random();
          scene.add(particle);
      }
  </code></pre>