如何使用three.js在运行时绘制线段 [英] How to draw a line segment at run time using three.js
问题描述
我是Three.js的新手,我正在尝试实现Microsoft Paint中用于绘制线段的技术。我正在尝试获取onMouseDown上一个点的坐标,然后用onMouseMove扩展一行直到onMouseDown。请帮忙!
I am new to Three.js and I'm trying to implement the technique used in Microsoft Paint for drawing a line segment. I'm trying to get coordinates of a point onMouseDown then extend a line with onMouseMove until onMouseDown. Please help!
推荐答案
three.js主要用于3D绘图。如果你想复制像绘画这样的2D绘图应用程序,那么使用2D画布可能会更容易: canvas.getContext(2d);
。
three.js is mainly for drawing in 3D. If you want to copy a 2D drawing application like paint then using the 2D canvas will probably be easier: canvas.getContext("2d");
.
我会假设您确实要绘制三个.js。在这种情况下,我将 此示例 放在一起。请按照以下步骤操作:
I will assume that you do want to draw in three.js. In which case I have put together this example. Follow these steps:
- 单击页面上的任意位置并拖动鼠标以绘制线条。该线在z平面上绘制。
- 单击形状按钮,注意一个形状是如何接近而另一个形状更接近,这是因为一个形状位于z平面上方,另一个位于z平面上方。
- 单击旋转按钮,这将使相机缩小并围绕轴旋转。请注意,当您通过z平面时,所有绘图都在该平面上。
查看代码,主要部分是:
Have a look at the code, the main parts are:
您需要将鼠标单击坐标投影到平面上。这是通过此功能完成的:
You need to project the mouse click coordinates onto the plane. This is done with this function:
function get3dPointZAxis(event)
{
var vector = new THREE.Vector3(
( event.clientX / window.innerWidth ) * 2 - 1,
- ( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
projector.unprojectVector( vector, camera );
var dir = vector.sub( camera.position ).normalize();
var distance = - camera.position.z / dir.z;
var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
return pos;
}
然后从上一个点开始画线:
Then draw the line from previous to this point:
geometry.vertices.push(lastPoint);
geometry.vertices.push(pos);
var line = new THREE.Line(geometry, material);
scene.add(line);
请注意,当您在旋转时接近通过z平面时,投影到Z非常为了防止这种情况发生以下情况,我们将完成以下检查:
Note that when you get close to passing through the z plane while rotating, the projection to Z is very far off and you go out of bounds, to prevent this the following check is done:
if( Math.abs(lastPoint.x - pos.x) < 500 && Math.abs(lastPoint.y - pos.y) < 500 && Math.abs(lastPoint.z - pos.z) < 500 )
作为参考,我找到了投影鼠标坐标的信息这里(SO答案)和这里(three.js样本)。
For reference, I found information for projecting the mouse coordinate here (SO answer) and here (three.js sample).
更新
要从mousedown位置绘制一条线到mouseup位置,请参阅 此演示 即可。代码更改只是在鼠标向上的点之间进行绘制。
To draw a line from the mousedown position to the mouseup position see this demo. The code changes are to instead just do the draw between points on mouse up.
function stopDraw(event)
{
if( lastPoint )
{
var pos = get3dPointZAxis(event);
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var geometry = new THREE.Geometry();
if( Math.abs(lastPoint.x - pos.x) < 2000 && Math.abs(lastPoint.y - pos.y) < 2000 && Math.abs(lastPoint.z - pos.z) < 2000 )
{
geometry.vertices.push(lastPoint);
geometry.vertices.push(pos);
var line = new THREE.Line(geometry, material);
scene.add(line);
lastPoint = pos;
}
else
{
console.debug(lastPoint.x.toString() + ':' + lastPoint.y.toString() + ':' + lastPoint.z.toString() + ':' +
pos.x.toString() + ':' + pos.y.toString() + ':' + pos.z.toString());
}
}
}
这篇关于如何使用three.js在运行时绘制线段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!