您可以使用 BufferGeometry 和 setDrawRange 非常轻松地为一条线设置动画——或增加渲染的点数() 方法.但是，您确实需要设置最大点数.

You can animate a line -- or increase the number of points rendered -- very easily using BufferGeometry and the setDrawRange() method. You do need to set a maximum number of points, however.

var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

您使用这样的模式设置位置数据:

You set the position data using a pattern like this one:

var positions = line.geometry.attributes.position.array;

var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}

如果您想在第一次渲染后更改渲染点数，请执行以下操作:

If you want to change the number of points rendered after the first render, do this:

line.geometry.setDrawRange( 0, newValue );

如果您想在第一次渲染后更改位置数据值，您可以像这样设置 needsUpdate 标志:

If you want to change the position data values after the first render, you set the needsUpdate flag like so:

line.geometry.attributes.position.needsUpdate = true; // required after the first render

这是一个小提琴，显示了一条动画线，您可以根据自己的用例进行调整.

Here is a fiddle showing an animated line which you can adapt to your use case.

请参阅此答案，了解您可能更喜欢的一种技术——尤其是当该行仅包含一个几点.

See this answer for a technique that you may like better -- especially if the line consists of only a few points.

three.js r.84

three.js r.84