使用三个 JS 在 equirectangular 全景图内放置链接或“热点”

Question

我正在寻找有关如何使用 Three.js 在 equirectangular 全景图中放置链接的详细教程或示例或良好文档。

使用equirectangular panorama demo，学习如何在该图片的一部分中放置一个圆圈或任何类型的对象以及单击它可以打开另一个等距矩形全景图或其他任何东西。

请问我需要研究哪些技术？我需要注意哪些依赖项？对于这样的事情，我还需要哪些其他库？

我认为，无需使用一些具有所谓“热点”的昂贵全景查看器即可完成此操作。不，我想自己学习这个，以及自己能够编写什么代码。任何人都可以购买插件，但我想学习如何做到这一点。

因为我对 Three.js 非常陌生，并且非常喜欢它，所以我真的只是要求指点或要研究的东西。我不介意这是否需要时间和精力。正如他们所说，没有痛苦就没有收获。但我的问题是，我什至不知道从哪里开始或研究什么术语，因为我是这个领域的初学者。

例如，我正在查看documentation of Three.js 并想知道我需要查找或了解哪些术语。我也很好地查看了关于 SO 的类似问题，并看到它们链接了clickable objects example。这是我需要在 equirectangular 全景图中简单地链接吗？

我真的很高兴能获得一些关于我正在尝试做的事情的术语或技术示例。例如this blog post 确实帮助我了解了 equirectangular 全景图的基础知识。如果在添加到 equirectangular 全景图的链接方面有类似的事情，那就太好了。

你能指出我正确的方向吗？

Answer 1

全景图是通过 skybox/cubemap 渲染的，这可能意味着两件事。

在任何一种情况下，它都涉及 6 张图像，没有失真（因此您可以通过 ptgui 之类的工具将 2:1 失真图像转换为 6 张方形图像）。

Read on cubemaps

现在，这可以像 天空盒 一样简单。这六个图像被映射到一个网格，立方体 - 六个平面，并且这个立方体总是与相机的位置对齐，即。相机总是从立方体的中心渲染立方体。 three.js 中唯一需要的魔法是设置 .renderOrder 使其首先渲染，并将 depthWrite 设置为 false，以免影响其他对象的渲染（即无限远）。

//do for every face (plane)
myCubeMapFaceMaterial = new THREE.MeshBasicMaterial({
  map:cube.up.jpg, 
  depthWrite:false
});

示例显示的另一个是在着色器中执行实际的纹理立方体获取。该示例对此进行了抽象，您只需从库中获取立方体着色器，并将其应用于立方体。这样可以避免制作 6 个平面、6 种不同的材质（6 个绘制调用），而是加载一个立方体贴图结构（three.texture）并让三个在一次绘制调用中在着色器中读取它。

现在假设您在场景中的任何地方添加一个球体。由于天空盒从未写过深度，就好像它不存在一样，它只是以某种方式为您的背景着色。您接下来绘制的任何内容都将绘制在其顶部（在立方体内部），无论它是否比立方体范围远得多，没有深度信息，因此它不会进行任何测试。

那是你的光盘。你可以做任何你想做的事情，放置粒子系统，将精灵与相机对齐，制作 3d 东西，背景仍然是背景。