Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A practical browser-based voxel editor separates the voxel world from its 3D rendering: store occupied grid cells as application data, then render repeated cubes with Three.js InstancedMesh through React Three Fiber (R3F). R3F handles the React-to-Three.js scene and pointer-event plumbing; your code supplies the grid, hit-to-cell mapping, editing rules, and recovery UI.
Choose compatible React Three Fiber versions
React Three Fiber is a React renderer for Three.js: JSX elements such as <mesh> and <boxGeometry> create and update Three.js objects. The official introduction pairs R3F v8 with React 18 and R3F v9 with React 19. It identifies v10 as alpha and points readers to the stable v9 documentation; check the official introduction when selecting versions because release status can change.
A minimal scene has a <Canvas> as its rendering boundary and ordinary R3F components inside it. Components can own meshes, lights, camera configuration, and editor controls; pointer event props connect interactions to R3F’s raycaster-backed event system.
Recommended Free Tools
Keep the voxel grid separate from the scene
Represent the world in application data rather than treating Three.js objects or instance indices as the source of truth. A straightforward model uses integer coordinates (x, y, z) as stable cell locations and stores a palette ID, color, or material choice for each occupied cell. A coordinate key can be built consistently from those integers, for example x,y,z.
#1 Best Overall
- Build houses, castles, towers & creative block structures
- Explore colorful voxel worlds and discover new building locations
- Choose from dozens of blocks and materials to design your own creations
- Enjoy simple, relaxing sandbox building gameplay — no combat, no pressure
- Create unlimited worlds and build freely at your own pace
This data model is an architectural recommendation, not a requirement imposed by R3F or Three.js. Its advantage is that editing, saving, undo/redo, and lookup can operate on cells without depending on transient render state. Derive each rendered transform from its integer coordinate and a chosen cell size; for a unit grid, the cell at (x, y, z) is centered at that position.
Turn pointer hits into voxel edits
R3F pointer handlers receive raycast intersections. Three.js orders intersections nearest-first, so use the nearest relevant hit rather than assuming the first item in your own voxel data is the clicked object. For instanced meshes, the intersection includes an instanceId, which can be mapped back to the editor’s model. See the R3F event and rendering explanation and the Three.js Raycaster reference.
Rank #2
- Satisfying feel of idle crusher game.
- 100s of levels to enjoy bucket crusher.
- Realistic crushing of bucket in asmr game.
- Anyone can play pixel bucket crusher game.
- Rewards and gifts for players of idle bucket crush.
Selecting or removing a voxel
For a click on an existing voxel, resolve the hit to its grid coordinate and apply the selected action, such as selection or deletion, to the application model. Do not use the instance index as a permanent cell identity: if instances are reordered or rebuilt, indices may change. Keep an explicit mapping from instance index to coordinate and update it whenever the rendered instance list changes.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Adding a voxel beside a hit
A common placement method uses the hit point and face normal: determine the cell containing the surface hit, move one cell along the normal’s grid direction, then quantize the result to integer coordinates. This calculation is editor logic, not an automatic R3F feature. It works best when the voxel grid aligns with the rendered geometry and the normal is interpreted in the same coordinate space as the grid.
Rank #3
- ✓ Creative 3D block building gameplay
- ✓ Build houses, castles, cities, and villages
- ✓ Huge open-world sandbox environment
- ✓ Beautiful voxel-style graphics
- ✓ Explore forests, mountains, and landscapes
- Confirm that the hit belongs to a voxel or surface where placement is allowed.
- Convert the face direction into the intended adjacent grid-cell offset.
- Check whether the destination cell is already occupied before inserting it.
- Test boundary faces and rotated or transformed editor groups, where local and world coordinates can differ.
Raycasting has edge cases that affect editing accuracy. Three.js does not detect a mesh’s back faces unless its material is double-sided, and a ray that lands along a shared triangle edge can produce duplicate intersections. Decide whether the editor should ignore back faces, deduplicate near-identical hits, or constrain selection to the nearest valid result.
Render repeated cubes with InstancedMesh
Voxel cubes usually share geometry and material, making Three.js InstancedMesh a natural way to represent many repeated objects. Instead of creating a separate mesh object for every cube, provide one shared geometry/material and a transform for each instance. This can reduce draw calls compared with one mesh per voxel, though it does not establish a fixed performance ceiling for a particular editor or device.
Each instance must correspond to an application cell through a deliberate mapping. When an edit changes the instance transforms through Three.js instance setters, set instanceMatrix.needsUpdate = true so the changed matrix data is sent to the renderer. If per-instance colors change, set instanceColor.needsUpdate = true. The InstancedMesh documentation also notes that its bounding box is not computed automatically; recompute bounds when transformed instances make them necessary for culling or other spatial operations.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose per-mesh objects or instances deliberately
| Approach | Representation and editing | Picking considerations | Scale considerations |
|---|---|---|---|
| One mesh per voxel | Each voxel is a distinct object, which can make direct per-object updates and event handling easier. | A hit identifies the object directly; maintain a link from that object to its cell data. | Many separate objects can increase draw calls. Measure performance with representative worlds. |
| InstancedMesh | Repeated cubes share geometry and material; the editor maintains instance transforms and a cell-to-instance mapping. | Use the hit’s instanceId to find the associated cell; keep the mapping synchronized when instances are added, removed, or reordered. |
Instancing reduces draw calls for repeated geometry, but practical performance depends on the scene, device, and interaction pattern. |
R3F’s scaling-performance guidance recommends reusing geometry and materials and explains instancing. Its large-count examples illustrate the technique; they are not benchmark results or a promise that every editor can render a particular number of voxels. Profile realistic scenes before adding chunking, culling, or geometry merging.
Keep rendering failure from becoming a blank editor
R3F’s <Canvas> uses WebGLRenderer by default and supports renderer configuration. The Canvas API reference documents a fallback for unsupported WebGL and recommends guarding against context crashes, including cases associated with disabled GPUs or faulty drivers. Provide a visible alternative state so users can understand that the editor cannot render, rather than leaving an unexplained empty canvas.
Quick Recap
Build and verify the editor in layers
- Set up the scene: choose matching R3F and React major versions, then place camera, lighting, and an initial test mesh inside
<Canvas>. - Add a grid model: store occupied integer coordinates and their palette or material values independently from Three.js objects.
- Render cells: derive positions from coordinates, initially using separate meshes if that makes interaction easier to validate.
- Wire picking: attach pointer handlers, inspect the nearest useful intersection, and translate the hit to a model cell.
- Add placement rules: derive an adjacent cell from the hit location and face direction, quantize to the grid, and reject occupied destinations.
- Move to instancing when useful: maintain a stable coordinate-to-index and index-to-coordinate mapping, and flag changed instance attributes for update.
- Test failure and scale cases: verify face selection, shared-edge hits, empty worlds, additions and deletions, and the unsupported-WebGL fallback. Profile target devices before adopting more complex optimization.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
