如何平滑地绘制线条的动画

Question

我有大约40条曲线,它们都有30到200个点.我使用BufferGeometry和平均绘制所有这些, setDrawRange()但它仅对于> 200点的线条是平滑的.我试过了,TWEEN.js但在这种情况下,这不是一个好主意.有没有其他选择来实现它？

在虚幻引擎4中,可以通过在蒙版材质中设置不透明度来解决此问题,并在每次刻度时更新它(并且我们有绘图效果).

如果您有任何想法,我想听听您是否可以尝试这样做.

最好的祝福.

Answer 1

通过使用,您可以平滑地为线条绘制设置动画 - 即使线条仅包含几个点LineDashedMaterial.

诀窍是只渲染一个破折号,并在动画循环中增加破折号的长度.

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

// attributes
numPoints = points.length;
var positions = new Float32Array( numPoints * 3 ); // 3 vertices per point
var colors = new Float32Array( numPoints * 3 ); // 3 channels per point
var lineDistances = new Float32Array( numPoints * 1 ); // 1 value per point

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'lineDistance', new THREE.BufferAttribute( lineDistances, 1 ) );

// populate
var color = new THREE.Color();

for ( var i = 0, index = 0, l = numPoints; i < l; i ++, index += 3 ) {

    positions[ index ] = points[ i ].x;
    positions[ index + 1 ] = points[ i ].y;
    positions[ index + 2 ] = points[ i ].z;

    color.setHSL( i / l, 1.0, 0.5 );

    colors[ index ] = color.r;
    colors[ index + 1 ] = color.g;
    colors[ index + 2 ] = color.b;

    if ( i > 0 ) {

        lineDistances[ i ] = lineDistances[ i - 1 ] + points[ i - 1 ].distanceTo( points[ i ] );

    }

}

lineLength = lineDistances[ numPoints - 1 ];

// material
var material = new THREE.LineDashedMaterial( {

    vertexColors: THREE.VertexColors,
    dashSize: 1, // to be updated in the render loop
    gapSize: 1e10 // a big number, so only one dash is rendered

} );

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

然后,在动画循环中:

fraction = ( fraction + 0.001 ) % 1; // fraction in [ 0, 1 ]

line.material.dashSize = fraction * lineLength;

小提琴:http://jsfiddle.net/156yxd3L/

注意:您可以以任何方式计算线距.例如,您可以将距离标准化为总长度,因此到最后一个点的距离为1.然后,您dashSize将从0变为1.

将此方法与此替代方法进行比较.

three.js r.84