Three years ago, adding any kind of 3D to a website meant hiring a specialist, wrestling with WebGL, or settling for a GIF of a spinning logo. Today, with ShapeBox, you can have an interactive 3D scene embedded in your marketing page in an afternoon.
This post walks through the key concepts you need to get started — no prior 3D experience required.
The building blocks
Every ShapeBox scene is made of three things:
Objects
Objects are the 3D shapes in your scene — boxes, spheres, custom meshes, text, and images. Each object has:
- Transform — position, rotation, and scale in 3D space.
- Material — how light interacts with the surface (colour, roughness, metalness).
- Physics body — optional rigid body that participates in the physics simulation.
Lights
Without light, nothing is visible. ShapeBox offers four light types:
| Type | Best for |
|---|---|
| Directional | Sunlight or moonlight |
| Point | Lamps, candles |
| Spot | Stage lighting, headlights |
| Environment (HDRI) | Realistic ambient lighting |
Camera
The camera defines what the viewer sees. ShapeBox supports perspective and orthographic cameras, along with first-person and orbit controls out of the box.
Your first scene in 5 steps
- Create a new project — hit "New Scene" from the dashboard.
- Add a mesh — drag a Box from the object panel into the canvas.
- Set a material — click the box, open the Material panel, and pick a colour.
- Add a light — drag a Directional Light from the panel and position it above your scene.
- Hit Publish — grab the embed snippet and paste it into your site.
That's it. You have a 3D object on your website.
Going further
Once you're comfortable with the basics, explore:
- Animation — right-click any property and choose "Add Keyframe".
- Physics — enable a Rigid Body on your object and watch it fall.
- Scripting — drop a Script component on any object and wire up interactions with a few lines of JavaScript.
Performance tips
3D is expensive to render. Here are a few rules of thumb:
- Keep polygon counts below 50k triangles per scene for mobile compatibility.
- Use compressed textures (KTX2 / Basis) for large texture maps.
- Enable Level of Detail (LOD) on complex meshes.
- Prefer environment lighting over many dynamic lights.
What's next
In the next post, we'll dive into ShapeBox's plugin system — how to write a custom plugin in TypeScript and publish it to the marketplace.
Happy building! 🎉