賓茂國小校園360導覽製作練習

阿亮老師YouTube教學

【手把手教你～創造元宇宙 虛擬展間】

以先進3A科技推廣融入各學科領域專業課程,學習虛擬實境開發工具，透過元宇宙科技應用導入教學回歸課堂的教學模式改，支持老師透過虛實整合科技應導入教學的探索與專業精進！

課程大綱

1.透過Googlep下展館全景圖
2.製作展館導覽影音對應資訊
3.掛接屬於自己的WebServer網頁伺服器
4.虛擬展間連結自己的雲端空間
5.元宇宙虛擬展間建置為網站形式
6.成果分享

教學筆記
1. 所用圖片長寬比需2:1
2. marzipano tool https://www.marzipano.net/ 輸入圖片(5張), 並輸出export (zip檔), 解壓縮zip檔後會有app-files資料夾
3. 在chrome 安裝 web server for Chrome套件，以先作測試 Web Server for Chrome (請避免使用學校帳號, 以免因資安問題而被擋) https://chrome.google.com/webstore/de... 安裝好套件後，按「啟動應用程式」按鈕，會出現一小視窗，點選「CHOOSE FOLDER」選擇電腦上之「app-files資料夾」（步驟2），再點下方的Web Server URL(s)連結 http://127.0.0.1:8887 若測試順利，即可見VR虛擬導覽
4. 製作封面縮圖 (分享至FB或LINE時將自動呈現縮圖) 自訂尺寸600*315封面縮圖 (teamuseum.jpg) 輸出成jpg檔, 修改成英文檔名 放進app-files/img資料夾裡
5. 將app-files資料夾上傳至雲端硬碟
6. 用記事本(附屬應用程式)修改app-files資料夾中的index.html文件檔 在

(角括號)head(角括號) 與 (角括號) /head 之間貼上
(角括號)meta property="og:description"content="坪林茶博館”(角括號) (大標)
(角括號) meta property="og:title"content="220730Marzipano"(角括號) (小標)
(角括號)meta property="og:image"content="img/teamuseum.jpg"(角括號) (封面縮圖檔名)

修改成新的index.html後, 再將此index.html上傳至雲端硬碟裡的app-files資料夾, 覆蓋過原來的index.html

7. 在chrome 安裝 drive to web 套件 https://www.drv.tw/ 會自動找到剛上傳至雲端硬碟裡的index.html去顯示網頁效果, 即可見VR虛擬導覽

授權

創用 CC 姓名標示授權 (允許再利用)