用html制作粒子线条,javascript – Three.js：如何沿着一条线为粒子制作动画

我已经尝试深入研究这个项目的来源,到目前为止我已经讨论过他们正在使用内置的曲线方法.getPoitns()在他们的行上生成大约30个点.

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

任何帮助或方向将不胜感激.

解决方法:

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

//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();

标签：javascript,animation,three-js,particles

来源： https://codeday.me/bug/20190725/1529739.html