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

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文件是记录你配置信息的就好,如果你真的掌握了,就会省下不少麻烦。

比如 现在项目要求 开启自动旋转 ! 原来没有的功能,按理来说是要重新生成一个,但是如果你掌握了这里的标签,只需要改一个数就可以了~

分析:使用H5模式播放全景图的话,其实就是绘制一个3D的模型(有可能是球,有可能是正方体 具体是什么 以后有机会的话继续分析Js源码),然后将全景图切分成6份,将起’贴在模型上’ (可以把这个叫做蒙皮) 。在模型的内部的正中央有一个相机,根据鼠标或者键盘的事件,进行相应的处理 从而达到了我们眼中的3D效果

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

作者: TOB市场人

为您推荐

mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

[2018-10-20 重要更新]支持VR直播功能支持全景视频poster支持全景图和视频和场景之间随意切换全景模式切换...
技术分享:全景视频技术的实现

技术分享:全景视频技术的实现

全景视频技术的实现      全景视频在VR领域是一个非常热...
浏览器中实现3D全景浏览

浏览器中实现3D全景浏览

如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑、景色,当然也可...
全景图的种类、360度三维实拍全景

全景图的种类、360度三维实拍全景

  根据全景外在表现形式可以分为柱形全景和球形全景两大类。柱形全景是最简单的全景,就是通常所说的”环视...
全景拍摄教程:为什么要使用全景云台?

全景拍摄教程:为什么要使用全景云台?

  在我们日常拍摄全景图片的时候,一定都会用到一个设备:全景云台。那么有小伙伴就问了:为什么要使用全景云台?全景云台在全...

发表回复

您的电子邮箱地址不会被公开。

返回顶部