我用AI重建了一個仿google Tour Creator 的360 度互動導覽平台

 

360 度互動導覽建置平台

免安裝、免付費、雲端儲存

GAS + HTML ｜ 360 全景 ｜ AI 生圖提示詞 ｜ VR 模式

📥一鍵下載 — 建立副本開始使用點擊後即可將完整程式複製到自己的 Google 雲端硬碟

📖軟體由來：Google Tour Creator 關閉之後

還記得 Google Tour Creator 嗎？那是 Google 推出的 360 照片導覽工具，讓老師和創作者可以上傳自己的全景照片，在上面加入資訊點、語音解說、測驗題目，做出沉浸式的虛擬導覽。可惜 Google 在 2021 年關閉了這項服務，許多老師精心製作的教材因此無處存放。

我一直很喜歡這個工具的概念——用 360 照片帶領學生「走進」教學現場。不管是校園植物觀察、博物館導覽還是社區踏查，360 導覽帶給學生的臨場感遠超過一般照片和影片。但 Tour Creator 關閉後，市場上一直沒有出現類似且免費的替代方案。

於是，我決定自己動手做一個。我用 Google Apps Script（GAS）搭配 HTML，從零開始打造了這個「360 度互動導覽建置平台」。它完全複刻了 Tour Creator 的核心功能——上傳 360 全景照片、加入互動錨點（資訊、圖片、語音、影片、YouTube、測驗、場景轉場），更進一步支援了 AI 生圖提示詞產生器和 VR 模式。

🤖當 360 導覽遇上 AI 生圖

Google Tour Creator 當年只能上傳自己拍攝的 360 照片。但我發現一個重要的轉折：現在 AI 生成圖片已經非常成熟了，只要輸入一段好的提示詞（Prompt），就能產出高品質的 360 全景照片。

這代表什麼？代表即使你沒有 360 相機、沒有出過國、甚至沒有離開過教室，也能透過 AI 生成任何主題的 360 場景——古羅馬競技場、熱帶雨林、太空站、深海世界、中世紀城堡……只要想得到，AI 就能幫你畫出來。

因此，我在系統中內建了「360° AI 生圖提示詞產生器」。新增場景時，只要輸入簡單的場景需求（例如「午後陽光灑進溫暖的森林圖書館」），系統會自動整理成適合 AI 生圖的完整提示詞，包含等距柱狀投影、2:1 比例、無縫環繞、VR 最佳化等關鍵參數，一鍵複製後貼到 Midjourney、DALL·E、Stable Diffusion 等工具就能直接生圖。

✨ 提示詞範例

生成一張超高解析度、寫實攝影風格的 360 度全景照片。採用等距柱狀投影（equirectangular projection），畫面比例嚴格為 2:1，可無縫環繞拼接並直接用於 VR 與 360 Viewer。 主題與場景需求：午後陽光灑進溫暖的森林圖書館，木質書架、閱讀角落、窗外可看見山景。 攝影機位於場景中心，視點為自然成人視線高度；水平完整涵蓋 360 度，垂直完整呈現天空、四周環境至腳下地面。左右邊緣必須連續且精準銜接，地平線保持水平，空間比例與透視自然。光線自然，空間層次清楚，遠近景一致，材質真實，細節豐富，色彩協調。避免任何可見接縫、重複物件、拉伸、破圖、錯位、魚眼黑邊、過度廣角變形。畫面不得出現文字、標誌、浮水印。輸出單張 2:1 等距柱狀 360 全景圖，建議解析度 8192×4096 像素。

把 AI 生圖的結果上傳到平台後，就可以像以前用 Tour Creator 一樣，在場景中加入資訊點、語音導覽、影片、測驗題目，甚至場景間的轉場。從「AI 產生場景」到「設計互動內容」，整個流程都在一個系統內完成。

⚡核心功能總覽

這個平台完整複刻了 Google Tour Creator 的功能，並加入了我自己設計的新機制：

🌐

360 全景上傳

支援 JPG / PNG / WebP，自動縮圖最佳化

🤖

AI 生圖提示詞

內建產生器，一鍵複製給 Midjourney 等工具

📌

互動錨點

資訊、圖片、語音、影片、YouTube 都可加入

❓

測驗機制

是非題／選擇題，答對解鎖場景，記錄答題

🚪

場景轉場

連結多個 360 場景，打造連貫導覽路線

🥽

VR 模式

Cardboard 眼鏡支援，凝視 3 秒開啟內容

🎙️

瀏覽器錄音

直接錄製語音解說，無需額外軟體

📊

互動統計

追蹤錨點點擊率、答題正確率

🔗

QR Code 分享

手機掃碼直接開啟 360 導覽

☁️

雲端儲存

照片、語音、影片全存在 Google Drive

🎓教學上的應用場景

🌍 社會與歷史：穿越時空的教室

用 AI 生成古羅馬廣場、埃及金字塔或台灣清朝時期的老街，再搭配語音解說錨點和是非題測驗，學生就像真的穿越時空一樣。我曾在社會課上讓學生「走進」AI 生成的宋代市集，配合課本內容標示重點，學生對歷史的記憶深刻許多。

🔬 自然與科學：把世界搬進教室

熱帶雨林、深海珊瑚礁、太空站內部——這些學生很難親眼看到的場景，AI 生圖可以完整呈現。我在自然課做過「虛擬生態系導覽」，在 360 場景中加入不同生物的解說點和互動問答，學生用平板就能探索，效果比看課本圖片好太多了。

🏫 校園導覽：新生報到日的亮點

用 360 相機拍下校園各角落，上傳後在每個重要地點（圖書館、體育館、視聽教室）加入資訊錨點和 YouTube 介紹影片，做成新生導覽。家長日用手機掃 QR Code 就能逛校園，不用實際帶隊，卻更有互動感。

🧩 密室逃脫風的闖關導覽

利用「答對才可繼續」和「答對解鎖場景」這兩個機制，我可以設計出一套闖關式導覽。學生必須在每個場景中回答問題，答對才能前往下一個場景。這種遊戲化的設計讓學生在不知不覺中就把知識學起來了。

🔧使用教學：建立你的第一個 360 互動導覽

🚀 一鍵部署步驟

📂 步驟一：取得範本（建立副本）

1. 點擊上方按鈕，建立 Google 試算表副本到自己的雲端硬碟。
2. 點擊右上角「部署」→「新增部署作業」，選擇「網頁應用程式」。
3. 執行身分選擇「我」，誰可以存取選擇「任何人」。
4. 部署完成後複製網址，打開就是編輯後台！

⚠️ 重要提醒：部署後若要更新程式碼，需在「管理部署作業」中建立新版本，前台才能讀取到最新程式。

📌 日常操作流程

1. 建立專案：進入編輯器後，按「建立新專案」，輸入導覽名稱。
2. 新增場景：按「新增場景」，上傳 360 全景照片（或先用 AI 生圖）。
3. 產生提示詞：（選用）輸入場景需求，按「✨ 產生提示詞」，一鍵複製後貼到 AI 生圖工具。
4. 加入錨點：點擊 360 場景中的位置，選擇要加入的互動類型。
5. 儲存視角：轉到喜歡的角度，按「儲存目前視角」，決定使用者進入場景的初始畫面。
6. 拖曳調整：長按錨點圖示約 0.6 秒，即可拖曳到新位置。
7. 預覽測試：按「Viewer 預覽」在編輯器內直接測試所有互動。
8. 分享導覽：按「Viewer 網址／QR」，取得獨立網址或 QR Code 供學生掃描。

🎯 進階技巧

• VR 模式：Viewer 和編輯器預覽都支援 VR 模式。手機橫放放入 Cardboard 眼鏡，凝視錨點 3 秒即可開啟內容。
• 注音字體：在專案設定中開啟「使用注音字體」，錨點名稱和互動內容會自動套用注音，低年級學生也能讀。
• 背景音效：每個場景都可以上傳背景音樂或環境音，進入場景後自動循環播放，沉浸感加倍。
• 本地影片：支援 MP4/WebM/Ogg 上傳，Viewer 會自動從 Google Drive 串流播放。
• 答題統計：在編輯器中查看每個錨點的點擊次數與答題正確率，掌握學生學習狀況。

💡技術亮點

這個平台的技術架構完全建置於 Google 免費服務之上：

Google Apps Script Pannellum Tailwind CSS Google Sheets Google Drive QRCode.js

後端使用 GAS 綁定試算表作為資料庫，照片、語音、影片自動存入 Drive。360 全景預覽由 GAS 讀取圖片後以 Data URL 回傳，避開 Pannellum 讀取 Drive 網址時的 CORS 問題。所有上傳檔案都在前端經過 Canvas 壓縮處理後再傳送，兼顧品質與速度。

值得一提的是 AI 生圖提示詞產生器——這完全是前端文字組合功能，不需要串接任何 AI API，也沒有額外成本。系統會根據你輸入的場景需求，自動填入 2:1 等距柱狀投影、無縫環繞、VR 最佳化等關鍵參數，讓不會寫提示詞的老师也能輕鬆生成高品質的 360 場景提示詞。

🤝結語

Google Tour Creator 被關閉時，我曾經覺得很可惜，畢竟那是當時最好用的免費 360 導覽工具。以前的 Tour Creator 只能上傳自己拍的照片，但現在 AI 讓我們可以創造任何想像得到的場景。老師不再被「有沒有 360 相機」或「有沒有去過那個地方」限制，只要有想法，就能帶學生到任何地方。

這個平台完全免費開放使用，程式碼全都放在你建立的副本中。如果你也曾經懷念 Tour Creator，或者想嘗試用 360 導覽做教學，歡迎下載試試。

📥 立即下載 — 建立副本開始打造你的 360 導覽

點擊後自動複製到你的 Google 雲端硬碟，馬上開始使用