CAD UX for Smartphone AR Project Setup (WebXR + HTTPS)

This project is a Three.js template using TypeScript and Vite, configured for WebXR development.

Getting Started

Examples to get started with XR

1. Prerequisites

• Node.js: Ensure you have Node.js installed (v20.19.0+ or v22+ recommended).
• Network: Your Smartphone and your computer must be on the same Wi-Fi network.

2. Installation

npm install

3. Running the project

npm run dev

The output will look like this:

VITE v5.x.x  ready in 400 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: [https://192.168.1.](https://192.168.1.)XX:5173/

Connecting your Smartphone

Look for the Network URL in your terminal (e.g., https://192.168.1.25:5173).

Open the Chrome Browser.

Type the Network URL exactly as it appears (don't forget the s in https).

SSL Warning: Since we use a self-signed certificate, the browser will show a warning ("Your connection is not private").

Click Advanced.

Click Proceed to 192.168.1.XX (unsafe).

Click the "Enter AR" button at the bottom of the page.

Use the emulator

Using chrome Install the Immersive Web Emulator from meta: https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik

Open your webpage and then open the developer tools (f12), Look for the WebXR tab at the top.

Some examples models to use (don't commit them to the git)

Bike

Robot arm