🧱 Brick Studio

Build with bricks in 3D, right in your browser. Snap pieces together with a satisfying click, paint them any colour, furnish the inside, then drop in as a little minifigure-style character and walk through what you made.

No install, no accounts, no build step, no internet required — just open it and build. It's plain HTML + JavaScript using three.js, which is bundled right in.

Made for tinkerers and kids of all ages. Build a house, furnish it, add a door, and explore it from the inside. 🏠

---

▶ Play it

• On itch.io: click Run game — it plays right in the browser, on desktop.

• From the files: double-click index.html and it opens in your browser. It works fully offline — three.js is bundled in vendor/, no internet needed. When you are online, it can also add your time played to the Game Shelf leaderboard under a nickname you pick.

• Via a local server (optional, avoids file:// quirks):

  # from this folder
  python -m http.server 5510
  # then open http://localhost:5510
  

---

✨ What's inside

• 🧱 ~90 pieces across Bricks, Plates (incl. jumpers), Tiles, Slopes (incl. inverted), Round (domes & cones), Doors (doors, windows, a gate, a trapdoor), Glass (see-through bricks for windows), and Furniture (chairs, tables, beds, sofas, lamps, a TV, a plant, and more).
• 🎨 Any colour — pick from swatches, a full colour picker, or eyedrop a colour off a brick you already placed.
• 🛠 Real building tools — select & box-select, drag to move, duplicate, rotate, paint, and a Holding area clipboard (cut / copy / paste with 3D thumbnails).
• 🏠 Build inside a roofed house — slice the roof away or lock to a floor height so your bricks land inside, not on top.
• 🎥 Fly-around camera — soar anywhere to find the perfect angle, and build while you fly.
• 🎮 Play mode — drop inside as a character, walk, jump, open doors and windows, and switch between first-person and a third-person minifigure.
• 🗄️ A Shelf for finished builds, with framed thumbnails — re-open any to keep editing.
• 💾 Share & back up — export a build (or your whole shelf) to a file, import it on another computer, or save a PNG snapshot.
• 🔊 Tactile sound — a hand-synthesized click on every brick.

---

🎮 How to play

Building basics

• Pick a brick from the left menu, then left-click the baseplate or another brick to place it. It snaps to the stud grid and rests on whatever's under the cursor.
• Pick a colour from the swatches or the colour picker (bottom-left).
• R rotates the brick 90°; Q / E lower / raise the placement height.

Camera & views

• Right-drag to orbit, scroll to zoom, middle-drag to pan.
• Top-bar views: Top, Side, Free (orbit), and 🎥 Fly.
• Fly lifts the camera off its orbit so you can roam anywhere: WASD/arrows move, drag to look, Space/Shift (or E/Q) up/down. Press Fly again or Esc to land. You can build while flying — a click places a brick, R rotates it, a press-drag turns the camera.

Tools

Build, Select, Paint (recolour a placed brick), Pick (eyedropper — I — copy a brick's colour), Delete.

Select, move & duplicate

Switch to Select (or press V), then:

• Click a brick to select; Shift-click to add/remove; drag a box to select several at once.
• Drag a brick to slide it to a new spot (grab any brick of a group to move the whole group).
• Duplicate (Ctrl+D), nudge with the arrow keys (and Q/E for height), Rotate the whole group 90° (R), Paint it, or Delete it — from the floating toolbar or the keyboard.

Holding area (cut / copy / paste)

A panel on the right keeps recent clips with little 3D thumbnails:

• Copy a selection (📋 or Ctrl+C), or just Delete bricks — deleted things land here too, so you can bring them back.
• Click a clip to paste it: a ghost follows the cursor — click stamps it (keep clicking to place more), R rotates, Q/E raise/lower, Esc finishes.

To break a structure in half, box-select one half and Delete it (now in the holding area), or Copy it and paste it elsewhere.

Build inside a roofed house

Trying to build inside a roofed house, bricks used to land on the roof. The Build inside a roof panel fixes that two ways:

• 👁 Show inside — hides the roof (and everything above the Level line) so you can see and click the interior; bricks then rest on the floor inside. Level ▲▼ reveals more or less as you build upward (one click = one brick course).
• 🔒 Lock floor — drops bricks straight onto the Level height, ignoring the roof — handy for an upper floor or ceiling.

The whole build comes back in Play, the 🎥 Fly camera, and saved images — the slice is only an editing view.

Baseplate

Pick the baseplate size (S 16×16, M 32×32, L 48×48) and colour in the left panel. Your build stays centred when you resize, and the size/colour are saved with the build.

Build modes (top-bar toggle)

• Creative — place bricks anywhere, including floating in mid-air.
• Connect — bricks must rest on the baseplate or another brick.

🎮 Play mode — explore your build as a character

Add a Door and/or Window (the Doors category) to your walls, then press ▶ Play to drop inside. To start somewhere specific, click 📍 Spawn and click the ground where you want to begin.

• WASD / arrows walk, mouse looks around, Space jumps.
• Scroll to zoom the view if it feels too close.
• Walls, furniture and bricks stop you; you step smoothly over small lips. To get onto a taller ledge, jump.
• Look at a door or window and press E (or click) to open/close it, then walk through.
• F toggles free-fly; C toggles first-person ↔ third-person minifigure.
• Esc (or Exit Play) returns to the editor.

The first time you enter Play, click once on the scene to capture the mouse for looking around (press Esc to release it).

Finish & display

✓ Complete names the build and puts it on the Shelf. Open the Shelf to Edit, ⬇ download (save that build to a .lego.json file), or Delete any saved build.

Share, back up & move builds (File menu)

• Export build to a .lego.json file, and Import one back (also by dragging the file onto the canvas).
• Export all builds saves your whole shelf to one brick-studio-shelf.json file. Import builds to shelf adds builds from such a file — or a single build — straight onto the shelf. Use these to move builds to another browser or computer.
• Save image — download a PNG of the current view.

⌨️ Keyboard shortcuts

Key	Action
B / V / G / X / I	Build / Select / Paint / Delete / Pick (eyedropper)
R	Rotate the brick (Build) or the selection (Select) 90°
E / Q	Raise / lower placement height (Build) or selection height (Select)
Arrows	Move the selection (Select tool)
Ctrl+D	Duplicate the selection
Ctrl+C	Copy the selection to the Holding area
Ctrl+Z	Undo
Del	Delete the selection
Esc	Clear selection / back to Build / land the fly camera / close the Shelf

---

💾 Where your builds live

Builds are saved in your browser's local storage on the machine you built them on — there's no account or server. That means they stay put for next time, but they don't follow you to another browser or computer on their own. To take them with you, use Export all builds (a backup file) and Import builds to shelf on the other machine.

---

🛠 Under the hood (for developers)

index.html        Markup + UI; loads three.js then the game scripts
styles.css        Clean, bright UI theme
vendor/           Bundled three.js r140 (three.min.js, OrbitControls, BufferGeometryUtils)
js/catalog.js     Brick / door / window / furniture definitions and 3D geometry (cached)
js/audio.js       Synthesized click / complete / duplicate / creak / remove sounds
js/store.js       Save / load completed builds (localStorage)
js/io.js          Export / import builds (.lego.json) and save PNG images
js/app.js         The app: scene, build grid, placement, selection, views, shelf, Play mode, UI
docs/             A dated build report for every version (see docs/README.md)

• Grid model — the world is a stud grid. Each brick records the cells it occupies (occupied) plus a per-column top layer (colTop), so new bricks rest on top of a stack in O(1). Placement raycasts the scene, snaps to the grid, and validates against overlap (and support, in Connect mode).
• Geometry — every brick shape is built once per (type, rotation) by merging a body + studs into one mesh, then cached and reused.
• Sound — the click is three layered WebAudio voices (a filtered noise tick, a bright blip, and a low thunk) with slight per-click pitch jitter.
• Shelf — completing a build snapshots a framed thumbnail to a PNG data URL and stores the brick list as JSON in local storage.
• Play mode — the same occupied grid that snaps bricks powers the character's collision: the player is a small cylinder tested against solid cells, stands on the highest surface beneath it, steps over small lips, and is stopped by walls and furniture. Open doors mark their cells walk-through.

The full version-by-version history lives in docs/.

---

🙏 Credits

Built with three.js r140 (MIT-licensed), bundled in vendor/ so the game runs fully offline. All brick geometry, UI, sound, and Play-mode physics are original code in this repo.

📄 License

MIT — do what you like, just keep the copyright notice. The bundled three.js is also MIT (© the Three.js Authors).

---

⚖️ A note on the name

Brick Studio is an independent, non-commercial hobby project. It is not affiliated with, sponsored by, or endorsed by the LEGO Group. "LEGO®" is a trademark of the LEGO Group, which does not own or review this project.