內容行銷數位設計｜課程講義

Unit 07．AR 擴增實境基礎與企劃／AR 互動濾鏡與物件開發

手機一掃，
海報裡的毒菇站起來了

AR 不是炫技，是讓實體展品「多說一段話」。

擴增實境（Augmented Reality）把數位內容疊在真實世界上：觀眾用手機掃描展場海報、圖鑑卡或包裝，就能看到 3D 模型、動態影片或互動說明。這一堂課延續《菇》台灣毒菇教育應用設計：掃描主視覺海報 → 3D 毒蠅傘從海報中長出來 → 跳出毒性警示 → 引導到策展網站。從 AR 類型、展場案例、互動企劃，到不寫程式的 MyWebAR、免費無限制的 Claude＋MindAR，以及「把 3D 模型放在桌上看」的做法，都會一步一步操作。

0實作關卡，從企劃到 IG 推廣

0種免費做法：MyWebAR、MindAR、model-viewer

0個 App 要觀眾下載：全部用瀏覽器開啟

內容整理於 2026 年 10 月．AR 平台近年變動很大（多個平台已停止服務），以官方公告為準｜中國科大視傳系｜內容行銷數位設計

⚠ 毒蠅傘 Amanita muscaria誤食可能引起嘔吐、幻覺等神經症狀。不認識的菇，別吃。

看 3D 圖鑑分享

示意：掃描《菇》海報 → 3D 毒蠅傘長出來 → 跳出警示卡與網站按鈕

菇

本頁示範案例：《菇》台灣毒菇教育應用設計 延續第 6 單元。第 4 單元企劃中的 AR 物件：「掃描實體圖鑑浮現 3D 毒菇模型與警示」。

上課前請先準備：
① 手機（iPhone 或 Android 皆可）＋電腦
② 觸發用的圖片：海報、圖鑑卡或包裝的高解析 JPG
③ 註冊 MyWebAR 與 Meshy；延續第 5 單元的 GitHub 帳號

點任一關卡可直接跳到該段說明

四條製作路線，依需求選擇 ① MyWebAR：完全不寫程式，拖拉就能做，但免費版一年只有 100 次瀏覽、有浮水印，適合課堂練習與小型展示。
② Claude＋MindAR：請 Claude 寫網頁，放在 GitHub Pages，完全免費、沒有瀏覽次數上限，適合正式展覽。
③ model-viewer：不需要觸發圖，把 3D 模型直接放在桌上、地上看，最容易成功。
④ IG 的 AR：IG 已不能上架自訂濾鏡，改用「網頁濾鏡＋限動連結貼紙」導流與擴散。

對應前面的單元 第 4 單元企劃書的「AR 互動」規劃決定要做什麼；第 5 單元的策展網站與 GitHub Pages 是第 08、09 關的發布基礎；第 6 單元的動態海報影片可以直接變成「掃描海報就會動」的 AR 內容。本週做好的 AR 會在第 9 單元整合進完整的數位行銷動線。

STAGE 01

認識 AR：四種「觸發方式」

AR 的關鍵在於：手機要先認得「什麼」，才知道要把內容放在哪裡。依照手機辨識的對象，常見 AR 分成四種：圖像追蹤（認圖片）、平面放置（認地板桌面）、臉部濾鏡（認臉）、定位 AR（認 GPS 位置）。

產出：選定 AR 類型

Web AR 與 App AR本課全部使用 Web AR：觀眾掃 QR Code 用瀏覽器開啟，不用下載 App。展場觀眾平均停留時間很短，「要先下載 App」會讓大多數人直接放棄。

互動練習．點選類型，看手機畫面與《菇》適用程度

STAGE 02

展場行銷案例：AR 在展覽中扮演什麼角色？

好的展場 AR 都在解決一個明確的問題：實體空間放不下的資訊、看不見的過程、想讓觀眾帶走的記憶。分析案例時，不要只看「效果很酷」，要問：它幫觀眾多理解了什麼？最後引導觀眾做什麼？

產出：案例分析 3 則

案例分析三問① 觸發物是什麼？（海報、展品、包裝）② AR 內容補足了什麼？③ 結束後觀眾去哪裡？（網站、拍照分享、追蹤 IG）

展場 AR 的五種角色

角色	常見應用	解決的問題	適合的畢製
看見看不見的	博物館掃描化石，骨骼長出肌肉與皮膚、動起來	靜態展品無法呈現的過程或內部結構	《灰》香灰轉化為花
放大細節	掃描圖鑑卡，3D 模型可以旋轉、放大觀察	實物太小、太危險或無法帶到現場	《菇》3D 毒菇圖鑑
說故事	掃描畫作，角色開口說話或演出一段故事	平面作品的故事需要時間軸	《浪》繪本角色
營造氛圍	掃描海報，空間中出現光粒子、花瓣、聲音	讓觀眾「感受」而不只是「閱讀」	《拜》光粒子儀式
拍照分享	品牌快閃店的 AR 合照框、臉部濾鏡	讓觀眾主動在社群幫你曝光	所有專題的展場打卡

四大專題的 AR 企劃方向（延續第 4 單元）

專題	觸發物	AR 內容	建議做法
《菇》	主視覺海報、毒菇圖鑑卡	3D 毒菇＋毒性警示卡＋「看完整圖鑑」按鈕	MindAR＋Meshy 3D
《拜》	紀念指南手冊	浮現光粒子與第 6 單元的動態影像	MyWebAR 影片疊加
《灰》	香灰淨化塊包裝	3D 花朵從包裝中綻放	MyWebAR／MindAR
《浪》	健康透視卡	掃描顯示照護狀態與領養前評估連結	MindAR＋網頁按鈕

STAGE 03

互動企劃：設計一段 30 秒的體驗

AR 是「體驗設計」，不是「放一個 3D 模型」。用互動設計思維規劃完整的六個步驟：看到 → 掃描 → 觸發 → 互動 → 分享 → 導流。展場觀眾的耐心大約只有 30 秒，每一步都要清楚、不需要說明書。

產出：AR 企劃卡

最常被忘記的兩步「看到」：觀眾怎麼知道這張海報可以掃？要有明顯的 AR 標示與 QR Code。「導流」：體驗結束後，要有按鈕帶觀眾去網站、IG 或下一個展區，不然體驗就白做了。IG 如何反過來把人帶進 AR，見第 10 關。

AR 體驗旅程．《菇》

看到海報角落的「掃我看毒菇長出來」與 QR

掃描手機相機掃 QR，開啟網頁、允許相機

觸發對準海報，3D 毒蠅傘長出來

互動點蘑菇看毒性；切換下一種毒菇

分享截圖分享，限動標記專題帳號

導流「看完整 3D 圖鑑」連到策展網站

AR 企劃卡產生器．選好後複製到企劃書

專題名稱

目標觀眾

觸發物

AR 內容可複選

互動方式可複選

結尾導流

AR 企劃卡

STAGE 04

平台現況：網路上的舊教學，很多已經不能用了

2025–2026 年 AR 工具大洗牌：Instagram／Facebook 濾鏡平台、Adobe 的 AR 工具、最知名的 Web AR 平台都陸續停止服務。搜尋教學時一定要看發布日期，避免花時間學已經關閉的工具。

資料查核：2026 年 10 月

選工具的原則畢製要撐到展覽結束、甚至放進作品集好幾年。優先選擇開放原始碼、檔案在自己手上的做法（MindAR、model-viewer），平台關閉也不怕作品消失。

AR 平台變動時間軸

2025.01Meta Spark AR 關閉：Instagram、Facebook 第三方濾鏡全部下架，IG 濾鏡教學都已失效（替代做法見第 10 關）
2025.11Adobe Aero 停止服務
2026.028th Wall 停止新專案（託管內容預計 2027 年 2 月下線），轉為開放原始碼
持續MyWebAR：不寫程式的 Web AR 平台，有免費方案（限制見第 07 關）
持續MindAR：開放原始碼的 Web AR 函式庫，圖像追蹤、臉部追蹤，完全免費
持續model-viewer：Google 開放原始碼，網頁上看 3D、一鍵放進真實空間
持續Snapchat Lens Studio、TikTok Effect House：社群平台濾鏡，免費但需要在該 App 中使用

注意：想做「IG 限動濾鏡」的組別，目前已經沒有官方管道。替代做法請見第 10 關：IG 的 AR（網頁濾鏡、限動連結貼紙、IG 內建效果）。

STAGE 05

觸發圖設計：讓手機「認得出」你的海報

圖像追蹤靠的是特徵點（Feature Points）：畫面中明暗對比強、形狀不規則的角落與邊緣。特徵點越多、分布越平均，手機越快認出圖片、追蹤越穩定，3D 模型也比較不會抖動。

產出：觸發圖 JPG

好消息《菇》海報的剪紙樹影、寫實蘑菇拼貼，有大量高對比、不重複的細節，是非常理想的觸發圖。設計時就考慮 AR 的組別，可以刻意加強這些特性。

互動比較．點「顯示特徵點」看手機眼中的圖片

《菇》海報★★★★★

高對比、細節多、不對稱，追蹤又快又穩

柔和漸層＋細字★☆☆☆☆

幾乎沒有邊角，手機找不到可以抓的點

重複圓點圖案★★☆☆☆

點很多但都長一樣，手機無法判斷方向

觸發圖設計檢核

✓ 好的觸發圖高對比、細節豐富的插畫或照片／不對稱構圖／紋理遍布整張圖／印刷尺寸 A5 以上／霧面紙

✗ 難以辨識大面積純色或漸層／只有文字／左右對稱或重複圖案／亮面反光材質／太小（名片大小以下）

⚠ 觸發圖決定後就不要再修改印刷檔：AR 認的是「這一張圖」，換了顏色或版面就要重新設定。

STAGE 06

3D 素材：用 AI 把 2D 毒菇變成 3D 模型

不會建模也沒關係：Meshy 等 AI 工具可以把一張圖片轉成有材質的 3D 模型。AR 用的格式是 GLB（一個檔案就包含模型與材質）。也可以不用 3D，直接把第 6 單元的動態海報影片疊在觸發圖上，同樣很有效果。

產出：GLB 模型（5MB 以下）

給 AI 的圖片單一物件、去背或白底、正面略帶俯角、光線平均。《菇》海報裡的蘑菇本來就是去背拼貼，直接從原檔匯出單朵蘑菇最理想。

Meshy．圖片轉 3Dmeshy.ai｜Google 帳號註冊

開啟 Meshy ↗

免費版做得到

每月約 100 點（每月 1 日重置），一次完整生成（模型＋材質）約 30 點，約可生成 3 次
每月約 10 次下載，可匯出 GLB、USDZ 等格式
在瀏覽器中預覽、旋轉檢查

免費版做不到／要注意

免費版可下載的模型版本可能比預覽的最新版本舊，下載前確認
免費生成的模型多為公開、授權有限制，以官方條款為準
額度很少：一組先決定好「要做哪 2–3 朵」再生成

從原檔匯出單朵蘑菇
例如毒蠅傘，去背 PNG、長邊 1024px 以上，命名 amanita.png。
登入 Meshy →「Image to 3D」→ 上傳圖片
若有多角度圖（正面、側面），可一起上傳提高準確度。
生成 → 在預覽中旋轉檢查
看背面、底部有沒有破洞或怪異材質。不滿意可用「Retexture」或換一張圖重做。
下載 GLB
右上角 Download → 選 GLB。iPhone 的「放在桌上看」另需 USDZ，可一併下載（或交給 model-viewer 自動轉換）。
壓縮檔案
到 gltf.report 拖入 GLB 檢查大小，用內建的壓縮（Draco／貼圖縮小）讓檔案 小於 5MB，手機才能快速載入。

其他素材來源

來源	說明	注意
第 6 單元動態海報	MP4 直接疊在觸發圖上，像「海報活過來」	MP4 小於 10MB、無聲或另設播放鍵
Sketchfab	大量可下載的 3D 模型，可篩選免費下載	確認 CC 授權並在作品中標示作者
自己的 2D 插畫	去背 PNG 在 AR 中做成「立牌」，多層前後排列也有立體感	最省時，風格最一致

STAGE 07

路線①：MyWebAR，不寫程式拖拉完成

MyWebAR 是瀏覽器裡的 AR 編輯器：上傳觸發圖、拖進 3D 模型或影片、設定動畫與按鈕，就能產生 QR Code。最適合第一次做 AR、想快速看到成果的組別。

工具：mywebar.com

100 次瀏覽很快就用完免費版一年只有約 100 次瀏覽，而且你自己測試也會算。課堂練習用 MyWebAR 沒問題；正式展覽每天可能上百人掃描，建議改用路線②或購買方案。

免費版（Creator）做得到

最多 5 個專案、100MB 雲端空間
圖像追蹤（平面與曲面圖片）、平面放置
放入 3D 模型、影片、圖片、文字、按鈕與簡單動畫
自動產生 QR Code 與連結

免費版做不到／要注意

每年約 100 次瀏覽，用完就無法觀看
有 MyWebAR 載入畫面與相機畫面浮水印
檔案放在平台上，方案或平台變動會影響作品

逐步操作

註冊並登入 mywebar.com → 建立新專案
選擇「Image tracking／圖像追蹤」類型的專案。
上傳觸發圖（Marker）
上傳《菇》海報 JPG，平台會顯示辨識品質評分；分數太低請回第 05 關調整。
加入內容
從左側素材面板拖入：① Meshy 的 GLB 毒蠅傘 ② 文字或圖片做成的警示卡 ③ 按鈕。把模型放在海報中央偏下，調整大小與角度。
設定動畫與互動
為模型加入「出現時放大（Scale in）」動畫；為按鈕設定「開啟網址」，連到第 5 單元的策展網站。
預覽 → 用手機掃 QR 測試
編輯器的預覽／發布會產生 QR Code，用手機對準螢幕上的海報測試。測試次數會計入瀏覽數，集中測試。
發布，下載 QR Code
QR Code 放到海報角落或展台說明牌（第 11 關）。

介面與方案以 MyWebAR 官方當下說明為準；平台另有中文介面可切換。

STAGE 08

路線②：Claude＋MindAR，免費又沒有瀏覽上限

MindAR 是開放原始碼的 Web AR 函式庫。你不需要學程式：把觸發圖「編譯」成 .mind 檔，再請 Claude 寫出 AR 網頁，放到第 5 單元學過的 GitHub Pages，就是一個沒有浮水印、沒有瀏覽次數限制的 AR 體驗。

工具：MindAR＋Claude＋GitHub Pages

一定要上線才能測試手機瀏覽器只允許 HTTPS 網址開啟相機，Claude 的預覽視窗與電腦裡直接打開的檔案都無法使用手機相機。流程是：Claude 寫好 → 下載 → 上傳 GitHub Pages → 手機掃描測試。

逐步操作

編譯觸發圖：產生 targets.mind
開啟 MindAR 官方的 Image Targets Compiler → 拖入《菇》海報 JPG → Start → 完成後 Download，得到 targets.mind。想做多張圖鑑卡，可一次放入多張圖片（依序為第 0、1、2 張）。

整理資料夾

dugu-ar/
├── index.html        ← 請 Claude 寫
├── targets.mind      ← 第 1 步產生
├── amanita.glb       ← 第 06 關的 3D 模型
└── dugu-motion.mp4   ← （選用）第 6 單元的動態海報

把提示詞貼給 Claude

給 Claude 的 Web AR 提示詞

請用 MindAR（image tracking）＋ A-Frame 幫我寫一個單一 index.html 的 Web AR 網頁，
從 jsDelivr CDN 載入最新穩定版的 MindAR 與 A-Frame。
・專題：《菇》台灣毒菇教育應用設計，觀眾在展場用手機掃描主視覺海報
・觸發圖：同資料夾的 targets.mind（第 0 張圖）
・掃描成功時：
  1. 同資料夾的 amanita.glb 3D 毒蠅傘從海報中央「由小長大」出現（0.8 秒，ease-out），之後緩慢自轉
  2. 模型上方出現白底圓角警示卡：「⚠ 毒蠅傘：誤食可能引起嘔吐、幻覺等神經症狀。不認識的菇，別吃。」
  3. 畫面下方固定兩個按鈕：「看完整 3D 圖鑑」（連到 https://我的帳號.github.io/dugu/）、「拍照」（截圖下載）
・點一下 3D 模型，警示卡切換為更詳細的說明
・掃描前：畫面中央顯示掃描框與提示「請將鏡頭對準《菇》海報」；離開海報時顯示「海報不見了，請重新對準」
・開場顯示一頁說明（三步驟：允許相機 → 對準海報 → 點蘑菇），按「開始」才開啟相機
・介面文字繁體中文，按鈕高度至少 48px，適合單手操作
・請在程式中用註解標出：模型大小、位置、旋轉速度的調整位置

下載 index.html，放進資料夾
預覽視窗開不了相機是正常的，不用在 Claude 裡測試。
上傳到 GitHub Pages
依第 5 單元第 10 關：新建 repository dugu-ar → 上傳整個資料夾內容 → Settings → Pages 開啟 → 得到 https://帳號.github.io/dugu-ar/。
手機開啟網址，對準螢幕或印出的海報
不順利時，把手機畫面截圖與問題描述貼回 Claude：「模型太大、偏左、追蹤時一直抖」，請它調整參數。

Claude 修正對話示範

已上線測試，海報可以辨識，但 3D 蘑菇太大，超出海報範圍，而且手稍微晃動模型就一直抖。另外想加入第二張觸發圖（綠褶菇圖鑑卡，targets.mind 的第 1 張）。

已調整三處：① 模型縮放從 1 改為 0.45，並往下移到海報下半部 ② 開啟 MindAR 的平滑參數（filterMinCF／filterBeta），降低抖動，若反應變慢可再微調 ③ 新增 targetIndex: 1 的第二個錨點，掃到綠褶菇圖鑑卡時顯示對應模型與說明（模型檔名預留為 chlorophyllum.glb）。修改的位置都加上了註解。

把「實際看到的問題」描述清楚，Claude 就能調整對應的參數

STAGE 09

路線③：model-viewer，把 3D 毒菇放在桌上看

不需要觸發圖的 AR：在網頁上放一個 3D 模型，旁邊有「在你的空間中檢視」按鈕，手機點下去就會把模型放在真實的桌面或地板上，可以走近、繞著看。使用 Google 開放原始碼的 model-viewer，只要一個 HTML 標籤，最容易成功。

產出：網站中的 3D 圖鑑頁

手機各自用自己的 ARAndroid 會開啟 Google 的 Scene Viewer，iPhone 會開啟 Apple 的 AR Quick Look，品質穩定，不需要另外安裝。電腦上則可以用滑鼠旋轉、縮放。

給 Claude：把 3D 圖鑑加進策展網站

請在我第 5 單元的策展網站中新增「3D 毒菇圖鑑」區塊，使用 Google 的 model-viewer（從官方 CDN 載入）：
・每種毒菇一張卡片：左邊是 <model-viewer>，右邊是名稱、學名、毒性等級、誤食症狀
・模型檔：models/amanita.glb（毒蠅傘）、models/chlorophyllum.glb（綠褶菇）
・啟用 ar、camera-controls、auto-rotate，ar-modes 設為 "webxr scene-viewer quick-look"
・AR 按鈕自訂為「📱 放在桌上看」，深色圓角樣式
・模型載入前顯示 images/ 中對應的 PNG 當預覽圖（poster）
・手機版卡片改為上下排列

逐步操作

把 GLB 放進網站資料夾的 models/
檔名英文小寫，每個小於 5MB。
在第 5 單元的同一個 Claude 對話中貼上提示詞
延續原本的網站設計，風格才會一致。
下載 → 重新上傳 GitHub Pages
手機測試
開啟網站 → 點「放在桌上看」→ 依照提示移動手機掃描桌面 → 模型出現後可用手指移動、旋轉、縮放。

展場搭配用法：展台放一張小卡「掃 QR 把毒菇帶回家」，觀眾在家裡的餐桌上也能看到 3D 毒菇，展覽結束後體驗仍然延續。

STAGE 10

路線④：Instagram 上的 AR，濾鏡平台關了還能怎麼做？

2025 年 1 月 Meta 關閉 Spark AR 後，已經不能再製作、上架自訂的 IG 濾鏡，目前也沒有替代的官方工具。但 IG 仍是畢展最重要的曝光管道，所以策略要換個方向：AR 在網頁上發生，IG 負責「導流」與「擴散」。以下四種做法依推薦程度排列，可以組合使用。

產出：網頁濾鏡＋IG 限動導流資料查核：2026 年 10 月

IG 限動／貼文連結貼紙、Bio 連結

網頁 AR 濾鏡MindAR 臉部追蹤

拍照／錄影存到手機相簿

回到 IG 分享標記帳號＋Hashtag

IG 把人帶進 AR，AR 的成果再被觀眾分享回 IG：形成一個會自己擴散的循環。

最推薦用 MindAR 的臉部追蹤做一個「網頁版 IG 濾鏡」：觀眾開啟網址，頭上長出毒蠅傘、隨機抽出「今天的你是哪一種毒菇」，按下拍照或錄影存到相簿，再自己發到 IG 限動。效果跟 IG 濾鏡幾乎一樣，而且完全免費、不用審核、不會被下架。

準備素材
去背的毒菇帽 PNG（或第 06 關的 GLB）、專題 Logo PNG、4–6 張「毒菇結果卡」文案。
把提示詞貼給 Claude
下方提示詞已包含拍照、錄影、相框與 IG 內建瀏覽器的處理。
下載 → 上傳 GitHub Pages
同第 08 關，必須是 https 網址才能開相機。
用手機測試拍照與錄影
確認照片有 Logo 與 Hashtag 浮水印、畫面比例是 9:16（剛好是 IG 限動尺寸）。
設計「分享誘因」
結果卡要有趣、值得分享（黑色幽默的毒菇人格），並在畫面寫上「標記 @dugu_project 分享你的毒菇人格」。

給 Claude 的網頁 AR 濾鏡提示詞

請用 MindAR（face tracking）＋ A-Frame 寫一個單一 index.html 的「網頁版 IG 濾鏡」，從 jsDelivr CDN 載入。
・專題：《菇》台灣毒菇教育應用設計，觀眾在展場或從 IG 限動點連結進來
・效果：
  1. 前鏡頭追蹤臉部，同資料夾的 cap.png（毒蠅傘傘蓋）戴在頭頂，跟著頭轉動
  2. 開啟後 2 秒，畫面上方隨機抽出一張「今天的你是：○○○」毒菇人格卡（毒蠅傘、綠褶菇、鱗柄白鵝膏、毒紅菇四種，每種一句帶黑色幽默的短評）
  3. 畫面右下角固定 logo.png 與文字「#毒菇人格 @dugu_project」
・功能按鈕（底部置中，高度 56px 以上）：
  「📸 拍照」：把相機畫面＋帽子＋人格卡＋Logo 合成一張 1080×1920 圖片並下載
  「🎥 錄影 10 秒」：錄下合成畫面存成影片（瀏覽器不支援時隱藏此按鈕）
  「🔄 重抽」：重新抽人格卡
・下載後顯示提示：「已存到相簿，到 IG 限動分享並標記 @dugu_project 吧！」
・若偵測到是在 Instagram／LINE 內建瀏覽器開啟（相機常無法使用），顯示全螢幕提示：
  「請點右上角 ⋯ →『在瀏覽器中開啟』」，並附 iPhone、Android 兩種圖示說明
・介面文字繁體中文，風格用黑、灰、白配色（呼應《菇》剪紙海報）

如果一定要「在社群 App 裡」使用的濾鏡，可以在其他平台製作，觀眾錄好影片後再上傳到 IG。

平台	做法	優點	限制
Snapchat Lens Studio	免費下載 Lens Studio 製作 Lens，發布後產生 Snapcode 讓人掃描	功能完整、臉部與世界追蹤都很強	台灣使用者較少，觀眾要先安裝 Snapchat
TikTok Effect House	免費製作 TikTok 特效，送審通過後上架	TikTok 使用者多，易擴散	需要審核、時間不確定；影片帶 TikTok 浮水印
網頁濾鏡（A）	MindAR 臉部追蹤＋Claude	免費、不用審核、不用安裝 App	需處理 IG 內建瀏覽器開啟問題

畢展時程有限，建議以 A＋B 為主，D 只在組員已熟悉該平台時考慮。

《菇》IG×AR 推廣排程建議

展前 2 週：發 Reels 示範「掃描海報毒菇長出來」（AR 錄影＋第 6 單元動態海報），文案預告展覽
展前 1 週：限動連結貼紙開放網頁濾鏡「#毒菇人格」，用「加入你的」發起挑戰
展期中：展場說明牌加上「拍照標記 @dugu_project」，轉發觀眾的限動
展後：精選動態保留 AR 入口，策展網站的 3D 圖鑑持續可看

STAGE 11

測試與佈展：在電腦上會動，不代表在展場會動

AR 失敗最常發生在展場：燈光太暗或反光、網路太慢、海報貼太高、觀眾不知道要掃哪裡。至少要在真實展場、用三支不同的手機完整測試一次。

產出：測試紀錄＋展場說明牌

準備 B 計畫展場網路不穩時，AR 可能載入很久。準備一支已經開好 AR 的平板放在展台，或在說明牌加印「體驗影片」的 QR Code。

測試矩陣．每一格都要測過

項目	iPhone（Safari）	Android（Chrome）	通過標準
開啟速度	4G 網路	4G 網路	10 秒內出現相機畫面
辨識速度	距離 50cm	距離 50cm	3 秒內出現模型
追蹤穩定	緩慢移動手機	緩慢移動手機	模型不明顯抖動或飄走
展場燈光	現場燈光	現場燈光	無反光、能辨識
按鈕導流	點擊按鈕	點擊按鈕	正確開啟網站

展場說明牌．三步驟就夠

標題要說「會發生什麼」
✗「AR 體驗」 ✓「掃描海報，看毒菇從畫裡長出來」
QR Code 至少 3×3 公分
放在腰部到胸口高度，旁邊印網址備用。
圖示化三步驟
① 手機相機掃 QR ② 允許使用相機 ③ 對準上方海報。
海報印刷：霧面、A3 以上
亮面海報在展場燈光下容易反光，導致無法辨識。

STAGE 12

工具免費版比較：哪一條路適合你的專題？

三條路線可以混用：課堂上用 MyWebAR 快速練習，正式展覽改用 MindAR，網站上再用 model-viewer 做 3D 圖鑑。

資料查核：2026 年 10 月

工具	免費額度	圖像追蹤	平面放置	浮水印	需要寫程式	檔案在自己手上	最適合
MyWebAR	5 個專案、100MB、每年約 100 次瀏覽	✓	✓	有	不用	✗	課堂練習、快速打樣
MindAR ＋Claude	完全免費、開放原始碼，無瀏覽上限	✓	✗	無	Claude 代寫	✓	正式展覽的海報 AR
model-viewer ＋Claude	完全免費、開放原始碼	✗	✓	無	一個標籤	✓	3D 圖鑑、帶回家看
Meshy 3D 素材	每月約 100 點（約 3 次生成）、10 次下載	—	—	—	不用	✓ 下載 GLB	圖片轉 3D 模型
IG 網頁濾鏡 MindAR 臉部＋Claude	完全免費	✗	✗	無	Claude 代寫	✓	拍照分享到 IG 限動
Lens Studio Snapchat	免費	✓	✓	無	視覺化編輯	△	Snapchat 濾鏡（台灣使用者較少）
Effect House TikTok	免費	△	△	無	視覺化編輯	△	TikTok 特效（需審核上架）

✓ 可以　△ 有條件或依版本　✗ 不行。AR 平台變動頻繁，使用前請查看官方當下的方案與服務狀態。

推薦組合

本週課堂：MyWebAR 做出第一個「掃描海報出現 3D 模型」，熟悉 AR 的運作
課後作業：用 Claude＋MindAR 做正式版，放上 GitHub Pages
加分：在策展網站加入 model-viewer 3D 圖鑑，展覽結束後體驗仍能延續
推廣：IG 限動連結貼紙導流到 AR，網頁濾鏡讓觀眾拍照分享回 IG

常見問題 Troubleshooting

AR 最常見的失敗狀況與解法

手機打開網頁，但相機沒有出現？

① 確認網址是 https:// 開頭（GitHub Pages 預設就是）② 第一次開啟時要按「允許」使用相機，若曾按拒絕，到瀏覽器設定的網站權限重新開啟 ③ 在 LINE、IG 內建瀏覽器開啟時常常無法使用相機，請改用 Safari 或 Chrome 開啟。

一直辨識不到海報？

檢查光線是否太暗或反光、距離是否太遠（建議 30–80cm）、手機畫面是否涵蓋整張圖。若一直失敗，代表觸發圖特徵點不足，回第 05 關調整，或改用海報中細節最豐富的局部當觸發圖。

3D 模型一直抖動、飄來飄去？

MindAR 可以調整平滑參數（請 Claude 協助調整 filterMinCF、filterBeta）；模型縮小一點、靠近觸發圖中心也會比較穩。另外，觸發圖印得越大、越平整，追蹤越穩定。

模型載入很久，或手機變得很燙？

GLB 檔案太大。用 gltf.report 壓縮到 5MB 以下、貼圖縮到 1024px；一次只顯示一個模型，不要同時放好幾個。

MyWebAR 的瀏覽次數用完了？

免費版一年約 100 次，用完需等待或升級。建議把同一份觸發圖與 GLB 改用 MindAR 製作（第 08 關），素材可以直接沿用。

iPhone 上「放在桌上看」沒有反應？

iPhone 使用 AR Quick Look，需要 USDZ 格式。model-viewer 通常會自動轉換；若失敗，請從 Meshy 另外下載 USDZ，並請 Claude 在 model-viewer 加上 ios-src 指定這個檔案。

可以做 Instagram 濾鏡嗎？

Meta 已於 2025 年 1 月關閉 Spark AR，目前沒有官方方式製作 IG 第三方濾鏡。替代方案見第 10 關：用 MindAR 臉部追蹤做網頁濾鏡，觀眾拍照錄影後分享到 IG；再用限動連結貼紙把 IG 追蹤者導到 AR 網址。

從 IG 點連結進來，相機打不開？

IG、LINE 的內建瀏覽器常常不允許網頁使用相機。請觀眾點右上角 ⋯ →「在瀏覽器中開啟」（iPhone 為 Safari、Android 為 Chrome）。建議在 AR 網頁中偵測內建瀏覽器並顯示提示，第 10 關的提示詞已包含這項功能。

延伸資源與銜接單元

本單元用到的工具官方網站，以及前後單元連結

← 上一單元6．AI 圖像驅動與動態海報設計→ 下一單元 →8．AI 影音行銷與腳本分鏡→ 回顧第 5 單元策展網站與 GitHub Pages 發布→ MyWebAR不寫程式的 Web AR↗ MindAR 官方文件含觸發圖編譯工具↗ model-viewermodelviewer.dev↗ Meshy圖片轉 3D 模型↗ gltf.reportGLB 檢查與壓縮↗ Claude撰寫 Web AR 網頁↗

本頁內容整理於 2026 年 10 月。AR 平台近兩年變動頻繁，若畫面或方案與講義不同，請以各工具官方說明為準。毒菇資訊僅供教學示範，實際內容請以專業資料查證。

內容行銷數位設計｜課程講義

手機一掃，
海報裡的毒菇站起來了

認識 AR：四種「觸發方式」

展場行銷案例：AR 在展覽中扮演什麼角色？

互動企劃：設計一段 30 秒的體驗

平台現況：網路上的舊教學，很多已經不能用了

觸發圖設計：讓手機「認得出」你的海報

3D 素材：用 AI 把 2D 毒菇變成 3D 模型

路線①：MyWebAR，不寫程式拖拉完成

路線②：Claude＋MindAR，免費又沒有瀏覽上限

路線③：model-viewer，把 3D 毒菇放在桌上看

路線④：Instagram 上的 AR，濾鏡平台關了還能怎麼做？

測試與佈展：在電腦上會動，不代表在展場會動

工具免費版比較：哪一條路適合你的專題？

常見問題 Troubleshooting

HomeWork｜【作業07】畢業專題 AR 互動體驗

交付內容

評分重點

繳交前自我檢核

延伸資源與銜接單元

內容行銷數位設計｜課程講義

手機一掃，海報裡的毒菇站起來了

認識 AR：四種「觸發方式」

展場行銷案例：AR 在展覽中扮演什麼角色？

互動企劃：設計一段 30 秒的體驗

平台現況：網路上的舊教學，很多已經不能用了

觸發圖設計：讓手機「認得出」你的海報

3D 素材：用 AI 把 2D 毒菇變成 3D 模型

路線①：MyWebAR，不寫程式拖拉完成

路線②：Claude＋MindAR，免費又沒有瀏覽上限

路線③：model-viewer，把 3D 毒菇放在桌上看

路線④：Instagram 上的 AR，濾鏡平台關了還能怎麼做？

測試與佈展：在電腦上會動，不代表在展場會動

工具免費版比較：哪一條路適合你的專題？

常見問題 Troubleshooting

HomeWork｜【作業07】畢業專題 AR 互動體驗

交付內容

評分重點

繳交前自我檢核

延伸資源與銜接單元

手機一掃，
海報裡的毒菇站起來了