在three.js中移动与投影平面平行的对象 [英] Moving objects parallel to projection plane in three.js

查看:306
本文介绍了在three.js中移动与投影平面平行的对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想用鼠标在与投影平面平行的平面上移动对象。这意味着在移动过程中,任何拾取的物体与摄像机投影平面之间的距离(而不是摄像机位置)必须保持恒定。有人问过类似的问题:鼠标/画布X,Y到3。 js World X,Y,Z ,但是与那里不同的是,我需要一种解决方案,不仅适用于z = 0的平面,而且适用于任意相机角度和相机/对象位置。它也必须为正交投影工作。现在,我创建了一个小提琴

I want to move objects along a plane parallel to the projection plane with the mouse. This means during the movement the distance between any picked object and camera projection plane (not camera position) must remain constant. A similar question has been asked: Mouse / Canvas X, Y to Three.js World X, Y, Z , but unlike there I need a solution working for arbitrary camera angles and camera/object positions not only for the plane with z=0. It also has to work for orthographic projection. Now I created a fiddle

http://jsfiddle.net / nmrNR /

mousemove事件处理程序中的代码:

the code in the mousemove event handler:

var v = new THREE.Vector3(
    (event.clientX/window.innerWidth)*2-1,
    -(event.clientY/window.innerHeight)*2+1,
    1
);
projector.unprojectVector(v,camera);
var dist = circle.position.sub(camera.position,circle.position),
    pos = camera.position.clone();
pos = pos.add(pos,
    v.sub(v,camera.position).normalize().multiplyScalar(dist.length())
);

圆圈跟随鼠标的位置,但是它到相机位置的距离是恒定的,因此它实际上在执行球形运动。切换到地形相机(单击)时,它也不会遵循预期的鼠标位置。

The circle is following the mouse position but its distance to the camera position is constant so it is actually performing a spherical movement. When switching to the ortographic camera (click) it also does not follow the mouse position as expected.

推荐答案

我修改了提问者出色的工作版本,可以在最新版本中使用(对我来说效率更高-只是回馈,谢谢。
最初,我发现自己使用克隆来避免跳跃的行为。然后我注意到将对象移回并
在那里向前倾斜,所以我使用了初始点击位置(以获取distanceTo)。
还有警告说使用addVectors和subVectors的问题,但这也不是必须的。

I've modified the questioners excellent working version to work in a more current version (and a little more efficiently for me - just giving back, thanks. At first I found myself using clone to avoid jumpy behavior. Then I noted moving the object back and forth crept it forward so I used an initial click position (to get the distanceTo). There where also issues with warnings saying use addVectors and subVectors, but that was not necessary either.

camPos = cam.position;
var mv = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 1).unproject(cam);
var pos = camPos.clone(); 
pos.add(mv.sub(camPos).normalize().multiplyScalar(initalClickPos.distanceTo(camPos)));

设置要移动的目标对象到pos的位置会将其从当前相机平面中的鼠标移动位置移开,但是它会以某种方式旋转,因为在透视图中保持了对象的相机距离。

Setting the target object being moved's position to pos will move it from the mouse move position in the current camera plane, but it does in a way rotate as the camera distance is maintained for the object in perspective view.

对于我来说,它看起来还是有点时髦,所以我想也许可以通过添加和替换更干净的方式进一步改善它。

It still looks a little funky to me so I'm thinking maybe this can be improved further with add and sub being cleaner. Possibly as seen in the others answer posted.

我最初单击的位置仍存在偏移,因此位置中心不会弹出,可能是设置了对象暂时枢纽值得探讨。
这与r71一起使用。

I still have issues with an offset for where I initially click so the position center doesn't pop around, maybe setting the objects pivot temporarily is worth exploring. This is working with r71.

这篇关于在three.js中移动与投影平面平行的对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆