我使用
基本上,当
SphereGeometry
、PerspectiveCamera
和CanvasTexture
创建了一个简单的WebGL 3D全景应用程序。现在,我想通过在SphereGeometry
的某些部分添加“热点”来让场景更加生动。我遇到的问题是如何更新各种DOMElements
,使它们的位置反映出更新后的Camera
位置。基本上,当
Camera
旋转时,各种DOMElements
会相对于相机旋转的方向移入或移出视野。我尝试将<div>
绝对定位到<canvas>
上,并使用返回的PerspectiveCamera
camera.rotation
来平移X
和Y
位置,但并没有真正起作用。这是我的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
引擎的插件,并遵循任何教程。非常感谢您提前回复!
cssObject
的文档,但没有找到。您是否有一个代码片段示例,可以解释如何使用它?我仍然有点困惑-抱歉! - lindsay