有三个JS的等矩形全景图中的位置链接或“热点”

Question

我正在寻找一个详细的教程或示例或良好的文档，如何将链接放置在一个等长线全景与Three.js。

有了等矩形全景演示，学习如何将圆圈或任何类型的物体放置在该图片的一部分中将是很棒的，当点击它时，它可以打开另一个等长方形全景图或任何真正的东西。

请问我需要什么技术来研究？我需要注意哪些依赖关系？像这样的东西我还需要什么其他的库？

我认为这是可以做到的，不需要使用一些昂贵的全景观众，所谓的“辣妹”。不，我想自己学习这个，以及如何自己编码。任何人都可以购买插件，但我想学习如何做到这一点。

因为我对Three.js非常陌生，我真的很喜欢它，我只是想要一些指点或者研究的东西。我不介意这是否需要时间和努力。没有痛苦，没有收获，就像他们说的。但我的问题是，我甚至不知道从哪里开始或研究的条件，因为我是一个初学者在这个领域。

例如，我正在查看Three.js文档，并想知道我需要查找或查找哪些术语。我也仔细地看了一下类似的问题，看到它们连接了可单击对象示例。这就是我所需要的只是在等长形全景图中有一个链接吗？

我真的很高兴有人给我一些术语或技术例子来说明我想做的事情。例如，这篇博客文章确实帮助我理解了等长线全景图的基本原理。如果有类似的添加链接到等长线全景图，那将是伟大的。

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

Answer 1

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

在任何一种情况下，它都涉及6个图像，没有失真(因此，您可以通过类似ptgui的方法将2:1失真的图像转换为6平方图像)。

在立方体地图上阅读

现在，这可以像skybox那样简单。这六个图像映射到一个网格，立方体-六个平面，这个立方体总是对齐相机的位置，即。相机总是从立方体的中心渲染立方体。three.js所需要的唯一魔力是将.renderOrder设置为先呈现，而depthWrite设置为false，这样就不会影响其他对象的呈现(即无限远的对象)。

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

示例显示的另一个方法是在着色器中执行实际的textureCube提取。这个示例抽象了这一点，您只需从库中获取多维数据集着色器，并将其应用于多维数据集。这样你就可以避免制造6个平面，6个不同的材料(6个绘图调用)，但是加载一个cubemap (three.texture)，让三个人在一个抽签调用中在着色器中读取它。

现在假设你在场景中的某个地方添加一个球体，在任何地方。因为天空盒子从来没有写过深度，它就好像它不存在，它只是用某种方式给你的背景画上颜色。你接下来画的任何东西，都会画在它上面(在立方体里面)，不管它是否比立方体范围远，没有深度信息，所以它没有测试任何东西。

那是你的光盘。你可以做任何你想做的事，放置粒子系统，将精灵对准摄像机，制作3d的东西，背景保持在背景中。