AR 卡片 · 技术验证 Demo

Step 2 — 验证两种 AR 形态在真机上的实际效果(全开源免费技术栈)

形态 AWebARmodel-viewer

Demo A:数字 AR 卡片(婚礼请柬示例)

收件人打开链接 → 网页里看到 3D 内容 → 点「AR 查看」把它放进现实空间。 Android 走 Scene Viewer(GLB),iPhone 走 AR Quick Look(USDZ),无需安装任何 App。

形态 B图像识别追踪MindAR.js

Demo B:实体卡 AR(扫卡面内容"活"起来)

手机摄像头对准一张卡片图 → 3D 内容浮现在卡片上并跟随移动。 用免费开源的 MindAR.js 实现,替代 8th Wall(省下每月 US$99)。

测试工具扫码直达

📱 扫码真机测试

自动生成两个 demo 的二维码 —— 手机原生相机扫码直达,体验用户拿到卡片后的完整流程 (扫码 → 摄像头自动开启 → 对准卡片 → 内容浮现)。

真机测试清单

✅ Demo A:Android 手机点「AR」按钮,模型能放到地面/桌面上
✅ Demo A:iPhone 点 AR 按钮,进入 Quick Look 并可放置
✅ Demo B:摄像头对准目标卡片图,3D 模型稳定跟随卡片
✅ 在 WhatsApp 里发送链接,从 WhatsApp 内打开测试(马来西亚主要分享渠道)
⚠ 注意:摄像头和 AR 功能要求 HTTPS,手机测试需要先部署到免费静态托管(见 README)