Incremental rendering of particals in THREE.js

Question

Newbie to 3D world. Trying to render particles as they are created so that these 2000 particles should render as they are created. But from below code it renders only once all particles are created.

Tried couple of variations but no luck. Any help is appreciated.

  <script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

  camera.position.z = 255;

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild( renderer.domElement );

  var particles = new THREE.Geometry;

  for (var p = 0; p < 2000; p++) {
    var particle = new THREE.Vector3(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500 - 250);
      particles.vertices.push(particle);
    }

    var particleMaterial = new THREE.ParticleBasicMaterial({ color: 0xeeeeee, size: 2 });
    var particleSystem = new THREE.ParticleSystem(particles, particleMaterial);

    scene.add(particleSystem);

    function render() {
      requestAnimationFrame(render);
      particleSystem.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    render();

    </script>

?? You seem to be running the loop that adds the particles before the geometry is added to the scene and the render function called. Even if you did add the geometry before the loop and call render when each particle is added, it would happen so fast that it would appear that all particles were added at the same time anyway. — 2pha, Jun 24 '16 at 01:53
[setInterval()](http://www.w3schools.com/jsref/met_win_setinterval.asp) or [setTimeout()](http://www.w3schools.com/jsref/met_win_settimeout.asp) — 2pha, Jun 24 '16 at 02:27

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

You can render a subset of you particles (now called THREE.Points) by using BufferGeometry and setting the draw range.

var geometry = new THREE.BufferGeometry();

geometry.setDrawRange( startIndex, count );

You can reset the draw range inside your animation loop.

See this answer for information on how to populate the geometry and a live demo.

three.js r.78

edited May 23 '17 at 10:28

Community

1
1

answered Jun 24 '16 at 05:32

WestLangley

102,557
10
276
276

hey WestLangley ..is it possible for you to modify my code with your suggestions ? I dont get your answer. I can look at working solution and then understand the flow – Rahul Dess Jun 24 '16 at 05:47

Incremental rendering of particals in THREE.js

1 Answers1