使用pano2vr创建全景图
来源:互联网 发布:java变量是什么意思 编辑:程序博客网 时间:2024/06/05 04:19
pano2vr下载地址:http://pan.baidu.com/s/1nvDIBSt
演示例子:http://by.qq.com/cp/a20161104fishgolden_wx/index.html(请调成模拟器下运行)
使用教程
1.把全景图拖到改区域
2.设定一些参数
选择html5后,点击旁边的增加按钮
立方体和图像质量的值越大,生成的图片越清晰。(立方体面积尺寸最大是2880)
按上图操作
打上勾。意思是全屏展示 和 开启陀螺仪,最后点击确定按钮则会弹出一个框 :
点击是,然后选择输出目录则会开始生成文件。
也可以手动点击按钮生成文件
3.修改默认的显示界面
程序一开始的界面会显示这一个画面
可以在如下界面中修改初始画面
右边的界面是可以拖动的,拖动到想显示的界面即可。另外可以滚动鼠标,设置全景图的fov(修改后要重新生成文件)
4.设置可移动的范围
有时我们想让全景图移动的时候,移动到某个范围就不能在移动了,这时可以设置限制标记。
(修改后要重新生成文件)
5.添加精灵到场景
1)准备1张精灵图的gif图,如下 :
2)点击
把gif图丢入到绿框中,操作鼠标可以修改图片的大小和位置。如 :
然后重新生成文件
3)重新运行程序,然后右键-审查元素。可以看到,这里插入了一张名为mry.gif的图片。
但是这不是我们想要的效果,因为gif图在移动端浏览器多数不支持。所以我们需要接着往下修改。
4)修改源码
为了可以使用css3动画,这里需要修改下源码。打开pano2vr_player.js(需要格式化下代码)找到237行
修改为
Lcf_idx是我定义的一个全局变量,目的是给精灵起不同的类名
再次运行程序
之前的img标签就会变成div标签了,并且类名是ggmedia1。这样的话我们只要往这个div插入一个新的标签并且给上css3样式就可以使用css3动画了。如下 :
JS
$(function(){$('#container .ggmedia1').append('<div class="gam mry"></div>');});
CSS
.gam{position: absolute; top: 0; left: 0;}.mry{ width: 361px; height: 500px; background: url('../images/mry.png') no-repeat 0 0; -webkit-animation:mry steps(2) 1s infinite; }@-webkit-keyframes mry{0%{background-position: 0 0;}100%{background-position: -722px 0;}}
效果 :
之前的img标签因为已经变成了div标签,所以src后面的gif图已经无效,然后我们以脚本的方式插入div,并且给了它一个类名为mry,并且给它ccs样式和动画。
6.添加交互
选择红色箭头的热点类型,然后把全景图移动到我们添加的gif图的位置(位置大概估计一下),然后双击鼠标左键添加点击区域,单击鼠标右键完成。然后url写点击后要执行的事件。Show()函数是我自定义的一个函数名。目标选择_self即可。
7.一些建议
1)程序刚开始运行的时候,会有一个灰色的矩形在左上角,如图 :
解决的方法是添加一句样式 :#container canvas{width: 100%; height: 100%;}
2)制作全景图的时候如果需要添加动态图,建议先把图片做成gif图,然后可以直接在pc端上看到效果。位置和大小调整好后,在执行第五步:添加精灵到场景
- 使用pano2vr创建全景图
- 使用pano2vr生成html5全景页面
- javascript ---- pano2vr全景H5
- pano2vr手机全景注意事项
- unity3d利用pano2VR实现全景视图效果
- unity3d利用pano2VR实现全景视图效果
- Pano2VR使用心得
- JAVA线程使用全景图
- JAVA线程使用全景图
- 全景图 HelloPanorama 的使用
- 一、H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- 一、H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- H5全景图-朋友圈全景图-720°全景-VR -----工具使用
- Unity做360度全景预览,效果类似pano2vr导出的效果或720云做的效果
- pano2vr教程
- pano2vr教程|pano2vr破解|视频教程
- [译] THREE.JS入门教程-6.创建自己的全景图
- Windows下使用krpanotools命令行生成全景图
- 学习笔记---回溯算法与贪心算法
- Spring入门hello world常见问题及解决办法
- 打造自己的图片加载缓存库(Picasso OR Glide)
- 121. Best Time to Buy and Sell Stock
- 欢迎使用CSDN-markdown编辑器
- 使用pano2vr创建全景图
- js json转url参数
- W88 Online Casino Weekdays 100% Combo Rebate Bonus(Cash Back, Combo Rebate Bonus, w88, W88 Online C)
- Android Studio开发——VT-x is disabled in BIOS问题解决
- 每日小记2017.3.7
- java方法传递引用、传递基本类型
- ParseCommandLine
- 『hadoop』hadoop 安装中遇到的坑
- 文章标题