TinyGLB

How to embed a 3D model in a website

The steps to embedding any 3D model in your website using TinyGLB:

  1. Convert your 3D model to GLB format
  2. Optimise your GLB file for the web
  3. Upload your GLB file to TinyGLB
  4. Embed the 3D model in your website

Step 1: Model Format

glTF is widely regarded as the best format for displaying 3D models on a website, and is often described as the “JPEG of 3D”. GLB is the binary version of glTF where all assets such as textures are combined into a single file. This makes it convenient to use and generally more efficient to load on the web.

If your model is not already in GLB format you can convert it using most 3D modelling tools such as Blender. If you need assistance converting your models, including bulk conversion, please contact us to discuss our 3D model conversion services.

Step 2: Model Optimisation

Your model may need to be optimised to ensure it loads in a reasonable time and performs well across all device types, especially mobile devices. TinyGLB provides two optimisation settings on upload:

  1. Model compression
    Removes duplicate and unused data, then applies Draco compression to shrink geometry by up to 90%, while staying visually identical in almost all cases.
  2. Texture resizing
    Large textures can crash models on mobile devices. This setting resizes only the textures that are too large for mobile, keeping their original format so quality stays as close to the original as possible.

If you need help optimising a model further, please contact us to discuss our GLB model optimisation services.

Step 3: Upload Model

Before uploading your model to TinyGLB you can configure various settings for how your model will appear such as background theme, lighting and camera controls.

Step 4: Embed Model

Once uploaded to TinyGLB there are a number of embed options depending on your needs:

  1. Inline Embed
    The 3D viewer appears directly in your page.

    <iframe src="https://viewer.tinyglb.com/f34a5d3bb6994465a46c865096a6f8e3"
     allow="fullscreen" loading="lazy"
     style="border: 0; height: 300px; width: 100%">
</iframe>

  2. Pop-up Embed
    A button or link that opens the 3D viewer in your page. Use the built-in button style, or use your own styles.

    <script src="https://static.tinyglb.com/js/v1/tinyglb-embed.js" defer></script>
<button type="button" data-tinyglb-modal="ed19924076e9430684fb81ae92c74745" 
        class="tinyglb-button">View in 3D</button>

  3. Developer Embed
    If you want further customisation using your own code you can load a TinyGLB model with its viewer settings into a <model-viewer> you control.

    <script src="https://static.tinyglb.com/js/v1/tinyglb.js" defer></script>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.4.0/model-viewer.min.js"></script>

<model-viewer data-tinyglb-model="f34a5d3bb6994465a46c865096a6f8e3" style="width: 100%; height: 500px;"></model-viewer>

    You can also use the direct GLB link to embed your model using any 3D engine such as three.js or Babylon.js.