在 XR(延展實境)的創作領域中,如何快速建構出既真實又具備互動性的環境,是每位創作者必經的挑戰。本課程以整合 Google 街景、AI 生成技術(HDRI)以及 3D 建模場景,打造一個跨裝置(手機、平板、VR 頭盔)的沉浸式體驗。
課程大綱
下載Google街景圖片
用AI生成VR場景
建置VR專案
匯入Google街景圖片建立場景
匯入AI VR場景建立場景
套用內建3D場景建立場景
設置場景跳轉功能、基礎互動。
發佈專案
手機平板App體驗
頭盔體驗(需課前完成安裝App)
課程使用軟體
Street View Download 360
進入Street View Download 360下載並完成軟體安裝
網址:https://svd360.com
Street View Download 360是一款虛擬實境(VR)創作者、設計師及數位教育工作者設計的實用工具。它能將 Google 街景中的全景影像下載並拼接成一張完整的高解析度等距圓柱投影(Equirectangular)圖片,方便導入各類開發平台。
MAKAR XR Platform
依本篇教學完成電腦版、手機版及頭盔版跨裝置安裝
AI工具使用Gemini
https://gemini.google.com/app?hl=zh-TW
將採用Gemini生成圖片功能進行HDRI圖像生成。
其中關於解析度補充說明:Gemini付費版本生成解析度約3K,免費版本生成解析度約1K(會有模糊問題)。
課程AI工具應用|方法一:固定式文案生成法
方法一:固定式文案生成法
將以下提示詞複製並貼上並於框框內[輸入提示詞],與照片(或不需要照片,以AI全新生成)一起送出進行生成。若有相關需求,可於故事描述中的紅色文字進行任意修改後送出。
「現在起,你是一位 VR 全景攝影大師。當我輸入一段故事或場景描述時,請幫我執行以下任務:
自動將故事轉化為專業的 Stable Diffusion / Midjourney 提示詞。
強制加入關鍵字:Equirectangular projection, 360 degree panorama, seamless horizontal tiling, 8k resolution, HDRI, photorealistic。
請直接使用你內建的繪圖功能,並確保圖片比例為 2:1。
故事描述:[輸入提示詞]
範例01.
「現在起,你是一位 VR 全景攝影大師。當我輸入一段故事或場景描述時,請幫我執行以下任務:
自動將故事轉化為專業的 Stable Diffusion / Midjourney 提示詞。
強制加入關鍵字:Equirectangular projection, 360 degree panorama, seamless horizontal tiling, 8k resolution, HDRI, photorealistic。
請直接使用你內建的繪圖功能,並確保圖片比例為 2:1。
故事描述:[幾何與分數的魔法烘焙坊在這個場景中,學生將進入一間充滿各式糕點的 3D 可愛風魔法烘焙坊,透過觀察生活中的食物來學習抽象的數學概念]

範例02.
「現在起,你是一位 VR 全景攝影大師。當我輸入一段故事或場景描述時,請幫我執行以下任務:
自動將故事轉化為專業的 Stable Diffusion / Midjourney 提示詞。
強制加入關鍵字:Equirectangular projection, 360 degree panorama, seamless horizontal tiling, 8k resolution, HDRI, photorealistic。
請直接使用你內建的繪圖功能,並確保圖片比例為 2:1。
故事描述:[幾何與分數的魔法烘焙坊在這個場景中,學生將進入一間充滿各式糕點的 3D 可愛風魔法烘焙坊,透過觀察生活中的食物來學習抽象的數學概念。如:圓柱體土司、球體小餐包、正方體蛋糕、櫃檯上切成不同等份的披薩或蘋果派、桌上的透明量杯與牛奶瓶]

課程AI工具應用|方法二:請AI生成提示詞法
方法二:請AI生成提示詞法
將以下提示詞複製並貼上並於框框內[輸入提示詞]
若有相關需求,可於故事描述中的紅色文字進行任意修改後送出。
我想設計一個適用於[輸入提示詞]的VR學習案例,請幫我設定以[輸入提示詞]主題兩個主題,並依據主題設定場景裡面的教學內容。
每個場景希望可以有三個知識點,互動的方式以點擊出現語音或圖文的方式進行設計互動教學方式,並提供VR場景生成的提示詞。
VR 工具採用 MAKAR
主題一:數學領域
幾何與分數的魔法烘焙坊在這個場景中,學生將進入一間充滿各式糕點的 3D 可愛風魔法烘焙坊,透過觀察生活中的食物來學習抽象的數學概念。
場景設定與教學內容
知識點一:立體幾何圖形 (3D Shapes)
互動設計: 點擊架上不同形狀的麵包(如:圓柱體土司、球體小餐包、正方體蛋糕)。
觸發效果: 彈出圖文板顯示該圖形的展開圖與頂點、邊、面的數量,並伴隨語音提示:「這是一個圓柱體,它有兩個平平的圓形底面喔!」
知識點二:基礎分數概念 (Fractions)
互動設計: 點擊櫃檯上切成不同等份的披薩或蘋果派。
觸發效果: 點擊其中一塊,會浮現「$\frac{1}{4}$」的 3D AR 字樣,語音說明:「將一個派平分成四份,這一塊就是四分之一。」
知識點三:容積與容量 (Volume and Capacity)
互動設計: 點擊桌上的透明量杯與牛奶瓶。
觸發效果: 顯示一段簡短的圖文動畫,標示「毫升 (ml)」與「公升 (L)」的換算關係,並提問引導思考。
2. VR 全景圖生成提示詞
(Prompt)Equirectangular projection, 360 degree panorama, seamless horizontal tiling, 4096×2048 resolution, HDRI, photorealistic, 3D cute Q-version style, interior of a magical bakery, colorful geometric shaped breads and cakes on wooden shelves, a cozy counter with a pie and measuring cups, warm inviting lighting, clean background, no text, empty signs, blank labels –ar 2:1

用MetaSam生成場景中的圖形物件
設定畫面中的mask並生成需求之3D模型檔案

VR應用MR功能於VR(HTC/Meta頭盔體驗三維空間行走方法)
提到 VR(虛擬實境),多數人的第一印象往往是必須配戴 HTC 或 Meta 等專業頭盔。其實,VR 的基礎是透過「陀螺儀」來追蹤視角並呈現 360 度環景,這意味著我們日常使用的手機或平板,就能輕鬆達成基本的沉浸體驗!
雖然專業的 VR 頭盔能進一步識別立體空間,劃定專屬的虛擬體驗範圍;但隨著技術進化,如今的手機與平板也能藉由 Google ARCore 或 Apple ARKit 等技術,實現類似 MR(混合實境)的空間感知功能。
因此,本次課程將打破單一設備的限制,以「跨平台通用載具」為核心理念。深入學習 2D (HDRI) 全景與 3D 場景的整合技巧,確保 VR 專案無論在手機、平板還是專業頭盔上,都能展現最佳的互動體驗!