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

问题描述

我想用鼠标沿着平行于投影平面的平面移动对象.这意味着在移动过程中，任何拾取的对象和相机投影平面(不是相机位置)之间的距离必须保持不变.有人问过类似的问题:鼠标/画布 X，Y 到三.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.

推荐答案

我已经修改了提问者的优秀工作版本，以便在更新的版本中工作(对我来说效率更高一些 - 只是回馈，谢谢.起初我发现自己使用克隆来避免神经质的行为.然后我注意到来回移动对象会使其向前爬行，所以我使用了初始点击位置(以获得距离).那里也有警告说使用 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.

对我来说它仍然看起来有点时髦，所以我想也许这可以通过 add 和 sub 更干净来进一步改进.可能如其他人发布的答案所示.

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屋！