H5全景图-朋友圈全景图-720°全景-VR —- 项目简单分析

这里我们主要看一下生成的项目中都有什么。源码中都有什么，如何去自定义

我们先只导入一张全景图，不做任何设置然后导出项目。（为了方便，我将其项目地址和生成的html地址都设置在一起）

我们看看都有什么

文件夹images：软件切好的图片存放目录
pano2vr_player.js :Pano2VR自动生成的JavaScript脚本，是整个项目的核心
test1.xml : 里面主要有一些项目的设置信息，比如热点图片之类的
test1.html : 这个就是我一直所说的自动生成的demo

至于其他两个，应该是播放flash用的，也的确是这样的。（我们生成的h5为什么会有flash参与进来呢？下面会说的）
pano2vr_player.swf : 是一个flash文件
swfobject.js : 根据命名来看应该是flash的对象的JavaScript脚本

其实看了demo代码就知道这两个文件什么意思了，当没有CSS3 3D和WebGL的支持时，会选择播放这个Flash（9以上，包括9）。如果三者都不支持那么对不起，播放不了了~

所以我们主要看上面的四个

images

这里就是软件切好的图片存放目录。
一共12张图片，前6个是彩色后6个是灰色的。
为什么会有灰色的呢，生成h5的项目是用网络加载才能显示出来，加载过程中就可能网络不理想，这些灰色就是在加载时候显示的。

test1.html
这里就是生成给我们的demo，以后我们会根据这个demo进行不断更改，从而做出想要的效果。这里简单翻译下

    <script type="text/javascript" src="swfobject.js">
    </script>
    <script type="text/javascript">

        function hideUrlBar() {//--隐藏iPhone地址栏，方法貌似要自己写 
        }

    </script>
    <!--设置样式-->
    <style type="text/css" title="Default"> 
        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;
        } 
        /*修正在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>
    <h1></h1>
    <br>
    <!--加载核心Js-->
    <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">

    // 检查 是否支持CSS33D效果变换 和 WebGL
    if (ggHasHtml5Css3D() || ggHasWebGL()) {//如果支持，使用H5 展示全景
        pano=new pano2vrPlayer("container");//创建panorama player对象，构造函数中的参数是 全景图的容器
        pano.readConfigUrl("test1.xml");//加载参数
        // 在iPhone中隐藏地址栏
        setTimeout(function() { hideUrlBar(); }, 10);
    } else if (swfobject.hasFlashPlayerVersion("10.0.0")) {//不支持，则使用Flash 播放全景（我们不主要分析这里）
        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="test1.xml";
        params.base=".";
        swfobject.embedSWF( 
            "pano2vr_player.swf", //这里是我们前面说的那个flash文件
            "container", //控件容器
            "640", "480",//控件尺寸
            "9.0.0", "", 
            flashvars, params, attributes);

    }
    </script>
    <noscript>
        <p><b>Please enable Javascript!</b></p>
    </noscript>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
test1.xml
这个xml文件就是我们要用h5显示的时候所需要的 ‘配置文件’，然而官方并没有给出这些表情的介绍，所以只能靠猜了

<!--控制台
0是假1是真（1就是开关中的开启,0就是关闭）
simulatemass:模拟质量(在这里只是指惯性);
lockedmouse:锁定鼠标;
lockedkeyboard:锁定键盘;
dblclickfullscreen:双击全屏;
invertwheel:翻转鼠标滑轮;
lockedwheel:锁定鼠标滑轮;
invertcontrol:;锁定控制台
speedwheel:鼠标滑轮放大缩小(需要将invertcontrol设置为0);
sensitivity:敏感度(需要将invertcontrol设置为0)
-->
<control
simulatemass="1"
lockedmouse="0"
lockedkeyboard="1"
dblclickfullscreen="1"
invertwheel="1"
lockedwheel="0"
invertcontrol="0"
speedwheel="10"
sensitivity="8"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
好了，经过测试我们猜的也是八九不离十~ 如果设置一些旋转什么的都会增加相应的标签。
只要记住这个xml文件是记录你配置信息的就好，如果你真的掌握了，就会省下不少麻烦。