Three.js reverse raycasting

Question

我在彎曲的平面上設置了一個世界地圖，用戶可以旋轉並突出顯示國家。當點擊一個國家，我確定到底是點擊什麼，然後顯示有關所選國家的一些信息的提示，如下面的截圖：

地圖本身在三個產生，但tooltip是一個普通的老的div。事情是，我希望工具提示可以粘在紋理的特定點上，即使飛機旋轉了。工具提示的原始位置基於來自raycaster的信息。因此，我希望應用程序返回相對於容器（或窗口）的精確點的當前位置 - 例如基於uv座標。我怎樣才能做到這一點？

Answer 1

基礎由@ prisoner849提供的鏈接，我已經實現了以下解決方案：

一）在mouseUp事件我設定一個新的工具提示3D原點（僅當在鼠標的位置沒有顯著三角洲，點擊並拖動相機）

b）中的每一幀之間進行辨別，以下函數進行燒製，其中3D COORDS轉換到2D，並計算工具提示的位置：

function setTooltipOrigin(camera, renderer, tooltip, lastClickPoint) { 
    var canvas = renderer.domElement, 
    point = new THREE.Vector3(); 

    point.x = lastClickPoint.x, 
    point.y = lastClickPoint.y, 
    point.z = lastClickPoint.z, 

    point.project(camera); 

    point.x = Math.round((0.5 + point.x/2) * (canvas.width/window.devicePixelRatio)); 
    point.y = Math.round((0.5 - point.y/2) * (canvas.height/window.devicePixelRatio)); 

    point.x -= 14; //small adjustment to the position, so the line points to the click point 
    point.y -= (tooltip.scrollHeight * 0.7); //same for y 

    tooltip.style.transform = 'translate(' + point.x + 'px, ' + point.y + 'px)'; 
}