javascript - que - Three.js: Cómo animar partículas a lo largo de una línea

webgl framework

Question

Intento animar partículas a lo largo de un camino similar a este expremento de cromo: http://armsglobe.chromeexperiments.com/

Intenté profundizar en el origen de este proyecto, y lo que he comentado hasta ahora es que están usando un método de curva incorporado .getPoitns () para generar unos 30 puntos en sus líneas.

¿Hay un mejor ejemplo de lo que estoy tratando de lograr? ¿Hay un método para obtener puntos en la línea que usar el método .lerp () 30 veces para obtener 30 puntos? ¿Debería solo usar animaciones TWEEN?

Cualquier ayuda o dirección sería apreciada.

Answer 1

No sé si alguien más no puede ver los fragmentos en funcionamiento, pero tomé la respuesta proporcionada por jigglebilly y la puse en una página html completa y está funcionando. Solo para que quieras ver una versión funcional. `Prueba de partículas

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

<script type="text/javascript">

    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    var camera = new THREE.PerspectiveCamera( 45, (window.innerWidth) / (window.innerHeight), 100, 10000);
    var container = document.getElementById("containerElement");
    var numParticles = 40;
    container.appendChild( renderer.domElement );
    var scene = new THREE.Scene();

    var material = new THREE.LineBasicMaterial({color: 0x0000ff });
    //First create the line that we want to animate the particles along
    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);


    //next create a set of about 30 animation points along the line
    var animationPoints = createLinePoints(startPoint, endPoint);
    var particleGeometry = new THREE.Geometry();
    //add particles to 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();
        var 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 );
    }

    //set particle material
    var pMaterial = new THREE.ParticleBasicMaterial({
        color: 0x00FF00,
        size: 50,
        blending: THREE.AdditiveBlending,
        transparent: true
    });


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

    function UpdateParticles(){
        // var time = Date.now()
        for( var i = 0; i < particles.geometry.vertices.length; i++ ){
            var particle = particles.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 );
        }
        particles.geometry.verticesNeedUpdate = true;
    };

    animate();

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

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    function render() {
        renderer.render(scene, camera);
        UpdateParticles();
    }
</script>

`

Esto usa three.js R67.

Answer 2

He encontrado una solución, no estoy seguro de si es la mejor o no, pero funciona bien.

Puede encontrar una demostración en JsFiddle: https://jsfiddle.net/L4beLw26/

//First create the line that we want to animate the particles along
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);


//next create a set of about 30 animation points along the line
var animationPoints = createLinePoints(startPoint, endPoint);

//add particles to 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();
  var 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 );
}

//set 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;
}

y luego en el ciclo de animación:

particles.update();