javascript - three.js动态画线

Question

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

初始化几何时

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 似乎需要缓冲点。

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

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({}));

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

有什么解决办法吗？

Answer 1

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

const MAX_POINTS = 500;

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

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

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

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

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

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

line.geometry.setDrawRange( 0, newValue );

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

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

Here is a fiddle显示一条动画线，您可以根据自己的用例进行调整。

three.js r.147