Examples

Explore live interactive demos to see BelowJS in action. Take these open examples and have your own site up and running in minutes.

↑ Live embed viewer with measurement tools - SS Timaru (CND4) model. Credit: WreckSploration

Basic Viewer

Full-featured multi-model viewer with VR support, measurement tools, and dive mode.

Note: Copy this one to make your own viewer. This and a handful of model files is all you need.

View Live Demo Source Code View HTML

npm run dev        # or npm run dev:basic

Drag & Drop Loader

File loader with drag-and-drop GLB support, a screenshot button, and custom UI elements.

Note: Use this to test your own models and get the initial camera positions for making your own viewer. Includes a screenshot button for capturing clean images of your models.

View Live Demo Source Code View HTML

npm run dev:dragdrop

Embed Viewer

Lightweight viewer designed for iframe embedding with URL parameter configuration.

Note: You can use this on your own site to share models among other text. No more external embeds—just a single HTML file pointing to your models, under your control, with full VR support.

View Live Demo Source Code View HTML

npm run dev:embed

Running locally

git clone https://github.com/patrick-morrison/belowjs
cd belowjs
npm install && npm run build
npm run dev

Simplest possible BelowJS

<!DOCTYPE html>
<html>
<head>
    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/+esm",
            "belowjs": "https://cdn.jsdelivr.net/npm/belowjs@1.1.0/dist/belowjs.js"
        }
    }
    </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.1.0/dist/belowjs.css">
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script type="module">
        import { ModelViewer } from 'belowjs';
        
        new ModelViewer('body', {
            models: { 'ship': { url: 'model.glb' } }
        });
    </script>
</body>
</html>

URL parameter embedding

The embed example supports URL parameters for dynamic configuration:

<iframe 
  src="viewer.html?model=wreck.glb&name=Historic%20Wreck&cx=10&cy=5&cz=15"
  width="800" height="600">
</iframe>

Static deployment

Deploy on GitHub Pages, Netlify Drop, or any static hosting:

shipwrecks-vr/
├── index.html          # Main HTML with BelowJS
├── belowjs.js          # Download from releases
├── belowjs.css         # Download from releases
└── models/
    ├── kxi.glb
    └── kozvii.glb

Push to GitHub, enable Pages in Settings → live in minutes. Or drag-and-drop this folder onto Netlify Drop for instant hosting.

Prepare Your Models for BelowJS

These examples work best with quality data and savvy processing. The guides show the complete workflow we have developed that ensures models are ready to take full advantage of the research and VR capabilities within BelowJS. The hard work is your photogrammetry, sharing it in VR is now easy.

Complete workflow guides: Photogrammetry processing, model scaling and orientation, performance optimization for VR, headset setup, and integrating existing Sketchfab models.

View Guides →