A web augmented reality (AR) template using Babylon.js (3D engine), 8th Wall (AR tracking), and TypeScript.
- An 8th Wall developer account
- NPM installed
- (Recommended) VS Code
- After cloning this repository, open an Terminal window and navigate to the repository root folder.
- Install project dependencies by running:
npm install
- Log into the 8th Wall developer console and create a new project.
- Authorize one or more mobile devices to access that project.
- Edit line 29 of the
public/index.htmlfile to include the app key from your 8th Wall project. The project's app key can be found on the "Settings" tab within the project on the 8th Wall developer portal.
To build a distributable version of the application run:
npm build
This will generate a distributable build to a folder called dist/. Deploy the files in this folder to a publicly accessible web server.
💡 Tip: AWS Amplify provides a fantastic, easy solution for hosting web apps like this one!
From one of the mobile devices you authorized above, visit the URL of your deployed application.
✏️ Note: Alternatively, you can open the URL in a desktop browser. It will automatically display a QR code that can be scanned from your authorized device.
Upon loading the app, you will be prompted to allow the app to access the motion sensors and camera on your device.
After approving sensor access, you will see a camera view with a yellow target in the middle. Aim your camera wherever you would like to place the sample AR object and click the "Place Object" button.
By default, when you load the website on a device that doesn't support AR - such as a laptop - it will present the user with a QR code to be scanned by an AR-capable device. However, during development, it can be much more convenient to interact with your 3D content on your desktop. By appending this URL parameter, the scene will supress the QR code and instead display your scene with a simple ground plane and a camera that can be rotated and panned with the mouse.
Example URL: https://my-ar-app-url.com/?disableAR=1
Appending the query parameter debug=1 to the URL when loading the website will add a small message panel to the top of the screen to display any log messages written to the JavaScript console via console.log() and similar console API calls. This makes it possible to easily view log messages while running on mobile.
Example URL: https://my-ar-app-url.com/?debug=1
Note, the debug param only works if AR hasn't been disabled via the disableAR URL parameter.
To start adding your own custom functionality to the app, you'll likely want to modify the DemoScene.ts file.