Single HTML 3D Blender "A fully

Single HTML 3D Blender

"A fully functional 3D modeling app that runs in your browser, built in one HTML file"

I built a 3D modeling application that works like Blender, except it lives in a single HTML file. Open it in any browser and you get a viewport, tools, an outliner, properties panel, and keyboard shortcuts. No server, no build step, no dependencies.

The idea came from wanting to understand how 3D software actually works under the hood. Not just the rendering, but the whole interface: how modes switch, how tools interact with meshes, how the outliner tracks objects.

WHAT CAN IT DO:

The app supports three modes: Object Mode, Edit Mode, and Sculpt Mode. Each mode has its own set of tools and behavior.

In Object Mode, you can select, move, rotate, and scale objects. Edit Mode lets you work at the vertex, edge, and face level with extrude, subdivide, and knife tools. Sculpt Mode has brushes like Draw, Clay, Smooth, Grab, and Inflate with adjustable radius and strength.

The viewport renders with proper depth sorting, lighting, and a grid. You can orbit, pan, and zoom with mouse controls. The outliner shows your scene hierarchy. The properties panel lets you tweak transform values, materials, and brush settings.

THE TECHNICAL SIDE:

Everything is in one file. The HTML sets up the layout, the CSS handles the dark theme and panel system, and the JavaScript does all the 3D math and rendering.

I wrote custom vector math for rotations, projections, and normals. The mesh system tracks vertices, edges, faces, and their neighbors. Subdivision works by splitting each quad into four smaller quads. The camera uses orbit controls with perspective and orthographic projection.

The UI is built with CSS Grid and flexbox. Panels, toolbars, and menus all update based on the current mode. Keyboard shortcuts like G, R, S for transform and Tab for mode switching make it feel like the real thing.

The full source is in the HTML file. Open it in your browser and start clicking around. Everything works without an internet connection.

WHAT I LEARNED:

Building this taught me how much work goes into even a simple 3D editor. The math for camera projection and mesh normals is one thing, but wiring up the UI so tools, modes, and panels all talk to each other takes real effort.

If you have questions about the code or want to collaborate on something similar, message me here on Contra.

Built by Samin Sami | Developer & 3D Experimentation