<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.

Physical Size Playground

Test physical sizing props live. Inputs map directly to package props: target-width-m, target-height-m, and target-depth-m. Medium/frame URLs are optional and useful for image artwork composition tests.

Source URL

Target Width (m)

Target Height (m)

Target Depth (m)

Medium Model URL (optional)

Frame Model URL (optional)

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>