如何在three.js中的360全景图像中添加div元素或热点？

Question

我正在通过上传 360 度图像来创建虚拟游览，并希望在 360 度图像中的点击位置上包含热点或该 360 度图像内的任何 div 元素。我应该从事件值中将什么保存在数据库中，例如我可以从单击事件中获取角度值和 event.clientX 或 event.clientY 值。如果我创建 div 然后在旋转 360 图像时 div 保持在同一位置，但我希望在旋转相机时隐藏该 div。

我已经尝试过使用精灵材质。它工作正常，但不能在该精灵材料中使用任何 css。所以我想要画布外的 div 元素，我可以在其中设置顶部、左侧位置值并显示热点或任何 div 元素。

onMouseMove( event ) {
    const intersects = raycaster.intersectObjects(spheremesh, true);
    if (intersects[0]) {
        var infoHotspotsPoint = intersects[0].point;
        $('#hotspotdiv').css({
            top: `${event.offsetY}px`,
            left: `${event.offsetX}px`
        });
    }
 }

这将仅显示在旋转时 360 度图像中的一个位置。但如果该特定点击部分不可见，我希望该 div 也被移动和隐藏。

我想要这样的东西：

https://dubai360.com/scene/5526-49-al-seef-walkabout-49/en

Answer 1

这里有一些你可以使用热点的库

https://github.com/naver/egjs-view360（我喜欢这个）

https://pchen66.github.io/Panolens/examples/panorama_infospot_focus.html