在javascript

Question

我需要实现一些东西，我不知道该使用什么（vanilla js vs library）。

我希望我的用户在其浏览器中可视化3d模型构建。模型化在模型化工具中完成，然后作为一系列图像导出，以进行360°度的事物。我正在使用this code来做360°的事情并且效果很好。

在模型化工具中，用于拍摄模型照片的相机（例如，它以房子为例）位于几米高处并围绕房屋旋转。我可以得到那些参数（相机相对于模型中心的高度和距离）。

现在我还想在这个360 javascruot图像微调器上找到“热点”：用户应该可以点击某些表面（厨房，餐厅，room1，room2等）并在弹出窗口中获取一些数据。 I've already done this in 2D with SVG这很简单，但不知道如何在这种3D中做同样的事情。我以为我可以使用像three.js这样的工具来完成这项工作，但不知道从哪里开始 - 我的数学课程相当遥远。

理想情况下我想做什么：

• 绘制“可点击”区域的地图（SVG？）
• 使用与序列第一张照片中使用的角度相同的角度（相机的高度/距离）旋转此地图
• 当用户拖动360图像微调器时，计算围绕x轴的角度并相应地旋转地图。

有没有人知道我该怎么做以及我应该使用什么？

谢谢。

Answer 1

Threejs可以轻松完成旋转+可点击区域而无需询问数学。您只需要使旋转与图像滑块的周期相同。

• 其SVGRenderer可能适合您的项目，
• 但是考虑到密集的CPU计算，你链接的滑块问，WebGLRenderer可能是最好的解决方案，因为它使用GPU进行渲染，只有很少甚至没有编程差异（三个）。
• 如果你选择WebGLRenderer，那么更直观的是获得所有三个。您只需加载纹理和几何图形而不是一组大图像（您将获得数秒的加载时间），并且由于CPU计算量减少两倍，结果将变得更加平滑。