Three.js Level Creator — First Release

I just released Three.js Level Creator, a lightweight browser-based 3D level editor designed for developers using Three.js or React Three Fiber.

The goal was simple: create a tool that lets you build levels visually in the browser, test them quickly, and export them as clean JSON ready to drop into your project.

No install. No heavy engine. Just open the editor and start building.

What you can do

Build levels visually

You can place primitives, import models, group objects, and organize your scene directly in the editor.

Supported primitives include:

• Box

• Sphere

• Plane

• Cylinder

• Cone

• Torus

• Capsule

• Ring

• Walls

• Stairs

You can also import GLTF models.

Transform objects easily

Standard transform controls:

W / E / R — Move / Rotate / Scale

Objects support snapping and can be organized into parent-child hierarchies using groups.

Brush painting

Scatter objects across the scene using a brush tool.

The brush supports random scale and rotation, making it useful for quickly populating environments with trees, rocks, or props.

Prefab system

You can save groups of objects as prefabs and reuse them across sessions.

The editor also includes 3 quick preset slots for fast placement of your most used objects.

Tags and logic objects

Objects can be tagged and assigned to layers.

You can also place logic objects like:

• Spawn points

• Trigger volumes

These can be used by your game logic after export.

Play your level before exporting

The editor includes a first-person play mode with collision.

You can walk around your level to test scale and layout before exporting.

Camera controls:

• Hold Right Mouse Button to control the camera

• Use WASD to move while holding the right mouse button

Shortcuts

W / E / R — Move / Rotate / Scale
B — Brush mode
S — Toggle snap
P — Play mode
Ctrl+G — Group selected
Del — Delete selected
Escape — Settings

Camera navigation:

Hold Right Mouse Button + WASD to move the camera.

Export format

Scenes export as a simple JSON array of SceneObject objects.

This keeps the format easy to parse and engine-agnostic.

For React Three Fiber projects, you can use the included LevelLoader component to render exported levels with zero editor dependencies.

Why I built this

Most level editors are tied to full game engines.

I wanted something minimal and fast that works directly with Three.js projects, especially for web games and prototypes.

Open the editor, build the level, export JSON, and you're done.