如何平滑地绘制线条的动画 [英] How to smoothly animate drawing of a line

问题描述

我有大约40条曲线，所有曲线都有30到200个点。我使用 BufferGeometry 和 setDrawRange（）同样绘制所有这些，但它仅对> 200点的行平滑。我已经尝试过 TWEEN.js ，但在这种情况下，这不是一个好主意。有没有其他选择来实现它？

I have about 40 curved lines and all of them have from 30 to 200 points. I draw all of them equally using BufferGeometry and setDrawRange() but it is smooth only for line with >200 points. I've tried TWEEN.js but it in this case it wasn't good idea. Is there any other option to make it happen?

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

In Unreal Engine 4 this problem can be resolved by setting opacity in masked material and update it every tick (and we have drawing effect).

如果您有什么想法，我想听听您的意见。

I would like to hear from you if you have any ideas how can I try to do it.

最好的问候。

推荐答案

您可以平滑地绘制线条的动画 - 即使该线条只包含几个点 - - 使用 LineDashedMaterial 。

You can smoothly animate the drawing of a line -- even if the line consists of only a few points -- by using LineDashedMaterial.

诀窍是只渲染一个短划线，并增加短划线的长度动画循环。

The trick is to render only one dash, and increment the length of the dash in the animation loop.

// 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.然后，您将从0到1更改 dashSize 。

Note: You can compute the line distances any way you want. For example, you could normalize the distances by the total length, so the distance to the last point is 1. You would then vary dashSize from 0 to 1.

将此方法与这种替代方法。

three.js r.84

three.js r.84

这篇关于如何平滑地绘制线条的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！