ThreeMesh

ThreeMesh: A Free Browser-Based 3D Modeler With Serious Tools

The best creative tools make the distance between an idea and a first draft feel almost nonexistent. Traditional 3D software often puts an installer, account, subscription decision, cloud workspace, or unfamiliar parametric system in that gap before the first line can be drawn.

ThreeMesh began with a simpler proposition: open a browser and start modeling.

Digital Nature designed and developed ThreeMesh as a free online 3D modeler with no installer and no account requirement. It uses the direct modeling grammar that made push/pull workflows approachable—draw edges, close a face, pull it into a volume, group related geometry, and keep building—while storing work locally and providing free export to practical open formats.

The result is useful for architectural massing, room concepts, furniture and woodworking projects, hard-surface models for 3D printing, classroom work, and any early-stage design that benefits from real dimensions without the overhead of a desktop CAD package.

That accessible surface sits on top of a substantial technical system. ThreeMesh includes its own serializable geometry model, topology-aware drawing pipeline, face detection, precision inference engine, solid operations, nested component architecture, edit-in-place contexts, file validation, IndexedDB autosave, and performance-conscious Three.js renderer.

Building a Browser 3D Modeling Application With Next.js, React, and Three.js

ThreeMesh uses a modern TypeScript stack, but the architecture is deliberately split according to responsibility:

• Next.js 16 and React 19 provide the application shell, editor interface, marketing pages, routing, and static production output.
• TypeScript defines the geometry graph, tool contracts, renderer interfaces, persisted file format, and application state.
• Three.js owns WebGL rendering, cameras, lighting, materials, triangulated meshes, selection overlays, clipping planes, and export-ready scene construction.
• Zustand manages the scene model, editor state, dialogs, tools, selection, and undo history without turning every pointer movement into a React render.
• three-bvh-csg performs union, subtraction, trim, and intersection operations on closed solids.
• Tailwind CSS and a custom editor stylesheet support both the desktop-style modeling interface and responsive search landing pages.

We did not use React Three Fiber for the viewport. A modeling editor has a long-lived renderer, high-frequency pointer tools, imperative camera controls, temporary inference graphics, and carefully managed GPU resources. Direct Three.js gave the rendering layer explicit control over when geometry is built, reused, restyled, or disposed, while React remained focused on interface state.

The application is statically exported. Once deployed, the editor can run as a browser-native client without an application server in the modeling loop. That supports the product promise: a user can reach a real 3D workspace through a URL and begin immediately.

Designing a Serializable Geometry and Topology Model

A conventional Three.js scene graph is excellent for rendering, but it is not enough to behave like a modeling kernel. ThreeMesh needs to understand that two faces share an edge, a loop encloses a region, a new vertex splits existing geometry, and multiple component instances can refer to one editable definition.

We built a separate domain model around immutable, serializable records:

• Vertices store stable IDs and 3D coordinates.
• Edges reference pairs of vertices and carry visibility, smoothing, curve, and tag data.
• Faces reference ordered vertex loops, surface normals, materials, tags, orientation, and optional inner holes.
• Component definitions own definition-local vertices, edges, faces, and nested instances.
• Component instances reference definitions through 4×4 transforms.
• Materials, textures, tags, guides, annotations, section planes, saved scenes, drawing axes, and unit settings live alongside the geometry.

Geometry functions return a new model instead of mutating a shared render object. This makes scene state predictable, keeps native files understandable, and gives undo and redo a reliable snapshot boundary. The scene store maintains a bounded history while the renderer observes model identity changes and updates only the visual resources affected by an operation.

Making Drawn Geometry Connect Correctly

Drawing a rectangle on an empty plane is easy. Drawing one across existing edges and faces is where a modeler starts to become a geometry system.

ThreeMesh routes line, rectangle, circle, polygon, arc, and freehand results through shared commit operations. The pipeline welds nearly coincident points, splits existing edges wherever a new vertex lands, reuses duplicate edges, and runs face detection after new segments are added. When a closed loop crosses an existing face, the old surface is subdivided instead of leaving overlapping geometry behind.

Face detection walks connected edges, identifies planar cycles, verifies polygon orientation, and creates the appropriate regions. Closed loops drawn entirely inside another face become islands: the inner loop receives its own face while the surrounding face records a hole. That hole data is respected by selection, rendering, triangulation, push/pull, and file export rather than being treated as a visual mask.

This integration work is what makes direct modeling feel continuous. A line is not just a line segment on screen; it can alter the topology of everything it touches.

Engineering SketchUp-Style Inference Snapping

Inference is the quiet system that makes spatial drawing feel precise. Without it, users have to type coordinates for every point or accept geometry that only looks aligned from the current camera angle.

ThreeMesh computes snap candidates from the cursor's screen ray and ranks them using a predictable priority:

1. Endpoints
2. Midpoints
3. Intersections
4. Points on edges
5. Parallel and perpendicular inferences
6. Points on faces
7. Axis and remembered-point inferences

The engine also supports axis locking, drawing-plane constraints, guide points and guide lines, custom model axes, and measurement input. A visual inference renderer shows candidate points, coloured axes, extension lines, and labels without committing temporary helpers to the scene model.

Precision is evaluated in screen space where appropriate. An endpoint should remain easy to acquire whether it is one metre or one kilometre from the camera, so selection thresholds are based on pixels rather than a fixed world-space radius. Face tests still operate against the actual 3D ray and polygon, including hole loops that allow the ray to pass through an opening.

Keeping Inference Fast as Models Grow

Naively scanning every point, edge, face, and nested component on every pointer move would make the editor progressively slower. ThreeMesh builds identity-keyed inference caches for each immutable model snapshot and combines several acceleration strategies:

• Uniform spatial hash grids for nearby vertices and edges
• Constant-time maps for existing vertex pairs and face cycles
• Screen-space buckets for cursor-near snap candidates
• Bounding boxes for face ray pre-filtering
• Bounding spheres for component-instance selection
• Cached groups of unique edge directions for parallel inference
• Bounded candidate sets that fall back to exact geometric verification

The indexes reduce search work, but the final candidate still passes the same precise checks as the unindexed path. That balance matters in a design tool: an optimization cannot be allowed to change which point the user acquires.

Implementing Push/Pull, Offset, Follow Me, and Solid Tools

ThreeMesh is built around direct manipulation. The application includes line and shape tools together with push/pull, offset, move, rotate, scale, Follow Me, paint, erase, tape measure, protractor, dimensions, text, 3D text, section planes, and camera navigation.

Push/Pull With Real Topological Output

The push/pull tool extrudes a selected face along its normal. It creates a new cap, builds side faces for every boundary segment, preserves materials and tags, and removes an old cap when extending an existing volume would otherwise leave an internal face.

Curved boundaries carry smoothing information into the extrusion. A pushed circle creates visually continuous walls while deliberate corners remain hard. Faces with holes receive a complete second set of inner walls, allowing rings, window openings, and other cut-through profiles to extrude as actual topology.

The tool also supports typed dimensions through the value control box. Users can sketch by eye, then enter an exact distance without switching to a separate property workflow.

Follow Me Sweeps Along Connected Paths

Follow Me takes a profile face and sweeps it along a selected chain of edges. ThreeMesh first orders the edges into a valid non-branching path, chooses the path end nearest the profile, and rotates the section perpendicular to the initial direction.

At each corner, the sweep generates a mitered cross-section using the incoming and outgoing segment directions. Open paths receive end caps; closed paths weld the final ring to the first. Because the operation creates native faces and edges, the result can immediately participate in selection, grouping, export, and later geometry operations.

Boolean Operations With a Model-Aware Return Path

Union, subtract, trim, and intersect use three-bvh-csg, but the operation cannot end with a render-only triangle buffer. ThreeMesh first verifies that selected component definitions are closed manifolds, triangulates them in world space, and runs the requested CSG evaluation.

The result is then converted back into the application's own geometry model. Vertices are spatially welded, degenerate triangles are rejected, edge relationships are reconstructed, T-junctions are healed, and coplanar triangle diagonals are softened so they do not clutter the finished surface. The returned object is once again editable ThreeMesh geometry rather than an opaque Three.js mesh.

Solid code is lazy-loaded only when the user invokes a boolean tool, keeping that specialized dependency off the editor's eager JavaScript path.

Building Groups, Components, and Edit-in-Place Workflows

Large models need more than loose faces. ThreeMesh follows a definition-and-instance architecture familiar from established spatial modelers.

A group is represented as a definition flagged for group semantics. A component uses the same underlying structure but is explicitly reusable across many instances, each with its own transform and name. Editing a component definition updates every instance that references it.

Definitions can contain nested instances. Opening one for editing pushes its ID onto an edit-context path. Tools then operate against that definition's local geometry, with world and local coordinates converted at the boundary. The active context renders normally, surrounding geometry dims, and selection stays scoped to the object being edited.

The outliner exposes the same hierarchy for navigation and organization. Users can rename, lock, hide, duplicate, explode, or reorganize instances without flattening the underlying model.

Separating the Editor State From the Three.js Renderer

The viewport is organized around three cooperating systems:

• A camera controller manages perspective and orthographic views, orbit, pan, zoom, walk, look-around, position-camera tools, view transitions, and touch gestures.
• A scene synchronizer converts the current domain model into renderable faces, edge batches, component hierarchies, annotations, guides, and section-plane widgets.
• A viewport renderer owns the WebGL context, scene, cameras, lights, shadows, horizon background, helper axes, resize handling, and render scheduling.

The renderer is demand-driven. A lightweight animation frame loop remains available for input and camera movement, but it skips the expensive WebGL draw when neither the camera nor scene has changed.

Reusing Geometry Instead of Rebuilding the World

Scene synchronization compares record and collection identities from the immutable model. A material change can restyle a face without regenerating its positions. A selection change updates highlight materials and an edge overlay without rebuilding the normal edge batch. Component definitions cache shared face and edge geometry so repeated instances do not produce repeated GPU buffers.

Faces are triangulated into buffer geometry with planar UV coordinates, while front and back meshes share the same geometry resource. Materials and decoded textures are cached and reference-managed. When geometry, textures, or definitions really do become obsolete, the synchronizer explicitly disposes their GPU resources.

This lifecycle work prevents a common failure mode in long-running WebGL editors: memory use rising every time a user edits, undoes, changes a material, or opens another file.

Rendering a Clear Modeling Viewport

The visual system includes adaptive light and dark palettes, an analytic sky-to-ground horizon shader, configurable sun and fog, shadows, axes, ground plane, monochrome and X-ray styles, hidden geometry, softened edges, and section cuts.

Section planes use Three.js local clipping across the live material set. Dimensions and leader text combine 3D anchors with a screen-space label layer, keeping text legible while the camera moves. Saved scenes can restore camera, style, tag visibility, and active section state, with compact thumbnails generated from the viewport.

The result is a renderer designed for reading form and topology, not just producing a decorative 3D image.

Designing Desktop and Touch Input Around Tools

Each editor tool implements a shared lifecycle for activation, pointer events, keyboard handling, temporary previews, inference state, cancellation, and commit. A central tool manager routes input while preserving camera navigation across tools.

Mouse users can orbit with the middle button, pan with a modifier, zoom with the wheel, and rely on familiar single-key shortcuts. Numeric input is parsed as measurements, including model-aware imperial and metric units.

Touch needed a different interaction model. ThreeMesh delays a one-finger tool press until it can distinguish a tap from a drag or two-finger gesture. Two fingers pan and pinch together, while a stationary long press opens the context menu. Pointer events provide one routing layer for mouse, pen, and touch without pretending those devices behave identically.

Creating a Local-First 3D Modeling Workflow

No account is required because the editor does not depend on a remote project database. The current model autosaves to IndexedDB on the user's device.

We avoided localStorage for this job. Synchronous writes can interrupt pointer tools, and its typical storage ceiling is too restrictive for models containing component hierarchies, materials, textures, scenes, and thumbnails. The IndexedDB adapter debounces writes off the hot interaction path and flushes pending work when the page becomes hidden or unloads.

Every autosave passes through the same structural validation used by file import. If a model contains invalid coordinates, broken references, cyclic definitions, or another integrity problem, ThreeMesh retains the last valid save instead of replacing it with corrupted data. Storage failures are surfaced in the interface, and an earlier local-storage format can migrate into the current database automatically.

Local-first is a product decision as much as a storage technique. Users can experiment without creating an identity, and their model is not uploaded simply because they opened the editor.

Importing and Exporting Practical 3D File Formats

ThreeMesh provides a versioned native JSON format that stores editable topology, component relationships, materials, tags, guides, annotations, scenes, axes, and unit settings. The deserializer validates finite coordinates, required references, transforms, face loops, definition relationships, and version compatibility before replacing the live model.

For wider workflows, the application can:

• Import STL, OBJ, glTF, and GLB meshes as component definitions
• Export binary STL for slicers and 3D printing
• Export OBJ for broad mesh compatibility
• Export GLB with transforms, materials, and supported textures
• Export native ThreeMesh JSON for continued editing
• Export a PNG snapshot of the current viewport

Loaders and exporters are dynamically imported when requested. Export does not scrape the live viewport scene, where helpers, selection highlights, and temporary tool graphics also exist. Instead, a clean Three.js group is rebuilt from the domain model, recursively applying component transforms and visible-tag rules before handing it to the selected exporter.

That separation ensures the exported asset represents the model rather than the editor used to create it.

Building the Interface of a Full 3D Application

ThreeMesh has the shape of desktop software—menu bar, toolbar, viewport, status bar, value control box, right-side trays, dialogs, keyboard shortcuts, and context menus—but it still has to work as a responsive web product.

The interface includes panels for entity information, materials, components, outliner hierarchy, tags, scenes, styles, and edge softening. Selection-sensitive controls expose useful properties without making the viewport compete with permanent forms. A welcome dialog helps new users enter the application while returning users can resume their locally stored scene.

The design language keeps the geometry visually dominant. Dark interface surfaces frame the workspace, blue communicates active tools and selection, and compact icon rails preserve viewport width. The public marketing experience uses the same product identity while presenting benefits, comparisons, export details, and common questions in conventional semantic HTML.

Creating an SEO Strategy for a WebGL Modeling Tool

A browser CAD application cannot expect a WebGL canvas to explain itself to a search engine. ThreeMesh pairs the editor with statically generated, content-led landing pages focused on distinct search intent:

• Free browser 3D modeler and online 3D modeling
• A free SketchUp-style and SketchUp Free alternative
• Browser-based STL, OBJ, and GLB export
• No-install, no-account, local-first CAD workflows

Each page has a dedicated title, description, canonical URL, Open Graph and Twitter metadata, internal links, accessible headings, and direct calls to open the editor. The site also publishes a sitemap and robots policy.

Structured data describes ThreeMesh as a free SoftwareApplication in the 3D design category, including its browser requirements, file formats, and major features. FAQ schema supports real user questions about pricing, accounts, privacy, export, and how the product compares with other online modeling tools.

The dedicated ThreeMesh Open Graph artwork used as the primary image in this case study creates a consistent search and social preview: the product name, “Free browser 3D modeler” positioning, browser UI, and core export promise are legible before someone visits the site.

The Result

ThreeMesh turns a modern browser into a capable direct-modeling workspace:

• A custom topology model for vertices, edges, faces, holes, groups, components, and nested instances
• SketchUp-style push/pull modeling with inference snapping, axis locks, typed measurements, and edit-in-place contexts
• Offset, Follow Me sweeps, solid boolean tools, materials, tags, scenes, annotations, and section cuts
• An optimized Three.js renderer with shared component geometry, selective synchronization, on-demand drawing, and explicit GPU cleanup
• Local-first IndexedDB autosave with validation and no required account
• Versioned native files plus STL, OBJ, GLB, JSON, and PNG export
• A statically deployed Next.js architecture with search landing pages, structured data, and a zero-install route into the editor

ThreeMesh demonstrates that a web application can combine the approachability of an online tool with the geometry, precision, organization, and interoperability expected from serious 3D software. The browser is not a reduced companion to the product—it is the product.

If you are planning a browser-based design tool, interactive product editor, CAD workflow, or other technically demanding WebGL application, explore our Three.js and interactive 3D development services, learn about our web application development work, or start a project with Digital Nature.