3D models on this site

The owl at the top of the home page isn’t a picture. It’s my logo rebuilt as a 3D model from layered shapes, and you can drag it to look around. This is the start of sharing 3D work here, so I wanted a viewer that looks good, works on phones and doesn’t slow the site down.

Try it below. The owl is mine; the boombox and the lantern are free sample models, there to show how detailed objects look until I add my own.

How it works

• The models are .glb files. It’s the standard format for 3D on the web, and Blender and most 3D tools can export it.
• The viewer is Google’s <model-viewer>. It handles lighting, dragging and zooming, and augmented reality: on most phones, a “View in your room” button places the model on your desk through the camera.
• Phones keep scrolling normally. Swiping up and down scrolls the page, and swiping sideways turns the model.

Keeping it fast

A 3D viewer is a big piece of code, about 280 KB, and each model adds a few hundred more. So the site is careful about when it loads them:

• Pages without a model never download the viewer. The Projects page, for example, loads no JavaScript at all.
• On the home page, you see a still picture of the owl first. The 3D version takes over once everything else on the page has loaded.
• In articles, a model loads when you scroll near it. If you never get that far, it never downloads.
• On devices that would struggle to draw 3D, or with data saver on, the still picture stays until you point at or touch the model.

Adding a model

Adding a model to an article is one line:

<Model src="/models/my-model.glb" alt="What the model shows" />

I export the model from Blender as a .glb file, shrink it if it’s large, and drop it in the site’s static/models folder. If it’s big, gltf.report can shrink it in the browser.

What’s next

The samples will make way for my own models as I post them. If you work in 3D and have a tip for keeping models small without losing detail, I’d like to hear it.