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
These are the examples to copy first. They are small enough to understand quickly and broad enough to use as the base for your own viewer.
Full-featured multi-model viewer with VR support, measurement tools, and dive mode. Copy this one to make your own viewer; this and a handful of model files is all you need.
Measurement tip: if a model cannot be scaled reliably yet, set
measurable: false so users do not treat measurements as authoritative.
npm run dev or npm run dev:basic
Drop GLB files into the viewer, test your own models, capture screenshots, and find initial camera positions before making a dedicated page.
Quest Link tip: use the drag-and-drop viewer when you want to stream larger desktop models over Link.
npm run dev:dragdrop
Lightweight iframe viewer with URL parameter configuration. Use this to share models among surrounding text with your own files, under your control, with full VR support.
npm run dev:embed
These show more complete tools built on BelowJS. They are useful references when you want custom UI, saved state, paired viewers, animation, or analysis workflows.
Keyframe animation tool for producing shipwreck visualisations in seconds. Designed to mirror our Blender workflow, with timeline controls, orbit and flight modes, and video export.
Note: this is an advanced example demonstrating how to build sophisticated tools on top of the core BelowJS viewer.
npm run dev:animation
Two-model GLB comparison tool with linked orbit views, paired control point alignment, single-view time switching, and ICP-style refinement.
Use case: monitor changes to a site over time by comparing models from different survey dates.
npm run dev:model-comparison
These examples are useful references for emerging BelowJS workflows, but their APIs and behaviour may change before they stabilise.
Passthrough AR viewing with hand tracking gestures for rotating, scaling, and moving 3D models in your physical space. Uses the same studio lighting system as the desktop viewer.
Roadmap: AR and 3D Tiles are planned to stabilise in BelowJS v2.
Streaming example for large 3D Tiles datasets. Pass any tileset URL with ?url=,
or start with the default Denton Holme and Macedon 2023 dataset.
Guide: see Tiled Models for Metashape conversion and setup.
npm run dev:tileset
Once you have picked a starter, use these minimal snippets to run it locally, embed it, or ship it as a static site.
git clone https://github.com/patrick-morrison/belowjs
cd belowjs
npm install && npm run build
npm run dev<!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.7.6/dist/belowjs.js"
}
}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/belowjs@1.7.6/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', measurable: true } }
});
</script>
</body>
</html>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>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.glbPush to GitHub, enable Pages in Settings → live in minutes. Or drag-and-drop this folder onto Netlify Drop for instant hosting.
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 →