王超 - 博客 BLOG » 360度全景图 http://www.wangchao123.com code player 海盗精神 - 他们向往自由，面对大海胸怀宽广，只拿他们想要的，遵守契约，单纯而且机智。 Tue, 24 Aug 2010 08:40:59 +0000 http://wordpress.org/?v=2.8 en hourly 1 网站 360 度全景图效果，制作攻略 DevalVR (原创) http://www.wangchao123.com/2009/06/23/180 http://www.wangchao123.com/2009/06/23/180#comments Tue, 23 Jun 2009 06:12:12 +0000 wangchao http://www.wangchao123.com/?p=180 ……
[阅读全文]]]> 无意中在一个网站上发现一个很炫的效果，店铺得360度全景图，先看下效果吧，下面是一个简单的例子

ps: 如果看不到上面的效果，你还没有安装 devalvr 按照浏览器的提示 火狐点击 ie 点击安装 ActiveX 插件。

想要这种效果吗，跟着下面的步骤，你也可以很快实现

~~ go ~

 

 DevalVR

官方网站 http://www.devalvr.com/

这个应用不但能在网页上放大，缩小，仰视，俯视场景图片，还有强大的api可以扩展开发，例如可以跳转到其他场景。由于本身是苹果果的插件，而且导出的文件是 mov 基于QuickTime 的，所以windows上面可供使用的工具比较少，下面先列一下需要用到的软件

 

简单做法

在 <head> 和 </head> 之间插入 devalvr.js 引用文件 点击下载

<script src=”http:www.wangchao123.com/js/detectvr.js” type=”text/javascript”></script>

 

在需要显示全景图的位置插入 

<script type=”text/javascript”>
viewerparameters(”devalvr”,”plugincolor”,”#ffffff”,”grayscale”,”1″,”autoplay”,”0″,”autoplayspeed”,”-4″,”zoom”,”1.2″,”logo”,”http://image.clubzone.cn/newsletteradmin/new_css/css_rxl/logopng.png”);
writecode(”http://www.wangchao123.com/img/bling_out.mov”,”http://www.wangchao123.com/img/bling_out.mov”,”",”",”",”555″,”490″);
</script>

即可实现效果~~ 红色部分是mov文件地址，是通过下面的方法生成的全景mov 文件

推荐 软件 (经测试可使用，并且是绿色版的 ：)

 1.1 全景图制作利器Ulead COOL 360 绿色版

国产的智能拼接软件，用于拼接jpg,最好不要用它直接生成mov，因为他生成的mov文件devalvr可能不识别

点击下载

1.2 Pano2QTVR

用于把jpg图片转换成DevalVR可识别的mov文件

点击下载

1.3 DevalVR player

DevalVR 用于观看最终效果，和选取热点坐标用于扩展功能。

DevalVR player (219)

拍摄照片

最好用3脚架保持镜头平稳，镜头与地面平行，尽量选取整个空间的中心点拍摄，离四周墙壁的距离基本一致，如果离四周墙距离较近最好一圈拍摄30张左右照片（因为两张之间角度过大会英系那个拼接效果），如果较远可以少一些10-20张即可。

拼接照片，并导出成mov

插入html代码到网页里面

将拼接好的mov文件上传到服务器，插入上面说到的代码即可看到效果

DevalVR扩展功能

作者:王超 文章出处: http://www.wangchao123.com 文章转载请注明出处
E-mail: wangchao123.com@gmail.com

]]> http://www.wangchao123.com/2009/06/23/180/feed 3