Three.js level creator

 Three.js Level Creator is a lightweight, browser-based 3D level editor — no install required.

  Design levels visually, walk around them in first-person, and export them as a simple JSON file

  ready to use in your own Three.js or React Three Fiber projects.

  ---

   FEATURES

  • Primitives & Models — Box, sphere, plane, cylinder, cone, torus, capsule, ring, wall, stairs, and

  GLTF model import

  • Transform Gizmos — Move, rotate and scale with snapping

  • Brush Painting — Scatter objects across the scene with randomized scale and rotation

  • Grouping — Nest objects into groups; parent-child hierarchy is preserved on export

  • Prefab Library — Save and reuse object groups across sessions

  • Quick Presets — 3 hotkey slots for your most-used prefabs

  • Tag & Layer System — Tag objects for use in game logic

  • Logic Objects — Spawn points and trigger volumes

  • Fly Camera — Right-click + WASD to navigate freely

  • First-Person Play Mode — Walk your level with collision before exporting

  • Undo / Redo — Full history (Ctrl+Z / Ctrl+Y)

  • Import & Export — Native JSON format; also imports Three.js Object3D.toJSON scenes

  ---

  SHORTCUTS

Right Mouse (hold) + WASD — Move camera / Fly navigation

  W / E / R   — Move / Rotate / Scale

  B           — Brush mode

  S           — Toggle snap

  P           — Play mode

  Ctrl+G      — Group selected

  Del         — Delete selected

  Escape      — Settings

  ---

  FOR DEVELOPERS

  Exported scenes are plain SceneObject[] JSON arrays. Drop the included LevelLoader component into

  any React Three Fiber project to render levels at runtime with zero editor dependencies.

Used in this game: