three.js所：如何沿着一条直线粒子动画

问题描述

我想动画沿着路径与此类似镀铬expriement颗粒：

我试着挖掘到这个项目的来源，什么到目前为止我groked的是，他们正在使用曲线法.getPoitns内置（）在自己的线路产生30点左右。

有没有什么，我试图完成一个更好的例子吗？是否有就行了比使用.lerp（）方法30次得到30分让分的方法？如果我只是用吐温动画？

任何帮助或方向将是AP preciated。

解决方案

我已经想通了一个解决方案，不知道这是否是最好的或没有，但它工作得很好。

\r

\r

//首先创建一个我们要沿着动画粒子线\r
VAR几何=新THREE.Geometry（）;\r
geometry.vertices.push（新THREE.Vector3（-800，0，-800））;\r
geometry.vertices.push（新THREE.Vector3（800，0，0））;\r
\r
变种线=新THREE.Line（几何形状，材料）;\r
变种的startPoint = line.geometry.vertices [0];\r
变种端点= line.geometry.vertices [1];\r
scene.add（线）;\r
\r
\r
//创建旁沿线的一套约30点的动画\r
VAR animationPoints = createLinePoints（的startPoint，端点）;\r
\r
//添加颗粒场景\r
对于（i = 0; I＆LT; numParticles;我++）{\r
  VAR desiredIndex = I / numParticles * animationPoints.length;\r
  变种RINDEX =约束（Math.floor（desiredIndex），0，animationPoints.length-1）;\r
  VAR粒子=新THREE.Vector3（）;\r
  变种粒子= animationPoints [RINDEX] .clone（）;\r
  particle.moveIndex = RINDEX;\r
  particle.nextIndex = RINDEX + 1;\r
  如果（particle.nextIndex＆GT; = animationPoints.length）\r
    particle.nextIndex = 0;\r
  particle.lerpN = 0;\r
  particle.path = animationPoints;\r
  particleGeometry.vertices.push（粒）;\r
}\r
\r
//设置粒子材料\r
VAR pMaterial =新THREE.ParticleBasicMaterial（{\r
  颜色：0x00FF00，\r
  尺寸：50，\r
  图：THREE.ImageUtils.loadTexture（\r
    资产/材质/ map_mask.png\r
  ）\r
  混合：THREE.AdditiveBlending，\r
  透明：真\r
}）;\r
\r
\r
VAR粒子=新THREE.ParticleSystem（particleGeometry，pMaterial）;\r
particles.sortParticles = TRUE;\r
particles.dynamic = TRUE;\r
scene.add（颗粒）;\r
\r
\r
//为每个粒子动画更新功能\r
particles.update =功能（）{\r
  // VAR时间= Date.now（）\r
  对（在this.geometry.vertices变种I）{\r
    VAR粒子= this.geometry.vertices [I]\r
    VAR路径= particle.path;\r
    particle.lerpN + = 0.05;\r
    如果（particle.lerpN→​​1）{\r
      particle.lerpN = 0;\r
      particle.moveIndex = particle.nextIndex;\r
      particle.nextIndex ++;\r
      如果（particle.nextIndex＆GT; = path.length）{\r
        particle.moveIndex = 0;\r
        particle.nextIndex = 1;\r
      }\r
    }\r
\r
    VAR currentPoint =路径[particle.moveIndex]\r
    VAR NextPoint公司=路径[particle.nextIndex]\r
\r
\r
    particle.copy（currentPoint）;\r
    particle.lerp（NextPoint公司，particle.lerpN）;\r
  }\r
  this.geometry.verticesNeedUpdate = TRUE;\r
};\r
\r
\r
\r
\r
功能createLinePoints（的startPoint，端点）{\r
  VAR为NumPoints = 30;\r
  变种returnPoints = [];\r
  对于（i = 0; I＆LT; =为NumPoints;我++）{\r
    。VAR thisPoint = startPoint.clone（）进行线性插值（端点，I /为NumPoints）;\r
    returnPoints.push（thisPoint）;\r
  }\r
  返回returnPoints;\r
}\r
\r
函数约束（ⅴ，最小，最大）{\r
  如果（V族分钟）\r
    V =分钟;\r
  其他\r
    如果（V＆GT;最大）\r
      V = MAX;\r
  返回伏;\r
}

\r

\r

\r

和然后在动画循环：

\r

\r

particles.update（）;

\r

\r

\r

I'm trying to animate particles along a path similar to this chrome expriement: http://armsglobe.chromeexperiments.com/

I've tried digging into the source of this project, and what I've groked so far is that they are using a built in curve method .getPoitns() to generate about 30 points on their lines.

Is there a better example on what I'm trying to accomplish? Is there a method for getting points on the line than using the .lerp() method 30 times to get 30 points? Should I just use TWEEN animations?

Any help or direction would be appreciated.

解决方案

I've figured out a solution, not sure if it's the best or not, but it works well.

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

and then in the animation loop:

particles.update();

这篇关于three.js所：如何沿着一条直线粒子动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！