0 %
入門 🥽 AR 開發

WebAR 入門：用手機瀏覽器建立第一個 AR 體驗

唔使寫 App、唔使學 Swift/Kotlin、唔使上架 App Store。
只需一個 HTML 檔案 + 一個 3D 模型，10 分鐘內你就可以用手機鏡頭將虛擬物件「放」喺現實世界。

🎯 呢篇教學你會學到

💡

零基礎都 OK：呢篇教學假設你識基本 HTML（識 copy & paste 就得），唔需要任何 3D 或 AR 開發經驗。

📦 事前準備（5 分鐘）

  1. 一部手機（iPhone 或 Android 都得）— WebAR 需要手機鏡頭
  2. 一個 Text Editor（VS Code、Notepad、Sublime Text 都得）
  3. 一個 3D 模型（.glb 格式）— 下面會教你點攞到免費模型

去邊度攞免費 3D 模型？

推薦以下來源，全部都係免費 + 可商用：

🚀

快手做法：直接用 Google 官方 Astronaut.glb 做測試。之後再換你自己嘅模型。

🔧 Step-by-Step 實戰

1

建立 HTML 檔案

開你嘅 text editor，create 一個新檔案叫 webar-demo.html，paste 以下基本結構：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我嘅第一個 WebAR 體驗</title>

  <!-- 載入 model-viewer -->
  <script type="module"
    src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js">
  </script>

</head>
<body>
  <h1>用 AR 睇模型 👇</h1>

  <model-viewer
    src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
    ar
    ar-modes="webxr scene-viewer quick-look"
    camera-controls
    tone-mapping="neutral"
    shadow-intensity="1"
    style="width: 100%; height: 500px;">
  </model-viewer>

</body>
</html>
⚠️

重點：上面嘅 <script type="module"> 一定唔可以漏 — 佢係載入 model-viewer 嘅關鍵。

2

理解關鍵屬性

上面段 code 入面有幾個重要屬性，逐個解釋：

  • src="..." — 你嘅 3D 模型路徑（.glb 或 .glTF 格式）
  • ar — 啟用 AR 模式（冇呢個就只可以 3D preview，唔可以 AR）
  • ar-modes="webxr scene-viewer quick-look" — 支援三種 AR 模式：
    • webxr：Android Chrome 原生支援
    • scene-viewer：Android ARCore
    • quick-look：iOS ARKit（iPhone）
  • camera-controls — 俾用戶用手指旋轉/縮放模型
📱

iPhone 用戶會見到「Quick Look」按鈕；Android 用戶會見到「View in your space」按鈕。兩個都可以將模型放喺現實環境。

3

加 AR 啟動按鈕（更友好嘅 UX）

預設嘅 AR 按鈕比較細，加一個自訂按鈕令用戶更清楚點玩：

<model-viewer
  id="my-model"
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  tone-mapping="neutral"
  shadow-intensity="1"
  style="width: 100%; height: 500px;">

  <!-- 自訂 AR 按鈕 -->
  <button slot="ar-button" style="
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: white;
    border: none;
    border-radius: 2rem;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  ">
    📱 喺現實世界睇
  </button>

</model-viewer>

slot="ar-button" 係 model-viewer 嘅特殊屬性 — 任何有呢個 slot 嘅 element 會自動變成 AR 啟動掣。

4

部署上網（一定要 HTTPS！）

WebAR 一定要經 HTTPS 先用到（瀏覽器安全限制）。三個最簡單嘅部署方法：

  1. GitHub Pages（免費）— 將 html + .glb push 上 GitHub，開 Pages 即搞掂
  2. Netlify / Vercel（免費）— drag & drop 個 folder 上去就 deploy 完
  3. ngrok（免費測試用）— localhost tunnel，開發階段測試用
# 方法 3：ngrok 快速測試（電腦要裝 ngrok）
ngrok http 8080
# 佢會俾個 https://xxx.ngrok.io 你，手機開呢個 URL 即用到
⚠️

常見錯誤：用 http://localhost 或 http://192.168.x.x 開係唔會有 AR 掣嘅。一定要 https://。

5

進階：加 Poster（未入 AR 前顯示縮圖）

模型未 load 好之前，加張 placeholder 圖令頁面靚啲：

<model-viewer
  src="Astronaut.glb"
  poster="astronaut-preview.webp"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  style="width: 100%; height: 500px;">
</model-viewer>

加埋 reveal="auto" 可以令模型 fade-in 出現：

<model-viewer src="Astronaut.glb" poster="preview.webp"
  reveal="auto"
  ar ar-modes="webxr scene-viewer quick-look"
  camera-controls></model-viewer>

📋 完整最終版程式碼

將以上所有嘢整合，呢個係你嘅最終 HTML：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我嘅第一個 WebAR 體驗</title>

  <!-- Model-Viewer -->
  <script type="module"
    src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js">
  </script>

  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #0a0a0a;
      color: #F2F5FC;
      font-family: system-ui, sans-serif;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    h1 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    .subtitle {
      color: #AEB5C5;
      font-size: 16px;
      margin-bottom: 1.5rem;
      text-align: center;
    }
    model-viewer {
      width: 100%;
      max-width: 400px;
      height: 500px;
      border-radius: 1rem;
      overflow: hidden;
      background: #111;
    }
    .ar-btn {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #a78bfa, #8b5cf6);
      color: white;
      border: none;
      border-radius: 2rem;
      padding: 14px 32px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(167,139,250,0.3);
    }
    .powered {
      margin-top: 1rem;
      font-size: 14px;
      color: #505258;
    }
    .powered a { color: #a78bfa; text-decoration: none; }
  </style>
</head>
<body>

  <h1>🛸 太空人喺你間房！</h1>
  <p class="subtitle">撳下面按鈕，將 3D 太空人放喺現實世界</p>

  <model-viewer
    src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
    poster="https://modelviewer.dev/shared-assets/models/Astronaut.webp"
    reveal="auto"
    ar
    ar-modes="webxr scene-viewer quick-look"
    camera-controls
    tone-mapping="neutral"
    shadow-intensity="1">

    <button slot="ar-button" class="ar-btn">
      📱 喺現實世界睇太空人
    </button>

  </model-viewer>

  <p class="powered">
    Powered by <a href="https://modelviewer.dev" target="_blank">model-viewer</a>
    · 3D Model by Google
  </p>

</body>
</html>
🎉

Copy 上面段 Code → Save 做 .html → Deploy 上 HTTPS → 手機開 → 搞掂！

你已經完成咗人生第一個 WebAR 專案 🚀

🔍 WebAR vs App AR：點解揀 WebAR？

比較 WebAR 📱 App AR 📲
需唔需要下載 ❌ 唔使 ✅ 要裝 App
開發時間 1 日 2-4 星期
開發成本 低 / 免費 HK$50K+
分享方式 一條 Link App Store 上架
適合場景 行銷 / 活動 / QR Code 遊戲 / 複雜互動
支援平台 iOS + Android 通常要分平台

🌐 真實應用案例

🚀 下一步：你可以點進階？

  1. 換自己嘅 3D 模型 — 用 Blender export .glb（下一篇教學會 cover）
  2. 加動畫 — model-viewer 支援 animation-name 屬性，可以播 built-in animation
  3. 加熱點（Hotspot） — 喺模型上面加 clickable 標籤，適合產品展示
  4. 影像追蹤 AR — 用 8th Wall 或 MindAR 做 image-target AR（對住海報出動畫）

📚 相關教學

✍️

關於作者

多元智趣團隊 — 理工大學班底，專注 AR/VR/AI 沉浸式體驗策劃。曾為超過 120+ 企業客戶提供藝術科技方案及實戰培訓。

Template background image
Template background image
WhatsApp 諮詢 免費 30 分鐘諮詢