问题标签 [panoramas]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
4987 浏览

algorithm - 一个 360 度球体全景到立方体全景转换算法(伪代码或至少需要完整的逻辑)

所以我们可以从维基百科中获取这样的图像 替代文字 并尝试将其映射到未来的立方体或类似立方体的东西 替代文字 替代文字

而不是像顶部和底部一样扭曲 替代文字

有些人可能会认为只干扰一半而不是试图填补它会奏效 替代文字

它不会=(并且内容感知填充无助于填充该正方形=(

但如果你尝试渲染这样的立方体全景图,它看起来很糟糕。

我可以想象的另一种方法是将 3d 全景图渲染到球体上,然后以某种方式将其快照/投影到立方体上......但我不知道如何用简单的数学运算将它写下来(这里的想法是不要使用渲染引擎但尽可能在数学上做到这一点)

0 投票
1 回答
707 浏览

jquery - .draggable() 和更改不同大小的图像的问题

我正在尝试在 jQuery 中做一些“缩放”功能(加载更大的图像),同时能够在较小的 div 中拖动图像(.draggable)。但我遇到了一个小问题。

当我达到最大缩放时(比如说第三张图像,它的高度大约为 300px+,宽度为 1600px+),然后将自己放在右下角,然后开始缩小:然后我被困在了那个角落,而我看到图像本身变小并给我一个白色的空白空间,并且图像在那之后是不可拖动的(可以这么说)。

但是,如果我随后将 .css({'left': '0px', 'top': '0px'}) 添加到要替换的图像中,我会飞回左上角,并且可以随意拖动。但显然我想留在我想放大的地方。

如果我将(帖子中的代码较低)“遏制:[数据]”更改为“遏制:“父母”,我可以“停留”在我放大和缩小的某个区域,但我仍然得到当我走到角落时(但我可以再次拖入图片)时出现白色空白区域,并且代价是它不再是平滑的全景感觉,更像是捕捉到边缘。

有什么简单的方法可以解决这个问题吗?无论如何,这对我的这种问题来说是一个很好的解决方案,还是有更好的方法来实现这种东西。我尝试使用 .animate() 并放大一张图片,但最后我遇到了同样的问题。

-

感谢您的任何输入。

按照命令,演示: http: //miyao.eu/zoomzoom/

0 投票
2 回答
328 浏览

algorithm - 有没有办法预渲染虚拟全景场景?

我想在平板电脑上放置一个逼真的虚拟场景,这样当用户旋转平板电脑时,它就好像平板电脑是通往虚拟世界的窗口一样。

预渲染的场景可以渲染得逼真,而实时渲染具有“计算机制作的外观”。鉴于对于一个场景,POV 可以旋转但不能在空间中平移,那么预渲染的虚拟全景场景是否有可能给人一种身临其境的印象?
我怀疑这很容易,因为旋转视点会导致某种失真。这种失真对于 Starwalk 这样的应用程序来说很容易,但对于照片来说却很难。谁能指出我的方向?

我知道这将非常容易限制一个方向的运动,但我希望用户拥有完整的 3d 体验。

0 投票
0 回答
2254 浏览

c# - 试图渲染等距矩形全景图

我有一个 360 度经度和 120 度纬度的 equirectangular 全景源图像。

我想编写一个函数来渲染它,给定视口的宽度和高度以及经度旋转。我想将我的输出图像设置为完整的 120 度高度。

有没有人有任何指示?我无法理解如何从目标坐标转换回源坐标的数学。

谢谢

到目前为止,这是我的代码:-(创建 ac# 2.0 控制台应用程序,向 system.drawing 添加一个引用)

我正在使用的源图像

使用此代码,当我将目标图像宽度设置为 120 度时,我得到了预期的结果。我看到水平线等的正确曲率,如下所示,当我尝试使用真实的等距矩形全景图时,它看起来就像商业观众渲染的那样。 正确输出 120 度乘 120 度

但是,当我使输出图像更宽时,一切都出错了。您开始在中心的抛物线顶部和底部看到无效像素,如下所示,图像宽 150 度,高 120 度:-

在此处输入图像描述

商业观众似乎做的是放大 - 所以在中心,图像是 120 度高,因此在侧面,更多的被剪裁了。因此,没有洋红色(即没有无效的源像素)。

但我无法理解如何在数学中做到这一点。

这不是家庭作业,这是一个爱好项目。因此,为什么我缺乏对正在发生的事情的理解!另外,请原谅代码的严重低效,当我让它正常工作时,我会优化它。

再次感谢

0 投票
1 回答
940 浏览

c# - 全景图和图像阵列

所以我有一个需要帮助的编码问题,简单地说我不知道​​我在做什么。仅供参考,我没有将工具包与手势侦听器一起使用。

我有一个包含 3 个全景项目的全景页面:BigImageCenter、BigImageLeft、BigImageRight。

在我的应用程序中有一堆图像,这些图像将随应用程序一起下载。这个全景页面的目标是在页面底部设置一个滚动查看器,以小缩略图显示应用程序附带的整个图像列表,页面的顶部是全景项目,如果你向左或向右轻拂 图像有条不紊地在列表中前进(如果向左轻拂,则返回)。

此外,如果您在底部滚动查看器中点击其中一个缩略图,它将用该缩略图图像替换当前的全景图像。如果您在全景页面上向左或向右滑动,您将在数组中获得该缩略图的 -1 或 +1。

您在页面上看到的第一个图像是 BigImageCenter。

我不必使用 3 个全景项目,我可能只用 1 个就可以逃脱。但是,当我只用 1 个测试它时,在我通过单击缩略图并左右滑动全景图来更改图像后,下一个即将在屏幕上加载的图像在更改之前始终是相同的图像(有道理,因为我没有编写任何数组来动态更改下一个图像等)。

但是我不知道如何执行以下任何操作:

1) 创建一个数组,其中全景项中的第一张图像设置为 X。 2) 判断用户在数组中向左或向右滑动到 -1 或 +1 3) 设置缩略图以替换当前全景图像点击,然后将数组扔到该缩略图位置。

这是全景控件和缩略图滚动查看器的 XAML:

....等等

现在我做了一些事情,但不是我想要的方式:

MouseLeftButtonUp="smallImage_Tap" 是一个函数,它将“BigImageCenter”的全景项目更改为矩形的当前 image.fill。我只是无法对其进行编码以更改当前视图中的数据透视项目。我需要帮助。

如果您想知道我为什么要使用矩形,这是我在点击较小的缩略图时使用后面的代码更改图像的最简单方法。

这几乎就是我的代码隐藏。我实际上是从头开始进行这种动态编码,并且需要一些帮助来实现这个梦想。

PS:我还需要知道与图像相关的数组编号,以便我可以允许用户“收藏”它并将其放置在另一个页面中。

0 投票
1 回答
1334 浏览

ios - 构建 Safari HTML5 全景图的教程?

有没有像 Apple 技术演示中介绍的那样构建基于 HTML5 的 VR 全景图的教程?我之所以问,是因为很少有搜索结果或关于再现 VR 效果的教程。这是链接:

虚拟现实演示

0 投票
1 回答
549 浏览

ios - 使用 Core Animation 进行三次全景投影。可能吗?

我正在尝试为立方全景图构建本机查看器。这是我想要实现的网络版本:http: //www.apple.com/html5/showcase/vr/

这种投影的工作原理如下:全景图由投影在立方体内表面的 6 个正方形图像组成。相机位于立方体的中心。

目前,我正在使用 6 个 CALayers 并将它们排列在 3D 空间中,以便它们形成一个立方体。使用 CATransform3DMakeTranslation 等旋转它们可以正常工作。

问题是从后面看时 CALayers 不透明(它们显示与正面相同的图像)。这很糟糕,因为用户看不到立方体内部的投影,因为视图被立方体的其他层挡住了。

这个问题有解决方案吗?我可以想到以下几点: a.) 也许 Core Animation 中有一个设置可以使从后面看的图层透明?b.) 持续跟踪当前视图方向并手动设置隐藏的 CALayers 会阻挡视图。

解决这个问题的最佳解决方案是什么?

0 投票
1 回答
916 浏览

javascript - Android:使用 Javascript 制作全景图像的循环 Horizo​​ntalScrollView

我想使全景图像可滚动,并在用户到达图像末尾后循环并“缝合”其正面到背面。

我尝试重新创建的效果与尝试创建无限水平滚动中的效果一致 - 最好使用 jquery 插件

唯一的问题是我需要它在 Javascript 中,因为我是在 Android 上做的。

有什么建议么?

0 投票
3 回答
973 浏览

google-maps - 嵌入谷歌街景

是否可以在您的页面中嵌入给定地址的街景全景图?

我遇到的所有代码都与协调有关,我正在寻找“地址”,因为如果您只使用协调,您将不得不设置 pov 和所有这些,

谷歌似乎自己做的,看看这里的全景图:

http://maps.google.ca/maps/place?hl=en&sugexp=kjrmc&cp=10&gs_id=z&xhr=t&biw=1680&bih=874&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&um=1&ie=UTF -8 q =丰田+卡尔加里&FB = 1&GL = CA&HQ =丰田&hnear = 0x537170039f843fd5:0x266d3bb1b652b63a,卡尔加里,+ AB&CID = 16440335169618939517&EI = VpqYTpPsLbCrsALi0LnqBA&SA = X&OI = local_result&CT =映射标志物链路&resnum = 1&SQI = 2&VED = 0CF8QrwswAA

谢谢

0 投票
3 回答
5569 浏览

javascript - 球形全景图?

我在 Photoshop 中创建了一个球形全景图,我可以拖动它并查看完整的 360 度视图,但我必须在 Photoshop 中。我如何将其传输到网络上,以便用户可以使用 javascript 在视图中单击和拖动?(我确实可以访问 Flash Professional CS 5.5,但如果该程序更适合此应用程序,我没有使用它的经验)另外请注意我不能使用服务器端脚本。请仅使用客户端脚本

编辑- 如果有我正在寻找的免费程序或基于 javascript 的版本。我宁愿远离为图像加水印的付费程序和免费程序。我不介意主图下方的简单信用。