javascript - Three.js 反向光线转换

Question

我正在曲面上设置一张世界地图，用户可以旋转它并突出显示国家/地区。当点击一个国家时，我会确定点击的是什么，然后显示一个工具提示，其中包含有关所选国家的一些信息，如下面的屏幕截图所示:

map 本身是用三个部分生成的，但工具提示是一个常规的旧 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)';
}