4

マウスを使用して、投影面に平行な平面に沿ってオブジェクトを移動したいと考えています。これは、移動中、選択したオブジェクトとカメラの投影平面 (カメラの位置ではない) の間の距離が一定に保たれなければならないことを意味します。同様の質問がされています: Mouse / Canvas X, Y to Three.js World X, Y, Z、しかし、そことは異なり、 z=0 の平面だけでなく、任意のカメラ角度とカメラ/オブジェクトの位置に対して機能するソリューションが必要です. また、正投影でも機能する必要があります。今、私はフィドルを作成しました

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

円はマウスの位置に追従していますが、カメラの位置までの距離は一定であるため、実際には球状の動きをしています。正投影カメラに切り替える (クリックする) ときも、期待どおりにマウスの位置に追従しません。

4

2 に答える 2