Javascript 360 度全景答案

【问题标题】：Javascript 360 degrees panoramaJavascript 360 度全景
【发布时间】：2012-03-28 23:00:27
【问题描述】：

您好，我正在寻找一种使用 360 度照片创建全景视图的方法。我需要一个解决方案来创建像 QTVR 这样的东西。有很多基于闪存的软件（我试图避免这种情况）以及一些 javascript/prototype/jquery 解决方案。但是我发现的解决方案都没有我正在寻找的行为。我想让用户环顾四周（只是水平的）。图片上的家具对象应该在鼠标悬停时做出反应，这样我可能会有多个“层”来扭曲。有没有办法在纯 javascript 或 jquery 中操作图像，看起来像弯曲的圆柱形？或者有人知道支持这种图像处理的好库吗？ webgl 可能是一个很好的解决方案吗？我真的不知道如何开始。有没有人可以给我一个提示。我只是在寻找一个方向。谷歌没有给我带来可用的结果。

【问题讨论】：

您是否在 Google 上搜索过“javascript 全景图”？ code.google.com/p/jspanoviewer
感谢您的快速答复。我已经看到了。我希望有一些不同于切片图像的东西。

标签： javascript jquery

【解决方案1】：

查看三个.js

http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html

此外，您还可以通过画布进行一些图像处理。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

仅使用经过完全处理的全景图像并确定哪些像素代表您的交互式对象可能会更容易（使用画布）。然后监听这些像素上的鼠标悬停。

【讨论】：

【解决方案2】：

试试http://panorado.com/en/PanoradoJs.php

在那里您会发现一个出色的基于 HTML5/JS 的查看器。

【讨论】：

请注意，这个只对非商业网站免费

【解决方案3】：

有很多工具可以做到这一点。你试过www.vtility.net 吗？我不确定它是否有鼠标悬停分层。但这是我发现的唯一对 SEO 友好的。

【讨论】：

我什至不知道从哪里下载他们的软件或找到有关如何使用它的文档。这看起来不是一个好的解决方案，也不是可定制的。
嗨，斯科特，也许这个更适合你，因为你想下载它：github.com/nicekei/jQuery-html5-canvas-panorama-plugin
感谢您的回复，我实际上最终选择了jQuery.cyclotron。我这样做的主要标准是许可（由于我的项目的专有性质，不能是 GPL）和易用性（需要一行 JS 和两三行 CSS）。从性能的角度来看，还有更好的选择——这个方法是将图像分解成一堆 div，但效果很好。
最后一个不需要下载任何东西。它是一个在线工具。关于如何使用它，我找到了这两个：[如何创建视频] (vtility.net/howtocreatevirtualtour) 和 [jsfiddle 嵌入示例] (jsfiddle.net/wk65zyk8/1)
不知何故，当我第一次访问该网站时，我并没有意识到，感谢您澄清这一点。它看起来像一个非常酷的实用程序。我面临的主要挑战是我已经拥有需要渲染的数百张全景图的图像文件，并且可以随时添加更多。我确信有一种方法可以自动化 Vtility 程序来为我创建它们，但是将一些 Javascript 放在一起是我们滚动的方式:)