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效果

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请添加站长微信举报,一经查实,本站将立刻删除。

如若转载,请注明出处:https://www.ibjoo.com/304.html

(0)
市场圈市场圈普通用户
上一篇 2020年5月5日 下午3:46
下一篇 2020年5月5日

相关推荐

  • 虚拟旅游怎么实现?

      虚拟旅游,顾名思义就是利用虚拟现实技术,可以是构建好的三维立体的图片,也可以是360度的实景图片,让浏览者不用自己亲身莅临景区旅游,就能通过网络将旅游景点一览无余,给人一种身临其境的感觉。  另外我们VR云平台不仅可以实现网络空间电脑端和手机端的虚拟旅游阅览,也可以进行网民互动,点赞评论或留言,形成一种虚拟旅游的全景社区。我们既可以在VR云里上传全景图,…

    VR全景教程 2020年5月5日
    27600
  • 新手如何入门vr全景拍摄制作?从小白到大师攻略

    2020年开年什么最火?那要数云生活了,云旅游、云看展、云购物、云看房等等…而VR全景技术无疑在云生活中扮演了举足轻重的角色。在2020年的商家,如果没有制作VR全景展示,可能都不太好意思开业哟,VR全景正在主流!那么,新手如何入门vr全景拍摄制作?这里给你从小白到大师攻略,get! 1、你需要做哪些准备? 硬件 拼接制作全景图还是比较占用CPU…

    2020年4月23日
    27400
  • 如何使对全景图完美补地?

      1.斜拍补地拍摄方法:  第一步,拍摄水平照片  水平方向上,将云台顺时针转每60°拍摄一张,一共拍摄6张。  第二步,拍摄“真底”  垂直方向,在水平最后一张拍摄处,将相机垂直向上翻转90°,拍摄顶图。再将相机垂直向下翻转90°,  拍摄底图(如图1)。垂直向下拍摄的底图,我们称之为“真底”。  第三步,拍摄“假底”  “真底”拍完之后,将整个机位向后…

    VR全景教程 2020年5月5日
    23200
  • 360度全景照片怎么拍?

      360度全景图的制作流程:  全景拍摄硬件:  单反相机 鱼眼镜头 全景云台 三脚架  鱼眼镜头的选择: 根据单反相机的型号来判断适合多少mm的鱼眼镜头。(硬件配置参数表)  拍摄的顺序: 前—右—后—左—上—下 例如: 我使用单反相机尼康D7000配上尼康10.5mm鱼眼镜头、JTS-SPH全景云台、三脚架,水平一周拍摄6张,加天1张一共7张。把拍摄好…

    VR全景教程 2020年5月5日
    22600
  • Web全景图的原理及实现

    全景图的基本原理 全景图是一种广角图。通过全景播放器可以让观看者身临其境地进入到全景图所记录的场景中去。比如像是这个。这种看起来很高大上的效果其实背后的原理并不复杂。 通常标准的全景图是一张2:1的图像,其背后的实质就是等距圆柱投影。等距圆柱投影是一种将球体上的各个点投影到圆柱体的侧面上的一种投影方式,投影完之后再将它展开就是一张2:1的长方形的图像。比较常…

    2020年5月5日
    28200

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

工具推荐
公众号
公众号
分享本页
返回顶部
特别提示:欢迎收藏&使用市场工具导航,如您有任何建议或好用工具推荐,请留言告知我们。谢谢~