WebXR 3D Model

Our Creative Team knows 3D Models.

A-Frame can import formats including GLTF and OBJ, with the former preferred.

Create a simple demo to show a model from one of the 3D model sites in WebXR.

A-Frame docs include:

• https://aframe.io/docs/1.7.0/introduction/models.html
• https://aframe.io/docs/1.7.0/components/gltf-model.html

I downloaded a drone model from Sketchfab and include it as an asset in the scene, then reference it in an entity. We can even enable the model's default animation, after including an a-frame "extras" script.

Developing

Edit the index.html as desired.

When viewing, on Mac, use CTL-OPT-I to invoke the inspector.

Demoing

Local:

python -m http.server 9999

Then open http://localhost:9999 in a WebXR capable browser.

Use Localhost.run service to make that mirror that port to the world:

ssh -R 80:localhost:9999 localhost.run

Then share the URL it gives you.

Host on GitHub Pages::

1. Create a new repository on GitHub.
2. Clone the repository to your local machine.
3. Copy your project files into the cloned repository folder.
4. Commit and push your changes to GitHub.
5. Enable GitHub Pages in the repository settings.
6. Your site will be available at https://<your-username>.github.io/<repository-name>/.

The site is now available at: https://v-studios.github.io/webxr-3dmodel/