Three.js逆レイキャスティング

Question

私は曲面上に世界地図を設定しています。ユーザーが回転して国を強調表示できます。国をクリックすると、私は正確にクリックされた後、下のスクリーンショットのように、選択した国に関するいくつかの情報とツールチップを表示するかを決定：

マップ自体は3で生成され

が、ツールチップは通常の古いdivです。ということは、たとえ平面が回転していても、テクスチャの特定の点にツールチップを貼り付けたままにしておきたいと思います。ツールチップの元の位置は、レイキャスターからの情報に基づいています。そのため、私はアプリが、たとえば、uv座標に基づいて、コンテナ（またはウィンドウ）を基準にして、その正確なポイントの現在の位置を返すようにしたいと考えています。それをどうすれば実現できますか？ @ prisoner849によって提供されたリンク上の

Answer 1

ベイシング、私は以下のソリューションを実装しました：

A）私は新しいツールチップ3Dの原点を（マウス位置に有意なデルタがなかった場合にのみ、設定のmouseupイベントで、

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)'; 
}