Hubs by Mozilla 混合實境聊天室，如何使用 Spoke 製作自己的 3D 虛擬場景！

 

在之前介紹的文章中，主要是使用 Hubs 上已經內建或是由網路上玩家所建置的虛擬場景，但是這些場景上的主體結構、已經存在的圖檔、3D 模型…等，都是無法更動！


如果您想建置專屬的虛擬場景，或是想將 Hubs 上的場景改造成符合自己需求的客製化場景，可以使用 Hubs 中的 Spoke 工具來完成！(必須先登入 Hubs 才能使用 Spoke 工具喔！)

 

 一、認識 Spoke 界面

Spoke 主要分成以下幾個面板區塊：


 

二、場景與物件的控制

1.場景攝影機控制：

  • 按下滑鼠左鍵不放，拖曳(LMB)：轉動視角
  • 按下滑鼠滾輪不放，拖曳(MMB)：平移視角
  • 按下滑鼠右鍵不放，拖曳(RMB)：移動與轉動攝影機，按下時還可配合：
    • WASD 進行攝影鏡頭的移動
    • G 移動整個場景上的物件

2.物件控制： 

  • 位移Position、旋轉Rotation、縮放Scale：可透過上方工具列或是右下角的屬性面板進行控制




  • F(Focus) 攝影機聚焦：將物件自動移到攝影機畫面正中間，方便進行編輯
  • G(Grab) 移動物件：按下 G 鍵後，使用滑鼠移動物件至指定位置後，按下滑鼠左鍵即完成物件移動！
  • Esc 取消物件的選取或移動或增加物件
  • Ctrl + Z 動作還原

三、在場景新增物件

1. 將檔案上傳到網路上

Hubs 虛擬場景與網頁 HTML 的結構相同，所有的元素都是透過「超連結」的方式載入，因此要呈現在 Hubs 上的所有物件，必須先上傳至網路上，而且必須有完整顯示檔案的路徑與副檔名，因此，Google 雲端硬碟上共享的檔案網址或是 Blogger 上圖檔的網址，都沒有辦法在 Spoke 中正常使用！

如果沒有圖檔或是影片的隱私問題，可以考慮使用網路上免費的「圖床」服務上傳圖檔，與 Youtube 頻道上傳影片後，設為「不公開」。


 

3D 模型的部份，建議可以到 https://sketchfab.com/ 網站註冊免費帳號上傳，每個月最多上傳 10 個檔案，且必須設為公開，即可在 Spoke 中直接找到該 3D 模型加入。

 
 

2.先將攝影機調整至正對擺放位置，再加入物件

為了減少後續調整物件的步驟，建議先將攝影機調整至正對擺放位置，再加入物件，就可以更快速完成物件的調整。


※ PNG 去背圖檔的設定

使用具透明背景的 PNG 透明圖檔時，預設是使用不透明模式，需要將 Transparency Mode 設為「blend」，才能正確顯示透明圖檔的效果！ 
 
 

 

3.Gif 圖檔請使用「Video」物件

如果使用 Image 影像物件，會無法正常顯示喔！
 
 


四、如何在 Hubs 使用自訂的虛擬場景

您可以直接在 Spoke 右上角選按「Open in Hubs」建立新的虛擬場景。

 

或是回到 Hubs 中，透過「Room Info and Settings」，切換到「My Scenes」中套用新的虛擬場景。



五、Hubs 邀請朋友加入

Hubs by Mozilla 邀請朋友加入的機制與 Gather Town 雷同，可以使用以下三種方式加入：

  • 超連結加入
  • 使用房間代碼加入：請告訴朋友這個網址，他就可以在上面輸入代碼。https://hub.link
  • 使用 iframe 語法嵌入網頁中：只要進到網頁即可加入

 

六、如何使用 Spoke 製作自己的 3D 虛擬場景教學影片


  • 00:03 如何透過 Hubs 或 Spoke 建立新場景 
  • 01:14 先從複製別人的場景開始 
  • 02:04 認識 Spoke 界面 
  • 03:10 場景與物件的控制 
  • 08:16 在場景新增物件 
  • 13:44 從建立空白專案開始 
  • 15:58 如何在 Hubs 使用自訂的虛擬場景

 

※ 後記

Hubs by Mozilla 混合實境聊天室由瀏覽器大廠 Mozilla 透過 JavaScript 的 WebVR API 所開發，是「Gather Town」的 3D 版，目前把它實際用在「嶺東推廣商業設計職訓課程」的「成果展」上，在結訓的當天採用「線上與線下同步進行的混合式教學」，不只是在教室現場的同學可以一起觀看，在線上的同學也能一起進入虛擬 3D 世界中同樂！也讓同學先行體驗最近很夯的「元宇宙」概念！


※ 教學資料總整理：

※ 延伸閱讀：

 

留言

張貼留言