THREE.js SphereGeometry全景热点使用DOMElements

问题描述

我已使用 SphereGeometry ， PerspectiveCamera 和<$ c $创建了一个简单的WebGL 3D Panorama应用程序c> CanvasTexture 。现在，我想通过在 SphereGeometry 的某些部分添加HotSpots来使场景生动。我遇到的问题是理解如何更新各种 DOMElements ，以便他们的位置反映更新的相机位置。

基本上，由于相机旋转各种 DOMElements 将相对于相机旋转的方向移入和移出视图。我尝试将< div> 定位到< canvas> 和翻译 X 和 Y 使用返回的 PerspectiveCamera camera.rotation 但它没有真正工作;这里是我的JS& CSS implentation：

CSS

  #TestHotSpot {
 / *不确定如果使用边距是定位热点的最好方法* / 
 margin-top：50px; 
 margin-left：50px; 
 width：50px; 
 height：50px; 
 background：red; 
 position：absolute; 
} 
  

JavaScript

  / ** 
 CONFIG是我的存储对象变量;它包含PerspectiveCamera实例
代码正在我的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

解决方案

2. 复制css元素的位置（使用three.js创建的domElements cssObject [如果您已经知道]）以及planemesh / mesh




你会完成的！




I've created a simple WebGL 3D Panorama application using a SphereGeometry, PerspectiveCamera and a CanvasTexture. Now, I'm looking to bring the scene to life by adding "HotSpots" over certain parts of the SphereGeometry. The problem I'm having is understanding how to update the various DOMElements so that their position is reflective of the updated Camera position.

Basically, as the Camera rotates the various DOMElements would move in and out of view relative to the direction the camera is spinning. I tried positioning a <div> absolute to the <canvas> and translating the X and Y position using the returned PerspectiveCamera camera.rotation but it didn't really work; here's my JS & CSS implentation:

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 is also a live example of the desired effect.

What would be the best solution to fix this problem? What I noticed when I ran this that the DOMElements would only slightly move; I also noticed that they wouldn't really take in account where along the SphereGeometry they were placed (for example, being positioned "behind" the Camera; really complex!

I'm happy to use any plugins for the THREE.js engine as well as follow any tutorials. Thank you so much for replying in advance!

解决方案
1. Try to set a planemesh/mesh to the desired point.
2. Copy the position of the css elements (domElements created with three.js cssObject [if you already know]) along with planemesh/mesh 's position.

And you will be done !!

这篇关于THREE.js SphereGeometry全景热点使用DOMElements的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！