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

Question

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

我已经尝试过使用 Sprite Material 。它工作正常但不能在该 Sprite Material 中使用任何 css。所以我想要 Canvas 外的 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