Question

我正在尝试沿类似于此chrome表现的路径设置粒子动画：http://armsglobe.chromeexperiments.com/

我已经尝试深入研究这个项目的来源，到目前为止我已经尝试过的是他们使用内置的曲线方法.getPoitns（）在他们的行上生成大约30个点。

我正在努力实现的目标是否有更好的例子？是否有一种方法可以在线上获得点数而不是使用.lerp（）方法30次获得30分？我应该只使用TWEEN动画吗？

任何帮助或指示都将不胜感激。

Answer 1

我已经找到了解决方案，不确定它是否是最好的，但它运作良好。

你可以在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;
}

然后在动画循环中：

particles.update();

Answer 2

我不知道是否有其他人看不到这些片段有效，但我接受了jigglebilly提供的答案并将其放入一个完整的html页面并且正在工作。就这样，如果你想看到一个工作版本。 ` 粒子测试

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

`

这使用three.js R67。

Three.js：如何沿着线动画粒子

2 个答案: