Three.js反向光线投射

Question

我正在将曲面设置为世界地图，用户可以旋转并突出显示国家/地区。 单击某个国家/地区后，我将确定确切单击的内容，然后显示一个工具提示，其中包含有关所选国家/地区的一些信息，如以下屏幕截图所示：

地图本身生成为三，但工具提示为常规的旧div。 关键是，即使平面旋转了，我也希望工具提示保持与纹理的特定点粘合。 工具提示的原始位置基于光线投射器的信息。 因此，我希望应用程序返回相对于容器（或窗口）的精确点的当前位置-例如基于uv坐标。 我该如何实现？

Answer 1

基于@ prisoner849提供的链接，我实现了以下解决方案：

a）在mouseup事件中，我设置了一个新的工具提示3D原点（仅当鼠标位置没有明显变化时，才能识别单击和拖动相机之间）

b）每帧都触发以下函数，该函数将3D坐标转换为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)';
}