Question

我使用SphereGeometry，PerspectiveCamera和CanvasTexture创建了一个简单的WebGL 3D Panorama应用程序。现在，我希望通过在SphereGeometry的某些部分添加“HotSpots”来将场景变为现实。我遇到的问题是了解如何更新各种DOMElements，以便其位置反映更新的Camera位置。

基本上，当Camera旋转时，各种DOMElements会相对于相机旋转的方向移入和移出视图。我尝试使用返回的<div> {{将absolute <canvas>定位到translating和X Y和PerspectiveCamera位置1}}但它没有真正起作用;这是我的JS＆amp; CSS实施：

CSS

camera.rotation

的JavaScript

#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;
}

Here也是预期效果的实例。

解决此问题的最佳解决方案是什么？当我跑步时我注意到/** 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引擎的任何插件以及任何教程。非常感谢您提前回复！

Answer 1

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

你会完成的！

使用DOMElements

1 个答案: