将链接或“热点”放置在具有三个JS的等距柱状投影全景中

Place link or "hotspot" inside equirectangular panorama with Three JS

本文关键字：JS 三个 全景 投影 热点 链接      更新时间：2023-09-26

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

通过等距柱状投影

全景演示，学习如何在该图片的一部分中放置一个圆圈或任何类型的物体会很棒，当单击它可以打开另一个等距柱状投影全景图或任何东西时。

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

我认为，这完全可以在不使用一些昂贵的全景查看器的情况下完成，这些查看器具有所谓的"热点"。不，我想自己学习这个，以及能够自己编码什么。任何人都可以购买插件，但我想学习如何做到这一点。

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

例如，我正在查看Three的文档.js想知道我需要查找或查找哪些术语。我也仔细研究了关于 SO 的类似问题，并看到它们链接了可点击对象示例。这就是我在等距柱状投影全景中简单地有一个链接所需要的吗？

我

真的很高兴得到一些术语或技术示例来说明我正在尝试做的事情。例如，这篇博文确实帮助我了解了等距柱状投影全景图的基础知识。如果有类似的事情，关于添加等距柱状投影全景的链接，那就太好了。

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

全景图

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

在任何一种情况下，它都涉及 6 张图像，没有失真(因此您可以通过 ptgui 之类的东西将 2：1 扭曲的图像转换为 6 个方形图像(。

阅读立方体贴图

现在，这可以像天空盒一样简单。这六个图像被映射到一个网格上，立方体 - 六个平面，并且这个立方体始终与相机的位置对齐，即。摄像机始终从立方体的中心渲染立方体。在三个.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内容，背景保持背景。

相关文章：