AR showcase template

#What it is

A ready-made page with the model-viewer web component. You drop in your own GLB model and publish the page — it rotates in the browser and, on a phone, opens in augmented reality with one tap. We’ll use the same starting point for the portfolio page in block 9.

#How to use it

1. Download the template and put your file next to it named model.glb (or change src="…" in the code to your own filename).
2. Replace the text in alt="…": briefly describe the model for people who can’t see the image.
3. Replace the “Project name” and description placeholders under the viewport with yours: what the project is, the hardest part, what you learned.
4. Publish the page (for example on GitHub Pages). On a local file the AR button won’t work: you need a real https://… link.
5. Make a QR code for the published address and scan it with your phone.

#The minimal code

Everything needed for viewing and AR is a few lines of HTML:

<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer
  src="model.glb"
  alt="A short description of the model"
  camera-controls
  auto-rotate
  ar
  ar-modes="webxr scene-viewer quick-look"
  shadow-intensity="1">
</model-viewer>

The template already contains this code, the styling and a demo model, so the page works right away — before you swap in your own.

#Before you publish