ThreeJS - XZ平面へのプロジェクト/レイキャストマウスのクリック

Question

私はThreeJSシーン内の3Dマップでオフラインルーティングを実装しようとしています。私は、ユーザーがポイントをクリックし、このポイントまでキューブを移動したいと思う。ナビゲーションは正しく機能しますが、クリックされたポイントは正確ではありません。フラットマップは、Y軸を上にしたXZ座標の平面です。現場では、軌道を回ってカメラの位置を変える軌道制御があるので、レイキャスティングは私のやり方では正確ではありません。どの軌道の状態でも正しいXZ座標を取得する必要があります。伝統的なレイキャスティングのための3Dコーナーが得意ですが、これは私が必要とするものではありません。 raycasterのThreeJSドキュメントから基本的な方法を試しました。this questionからの回答とVector3.unproject()でのマウスクリックの投射は成功しませんでした。

Hereは、私が意味するものを説明するためにjsfiddleです。重要な説明のコメントがあります。

Answer 1

私のコードにいくつかのバグがあったかもしれません。書き直しといくつかの試行の後、交差した平面からのコードを得る方法はうまくいった。もちろん、オービットコントロールを実装しています。これが私の「onMouseClick」関数は、今どのように見えるかです：

var mouse = new THREE.Vector2(); 
    var rect = scope.renderer.domElement.getBoundingClientRect(); 
    mouse.x = ((event.clientX - rect.left)/rect.width) * 2 - 1; 
    mouse.y = - ((event.clientY - rect.top)/rect.height) * 2 + 1; 
    raycaster.setFromCamera(mouse, camera); 
    var intersection = raycaster.intersectObject(plane); 
    //example box for position visualisation 
    box.position.copy(intersection[0].point); 
    box.position.y = 0; 

Three.js r.87