Tutorial: Build a 3D scene in 15 minutes with StateLayer| StateLayer Blog

As a web developer, I've always been drawn to emerging platforms like the Apple Vision Pro and Meta Quest. I wanted to build for them. But when I looked into it, I was immediately faced with a choice: abandon the web ecosystem I love, or spend months learning a complex, heavy game engine like Unity. For a simple UI it was a big departure from how I normally work.

I wanted a tool that respected my existing skills—a tool that felt fast, interactive, and component-based, just like React.

This led me to build StateLayer.

StateLayer is a web-based tool that lets you prototype interactive 3D scenes using a simple, declarative syntax. It applies the speed and familiar workflow of modern web development to spatial computing.

In this guide, I'll show you how to go from a blank canvas to the tranquil, animated scene below in about 15 minutes.

What We're Building

We will create a tranquil, floating island, complete with a working lighthouse and a small tree. It looks complex, but it’s actually built from a few simple primitives.

Let's Begin!

Open the StateLayer Editor in another tab and paste the code as we go.

Step 1: The Foundation of Our World

First, we need a base for our island to float on. We'll create the island itself and the grassy top layer using two Cylinder components.

// The base of the floating island
Cylinder({
  height: 1.5,
  diameterTop: 6,
  diameterBottom: 4,
  position: { y: -1 },
  color: "green",
});

// The grassy top of the island
Cylinder({
  height: 0.2,
  diameter: 6.2,
  position: { y: -0.15 },
  color: "#228B22",
});
Loading syntax highlighting...

Step 2: Constructing the Lighthouse

A lighthouse is just a few simple shapes stacked together. We'll use two Cylinder components for the tower and a Box for the rotating light beam.

// -- The Lighthouse --

// The lighthouse base tower (a tall cylinder)
Cylinder({
  height: 4,
  diameter: 1,
  position: { x: -1.5, y: 1 },
  color: "#F5F5DC", // A nice off-white color
});

// The top of the lighthouse
Cylinder({
  height: 0.5,
  diameter: 1.2,
  position: { x: -1.5, y: 3.15 },
  color: "#DC143C", // A bold red
});

// The rotating light beam (a simple box)
Box({
  size: { width: 0.2, height: 0.2, depth: 3 },
  position: { x: -1.5, y: 3 },
  color: "yellow",
  animation: { rotation: { y: 0.03 } }
});
Loading syntax highlighting...

Step 3: Adding a Touch of Nature

Finally, every tranquil island needs a tree. We can create one easily by combining a brown Cylinder for the trunk and a green Sphere for the leaves.

// -- Scenery --

// A simple tree
Cylinder({
  height: 2,
  diameter: 0.4,
  position: { x: 2, y: 0.7 },
  color: "#A0522D", // Sienna brown for the trunk
});

Sphere({
  diameter: 1.8,
  position: { x: 2, y: 2.2 },
  color: "#006400", // Dark green for the leaves
});
Loading syntax highlighting...

How the Workflow Feels

Notice what we didn't do. We didn't wait for a compiler. We didn't need to put on a headset to see our changes. We saw every change instantly, right in the browser, just like with hot-reloading in a modern web app. This reflects the core idea behind StateLayer: making spatial computing as fast and accessible as modern web development.

Next Steps

With just a few components, you built a complete 3D scene. From here, you could try adding more scenery, animations, or even interactions.

Tutorial: Build a 3D scene in 15 minutes with StateLayer