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.

将此方法与this alternate method进行比较。

three.js r.84

Answer 2

您可以使用LineSegments绘制线条： https://threejs.org/docs/api/objects/LineSegments.html 和另一种方式： https://threejs.org/docs/api/objects/Line.html

也许改变会带来更好的结果。

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

2 个答案: