The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
New case study: the landing page for REVAI, a concept AI sales platform.
The brief I gave myself was structural, not decorative: design a page where every section earns the next one. Hero makes one claim and gets out of the way. The value proposition comes before any feature gets named — because a feature nobody understands yet is just noise. Proof (testimonial, logos) sits right before the final ask, not scattered earlier where it does nothing.
Art direction followed the same logic — high contrast where the page needs to make a claim, quieter and more editorial where it needs to build trust. The layout isn't there to look good in isolation. It's there to move someone from "what is this" to "I trust this" in one scroll.
Love the colors dude! Hell of a work🔥
Busywork | SaaS landing page design
Busywork brings customer data, conversations, AI, and workflows together.
The design challenge was therefore less about showing everything the product can do and more about creating a clear narrative around why the product matters.
The result is a concept focused on progressive storytelling, helping visitors move from problem → product → capabilities → value → action.
Outstanding
A cinematic 3D fashion film created around a ZARA-inspired jacket, focusing on material detail, craftsmanship, and premium presentation.
The piece was built through 3D modeling, realistic material development, controlled studio lighting, cinematic camera animation, depth of field, and polished editing. Close-up shots reveal stitching, buttons, fabric texture, and construction before transitioning into wider hero shots of the garment.
The goal is to turn a simple product showcase into a brand-led visual experience—helping fashion brands communicate quality, craftsmanship, and premium positioning while giving the product stronger visual impact across campaigns, social media, e-commerce, and launches.
Independent commercial concept created to demonstrate my 3D product animation and fashion CGI workflow.
