Creating particle animations using Three.js along a curved path

Question

Creating particle animations using Three.js along a curved path

I'm attempting to create an animation where particles move along a specific path, similar to the one showcased in this Chrome experiment:

Upon examining the source code of the aforementioned project, I've discovered that they utilize a predefined curve method called .getPoints() to generate approximately 30 points which define their lines.

Are there any other examples available that demonstrate what I'm trying to achieve? Is there a more efficient method for obtaining points on a line as opposed to using the .lerp() method repeatedly to acquire 30 points? Would it be advisable to incorporate TWEEN animations instead?

Any guidance or assistance on this matter would be greatly appreciated.

javascript animation three.js particles

Answer 1

Answer №1

I have discovered a solution that seems to work well, although I am not sure if it is the optimal one.

If you want to see a demonstration, you can check it out on JsFiddle: https://jsfiddle.net/L4beLw26/

//To begin with, create the line along which we want to animate the particles
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-800, 0, -800));
geometry.vertices.push(new THREE.Vector3(800, 0, 0));

var line = new THREE.Line(geometry, material);
var startPoint = line.geometry.vertices[0];
var endPoint = line.geometry.vertices[1];
scene.add(line);

//Then, generate approximately 30 animation points along the line
var animationPoints = createLinePoints(startPoint, endPoint);

//Add particles to the scene
for ( i = 0; i < numParticles; i ++ ) {
  var desiredIndex = i / numParticles * animationPoints.length;
  var rIndex = constrain(Math.floor(desiredIndex),0,animationPoints.length-1);
  var particle = new THREE.Vector3();
  particle = animationPoints[rIndex].clone();
  particle.moveIndex = rIndex;
  particle.nextIndex = rIndex+1;
  if(particle.nextIndex >= animationPoints.length )
    particle.nextIndex = 0;
  particle.lerpN = 0;
  particle.path = animationPoints;
  particleGeometry.vertices.push( particle );
}

//Define particle material
var pMaterial = new THREE.ParticleBasicMaterial({
  color: 0x00FF00,
  size: 50,
  map: THREE.ImageUtils.loadTexture(
    "assets/textures/map_mask.png"
  ),
  blending: THREE.AdditiveBlending,
  transparent: true
});

var particles = new THREE.ParticleSystem( particleGeometry, pMaterial );
particles.sortParticles = true;
particles.dynamic = true;
scene.add(particles);

//Update function for each particle animation
particles.update = function(){
  // var time = Date.now()
  for( var i in this.geometry.vertices ){
    var particle = this.geometry.vertices[i];
    var path = particle.path;
    particle.lerpN += 0.05;
    if(particle.lerpN > 1){
      particle.lerpN = 0;
      particle.moveIndex = particle.nextIndex;
      particle.nextIndex++;
      if( particle.nextIndex >= path.length ){
        particle.moveIndex = 0;
        particle.nextIndex = 1;
      }
    }

    var currentPoint = path[particle.moveIndex];
    var nextPoint = path[particle.nextIndex];

    particle.copy( currentPoint );
    particle.lerp( nextPoint, particle.lerpN );
  }
  this.geometry.verticesNeedUpdate = true;
};

function createLinePoints(startPoint, endPoint){
  var numPoints = 30;
  var returnPoints = [];
  for(i=0; i <= numPoints; i ++){
    var thisPoint = startPoint.clone().lerp(endPoint, i/numPoints);
    returnPoints.push(thisPoint);
  }
  return returnPoints;
}

function constrain(v, min, max){
  if( v < min )
    v = min;
  else
    if( v > max )
      v = max;
  return v;
}

Lastly, make sure to include the following line within the animation loop:

particles.update();

Answer 2

I have discovered a solution that seems to work well, although I am not sure if it is the optimal one.

If you want to see a demonstration, you can check it out on JsFiddle: https://jsfiddle.net/L4beLw26/

//To begin with, create the line along which we want to animate the particles
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-800, 0, -800));
geometry.vertices.push(new THREE.Vector3(800, 0, 0));

var line = new THREE.Line(geometry, material);
var startPoint = line.geometry.vertices[0];
var endPoint = line.geometry.vertices[1];
scene.add(line);

//Then, generate approximately 30 animation points along the line
var animationPoints = createLinePoints(startPoint, endPoint);

//Add particles to the scene
for ( i = 0; i < numParticles; i ++ ) {
  var desiredIndex = i / numParticles * animationPoints.length;
  var rIndex = constrain(Math.floor(desiredIndex),0,animationPoints.length-1);
  var particle = new THREE.Vector3();
  particle = animationPoints[rIndex].clone();
  particle.moveIndex = rIndex;
  particle.nextIndex = rIndex+1;
  if(particle.nextIndex >= animationPoints.length )
    particle.nextIndex = 0;
  particle.lerpN = 0;
  particle.path = animationPoints;
  particleGeometry.vertices.push( particle );
}

//Define particle material
var pMaterial = new THREE.ParticleBasicMaterial({
  color: 0x00FF00,
  size: 50,
  map: THREE.ImageUtils.loadTexture(
    "assets/textures/map_mask.png"
  ),
  blending: THREE.AdditiveBlending,
  transparent: true
});

var particles = new THREE.ParticleSystem( particleGeometry, pMaterial );
particles.sortParticles = true;
particles.dynamic = true;
scene.add(particles);

//Update function for each particle animation
particles.update = function(){
  // var time = Date.now()
  for( var i in this.geometry.vertices ){
    var particle = this.geometry.vertices[i];
    var path = particle.path;
    particle.lerpN += 0.05;
    if(particle.lerpN > 1){
      particle.lerpN = 0;
      particle.moveIndex = particle.nextIndex;
      particle.nextIndex++;
      if( particle.nextIndex >= path.length ){
        particle.moveIndex = 0;
        particle.nextIndex = 1;
      }
    }

    var currentPoint = path[particle.moveIndex];
    var nextPoint = path[particle.nextIndex];

    particle.copy( currentPoint );
    particle.lerp( nextPoint, particle.lerpN );
  }
  this.geometry.verticesNeedUpdate = true;
};

function createLinePoints(startPoint, endPoint){
  var numPoints = 30;
  var returnPoints = [];
  for(i=0; i <= numPoints; i ++){
    var thisPoint = startPoint.clone().lerp(endPoint, i/numPoints);
    returnPoints.push(thisPoint);
  }
  return returnPoints;
}

function constrain(v, min, max){
  if( v < min )
    v = min;
  else
    if( v > max )
      v = max;
  return v;
}

Lastly, make sure to include the following line within the animation loop:

particles.update();

Answer 3

Answer №2

It seems like there may be some issues with the snippets not working properly, but I have taken the solution provided by jigglebilly and incorporated it into a complete HTML page where it is functioning correctly. Feel free to check out the working version below:

Particle Test

<script src="../js/three.js"></script>

<script type="text/javascript">
    // JavaScript code for particle animation goes here
</script>

This implementation utilizes three.js R67.

Answer 4

It seems like there may be some issues with the snippets not working properly, but I have taken the solution provided by jigglebilly and incorporated it into a complete HTML page where it is functioning correctly. Feel free to check out the working version below:

Particle Test

<script src="../js/three.js"></script>

<script type="text/javascript">
    // JavaScript code for particle animation goes here
</script>

This implementation utilizes three.js R67.

Creating particle animations using Three.js along a curved path

Answer №1

Answer №2

Particle Test

Similar questions

Ajax loaded scripts are unable to access global variables

Plupload is not compatible with ng-dialog

The Material UI Drawer stays closed despite the state being set to true

Tips for handling Ajax urlencode in PHP

Node/Express: Detecting PDF Data Size of 0

Is there a way to extract the HTML source code of a website using jQuery or JavaScript similar to PHP's file_get_contents function?

AngularJS filtering with multiple conditions

Developing a Chrome browser extension tailored for parsing unique file formats

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

Managing checkbox inputs within a MEAN stack application

What is the process of using AJAX, JavaScript, and HTML to submit data to a remote

Attempting to transfer user information to MongoDB using AngularJS and Node.js

Discovering whether x is equal to any value within an array using JavaScript

Delayed callback on blur

How can I use ReactJS to find the nearest five locations in order from closest to farthest?

What is the best way to incorporate a fade in effect when a user clicks on a JavaScript dropdown menu?

AngularJS call to the web service

Avoiding console errors when a REST call fails

Creating a custom toJSON function for a property declared using Object.defineProperty

What is the process for defining default prop data in Next.js?