A real game engine architecture for Three.js

A scene graph of GameObjects — not ECS

Threenity's world is a scene graph of GameObjects, each a plain Three.js Object3D carrying its transform and a list of attached components. It's the classic Unity-style model — deliberately not ECS — so behavior lives next to the object it drives, and the mental model stays simple: find an object in the hierarchy, look at its components, read its fields in the inspector.

Component lifecycle instead of boilerplate

Behavior is a TypeScript class extending Component, with a lifecycle the engine drives for you: onStart when the scene is up, onUpdate(ctx, dt) every frame with delta time, a fixed-timestep fixedUpdate for physics-rate logic, and onDestroy on teardown. The game loop, input plumbing, and scene wiring are the engine's job — that's the boilerplate elimination raw Three.js projects never quite escape.

• Components register through a ComponentRegistry; scenes reference them by type name.
• Schema-defined fields surface automatically in the editor's inspector.
• A typed event bus decouples components from each other.

Prefabs, hierarchy, inspector

Objects compose into prefabs you can instantiate at runtime with per-instance overrides. The visual editor gives you the Hierarchy, Inspector, Scene view, and Project panels to author scenes directly — the same runtime that powers your game powers the editor preview.

The renderer stays pure Three.js

Rendering goes through Three.js's WebGPURenderer, which runs on a WebGL2 backend by default and switches to WebGPU where available — shaders are authored once and work on both backends. Lights, cameras, materials, and post-processing are engine components, but underneath it's the Three.js you already know: no forked renderer, no proprietary formats between you and the scene graph.

Packs: plugins for everything beyond the core

Everything outside the core ships as packs — plugins your project enables per project.json. Physics (Rapier), UI, audio, character controllers, input rebinding, VFX, save/load, and more; disabled packs cost zero bytes in your build.

TypeScript + Vite, end to end

The whole engine is strict TypeScript on a Vite toolchain. Your components are ordinary modules with hot reload in dev; scenes and prefabs are versioned, merge-friendly JSON on disk. If you can build a web app, you can build a game.

Where to go next

• New to Three.js gamedev? Make a 3D game with Three.js, step by step.
• See the visual editor for Three.js scenes.
• Getting started with Threenity — setup at a glance.
• Or back to the Threenity homepage for the full capability list.