动态绘制一条带有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.
< img src =https://i.stack.imgur.com/aVBCe.pngalt =在此处输入图像描述>
当启动几何图形为
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.
有什么方法吗?
推荐答案
你可以使用 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屋!