Foundations

Start with the quick start, then use these foundations to understand the project it created.

The model

1. A project is its roots. vgai.project.json declares every mounted Three, Canvas, and DOM surface.
2. Source is the document. A first-party spatial world is TSX; React UI is JSX.
3. The world node is the entity. There is no separate ECS or mirror tree.
4. Behavior uses the world’s native idiom. R3F components call useFrame; Pixi components call useTick; an ingested game keeps its own loop.
5. Scenes compose; prefabs reuse. Replaceable compositions live under src/scenes/. A story-backed component under src/prefabs/ is independently placeable and reusable.
6. Libraries stay native. Use Three.js, Rapier, React, PixiJS, and Colyseus directly.
7. Simulation and presentation are explicit. Fixed simulation phases run in order while presentation can run at display rate.
8. Play mode is proof. A development game runs in the editor; exporting unlocks its standalone build.

Current lesson

• World code in action — write a source component with useFrame and see it run in Play mode.

Continue with Worlds and roots and The game loop and phases for the exact contracts.