DEV Community

VOXEL_DRAFT
VOXEL_DRAFT

Posted on

Building a Browser-Based Voxel Editor with React Three Fiber

#react #threejs #webdev #gamedev

I have been building VoxelDraft, a voxel editor that runs entirely in the browser without an account or installation.

The editor supports block painting, layers, keyframe animation, GIF recording, local projects, and exports for OBJ/MTL, GLB, VOX, Minecraft Schematic, and Roblox RBXL. This post covers the architecture choices that kept those features manageable.

Keep edit data serializable

The editable model is an array of plain voxel records rather than a collection of Three.js objects:

type VoxelData = {
  position: [number, number, number]
  color: string
  layerId?: string
}
Enter fullscreen mode Exit fullscreen mode

That decision makes JSON backups, local persistence, undo/redo snapshots, sharing, and format conversion much simpler. Three.js objects are derived render state, not the source of truth.

Render repeated cubes with InstancedMesh

Creating one mesh and one React component per cube becomes expensive as a model grows. VoxelDraft uses THREE.InstancedMesh where geometry and material can be shared.

Each voxel contributes a transform matrix. Pointer intersections return the instanced mesh and instance ID, which can be mapped back to the editable voxel record.

There are tradeoffs. Per-voxel colors need instance colors or grouping by material, and changing a single block still requires carefully updating the instance buffers. The reduction in draw calls is worth that complexity.

Make exporters independent from UI

The format exporters accept voxel records and produce a Blob. The UI is only responsible for validation and triggering a download.

const blob = exportToVOX(voxels)
const url = URL.createObjectURL(blob)
Enter fullscreen mode Exit fullscreen mode

VOX, Minecraft Schematic, and RBXL are generated directly. For GLB, the app builds a temporary Three.js scene and sends it to GLTFExporter from three-stdlib.

Keeping binary generation separate from React event handlers makes exporters easier to test and reuse.

Move GIF encoding off the main thread

VoxelDraft records both animation output and modeling timelapses. GIF encoding can easily freeze the editor, so gif.js runs its encoder in a Web Worker.

With Vite, a tiny module resolves the worker asset:

import workerUrl from 'gif.js/dist/gif.worker.js?url'
export default workerUrl
Enter fullscreen mode Exit fullscreen mode

The editor captures canvas frames, sends them to the encoder, and displays progress. Resolution, frame count, and FPS need sensible limits because all three affect memory use.

Start local-first, but provide backups

Projects are stored in localStorage so the first editing session requires no backend or signup. This is convenient, but browser data can be cleared and storage is limited. The UI therefore offers JSON export for durable backups.

IndexedDB is the natural next step if projects and thumbnails outgrow localStorage.

Pre-render the pages around the editor

An interactive editor is not a great search landing page by itself. The surrounding English, Japanese, Chinese, and Spanish pages are pre-rendered with Vike. They include canonical URLs, hreflang, Open Graph metadata, and JSON-LD.

The broader lesson is that a browser tool has two surfaces: the client-heavy workspace and the indexable pages that explain why someone should open it.

What I would keep if I started again

  1. Plain serializable data as the source of truth.
  2. Instanced rendering for repeated geometry.
  3. Exporters isolated from the UI.
  4. Workers for CPU-heavy media encoding.
  5. A no-account path plus explicit backup tools.

You can try the current build at voxeldraft.com. I would especially appreciate feedback on the editor flow, animation tools, and export compatibility.

Top comments (0)