我需要实现一些东西，但我不知道该使用什么(普通 js 与库)。
我希望我的用户在其浏览器中可视化 3D 模型建筑。建模是在建模工具中完成的，然后导出为图像序列以执行 360° 度的操作。我正在使用this code做 360° 的事情，效果很好。
在建模工具中，用于拍摄模型照片的相机(以房子为例)位于几米高并围绕房子旋转。我可以获得这些参数(相机相对于模型中心的高度和距离)。
现在我还想要这个 360 javascruot 图像旋转器上的“热点”:用户应该能够单击某些表面(厨房、餐厅、房间 1、房间 2 等)并在弹出窗口中获取一些数据。 I've already done this in 2D with SVG这很容易，但不知道如何在这种 3D 中做同样的事情。我想我可以使用诸如 Three.js 这样的工具来完成这项工作，但不知道从哪里开始 - 我的数学课还很遥远。
理想情况下我想做的事情:
- 绘制“可点击”区域的 map (SVG？)
- 以与序列第一张图片中使用的 Angular 相同的 Angular (相机的高度/距离)旋转此 map
- 当用户拖动 360 度图像旋转器时，计算绕 x 轴的 Angular 并相应地旋转 map 。
有人知道我该怎么做以及我应该使用什么吗？
谢谢。
最佳答案
Threejs 可以轻松完成旋转+可点击区域，无需问你数学。您只需使旋转周期与图像 slider 的周期相同即可。
- 其
SVGRenderer可能适合您的项目， - 但是考虑到您链接的 slider 要求的密集 CPU 计算，
WebGLRenderer可能是最好的解决方案，因为它使用 GPU 进行渲染，几乎没有编程差异(在 Threejs 中)。 - 如果您选择
WebGLRenderer更直观的方法是将所有内容都放在 Threejs 中。您只需加载纹理和几何图形，而不是加载一大组图像(您将获得数秒的加载时间)，并且由于 CPU 计算量减少两倍，结果将变得更加平滑。
关于javascript - 在 javascript 中围绕 3D 轴旋转表面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32465606/