Use your Sketchfab models in BelowJS

Built for underwater photogrammetry

BelowJS provides optimised rendering and performance specifically designed for underwater photogrammetry models in VR.

Before you start

Many underwater photogrammetrists already use Sketchfab to share their work. A scaled and oriented model from Sketchfab can be loaded into BelowJS in minutes - they work well together. This guide will show you how to create your own viewer with better performance, customisation, and full control over the experience.

You'll need:

Step 1: Orient your model

Sketchfab models look best when they are properly oriented. If you already rotate your models so they have a proper floor, you're all set. If not, this can be done in the 3D Settings page under General → Straighten Model, then check Show Advanced Rotation. Additionally, this orientation will improve display quality on Sketchfab as well.

Orienting model in Sketchfab 3D Settings

Orient your model

Downloading GLB model from Sketchfab

Download as GLB

Step 2: Download as GLB

If your model has downloads enabled, you will find it below the viewer on Sketchfab. If not, you may have the option in Model Properties to download the model as GLB, or you may need to adjust download permissions in your model settings. You can download in any format and convert to GLB, but this saves an extra step.

Note: If you notice stripe artifacts in your downloaded GLB, this is usually caused by Sketchfab's conversion step. In that case, download the original source files, import them into Metashape, and export a new GLB with KTX2 textures. See the optimisation guide for the recommended workflow.

Step 3: Test in Drag and Drop viewer

Your model will load immediately and you can check if everything works properly!

Test your model and check file size, polygon count, and performance.

Test your model →
Testing model in BelowJS drag and drop viewer

Test in drag and drop viewer

Final result with measurement and VR capabilities

Measurement and dive mode

Step 4: Optimise and scale your model (Recommended)

If your model wasn't scaled before upload, follow the model setup guide. If your model is already oriented from Sketchfab, this is usually the quickest way to finish scaling and optimisation.

Sketchfab GLBs are usually decent out of the box, but we can do better for VR. Use the optimisation guide, especially if your model is over ~1 million polygons.

belowjs-optimiser pack input.glb

To scale with the optimiser, measure a known distance in the drag-and-drop viewer, then compute scale factor = expected / measured. Example: if a 1 m scale stick measures 0.85 m, use 1.00 / 0.85 = 1.18:

belowjs-optimiser pack input.glb --scale 1.18

Step 5: Copy the Basic example

The basic example uses CDN imports, so nothing else is needed - just the HTML file and your models!

Your folder structure will look like this:

belowjs-example/
├── index.html          # Basic example HTML (uses CDNs)
└── models/
    ├── camilla_1903_shipwreck.glb
    └── another_wreck.glb
Optimising models for better performance

(Recommended) Optimise your models

Setting up HTML with BelowJS

Edit a few lines of HTML

Step 6: Upload to the internet

You can use any static hosting — GitHub Pages is free, or services like Netlify offer free tiers. For the fastest path, drag-and-drop your folder onto Netlify Drop. Paid hosting starts from a few dollars a month, and you have full control.

Additionally, check the examples page for an embedded viewer that can integrate as an iframe into your existing site, on any platform including WordPress.

Next steps