无意中在一个网站上发现一个很炫的效果,店铺得360度全景图,先看下效果吧,下面是一个简单的例子
ps: 如果看不到上面的效果,你还没有安装 devalvr 按照浏览器的提示 火狐点击 ie 点击安装 ActiveX 插件。
想要这种效果吗,跟着下面的步骤,你也可以很快实现
~~ go ~
这个应用不但能在网页上放大,缩小,仰视,俯视场景图片,还有强大的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 用于观看最终效果,和选取热点坐标用于扩展功能。
[Download not found]
拍摄照片
最好用3脚架保持镜头平稳,镜头与地面平行,尽量选取整个空间的中心点拍摄,离四周墙壁的距离基本一致,如果离四周墙距离较近最好一圈拍摄30张左右照片(因为两张之间角度过大会英系那个拼接效果),如果较远可以少一些10-20张即可。
拼接照片,并导出成mov
插入html代码到网页里面
将拼接好的mov文件上传到服务器,插入上面说到的代码即可看到效果
DevalVR扩展功能
作者:王超 文章出处: http://www.wangchao123.com 文章转载请注明出处
E-mail: wangchao123.com@gmail.com
(标题未注明“转载”的为“原创”,转载请注明来源,欢迎来信交流 wangchao123.com@gmail.com)


TOP
#1 by qrpeng on 六月 24th, 2009
链接已做好,呵呵。
#2 by 卢松松 on 六月 24th, 2009
看起来有点意思!
#3 by wangchao on 六月 25th, 2009
可以扩展的功能还是很多的
#4 by gilyonggang on 十月 13th, 2010
本人正有趣色拍摄全景很有必要熟练掌握DevalVR 用法。往多多支持!!!!