Vue + A-Frame + Vite boilerplate

A boilerplate for A-Frame 1.6, Vue 3.5 and Vite 5.0

>> DEMO <<

Included in the boilerplate

Libs and components

• aframe-extras (MIT License)
• aframe physx (MIT License)
• aframe-blink-controls (MIT License)
• aframe-multi-camera (MIT License)
• simple-navmesh-constraint (MIT Licence)

Movement modes support

• Desktop – Keyboard for move (WASD or Arrows keys) + Mouse for look control (Drag and drop)
• Mobile – 1x Finger touch to go forward + 2x Fingers touch to go backward + Gaze cursor for click
• VR/AR – walk + Teleport (Grip for grab and laser for click) + Gaze cursor for click in AR

3D models

• Main room – VR Gallery by Maxim Mavrichev is licensed under CC BY 4.0
• 3D physic room – 3d_gallery_for_vr_projects by tekuto1s is licensed under CC BY 4.0

---

Quickstart

Create a folder for your project and move to it

Clone (or fork, or download)

git clone https://github.com/Chabloz/a-frame-vite-vue-boilerplate.git .

Install dependencies

npm ci

Dev

npm run dev

Build

npm run build

Notes for local dev on VR headset

1. Check that your development device and your VR headset are connected on the same network.

2. Expose you local development:

npm run dev-expose

3. In your VR headset, browse to the local development adress [ip]:[port].

Note

The certificate is self-signed, so you will probably have to confirm access to the resource in your browser.

---

License