javascript - 在 three.js 中移动平行于投影平面的对象

Question

我想用鼠标沿着平行于投影平面的平面移动对象。这意味着在移动过程中，任何拾取对象与相机投影平面(而非相机位置)之间的距离必须保持不变。有人问过类似的问题:Mouse / Canvas X, Y to Three.js World X, Y, Z ，但与那里不同的是，我需要一个适用于任意摄像机 Angular 和摄像机/物体位置的解决方案，不仅适用于 z=0 的平面。它还必须适用于正交投影。现在我创建了一个 fiddle

http://jsfiddle.net/nmrNR/

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

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())
);

圆跟随鼠标位置，但它到相机位置的距离是恒定的，所以它实际上是在执行球形运动。当切换到正交摄影机(单击)时，它也不会像预期的那样跟随鼠标位置。

Answer 1

我已经修改了提问者优秀的工作版本以在更新的版本中工作(对我来说效率更高一些 - 只是回馈，谢谢。起初我发现自己使用克隆来避免神经质行为。然后我注意到来回移动对象会使其向前移动，因此我使用了初始点击位置(以获得 distanceTo)。那里也有警告说使用 addVectors 和 subVectors 的问题，但这也不是必需的。

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 会将其从当前相机平面中的鼠标移动位置移动，但它会以某种方式旋转，因为在透视图中对象的相机距离保持不变。

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

我仍然对我最初点击的位置的偏移有疑问，因此位置中心不会弹出，也许暂时设置对象枢轴值得探索。这是与 r71 一起工作的。