用three.js动态画一条线 [英] Drawing a line with three.js dynamically

问题描述

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

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 r.84

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