Mac端如何开发8th Wall Web AR项目并实现本地编码测试与部署

前期准备 #

• 登录8th Wall控制台注册账号，创建对应Web AR项目，获取项目专属App Key
• 确保Mac设备已安装Node.js与包管理工具，未安装可通过Homebrew执行brew install node完成安装
• 提前确定开发所用技术栈，原生HTML/CSS/JS、Three.js、A-Frame均可直接适配8th Wall能力

本地项目初始化配置 #

• 新建本地项目文件夹，执行npm init -y完成项目初始化
• 在入口HTML文件的head标签中引入8th Wall核心SDK，将示例中的占位字段替换为你自己的App Key：

<script async src="https://cdn.8thwall.com/web/xrextras/xrextras.js"></script>
<script async src="https://apps.8thwall.com/xrweb?appKey=你的App Key"></script>

• 按普通前端项目规范搭建目录即可，建议单独设置assets文件夹存放3D模型、贴图、音频等静态资源，无需特殊目录结构

编码开发 #

• 开发逻辑与常规Web项目完全一致，8th Wall专属的图像跟踪、空间锚点、人脸跟踪等能力直接调用对应JS API即可，语法与官方编辑器开发完全兼容
• 所有静态资源使用相对路径引用，不要硬编码临时路径，避免上线后资源加载失败
• 调试过程可直接使用console.log输出日志，后续可在浏览器控制台查看排查问题

本地测试 #

8th Wall要求运行环境必须为HTTPS，本地测试需启动HTTPS本地服务，推荐使用serve工具快速搭建：

• 全局安装serve：npm install -g serve
• 进入项目根目录，执行serve --ssl启动HTTPS本地服务，默认端口为3000
• 测试操作步骤：
  • 确保Mac与测试用手机连接同一WiFi
  • 手机端浏览器访问https://你的Mac本地IP:3000，手动信任本地自签名证书即可正常访问
  • 给页面授予相机权限，即可测试AR功能
• 移动端调试可使用Safari开发者工具，iPhone连接Mac后可直接在Safari桌面端查看手机端页面的控制台输出、元素结构，快速排查问题

注意：8th Wall默认允许App Key在本地IP环境下测试，无需额外配置控制台白名单

成品上传到8th Wall控制台 #

• 开发测试完成后，将所有业务代码、静态资源打包为zip包，注意不要嵌套外层文件夹，打开zip后需要直接能看到index.html文件，避免8th Wall无法识别入口
• 登录8th Wall控制台，进入对应项目的Hosting页面，上传打包好的zip包，等待上传完成后即可获取线上访问链接
• 上线后建议再访问一次线上链接，确认资源加载、AR功能均正常运行

内容的提问来源于stack exchange，提问作者rbkavin