Inkrementelles Rendering von Particals in THREE.js

Question

Neuling in 3D-Welt. Es wird versucht, Partikel so darzustellen, wie sie erstellt wurden, damit diese 2000 Partikel so gerendert werden, wie sie erstellt wurden. Aber von unten Code rendert es nur einmal alle Partikel erstellt werden.

Ausprobiert paar Variationen, aber kein Glück. Jede Hilfe wird geschätzt.

<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> 

Answer 1

Sie können eine Teilmenge von Ihnen Partikel machen (jetzt THREE.Points genannt) durch BufferGeometry und Einstellen des Streckbereichs verwendet wird.

var geometry = new THREE.BufferGeometry(); 

geometry.setDrawRange(startIndex, count); 

Sie können den Zeichenbereich innerhalb Ihrer Animationsschleife zurücksetzen.

Informationen zum Füllen der Geometrie und einer Live-Demo finden Sie unter this answer.

three.js r.78