用three.js动态画一条线

本文介绍了用three.js动态画一条线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这就是我想要实现的(一个可修改的多边形，其中红色圆圈是顶点)并且我想动态构建多边形.

This is what I'd like to achieve (a modifiable polygon where the red circles are vertices) and I'd like to build the polygon dynamically.

当初始化几何体时

var geometry = new THREE.Geometry();

geometry.vertices.push(point);
geometry.vertices.push(point);

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

它运行良好，直到第二次点击，它在 1 和 2 之间建立一条直线，但当它被推到数组时不会添加第三条线.WebGL 似乎需要缓冲点.

it works well until the second click, it builds a straight line between 1 and 2 but does not add a third line when it's pushed to the array. WebGL seems to require buffered points.

当我像这样预定义顶点时，我可以画两条线(第三次点击)

When I predefine vertices like this I can draw two lines (third click)

var geometry = new THREE.Geometry();

for (var i = 0; i < 4; i++) {
    geometry.vertices.push(point);
}

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

但这不是一个好的解决方案，因为我不知道用户想要添加多少个顶点，并且分配一个大数字毫无意义，因为我必须多次循环它.

but this is not a good solution as I don't know how many vertices does the user want to add and it's pointless to assign it a big number as I have to loop it multiple times.

有什么办法可以解决吗?

Is there any way around it?

推荐答案

您可以使用 BufferGeometry 和 setDrawRange 非常轻松地为一条线设置动画——或增加渲染的点数() 方法.但是，您确实需要设置最大点数.

You can animate a line -- or increase the number of points rendered -- very easily using BufferGeometry and the setDrawRange() method. You do need to set a maximum number of points, however.

var MAX_POINTS = 500;

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

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

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

您使用这样的模式设置位置数据:

You set the position data using a pattern like this one:

var positions = line.geometry.attributes.position.array;

var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}

如果您想在第一次渲染后更改渲染点数，请执行以下操作:

If you want to change the number of points rendered after the first render, do this:

line.geometry.setDrawRange( 0, newValue );

如果您想在第一次渲染后更改位置数据值，您可以像这样设置 needsUpdate 标志:

If you want to change the position data values after the first render, you set the needsUpdate flag like so:

line.geometry.attributes.position.needsUpdate = true; // required after the first render

这是一个小提琴，显示了一条动画线，您可以根据自己的用例进行调整.

Here is a fiddle showing an animated line which you can adapt to your use case.

请参阅此答案，了解您可能更喜欢的一种技术——尤其是当该行仅包含一个几点.

See this answer for a technique that you may like better -- especially if the line consists of only a few points.

three.js r.84

这篇关于用three.js动态画一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！