THREE.js 使用 DOMElements 的 SphereGeometry 全景热点

我使用以下命令创建了一个简单的 WebGL 3D 全景应用程序SphereGeometry, PerspectiveCamera and a CanvasTexture。现在，我希望通过在场景的某些部分添加“热点”来使场景栩栩如生SphereGeometry。我遇到的问题是了解如何更新各种DOMElements以便他们的位置反映更新的Camera位置。

基本上，作为Camera旋转各种DOMElements会相对于相机旋转的方向移入和移出视野。我尝试定位一个<div> absolute to the <canvas> and translating the X and Y使用返回的位置PerspectiveCamera camera.rotation但它并没有真正起作用；这是我的 JS 和 CSS 实现：

CSS

#TestHotSpot {
    /* not sure if using margins is the best method to position hotspot */
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
}

JavaScript

/** 
   CONFIG is my stored object variable; it contains the PerspectiveCamera instance 
   code is being called inside of my RequestAnimationFrame
**/

config.camera.updateProjectionMatrix();
config.controls.update(delta);

document.getElementById("TestHotSpot").style.transform = "translate("+ config.camera.rotation.x +"px, "+ config.camera.rotation.y +"px)";

Here http://mpetroff.net/software/pannellum/也是一个想要达到的效果的活生生的例子。

解决这个问题的最佳解决方案是什么？当我运行这个时我注意到的是DOMElements只会轻微移动；我还注意到他们并没有真正考虑到SphereGeometry它们被放置（例如，被放置在Camera;真的很复杂！

我很乐意使用任何插件THREE.js引擎并遵循任何教程。非常感谢您提前回复！

1. 尝试将平面网格/网格设置为所需的点。
2. 复制 css 元素的位置（使用 Three.js cssObject 创建的 domElements [如果您已经知道]）以及planemesh/mesh 的位置。

你会完成的！