Moving your Shipwreck 3D Models from Sketchfab to BelowJS

My open-source software BelowJS is for displaying shipwreck models on your own terms, with strong VR support and measurement tools for archaeological research.

Cross-posted from the BelowJS documentation. BelowJS is open-source software for displaying underwater photogrammetry models on the web. It’s designed as a self-hosted alternative to commercial platforms such as Sketchfab, with better VR support and measuring tools for shipwreck research.

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:

• A Sketchfab account with models that have downloads enabled
• Basic HTML knowledge for editing file paths
• 10 minutes to follow this guide

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. This orientation will also improve display quality on Sketchfab itself.

Orient your model

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 the Drag and Drop viewer

Drop your model into the BelowJS drag-and-drop viewer to check if everything works: file size, polygon count, and performance.

Test in drag and drop viewer

Measurement and dive mode

Step 4: Optimise and scale your model (Recommended)

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

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

Optimise your models

Edit a few lines of HTML

Step 5: Copy the Basic example

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

• Download the basic example HTML
• Put your own models in the same folder
• Edit the HTML to change the file paths
• Use the drag and drop viewer to choose initial camera positions for 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

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.

The BelowJS examples page also includes an embedded viewer that can integrate as an iframe into your existing site, on any platform including WordPress.

Next steps

• Explore BelowJS examples for advanced features
• Set up VR viewing for an immersive experience
• Optimise performance for better loading
• See real implementations for inspiration