跳到主要內容區

免費製作校園360全景導覽

發佈日期 : 2023-01-02

賓茂國小校園360導覽製作練習
賓茂國小校園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 姓名標示授權 (允許再利用)