如何平滑地绘制一条线的图形

我有大约40条曲线，并且它们都有30到200个点。我使用BufferGeometry和setDrawRange()来平均地画出所有这些图像，但只对大于200点的线条平滑。我试过TWEEN.js，但在这种情况下，这不是个好主意。有没有其他的选择来实现它？如何平滑地绘制一条线的图形

在虚幻引擎4中，可以通过在遮罩材质中设置不透明度并更新每个刻度（并且具有绘制效果）来解决此问题。

我想听听您的意见，如果您有任何想法，我该如何尝试做到这一点。

此致敬礼。

来源

2017-02-14 Filemon279

你可以说为什么在你的用例中使用Tween不是一个好主意吗？ – Hesha

是的。我有大约40条曲线，我想平均展示它们。它应该看起来像扫描仪。我不会自己生成线条，因此有不同数量的点，并且它们都在不同的地方。因此，对于Tween，我将不得不使用不同的执行时间来制作40个不同的动画，并且应该执行大约200次（对于最大的行）。更重要的是，我不想使用Line（）来推顶点，因为我已经尝试过了，动画大约有20fps。 – Filemon279

通过使用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

来源

2017-02-14 21:49:54 WestLangley

伟大而简单！ – prisoner849

谢谢，这真棒！ – Filemon279

绝对是最好的方法..只有潜在的问题是你无法动画虚线。可以用一条额外的线来克服这一点，以获得混合模式遮罩效果。更新小提琴在这里：http://jsfiddle.net/156yxd3L/11/ – som

您可以LineSegments画线： https://threejs.org/docs/api/objects/LineSegments.html 另一路： https://threejs.org/docs/api/objects/Line.html

也许变化提供了更好的结果。

来源

2017-02-14 15:26:31

画线不是我的问题。我想隐藏画线并顺利显示。 [链接]（https://i.stack.imgur.com/LT6Tu.gif） - 类似的东西（但没有这条黑线）。 – Filemon279

如何平滑地绘制一条线的图形

回答

相关问题