ThreeJS - 項目/ raycast鼠標點擊XZ飛機

我試圖在ThreeJS場景內的3D地圖中實現離線路由。我希望用戶單擊一個點，然後導航到此點的多維數據集。導航工作正常，但點擊點不準確。平面地圖是Y軸向上的XZ座標平面。在這個場景中，我得到了Orbit Controls，它在軌道運行時改變了攝像機的位置參數，因此光線投射並不準確。我需要在任何軌道狀態下獲得正確的XZ座標。我在3D中獲得了傳統射線投影的正確座標，但正如我所說，這不是我所需要的。我嘗試使用ThreeJS文檔中的raycaster的基本方法，從this question得到答案，並且在沒有任何成功的情況下取消投射鼠標點擊Vector3.unproject()。ThreeJS - 項目/ raycast鼠標點擊XZ飛機

Here是jsfiddle來說明我的意思。有一些重要的解釋評論。

來源

2017-10-12 Arek Areknawo

當你傳統的光線投射我想你會得到適當的XY那麼你unprojet他們得到世界的三維點空間。你是否維護軌道狀態的任何變換矩陣？ –

我沒有使用任何矩陣，所以這可能是一些線索。我知道在軌道控制中應用四元數的偏移矢量被添加到目標矢量。這適用於三維座標，但我不能只選擇x和z。我想我應該申請一些轉變，但我不知道該做什麼/做什麼。 –

你有四元數和偏移矢量，你可以使用我認爲的準備轉換矩陣。 –

我可能在我的代碼中有一些錯誤。經過改寫和一些試驗後，從飛機上獲得座標的方法運作良好。當然與實施的軌道控制。這是我的「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

來源

2017-10-15 18:57:03

ThreeJS - 項目/ raycast鼠標點擊XZ飛機

回答

相關問題