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. Downloading the Sketchfab GLB is the preferred path because it keeps the model orientation you set in Sketchfab and avoids an extra conversion step. You should still optimise the GLB for VR performance and fast downloads. If the download option is not visible, check Model Properties or adjust the download permissions in your model settings.

Step 3: Open it in the Drag and Drop viewer

Drop the downloaded GLB into the viewer and it will load immediately. You can explore it, take measurements and start studying the model without setting up a site first.

Check the model, measure a known distance and correct its scale if needed. Right-click the completed measurement on desktop or long press it on mobile, then enter the correct distance.

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 save the scale (Recommended)

You can study the model in the drag-and-drop viewer straight away. When you are ready to publish it or use it in VR, follow the model setup guide and make the scale correction permanent.

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

The viewer shows the applied scale. Use that same factor with the optimiser to make the correction permanent in the model:

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