Javascript 360 度全景
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9916889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript 360 degrees panorama
提问by jarred
Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
嗨,我正在寻找一种使用 360 度照片创建全景视图的方法。我需要一个解决方案来创建类似 QTVR 的东西。有很多基于 Flash 的软件(我试图避免这种情况)以及一些 javascript/prototype/jquery 解决方案。但是我找到的所有解决方案都没有我正在寻找的行为。我想让用户环顾四周(只是水平)。图片上的家具对象应该在鼠标悬停时做出反应,这样我可能会有多个“层”来扭曲。有没有办法在纯 javascript 或 jquery 中操作图像,使其看起来像弯曲圆柱形?或者有人知道支持这种图像处理的好库吗?webgl 可能是一个很好的解决方案吗?我真的不知道如何开始。有没有人可以给我一个提示。一世' 我只是在寻找一个方向。谷歌没有给我带来可用的结果。
回答by hque1011
Check out three.js
查看三个.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
此外,您可以通过画布进行一些图像处理。
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
拥有完全处理的全景图像并找出哪些像素代表您的交互式对象可能会更容易(使用画布)。然后在这些像素上监听鼠标悬停。
回答by Joerg
try out http://panorado.com/en/PanoradoJs.php
试试http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
在那里你会发现一个优秀的基于 HTML5/JS 的查看器。
回答by Houman
There are lots of tool to do that. Have you tried www.vtility.net? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.
有很多工具可以做到这一点。你试过www.vtility.net吗?我不确定它是否有鼠标悬停在分层上。但这是我发现的唯一对 SEO 友好的。