快速入门 - AR 与 8thwall

本教程涵盖如何使用 wonderland-ar-tracking 和 8thwall 进行结合。

你可以使用 8thwall 支持的任何跟踪功能：

  • SLAM 跟踪
  • 图像跟踪（平面和圆柱形）
  • 面部跟踪
  • VPS（带预扫描网格的遮挡世界跟踪）

安装项目模板 

下载 wonderland-ar-tracking 仓库，可以选择下载为 ZIP（<> Code > Download ZIP），或者使用 git 克隆。

解压缩文件夹并将 examples 中的 “SLAM-camera” 文件夹复制到你的 templates 文件夹中。根据你的操作系统，templates 文件夹位置如下：

  • Windows: %APPDATA%/WonderlandEngine （可以在 Windows 资源管理器的路径栏中输入 %APPDATA%，解析为 C:\Users\<Username>\AppData\Roaming）
  • MacOS: ~/Library/Application Support/WonderlandEngine (~ 是你的主文件夹)
  • Linux: ~/.WonderlandEngine/

创建项目 

如果正确设置了模板，在 Wonderland 编辑器中创建新项目时，你应看到如下所示内容：

快速入门 - AR 与 8thwall

选择新模板后，你可以创建一个项目。

测试 

要在本地测试项目，8thwall 要求你设置本地证书，因为他们阻止非 HTTPS 服务。

设置 SSL 证书 

要为 localhost 生成自己的 SSL 证书，打开 Views > Preferences > Server 并点击 Generate Certificates。 偏好设置值将自动设置。

最后，重启服务器：通过点击编辑器窗口顶部的 “localhost:8080”，然后点击 “Stop Server” 来停止服务器。 然后点击 “not running”，再点击 “Start Server” 重新启动服务器。

在智能手机上查看 

对于 Android：

  1. 确保你的设备启用了 “USB 调试”。
  2. 通过 USB 连接你的设备。
  3. 选择 “Local Device” 以触发设备上的 “允许 USB 调试” 对话框。
  4. 批准后，你可以在下拉菜单中选择设备。
  5. 勾选 “SSL” 复选框。
  6. 点击绿色箭头在你的智能手机上启动浏览器并打开页面。

对于 iOS：

  1. 确保你的 iOS 设备和 Mac 连接到同一 Wi-Fi 网络。
  2. 在你的 Mac 上查找 Mac 的名称：前往 System Preferences > Sharing 查找你的 Mac 名称。
  3. （可选）在你的 iOS 设备上安装我们之前生成的 SSL 证书：可通过邮件发送并通过邮件 app 安装，或使用 Apple Configurator。
  4. （可选）在 iOS 设备上信任已安装的证书，导航到 Settings > General > About > Certificate Trust Settings。
  5. 在 iOS 设备上打开 Safari：输入 URL http://YourMacName.local:8080 或 https://YourMacName.local:8081（如果使用 SSL）。

发布 

要发布基于 8thwall 的体验，你需要在 src/index.js 中替换 8thwall API Token。

创建一个 8thwall 项目 

  1. 在 8thwall.com 上创建一个账号。在你的 8th Wall Dashboard 上，点击 “Start a new project”。
  2. 选择 “Self-Hosted”。
  3. 设置项目名称并选择与你需求匹配的 “License Type”。
  4. 点击 “Create”。
  5. 在 “Setup Domains” 处添加你托管的域。
  6. 前往 “Settings”（左侧齿轮符号）
  7. 从 “My App Key” 部分复制应用程序密钥。

在 src/index.js 文件中粘贴应用程序密钥：替换 window.API_TOKEN_XR8 = '<here>'; 的值。