THREE.js粒子/ PointCloud

时间:2015-04-17 19:08:34

标签: javascript three.js

我试图让一些轨道物体留下痕迹。为此,我创建了一个粒子系统,它由三个几何,三个PointCloud和一个三点PointCloudMaterial组成:

particleMaterial = new THREE.PointCloudMaterial({ 
  color: 0xFFFFFF, size: 1, sizeAttenuation: false 
});
particles = new THREE.Geometry;
particles.verticesNeedUpdate = true;
particles.dynamic = true;
particleSystem = new THREE.PointCloud( particles, particleMaterial );
scene.add( particleSystem );

要生成几何体的顶点以形成轨迹,我在动画循环中创建它们并从它们所在的对象复制位置以提供该时间点的轨迹:

function animate() {
if ( nodesArray.length > 0 ) {
    for ( var i = 0; i < nodesArray.length; i++ ) {
        nodesArray[i].position.x = Math.sin( nodesArray[i].counterX ) * 50;
        nodesArray[i].position.z = Math.cos( nodesArray[i].counterZ ) * 50;
        nodesArray[i].position.y = Math.cos( nodesArray[i].counterY ) * 50;
        nodesArray[i].counterX += .01;
        nodesArray[i].counterZ += .01;
        nodesArray[i].counterY += .01;

        var particle = new THREE.Vector3();
        particle.copy( nodesArray[i].position );
        particles.vertices.push( particle );
        particles.verticesNeedUpdate = true;
    }
}

requestAnimationFrame( animate );
renderer.render( scene, camera );
}

这是一个jsfiddle:http://jsfiddle.net/jayfield1979/184kbyLr/

每个对象的第一个顶点都添加在正确的位置。但后续顶点尚未注册。

我是否正确地这样做,如果是这样,那么什么是坏的?或者有更好的方法吗?

1 个答案:

答案 0 :(得分:1)

https://github.com/mrdoob/three.js/wiki/Updates

请阅读“几何图形”。您无法向几何体添加新顶点,这就是为什么只有第一个顶点可见。