creating a spherical particle basic material for webgl renderer in threejs

Question

I have a working threejs example in which particles are rendered via canvas on to a spherical object using the program function, like this:

var material = new THREE.ParticleCanvasMaterial( {

      color: 0xffffff,
      program: function ( context ) {

        context.beginPath();
        context.arc( 0, 0, 1, 0, PI2, true );
        context.closePath();
        context.fill();

      }

    } );

    for ( var i = 0; i < 1000; i ++ ) {

      particle = new THREE.Particle( 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 + 600 );

      initParticle( particle, i * 10 );

      scene.add( particle );

    }

However, I'd like to switch to the webGL renderer in order for things to run a little faster, but it doesn't have a program option. It seems like maybe I need to use map, but I'm not sure how. Anybody have any ideas on how to adjust this code to accomplish the same thing with the webGL renderer.

Related: http://stackoverflow.com/questions/13860166/procedurally-generated-texture-for-particle-with-three-js — WestLangley, Jul 12 '13 at 18:47

score 1 · Accepted Answer · edited Jan 27 '21 at 08:07

1

Here's an example that shows how to procedurally create textures for your particles using the WebGLRenderer: http://jsfiddle.net/y18ag3dq/

However, if you wish to use your own texture, simply load whatever texture you want into the map field:

var texture = THREE.ImageUtils.loadTexture('/images/my_texture.png');
// Do NOT set this flag. Explanation provided by WestLangley in the comments
// texture.needsUpdate=true;

var material = new THREE.ParticleBasicMaterial({
  // ...
  map: texture,
  // add all relevant fields as described in the link above
});

// geometry should contain your particle vertices
var particle = new THREE.ParticleSystem(geometry, material);
scene.add(particle);

edited Jan 27 '21 at 08:07

Vico

108
2
14

answered Jul 12 '13 at 17:34

elyas-bhy

772
1
14
23

Do not set the `needsUpdate` flag with `ImageUtils.loadTexture()`. It sets it for you after the texture loads. Setting it before the texture finishes loading can lead to rendering errors. – WestLangley Jul 12 '13 at 18:50
I missed that one, my bad. Edited my answer. – elyas-bhy Jul 12 '13 at 19:36

creating a spherical particle basic material for webgl renderer in threejs

1 Answers1