如何平滑地动画绘制线条 [英] 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.然后您可以将 dashSize 从 0 更改为 1.

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屋！