# 虛擬現實/全景組件的用法
[想要了解更多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、添加組件
虛擬現實場景組件通過工具欄的“虛擬現實場景”圖標添加:

在畫布上拖動鼠標畫出組件的位置。松開鼠標后,即可進入編輯場景圖片的界面。

插入場景圖片時,注意圖片格式,規定如下:

選擇圖片后,會出現更多的編輯選項,各區域說明如下圖所示:

1) 場景預覽區:這里可以看到載入的圖片渲染的場景效果,可以用鼠標拖動進行全景瀏覽;
2) 場景列表區:顯示所有添加的場景,可以對場景添加、刪除、編輯、排序;
3) 熱點和場景編輯:用來切換熱點和場景;
4) 全局配置:用來設置導航條以及導航條中出現的條目的選擇;
很多編輯區域均配有即時幫助:

2、編輯場景
場景具有如下屬性:
1) 圖片:即全景的導入圖片,支持等距長方投影和三維六面貼圖兩種格式;
2) 預覽圖:在全景載入之前的一個小尺寸圖片,可選;
3) 縮略圖:如果選擇顯示導航條,縮略圖會顯示在導航條上提示用戶,尺寸是64*64;
4) 標題:每一個場景的名稱,會顯示在導航條上;
3、熱點編輯
點擊“熱點”標簽可以切換到熱點編輯模式。在熱點編輯模式下,可以添加、刪除、移動熱點,并未熱點指定圖形、動畫和行為。
擊熱點列表下的添加圖標,可以進入熱點添加模式。

進入熱點添加模式后,加號圖標會變成橙色提醒用戶。

在熱點添加模式下,在場景預覽區域點擊即可添加新的熱點。

點擊熱點列表中的任一熱點,可以在列表中和預覽窗口中定位熱點,便于識別。

每個熱點可編輯的屬性有:
1) 熱點名稱:用于區分和識別不同熱點的名稱;
2) 圖標:顯示在場景中的圖標;
3) 尺寸:圖標的顯示大小;
4) 行為:點擊熱點后激活的行為;
5) 操作:對行為進行編輯或者刪除熱點;
具體說明兩點:圖標和行為。
3、熱點圖標和行為
3.1 熱點圖標
熱點圖標Mugeda提供預置的圖標,如圖:

此外,用戶可以上傳任意的圖片作為熱點圖標,在“+”位置添加,如圖:

并指定相應的尺寸即可,如圖:

3.2 熱點行為
點擊熱點后,可以觸發一系列的行為。該操作和為物體添加行為類似。

注意“切換虛擬現實場景”行為。這個行為允許用戶在點擊熱點后進行場景和熱點切換。切換時,需要指定場景名稱和熱點名稱。其中,熱點名稱可選,如果不指定,切換場景后會切換到預覽窗口所顯示的區域。

4、場景屬性

1) 顯示導航:在屏幕下方出現的導航條。當包含2個以上的場景時,建議選擇;
2) 允許陀螺儀控制:是否在導航條上顯示陀螺儀控制的切換圖標;
3) 左右分離視角:是否在導航條上顯示左右分離視角;這個目前比較小眾,建議不選;
5、場景渲染
場景渲染時,可以用鼠標或者手指拖動切換視。如果選擇了顯示導航,還會出現一個導航條提供進一步的選擇包括:上一場景、顯示縮略圖、VR效果、收起導航欄、下一場景。

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
- 閱讀須知
- Mugeda平臺介紹
- 新手必看
- Mugeda是什么?
- 快速入門
- 快速制作炫酷動畫
- 無代碼添加交互
- 學會使用Mugeda模板
- 如何快速修改木疙瘩模板
- 作品創建前必讀
- 手機屏幕適配方法
- 圖片處理
- 聲音及視頻處理
- 屏幕適配設置
- 發布和預覽鏈接的區別
- H5作品相關設置
- 如何發布作品
- 功能詳解
- 界面與舞臺
- 簡介
- 縮放層數據
- 翻頁的相關設置
- 關鍵幀和頁面的命名
- 加載的相關設置
- 物體屬性設置
- 元件界面介紹
- 濾鏡效果
- 屏幕適配范圍與安全框
- 輔助線功能
- 首頁加載的靜態導出
- 素材與媒體
- 圖片上傳/素材庫
- 文本/文本段落
- 網頁
- 幻燈片
- 視頻
- 聲音
- 聲音的控制
- 繪制素材
- 云字體
- 曲線圖表
- 拖動動畫
- 虛擬現實
- 粘貼第三方文字和圖片
- 常用編輯操作
- 鎖定物體
- 節點工具
- 路徑工具
- 排列、對齊、變形、組合、合并功能
- 轉換為元件
- 導入PSD及注意事項
- 聲音和視頻的壓縮
- 聲音和視頻的交互控制
- 動畫
- 時間軸及圖層
- 選擇工具
- 關鍵幀動畫
- 路徑動畫
- 進度動畫
- 曲線變形動畫
- 預置動畫
- 元件動畫
- 分頁/加載頁
- 遮罩動畫
- 動畫運動
- 標尺和輔助線的使用
- 復制幀/圖層
- 如何實現動畫控制
- 文字變形動畫
- 運動曲線編輯
- 行為
- 行為添加以及觸發事件
- 幀的行為
- 頁的行為
- 播放元件片段
- 改變元素屬性
- 改變圖片
- 設置定時器
- 手機功能
- 跳轉鏈接
- 拖動的多種邏輯關系
- 舞臺截圖
- 改變行為屬性增加方框顏色
- 控件
- 陀螺儀
- 定時器
- 隨機數
- 擦玻璃
- 點贊
- 繪畫板
- 投票
- 抽獎
- 連線
- 拖動容器
- 投票、抽獎實時數據管理
- 計數器組件
- 排行榜
- 微信功能
- 微信頭像/微信昵稱
- 定制圖片
- 錄制聲音
- 分享信息
- 表單
- 自定義表單
- 系統默認表單
- 定制文字
- 定制賀卡文字
- 關聯綁定
- 舞臺動畫關聯
- 元件動畫關聯
- 屬性關聯
- 自動關聯
- 公式關聯
- 條件判斷
- 邏輯表達式判斷
- 多種表達式的寫法
- Mugeda API
- MugedaAPI整體結構
- 在動畫中插入腳本
- 使用自定義回調函數
- 通過API定義微信轉發
- 獲取Mugeda后臺數據
- 部署第三方服務器
- 案例講解
- 展示動畫
- 邀請函
- 招聘
- 個人簡歷
- 可定制賀卡
- 手機廣告
- 長按手指控制動畫播放
- 2016網易娛樂圈畫傳
- 一只挖空心思的行禮箱
- 科幻風格H5的制作
- 拖動長圖類H5制作
- 小爺吳亦凡案例
- UI原型
- 小圖標動畫
- 用Mugeda巧做GIF
- 小游戲
- 拍宇航員
- 手術刀
- 測試題
- 拖動選擇
- 概率抽獎
- 聲音測試題
- 真假朋友大質檢
- 圖片合成類H5的制作
- 60秒幫你擺脫朋友圈
- H5錄音機
- 制作接力型H5
- 微信/定制
- 和寶寶聊天
- 和奧運冠軍合影
- 熱門案例(試看)
- 什么才是福
- 教你玩轉密室逃脫類H5制作
- 星巴克咖啡
- 小爺吳亦凡
- 誰是足球明星
- 拷問拍拍618機密
- 用HTML5做交互課件
- CEO邀你群聊
- 里約大冒險
- 天貓宇宙邀請函
- 快閃
- H5換裝小游戲
- 視差類型H5制作
- H5版flappy bird
- 連連看小游戲
- 用遮罩做鏡頭特效
- 網易5筆畫愛
- 剪刀石頭布小游戲
- 交互動畫類H5制作
- 最新功能(1213)
- 如何使用排行榜
- 小功能更新
- 鎖定邊距
- 其他教程
- Mugeda簡約版介紹
- 如何自定義綁定微信公眾號
- 教師版賬號詳情介紹及使用方法