I am currently working on a project where I want to create orbiting objects with trails. To achieve this, I have set up a particle system using THREE Geometry, a THREE PointCloud, and a THREE 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 );
In order to generate the vertices for the Geometry for the trail effect, I am updating them in the animate loop by copying the position information from the objects being orbited at that moment:
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 );
}
For reference, you can view a jsfiddle of my code here: http://jsfiddle.net/jayfield1979/184kbyLr/
While the first vertex is placed correctly for each object, subsequent vertices are not registering as intended.
I would appreciate any feedback on whether my approach is correct and, if not, suggestions for improvement.