javascript - 使用 DOMElements 的 THREE.js SphereGeometry Panorama 热点

Question

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

基本上，作为Camera旋转各种 DOMElements会相对于相机旋转的方向移入和移出视野。我尝试定位 <div> absolute到 <canvas>和 translating X和 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也是预期效果的一个活生生的例子。

解决此问题的最佳解决方案是什么？我在运行此命令时注意到 DOMElements只会轻微移动；我还注意到他们并没有真正考虑到 SphereGeometry 的位置。它们被放置(例如，位于 Camera 的“后面”；真的很复杂!

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

Answer 1

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

然后你就完成了!!