使用DOMElements的THREE.js SphereGeometry Panorama热点

Question

我创建使用一个简单的WebGL的3D全景应用SphereGeometry,PerspectiveCamera以及CanvasTexture.现在,我希望通过在某些部分添加"HotSpots"来将场景变为现实SphereGeometry.我遇到的问题是理解如何更新各种各样的,DOMElements以便他们的位置反映更新的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)";

这也是所需效果的实例.

什么是解决这个问题的最佳解决方案？当我跑步时我注意到它DOMElements只会轻微移动; 我还注意到他们并没有真正考虑到SphereGeometry它们放置的位置(例如,定位在"后面" Camera;真的很复杂!

我很高兴使用THREE.js引擎的任何插件以及任何教程.非常感谢你提前回复!

Answer 1

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

你会完成的！