/building · September 2026

3D Enigma machine

three.js · mechanics · cryptography

I watched some online videos about Enigma machines, but was still a bit confused on how the internal mechanisms actually worked. I used GPT Astra to build the 3D models and wiring diagrams with Three.js and React.

The reconstructed Enigma M3 with its covers removed to show the keyboard, lamps, rotor bank, and plugboard

I built an interactive 3D model that lets you operate an Enigma machine and look through its internal components. You can run through an interactive tour where you encrypt a short message, follow its transmission, and decrypt it on another machine.

What is an Enigma machine?#

Enigma is a family of electromechanical cipher machines invented by Arthur Scherbius in 1918, which are mostly famous due to their adoption by Nazi Germany for securing their top-secret communications. A keypress advances the rotors, closes a circuit through their wiring, and lights a letter on the lamp panel. Changing the rotor positions changes the substitution on the next press. The main model on the page follows the naval M3, which has three rotors selected from eight possible rotors, a plugboard, and reflector B. Crypto Museum's M3 reference was the primary source for documentation and specific operation details.

The Germans considered their code to be unbreakable, but the ingenuity of Polish, British, and French cryptanalysts allowed them to read a considerable amount of encrypted traffic, and give the Allies a decisive advantage in World War II.

Building the parts#

I used a combination of reference photographs and temporary internal tools for adjusting dimensions, in order to produce a physically-accurate machine which also functions as a real Enigma device. Even with frontier LLMs like GPT Astra, it is not possible to "one shot" this design. Even trying to get an individual part like the rotor to look and work exactly as expected is a multi-step series of prompts and refinements. The trick here is to have much higher standards than a "frontier LLM" does.

A quick overview of the machine separating into assemblies.

Separating a rotor's settings#

A rotor has a fixed wiring permutation, a rotational position, and an adjustable alphabet ring. I started with a robust data model that would allow me to test state transitions and cipher output, and used the vast collection of reference material available online to validate the encryption and decryption operations.

The highlighted path connects the selected contacts through the wiring.
Rotor III separated into its alphabet ring, internal wires, and contact plate
The rotor inspection view exposes all 26 connections.
Three installed rotor positions beside a wooden box holding the spare naval rotors
The order lesson moves the same eight rotor models between the machine and their storage box.

Synchronizing a keypress and its circuit#

I separated the implementation into geometry, mechanical state, cipher rules, and an electrical connection graph. The animation and circuit consume the same contact state, and the terminal positions supply the endpoints for the visible signal path.

An expanded circuit with the rotor bank, battery, key switches, lamps, and visible connections
The circuit lesson follows a complete path back to the battery, including the returning letter's unpressed key switch.

Explaining the double step#

The three wheels are advanced by a rotor and pawl assembly, where each stroke moves the right wheel. The collars and their notches determine whether the neighboring pawls can engage, so the left pawl can also carry the middle wheel through its notch. This produces the middle rotor's double step, which I finally understood after creating this 3D model for myself and pressing a key hundreds of times.

Retaining rollers were also a key part of the motion, since they settle into the next position while the drive pawls return. It's been an ongoing challenge to get these rollers to accurately match a real Enigma machine, since they don't seem to be documented in isolation anywhere.

The exposed rotor stepping mechanism, with the pawls and retaining hardware visible behind the keyboard
The stepping lessons isolate the moving parts so a keypress can be followed through the mechanism.

Moving the camera and teaching one action at a time#

The tour keeps one Three.js scene alive across its chapter routes. React handles the instructions and controls, while the scene is responsible for continuous motion and sending back updates when readable state changes.

Some of the most frustrating animation problems came from layout. Explanation cards appearing or disappearing changed the camera's screen offset, producing jolts during teardown. Reserving stable card space (i.e. precomputing space for desktop and mobile) was a big unlock toward making that transition more continuous, but there are a lot of remaining low-hanging fruit that I'm working on to really refine the experience on all devices.

Further models and references#

The model collection is an in-progress collection of other Enigma machines. Those comparison models have different levels of mechanical and cipher reconstruction, and my main focus has been on the working M3 tour. I've also been trying to write a comprehensive history page which properly credits all the brilliant people who contributed to the Enigma project.

References#

This project is in eternal debt to:

cd /building