Map Editor Overview
The ctx.gg map editor is a browser-based 3D editor for creating maps that run in the Mortar engine. It’s built with React, Three.js, and Yjs for real-time collaboration.
Features
Section titled “Features”- 3D viewport — Navigate with orbit controls, place and manipulate objects
- Transform tools — Move, rotate, and scale objects with gizmos
- Primitive shapes — Box, sphere, plane, cylinder
- Material editing — Set colors and basic material properties
- Physics properties — Mark objects as static or dynamic, set collision shapes
- Real-time collaboration — Multiple users can edit the same map simultaneously
- Auto-save — Changes are saved automatically to the API
Interface
Section titled “Interface”Toolbar
Section titled “Toolbar”The top toolbar provides tools for:
- Select — Click objects to select them
- Move / Rotate / Scale — Transform the selected object
- Add shapes — Insert primitive geometry
- Undo / Redo — Step through edit history
Properties Panel
Section titled “Properties Panel”The right panel shows properties of the selected object:
- Name and ID
- Transform (position, rotation, scale)
- Material settings
- Physics body configuration
Scene Tree
Section titled “Scene Tree”The left panel shows a hierarchical list of all entities in the scene. Click an entity to select it in the viewport.
Accessing the Editor
Section titled “Accessing the Editor”- Hosted: editor.ctx.gg
- Local: Clone the map-editor repo and run
npm run dev
Saving and Loading
Section titled “Saving and Loading”Maps are saved as JSON files following the Map Format spec. When signed in, maps are stored via the ctx.gg API and accessible from the desktop app.