<model-viewer> Demo

This is a demo page for the model-viewer web component deployed on Cloudflare Pages.

3D Model Example

Using a public glTF model from Khronos Group's sample assets.

Simple Box Model

A simple box model from glTF sample assets.

Image Example - PNG (Flat Projection)

PNG Image (Flat, Opaque)

Using a PNG image for flat projection demonstration.

Animated GIF Example

GIF Animation (Flat Projection)

Using an animated GIF for flat projection demonstration.

Video Example

MP4 Video

Using an MP4 video file.

Audio Example

MP3 Audio

Click the Play button to start audio playback.

PDF Example

PDF Document

Viewing a PDF document with page navigation controls.

Test Your Own Assets

Enter a URL to test your own 3D models, images, videos, or audio files:

Usage

To use model-viewer in your project, include the script:

<script type="module" src="https://your-domain.pages.dev/model-viewer.min.js"></script>

Then use the component:

<model-viewer
  src="path/to/your/model.glb"
  alt="3D model"
  camera-controls
  ar
  ar-modes="webxr scene-viewer quick-look">
</model-viewer>