🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 虚拟现实/全景组件的用法 [想要了解更多Mugeda功能?>>>猛戳我,学习更多教程](Mugeda百科全书——文本教程目录.md) 虚拟现实场景组件已经更新到 beta.mugeda.com,最近会更新到正式版,请亲们留意最新公告哈。 [点击查看全景演示](http://f9b2db18.u.mgd5.com/campaigns/54f2c88fa3664e2d2d0007a6/20161009023126/57d8ad0cb485a5fa3e0000a9/index.html) [本节视频教程请点击此处](http://www.mugeda.com/help.php?v_list=videos6&v_id=11) **简介** 虚拟现实场景组件,可以用来显示360度全景图片,并添加热点进行交互 **具体教程** 1、添加组件 虚拟现实场景组件通过工具栏的“虚拟现实场景”图标添加: ![](https://box.kancloud.cn/3b9079648b3ce881a0b8f93c296ff531_548x342.png) 在画布上拖动鼠标画出组件的位置。松开鼠标后,即可进入编辑场景图片的界面。 ![](https://box.kancloud.cn/9cd5908725fe29a2be7cfc06da597ba4_799x605.png) 插入场景图片时,注意图片格式,规定如下: ![](https://box.kancloud.cn/1872f3185047c54a87219a4c13849a05_274x278.png) 选择图片后,会出现更多的编辑选项,各区域说明如下图所示: ![](https://box.kancloud.cn/b6968ffd2f091f13ebc71b98b25b749a_801x605.png) 1) 场景预览区:这里可以看到载入的图片渲染的场景效果,可以用鼠标拖动进行全景浏览; 2) 场景列表区:显示所有添加的场景,可以对场景添加、删除、编辑、排序; 3) 热点和场景编辑:用来切换热点和场景; 4) 全局配置:用来设置导航条以及导航条中出现的条目的选择; 很多编辑区域均配有即时帮助: ![](https://box.kancloud.cn/23405b698ceafa6a064d38fc8dbe4852_449x159.png) 2、编辑场景 场景具有如下属性: 1) 图片:即全景的导入图片,支持等距长方投影和三维六面贴图两种格式; 2) 预览图:在全景载入之前的一个小尺寸图片,可选; 3) 缩略图:如果选择显示导航条,缩略图会显示在导航条上提示用户,尺寸是64*64; 4) 标题:每一个场景的名称,会显示在导航条上; 3、热点编辑 点击“热点”标签可以切换到热点编辑模式。在热点编辑模式下,可以添加、删除、移动热点,并未热点指定图形、动画和行为。 击热点列表下的添加图标,可以进入热点添加模式。 ![](https://box.kancloud.cn/cbbcfba1c55bbc52474c04baff1f69af_446x75.png) 进入热点添加模式后,加号图标会变成橙色提醒用户。 ![](https://box.kancloud.cn/8285fd7ddb0edca6830c138e26c81f0c_456x143.jpg) 在热点添加模式下,在场景预览区域点击即可添加新的热点。 ![](https://box.kancloud.cn/d2d148c58f0ce0640f0cd7b3444341db_799x605.png) 点击热点列表中的任一热点,可以在列表中和预览窗口中定位热点,便于识别。 ![](https://box.kancloud.cn/14a1c1c9c5158ec0d951f56796d5d457_797x605.png) 每个热点可编辑的属性有: 1) 热点名称:用于区分和识别不同热点的名称; 2) 图标:显示在场景中的图标; 3) 尺寸:图标的显示大小; 4) 行为:点击热点后激活的行为; 5) 操作:对行为进行编辑或者删除热点; 具体说明两点:图标和行为。 3、热点图标和行为 3.1 热点图标 热点图标Mugeda提供预置的图标,如图: ![](https://box.kancloud.cn/81daac8f4d54dd254d439c923b314c10_312x287.png) 此外,用户可以上传任意的图片作为热点图标,在“+”位置添加,如图: ![](https://box.kancloud.cn/29c02ecb775a2b907c34b7840d7ff193_310x248.png) 并指定相应的尺寸即可,如图: ![](https://box.kancloud.cn/5643169f22b95395883514632b789149_447x176.png) 3.2 热点行为 点击热点后,可以触发一系列的行为。该操作和为物体添加行为类似。 ![](https://box.kancloud.cn/a557ee6d26d7cf7e66f67305aff25b5e_609x351.png) 注意“切换虚拟现实场景”行为。这个行为允许用户在点击热点后进行场景和热点切换。切换时,需要指定场景名称和热点名称。其中,热点名称可选,如果不指定,切换场景后会切换到预览窗口所显示的区域。 ![](https://box.kancloud.cn/8908f37fe266f6e0dd41ef923f7c10c5_402x450.png) 4、场景属性 ![](https://box.kancloud.cn/29e9c589706a9bb20f477fd22a41f18d_449x112.jpg) 1) 显示导航:在屏幕下方出现的导航条。当包含2个以上的场景时,建议选择; 2) 允许陀螺仪控制:是否在导航条上显示陀螺仪控制的切换图标; 3) 左右分离视角:是否在导航条上显示左右分离视角;这个目前比较小众,建议不选; 5、场景渲染 场景渲染时,可以用鼠标或者手指拖动切换视。如果选择了显示导航,还会出现一个导航条提供进一步的选择包括:上一场景、显示缩略图、VR效果、收起导航栏、下一场景。 ![](https://box.kancloud.cn/b9cc973940579e62d1e2f6c2c01c518d_321x522.png) 6、如何产生全景内容 产生全景内容的方式有两种: 1) 用可以产生全景内容的App 例如:Google Street View, Sphere, 百度圈景,等等。在苹果和安卓应用商店可以搜到。 2) 用全景拍摄设备。这些设备从简单到专业有很多选择,例如Insta360在京东的旗舰店: http://insta360.jd.com/ 观看本节视频教程: http://cdn1.mugeda.com/course/3/3.2/3.2.11.mp4