用three.js动态画一条线
Posted
技术标签:
【中文标题】用three.js动态画一条线【英文标题】:Drawing a line with three.js dynamically 【发布时间】:2015-10-02 16:34:33 【问题描述】:这就是我想要实现的(一个可修改的多边形,其中红色圆圈是顶点)并且我想动态构建多边形。
当初始化几何时
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());
但这不是一个好的解决方案,因为我不知道用户想要添加多少个顶点,并且给它分配一个大数字是没有意义的,因为我必须循环多次。
有什么办法吗?
【问题讨论】:
【参考方案1】:您可以使用BufferGeometry
和setDrawRange()
方法非常轻松地为线条制作动画——或增加渲染点的数量。但是,您确实需要设置最大点数。
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 );
您使用这样的模式设置位置数据:
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;
如果您想在第一次渲染后更改渲染的点数,请执行以下操作:
line.geometry.setDrawRange( 0, newValue );
如果您想在第一次渲染后更改 位置数据值,您可以像这样设置 needsUpdate
标志:
line.geometry.attributes.position.needsUpdate = true; // required after the first render
Here is a fiddle 显示一条动画线,您可以根据自己的用例进行调整。
编辑:请参阅this answer 了解您可能更喜欢的一种技术——尤其是当线条仅包含几个点时。
three.js r.84
【讨论】:
MAX_POINTS = 500;
表示如果用户创建的点数超过 500,它就会崩溃,对吗?最好的情况是我不必预先定义要添加的点数。尽管您的解决方案仍然比我的更好,因为 BufferGeometry
内存效率更高并且您使用的绘图调用更少。
这是如何在three.js的框架内做你想做的事情。
@WestLangley 这可以适应使用 LineDashedMaterial 吗?,我想做一些类似的事情,但如果可行,我会提出一个问题。
@Neil 是的。您必须添加一个额外的几何属性 lineDistance
以适应 LineDashedMaterial
。
你为什么不直接粘贴原始帖子的链接? threejs.org/docs/#manual/en/introduction/How-to-update-things【参考方案2】:
实时画线
Here an updated fiddle 我优化了 user3325025 他的示例中的代码;在这种情况下,绝对不需要在渲染时更新线的所有点。只需要更新onMouseMove
(更新行尾)和onMouseDown
(绘制新点):
// update line
function updateLine()
positions[count * 3 - 3] = mouse.x;
positions[count * 3 - 2] = mouse.y;
positions[count * 3 - 1] = mouse.z;
line.geometry.attributes.position.needsUpdate = true;
// mouse move handler
function onMouseMove(event)
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse.z = 0;
mouse.unproject(camera);
if( count !== 0 )
updateLine();
// add point
function addPoint(event)
positions[count * 3 + 0] = mouse.x;
positions[count * 3 + 1] = mouse.y;
positions[count * 3 + 2] = mouse.z;
count++;
line.geometry.setDrawRange(0, count);
updateLine();
【讨论】:
【参考方案3】:如果你想徒手涂鸦,我用鼠标事件和向量数组更新了小提琴。
https://jsfiddle.net/w67tzfhx/40/
function onMouseDown(evt)
if(evt.which == 3) return;
var x = ( event.clientX / window.innerWidth ) * 2 - 1;
var y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// do not register if right mouse button is pressed.
var vNow = new THREE.Vector3(x, y, 0);
vNow.unproject(camera);
console.log(vNow.x + " " + vNow.y+ " " + vNow.z);
splineArray.push(vNow);
document.addEventListener("mousemove",onMouseMove,false);
document.addEventListener("mouseup",onMouseUp,false);
【讨论】:
以上是关于用three.js动态画一条线的主要内容,如果未能解决你的问题,请参考以下文章