javascript - 使用三个 JS 将链接或 "hotspot"放置在等距柱状全景图中

Question

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

随着equirectangular panorama demo例如，学习如何在该图片的一部分中放置一个圆圈或任何类型的对象，然后单击它可以打开另一个等距柱状全景图或任何其他东西，这将是很棒的。

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

我认为这可以在不使用一些昂贵的全景查看器的情况下完成，这些查看器具有所谓的“热点”。不，我想自己学习这个以及能够自己编写代码的内容。任何人都可以购买插件，但我想了解如何操作。

因为我是 Three.js 的新手并且非常喜欢它，所以我真的只是寻求指导或研究的东西。我不介意这是否需要时间和精力。正如他们所说，一分耕耘一分收获。但我的问题是，由于我是该领域的初学者，我什至不知道从哪里开始或研究什么术语。

例如，我正在查看 documentation of Three.js并想知道我需要查找或了解哪些术语。我也仔细查看了关于 SO 的类似问题，发现它们链接了 clickable objects example。 .这就是我需要的，只是在等距柱状全景图中有一个链接吗？

我真的很乐意为我尝试做的事情提供一些术语或技术示例。例如this blog post真的帮助我理解了等距柱状全景图的基础知识。如果有类似的东西添加链接到 equirectangular 全景图，那就太好了。

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

Answer 1

全景图是通过天空盒/立方体贴图渲染的，这可能意味着两件事。

在任何一种情况下，它都涉及 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
});

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

现在假设您在场景中的任意位置添加了一个球体。由于天空盒从不写深度，就好像它不存在一样，它只是以某种方式为你的背景着色。接下来绘制的任何内容都将绘制在它的顶部(在立方体内部)，如果它比立方体范围远得多也没关系，没有深度信息所以它不会测试任何东西。

那是你的光盘。你可以做任何你想做的事，放置粒子系统，将 Sprite 对齐相机，制作 3d 东西，背景保持背景。