学习pano2vr制作html5全景笔记
demo截图：
demo下载：
百度网盘:http://pan.baidu.com/s/1o8yBwIA 密码:nf62(启服务端查看);
我制作是全屏定点360的全景页面，使用pano2vr软件制作生成html页面
1、 准备2张360度以上的图片：
out.jpg 初始场景展示图;
in.jpg 切换场景后的第二张图;
2、打开pano2vr软件(4.5.3版本)：
3、把两张图托到软件里：
默认第一张图是初始场景图，你也可以在图片上右键“设定初始场景全景”
4、选中图片在“输入”侧 点击“交互热点”-“修改”:
5、添加选择好交互的热点位置、添加标题、切换图片地址“in”：
6、同样步骤做"in"场景的热区:
7、主页在“输出”-“新输出格式”选择"HTML5"-点“增加”:
8、选择输出的路径:
9、生成文件夹里截图:
稍微改成全屏场景的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript" src="swfobject.js">
</script>
<style type="text/css" title="Default">
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow: hidden;
}
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000000;
}
body {
font-size: 10pt;
background : #ffffff;
}
table,tr,td {
font-size: 10pt;
border-color : #777777;
background : #dddddd;
color: #000000;
border-style : solid;
border-width : 2px;
padding: 5px;
border-collapse:collapse;
}
h1 {
font-size: 18pt;
}
h2 {
font-size: 14pt;
}
.warning {
font-weight: bold;
}
/* fix for scroll bars on webkit & Mac OS X Lion */
::-webkit-scrollbar {
background-color: rgba(0,0,0,0.5);
width: 0.75em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<script type="text/javascript" src="pano2vr_player.js">
</script>
<div id="container" style="width:640px;height:480px;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
window.onload = function(){ var oContainer = document.getElementById('container');
var windWidth = window.screen.availWidth;
var winHeight = window.screen.availHeight; oContainer.style.width =''+windWidth+'px';
oContainer.style.height =''+winHeight+'px'; // check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// use HTML5 panorama // create the panorama player with the container
pano=new pano2vrPlayer("container");
pano.readConfigUrl("out_out.xml");
// hide the URL bar on the iPhone
setTimeout(function() { hideUrlBar(); }, 10);
} else
if (swfobject.hasFlashPlayerVersion("10.0.0")) {
var flashvars = {};
var params = {};
// enable javascript interface
flashvars.externalinterface="1";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
flashvars.panoxml="out_out.xml";
params.base=".";
swfobject.embedSWF(
"pano2vr_player.swf", "container",
windWidth, winHeight, //设置场景大小;
"9.0.0", "",
flashvars, params, attributes);
}
}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
</body>
</html>
后记：
这的东西其实我7月份看到文章试着做的，但是因为工作(拖延症)11月份才抄袭写完(jslover 的文章 《使用pano2vr制作多场景热点切换的html5全景图应用》)
学习资料：
jslover:http://www.jslover.com/code/522.html#
jslover:http://www.jslover.com/code/536.html#
小志:http://www.iqiyi.com/w_19rrvj5bp9.html#vfrm=2-3-0-1(pano2vr软件的基础使用视频)
学习pano2vr制作html5全景笔记的更多相关文章
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- pano2vr制作360全景图
1.下载pano2vr中文破解版2.制作360全景选择"矩形球面投影" 3.输出格式选择HTML5, 也可选择Flash(快被淘汰) 4.HTML5输出选项中3个重要选项4.1 F ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- NSIS制作安装包笔记（一）：NSIS介绍、使用NSIS默认向导脚本制作Windows安装包
前言 做产品时,定制的自定义安装界面常有的,使用NSIS + Qt可以完美的定制基于QT的安装界面,先从纯NSIS开始,制作常规的安装包. 应用程序的发布方式 应用程序发布的时候,具备以下 ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- Adobe edge animate制作HTML5动画可视化工具（一）
Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...
- 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！
感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...
- HTML5初学笔记
今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> ...
随机推荐
- PWC6345: There is an error in invoking javac. A full JDK (not just JRE) is required
今天在使用jetty运行一个项目的时候报这个错误,仔细看了下,应该是eclipse配置的jdk或者jre出错. 看了下环境变量,发现有些配置没有配置完全. 我个人的解决方法: 在path中,添加%JA ...
- MongoDB系列：一、MongoDB和Redis区别
简介 MongoDB更类似Mysql,支持字段索引.游标操作,其优势在于查询功能比较强大,擅长查询JSON数据,能存储海量数据,但是不支持事务. Mysql在大数据量时效率显著下降,MongoDB更多 ...
- $(function(){})简述
用jQ的人很多人都是这么开始写脚本的: $(function(){ // do something }); 其实这个就是jq ready()的简写,他等价于: $(document).ready(fu ...
- Linux 学习 (七) 挂载命令 & 用户登陆查看
Linux达人养成计划 I 学习笔记 挂载命令 mount:查询系统中已经挂载的设备 mount -a:根据配置文件 /etc/fstab 的内容,自动挂载 mount [-t 文件系统] [-o 特 ...
- 进程间通信(队列、管道)、消费者模型和进程池(apply,apply_async,map)
一.队列(先进先出) 进程间通信:IPC(Inter-Process Communication) 队列是使用管道和锁定实现,所以Queue是多进程安全的队列,使用Queue可以实现多进程之间的数据传 ...
- di.xml
di.xml文件 该di.xml文件配置对象管理器要注入的依赖项. 领域和应用入口点 每个 模块 都可以具有全局和区域特定的di.xml文件.Magento读取di.xml系统中声明的所有配置文件,并 ...
- 【并发编程】MESI--CPU缓存一致性协议
原文:多线程之:MESI-CPU缓存一致性协议 概念 MESI(Modified Exclusive Shared Or Invalid)(也称为伊利诺斯协议,是因为该协议由伊利诺斯州立大学提出)是一 ...
- flex布局应用
flex介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div dis ...
- [M$]微软提供的ProcessExplorer等系统工具集合
https://docs.microsoft.com/en-us/sysinternals/downloads/index
- python之路day05--字典的增删改查，嵌套
字典dic 数据类型划分:可变数据类型,不可变数据类型 不可变数据类型:元组,bool,int str -->可哈希可变数据类型:list,dict,set --> 不可哈希 dict k ...