在 javascript 中围绕 3D 轴旋转表面
Rotating a surface around an axis in 3D in javascript
我需要实现一些东西，但我不确定要使用什么（vanilla js 与库）。
我希望我的用户在其浏览器中可视化 3d 模型建筑。建模是在建模工具中完成的，然后导出为一系列图像以执行 360° 度的操作。我正在使用 this code 来做 360° 的事情，效果很好。
在建模工具中，用于拍摄模型（假设它是一栋房子）的相机位于几米高的地方，并围绕房子旋转一圈。我可以获得那些参数（相机相对于模型中心的高度和距离）。
现在我还想要 "hot spots" 这个 360 javascruot 图像微调器：用户应该能够点击某些表面（厨房、餐厅、房间 1、房间 2 等）并在弹出窗口中获取一些数据. I've already done this in 2D with SVG 很简单，但不知道如何在这种 3D 中做同样的事情。我在想我可以使用像 three.js 这样的工具来完成这项工作，但不知道从哪里开始 - 我的数学课很远。
理想情况下我想做的事情：
- 绘制 "clickable" 个区域的地图（SVG？）
- 以与序列第一张图片中使用的角度相同的角度旋转此地图（相机的高度/距离）
- 当用户拖动 360 度图像微调器时，计算围绕 x 轴的角度并相应地旋转地图。
有人知道我该怎么做以及我应该使用什么吗？
谢谢。
Threejs 不用问你数学就可以轻松完成旋转+可点击区域。您只需要使旋转与图像滑块的周期相同。
- 其
SVGRenderer 可能适合您的项目，
- 但是考虑到密集的 CPU 计算你链接的滑块询问，
WebGLRenderer 可能是最好的解决方案，因为它使用 GPU 进行渲染，几乎没有编程差异（在 threejs 中).
- 如果您使用
WebGLRenderer 更直观的是将所有内容都包含在 threejs 中。您只需加载一个纹理和几何图形，而不是一大组图像（您将获得几秒钟的加载时间），并且由于 CPU 计算减少了两倍，结果将变得更加平滑。
我需要实现一些东西，但我不确定要使用什么（vanilla js 与库）。
我希望我的用户在其浏览器中可视化 3d 模型建筑。建模是在建模工具中完成的，然后导出为一系列图像以执行 360° 度的操作。我正在使用 this code 来做 360° 的事情，效果很好。
在建模工具中，用于拍摄模型（假设它是一栋房子）的相机位于几米高的地方，并围绕房子旋转一圈。我可以获得那些参数（相机相对于模型中心的高度和距离）。
现在我还想要 "hot spots" 这个 360 javascruot 图像微调器：用户应该能够点击某些表面（厨房、餐厅、房间 1、房间 2 等）并在弹出窗口中获取一些数据. I've already done this in 2D with SVG 很简单，但不知道如何在这种 3D 中做同样的事情。我在想我可以使用像 three.js 这样的工具来完成这项工作，但不知道从哪里开始 - 我的数学课很远。
理想情况下我想做的事情：
- 绘制 "clickable" 个区域的地图（SVG？）
- 以与序列第一张图片中使用的角度相同的角度旋转此地图（相机的高度/距离）
- 当用户拖动 360 度图像微调器时，计算围绕 x 轴的角度并相应地旋转地图。
有人知道我该怎么做以及我应该使用什么吗？
谢谢。
Threejs 不用问你数学就可以轻松完成旋转+可点击区域。您只需要使旋转与图像滑块的周期相同。
- 其
SVGRenderer可能适合您的项目， - 但是考虑到密集的 CPU 计算你链接的滑块询问，
WebGLRenderer可能是最好的解决方案，因为它使用 GPU 进行渲染，几乎没有编程差异（在 threejs 中). - 如果您使用
WebGLRenderer更直观的是将所有内容都包含在 threejs 中。您只需加载一个纹理和几何图形，而不是一大组图像（您将获得几秒钟的加载时间），并且由于 CPU 计算减少了两倍，结果将变得更加平滑。