Three.js反向光线投射

Question

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

地图本身是三个生成的，但工具提示是一个普通的旧div。问题是，即使平面旋转，我也希望工具提示保持粘在纹理的特定点上。工具提示的原始定位基于来自raycaster的信息。因此，我希望应用程序返回相对于容器（或窗口）的精确点的当前位置 - 例如基于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)';
}