怎样在制作网页打开图片的时候同时还有音乐_普通智能手机制作全景虚拟现实场景...

11ba0983561aaa9b6074cd90ee6fe003.png

点击图片上方蓝色字体“慧天地”即可订阅

a539c797053295f01a9ce8fadaac69b8.gif

f067143b80ccd44ebefdcd699341eb2f.png 53b29b57cde46bc3662c8f0bd699cefb.gif 本文由李真同学介绍利用普通智能手机制作周口市关帝庙全景虚拟现实漫游系统全过程,在满足用户足不出户游览景区的基础上,带给其身临其境的真实感受。制作过程如下

01

素材收集与处理

使用手机app“全景平台”拍摄全景照片,经过编辑软件对图像的明度、饱和度、色调等调整过后,作为素材待用。

素材的类型有两种:2:1单张全景图片和六面体(六张尺寸完全一样的正方形图片)。其中六面体需使用官方命名标准,命名规则如下表1所示:

命名规则1

front

back

left

right

up

down

命名规则2

f

b

l

r

u

d

表1 六面体命名规则

2:1单张全景图片在命名格式上没有太多要求,这里使用各场景名称命名,部分素材如下图1、2所示:

8cc2481a4cc51e841f878864d2de5184.png

图1 药王殿全景图

0f70bfd3b631ce3e6775d3047071a3cf.png

图2 后花园全景图

02

场景添加与基础设置

(1)场景添加 在720yun平台首页(https://720yun.com/)单击“发布”,进入管理中心,此时页面显示制作者所有可发布的作品,单击“从素材库添加”,跳转到制作者素材库界面,然后单击“上传素材”,找到素材存放的文件夹添加即可。制作者可添加多个素材,添加成功后,管理中心会展示出制作者所有已添加的素材。然后,完善页面右边的作品信息,包括作品保存路径、作品标题、作品分类以及自定义标签等,单击“发布作品”,完成场景添加。除此之外,制作者也可以在编辑页面单击“+”符号进行场景添加。

75a13ff4abc0d3f93311f8c114b56a5c.png

图3 场景添加示例——大殿全景图 (2)基础设置 在编辑页面中单击“基础”,进入基础功能设置,如图4所示。可设置作品封面、作品名称、作品简介等,以上为分享到微信时的显示设置。除此之外,还可以设置作品的开场方式,有小行星开场、水平巡游开场、水晶球开场等,自动巡游功能设置为“开”时,表示当用户不进行点击、拖动等操作时,场景自动旋转一周后跳转下一场景。其中开场封面、界面语言、自定义初始场景等均为专业版功能,普通用户无法使用。

3d9a8c9cecb78258ea0afc66b50e27cd.png

图4 基础设置

03

热点添加

全景常用的交互方式有两种:热点交互、VR模式交互(实际也是通过热点进行交互)。在编辑页面中单击“热点”,进入热点添加页面,如图5所示。

bda853aa9b934e1b50973ef33426bb26.png

图5 热点设置 (1)全景切换 在“热点类型”中选择“全景切换”,选择图标并添加到对应位置后,显示热点设置内容,包括标题及其字号、切换场景、切换效果、切换视角设置等。依次添加所有的全景切换,构成一个完整的漫游框架。 (2)超链接 在“热点类型”中选择“超链接”,与全景切换热点设置相同,选择图标并添加到对应位置后,显示热点设置内容,包括标题及其字号、超链接对应的网址,以及网址的打开方式等。其中,网址打开方式有“本窗口打开”(当前页面跳转到指定链接)、“新窗口打开”(不影响当前页面)、“弹出层打开”(在全景内弹出网页,注意,此时需要填写的网页链接必须支持https协议,而且目标网站没有iframe嵌入限制,否则,将无法使用弹出层来展示超链接网页)三种,这里设置为“新窗口打开”。 (3)文本热点 在“热点类型”中选择“文本热点”,选择合适的图标并添加到对应位置后,显示相应热点设置内容,包括标题及其字号、文字内容等。亦可在此处添加链接名称或网站地址,显示更多内容,本次实验暂未进行设置。依次添加几个大殿的文本介绍。

(4)视频热点

在“热点类型”中选择“视频热点”,选择图标并添加到对应位置后,显示热点设置内容,同样包括标题及其字号设置。提供两种视频上传方式:第三方视频、本地上传,其中本地上传为专业版可用功能,普通用户不能使用,因此这里忽略该选项。第三方平台上传视频需复制通用代码,同时将通用代码中的http修改为https。视频显示的尺寸可通过修改通用代码中的width和height参数进行调整,注意参数设置仅支持数字值。此时视频无法全屏播放,需在通用代码的标签中,添加一组参数: allowfullscreen="true" webkitallowfullscreen="true"mozallowfullscreen="true" oallowfullscreen="true"msallowfullscreen="true"。 (5)图文热点 在“热点类型”中选择“图文热点”,选择图标并添加到对应位置后,显示热点设置内容,包括标题及其字号、选择图片、文字内容、音频等。单击“选择图片”,上传图片素材,添加文字内容,单击“完成”。

04

优化功能

(1)背景音乐 场景背景音乐仅支持.mp3格式文件,打开漫游将自动播放背景音乐。在编辑页面中单击“音乐”,进入背景音乐设置,如图6所示。

bb3f8759f6835d93cc694e86ddedfd84.png

图6 背景音乐添加 此时可分别设置背景音乐和语音讲解,这里只设置背景音乐。单击“选择音频”,弹出制作者的音频素材库,有两种类型的音频素材可供选择:自定义素材、系统素材(平台提供的音频素材)。本次实验选择使用自定义素材,单击“上传素材”,选择预先下载好的音频存放路径,添加成功后勾选,单击“确定”。此时,背景音乐设置界面出现音量、是否循环播放及应用场景设置。音乐音量设为50%,勾选“循环播放”按钮,并将其应用到所有场景中,即所有场景无差别使用该音频。 (2)多边形热点图标 多边形热点可实现更加复杂形状的热点样式以及隐形热点,满足制作者更多需求。单击编辑页面“热点”,进入热点添加页面,单击“系统图标”,在下拉框中选择“多边形图标”,弹出多边形图标的设置界面。单击全景,开始添加控制节点,可通过鼠标单击进行多边形绘制,支持删除控制节点操作以调整多边形形状。绘制好多边形后,设置默认状态和移入状态的填充颜色、边框颜色。默认状态样式为多边形热点的显示样式,移入状态为鼠标移入时的显示样式,但是移动设备不支持该属性。设置默认状态的填充和边框颜色均为透明色,移入状态颜色均设为白色。完成后,选择热点类型为视频热点,重复视频热点添加步骤。 (3)特效 特效分为两类:场景特效和顶部滚动文字特效。 场景特效包括太阳光、下雪、下雨、红包雨、爱心雨等。其中,太阳光、下雪、下雨可模拟实际的效果在全景内动态展示,仅适用于室外场景。在编辑界面中单击“特效”,进入特效设置界面,实验中选择设置太阳光特效,在选择特效类型和应用场景后,拖动小太阳图标,设置太阳照射位置即可。

顶部滚动文字特效可在场景顶部添加滚动文字字幕,用于作品简介、场景介绍等直观信息展示,还可为其添加超链接。同样在编辑界面单击“特效”,进入特效设置界面后单击“添加文字”,输入文字内容并设置字体和滚动速度后,单击“完成”。实验中仅在漫游开始场景中设置滚动文字介绍。

特效设置如图7所示:

50096f30e42d5a55b3486fa053c8ac0e.png

图7 特征制作 (4)足迹 该功能支持在地图上呈现场景所在位置,底图为高德地图。在编辑页面单击“足迹”,进入足迹设置界面。单击“设置足迹地图”,进入地图窗口,在搜索框中输入“周口关帝庙”,自动定位到关帝庙所在位置,也可通过鼠标单击的方式进行标注或调整位置。实验中标注关帝庙东南门与春秋楼两个位置,如图8所示:

fb18d2a30f1442dfe9267c8c8ba966e1.png

图8 用户足迹

用户浏览时可在页面右下角单击“足迹”查看场景所在位置,地图中标红显示,亦可直接在地图上选择任一坐标点单击“切换至该场景”,将自动进行全景切换。如图9所示:

7f45a28fcf1cb664c1b336b4de5015ee.png

图9 切换场景

05

实验结果

该VR全景系统包含正门、石牌坊、药王殿、灶君殿、河伯殿、大殿、过道、碑廊、井亭、春秋楼、拐角、炎帝殿、财神殿、酒仙殿、后花园、后花园2、西院,共17个场景。部分场景的缩略图如下:

acd33abe257fb4f0fd31d182c664b4af.png

图10 场景缩略图-1

839c3cc96f9a925eca87ebd0ea39fc6c.png

图11 场景缩略图-2

部分场景构建效果如下图所示:

5f7b47b339ef57ad155e4aeebe2edc50.png

图12 正门

24a163ba2973c2c775fcc502142a49c4.png

图13 视频介绍

384da46b375cd82296ed8fe27f57a052.png

图14 灶君殿

6478dae99a9cc1048279108c6b4fd4cf.png

图15 大殿

6dd53039b07a70481a18a5bf35c11cea.png

图16 大殿图文介绍

27a3e90a37c8e5c1b48f893f38dc182d.png

图17 碑廊

346b074fa6fcf1f39bab7084679f513b.png

图18 井亭

d415d77fb0a672237c5aad8d26e7a88c.png

图19 大殿侧 f067143b80ccd44ebefdcd699341eb2f.png 53b29b57cde46bc3662c8f0bd699cefb.gif (点击图片即可查看详细信息) 69c70a464b828d65bcb31e8abc25923e.png 7e8856821d77203550d7101bf44a7dfa.png

内容转载、商务活动、投稿等合作请联系

微信号:huitiandi321

邮箱:geomaticshtd@163.com

欢迎关注慧天地同名新浪微博:

ID:慧天地_geomaticser

往期精彩推荐

中国入网的智能手机,70%以上提供北斗服务

华为首个智能无人店 机械臂24小时卖手机

谷歌地图为iOS和Android系统的智能手机推出AR导航

e297a2dcde377243a770b4d04022d605.gif

《慧天地》敬告

《慧天地》公众号聚焦国内外时空信息科技前沿、行业发展动态、跨界融合趋势,探索企业核心竞争力,传播测绘地理信息文化,为测绘、地信、遥感等相关专业的同学提供日常学习、考研就业一站式服务,旨在打造政产学研用精准对接的平台。《慧天地》高度重视版权,对于原创、委托发布的稿件,会烦请作者、委托方亲自审核通过后才正式推发;对于来自网站、期刊、书籍、微博、微信公众号等媒介的稿件,会在作者栏或者文章开头显著标明出处,以表达对作者和推文引用平台版权的充分尊重和感谢;对于来源于网络作者不明的优质作品,转载时如出现侵权,请后台留言,我们会及时删除。感谢大家一直以来对《慧天地》的关注和支持!——《慧天地》运营团队

658e2bf2ae7e91a046caf1cde22dab51.png

编辑:郭祥浩  审核:黄兰琳 杜金钊 谭钧泽 指导:万剑华教授
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页