Petey the Architect

  1. Home
  2. Games
  3. Petey the Architect
Petey, Stan, Chard, Gene and the Shark Lady Boss standing together in the isometric office

Petey the Architect

The office from the Petey the Architect comic, in 3D. Walk Petey between the desks, say hi to his coworkers and hear them answer, throw his AGILE-ISH mug when the meeting runs long, and read the comics on every monitor.

Back to the shelf
Download (11 MB) Play in the browser

Sound starts on your first key press or tap. The download is a folder of plain files with three.js inside; serve it rather than opening index.html directly: python3 -m http.server inside the folder, then open localhost:8000.

Engine
three.js r183, vendored
Cast
Petey · Stan · Chard · Gene · Shark Lady
Characters
Rigged 3D, or comic cut-outs
Voices
31 lines, ElevenLabs
Download
11 MB zip
Status
Playable demo

What it is

A small isometric office you can walk around, staffed by the cast of Petey the Architect. Stan sprints between the desks with boundless energy, Chard holds the conference room, Gene guards his mainframe, and the Shark Lady Boss paces her glass office. Walk up to any of them and say hi, and they answer in their own voice: Stan wants to circle back, Chard says it depends, and Gene has ten ways to simplify it.

Petey carries his AGILE-ISH mug everywhere, and you can throw it. It arcs across the room, smashes into a coffee puddle, and everyone it hits has something to say about it. A fresh mug turns up in his hand a moment later. Every monitor and framed picture in the office opens a real strip from the comic, and you can browse all of them from there.

Two ways to see the cast

By default the characters are rigged 3D models that walk and run. Press M to switch to cut-outs of the comic art itself, which change pose as the characters talk, react and run.

Controls

KeyAction
W A S D or arrowsWalk
Click or tap the floorWalk there
ESay hi to whoever is closest, or read the nearest comic
F or SpaceThrow the mug
MSwitch between 3D characters and comic cut-outs
Click a monitor or pictureRead a comic (← → to browse, Esc to close)

On a phone, tap to walk and use the on-screen buttons for the mug, the view and the sound.

How it's put together

  • src/main.js — the office, characters, movement, the mug and the comic reader
  • src/audio.js — music, office ambience, voices and effects through Web Audio
  • src/lines.js — everything the cast says
  • assets/models/ — the rigged cast, generated in Meshy and cut down from about 40 MB to 1.5 MB each
  • assets/audio/ — the music bed, ambience and every voiced line, generated with ElevenLabs

There's no build step. The comic strips in the reader load from peteythearchitect.com; everything else is in the folder.

Running it yourself

ES modules need to be served over HTTP rather than opened from disk, so from the game folder:

python3 -m http.server 8000

Then open http://localhost:8000.