Skip to content
Tool · Design & motion

Spatial effects, when they actually say something.

Three.js
Design & motion
What it is

It lets three-dimensional things be shown in a browser. Impressive — but only worth it when it shows something a photo can't.

Without

Either no depth at all, or a 3D effect that loads for three seconds and explains nothing.

With

Depth exactly where it explains something — and nowhere else.

How it works
  1. A scene is like a film set

    There are objects, lights and a camera. You move the camera, not the page.

  2. The graphics card does the work

    Through WebGL the browser reaches the graphics unit directly — the same one that renders games.

  3. Every frame costs

    Sixty frames a second means sixty calculations. On an older phone that costs battery and frame rate.

  4. It always needs a fallback

    Anyone whose device can't manage still has to see something. Without that second version you shut visitors out.

What it technically does
  1. 3D model
  2. Camera and light
  3. Graphics card renders
  4. Image in the browser

The image is redrawn sixty times a second. That's why everything here depends on how strong the visitor's device is.

It renders three-dimensional scenes in the browser, computed on the graphics card. It's built like a film set: a scene, a camera, lights, materials. Finished models are added as files.

Hard facts
Basis
graphics card in the browser
Parts
scene, camera, lights
Models
as files
Weight
several hundred kilobytes
How I use it
01

A product people want to turn and see from every side

02

A room or floor plan people should be able to walk through

03

Sparingly: only when it's worth the loading time

Where it doesn’t fit

On older phones it costs battery and frame rate. Without a simple fallback you shut out exactly the visitors who already have the weakest device.

In practice
Palacio de Sansol

There a spatial scene builds up as you scroll. Deliberately not on this site — it wouldn't be worth the load.

Neighbouring tools