THREE.js中的particals的增量渲染

时间:2016-06-23 23:56:54

标签: javascript three.js

新手到3D世界。尝试在创建粒子时渲染粒子,以便这些粒子在创建时应该渲染。但是从下面的代码中,只有在创建所有粒子后才会渲染。

尝试了几个变种,但没有运气。任何帮助表示赞赏。

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

1 个答案:

答案 0 :(得分:0)

您可以使用THREE.Points并设置绘图范围来渲染您的子集(现在称为BufferGeometry)。

var geometry = new THREE.BufferGeometry();

geometry.setDrawRange( startIndex, count );

您可以重置动画循环中的绘制范围。

有关如何填充几何图形和现场演示的信息,请参阅this answer

three.js r.78