A browser-based 3D object builder and OBJ exporter powered by Three.js.
Build 3D scenes from primitives, import custom Three.js geometry, and export everything as a clean .obj file — no install, no build step, just open the HTML file. Examples were created using the prompt generator in the app with frontier models.
- Primitive shape builder — Box, Sphere, Cylinder, Torus, Cone, and Icosahedron with live parameter controls
- Transform panel — Adjust position, rotation, and scale per object
- Scene manager — Add multiple objects to a scene, select and edit them independently
- Color picker — Quick color swatches for material assignment
- Custom code import — Paste any Three.js snippet that assigns to a
resultvariable and it gets added to the scene - File import — Drag and drop a
.jsor.htmlfile to extract and run Three.js geometry code - AI prompt generator — Built-in prompt templates to generate Three.js geometry code with Claude or ChatGPT
- OBJ export — Hand-rolled exporter that merges all scene geometry into a single
.objfile, preserving transforms - Zero dependencies — Single self-contained HTML file; Three.js loaded from CDN
No installation required.
git clone https://github.com/your-username/mesh-forge.git
cd mesh-forge
open threejs-obj-exporter.html # or just double-click itThe tool runs entirely in your browser. No server needed.
- Open the Build tab in the left sidebar
- Click a shape button (Box, Sphere, Cylinder, Torus, Cone, Icosahedron)
- Adjust the shape parameters that appear below
- Pick a color from the swatches
- Click Add to Scene — the object appears in the Scene tab
Select any object in the Scene tab to reveal its transform controls. You can adjust position (X/Y/Z), rotation, and scale independently for each object.
Click the Import button in the top bar. Your code must assign a THREE.Group, THREE.Mesh, or THREE.BufferGeometry to a variable called result:
const result = new THREE.Group();
const bodyGeo = new THREE.CylinderGeometry(0.5, 0.6, 2, 16);
const bodyMat = new THREE.MeshPhongMaterial({ color: 0x888888 });
const body = new THREE.Mesh(bodyGeo, bodyMat);
result.add(body);
const topGeo = new THREE.SphereGeometry(0.5, 16, 16);
const topMat = new THREE.MeshPhongMaterial({ color: 0xaaaaaa });
const top = new THREE.Mesh(topGeo, topMat);
top.position.y = 1.25;
result.add(top);Code runs locally in your browser. Only the
THREEnamespace is in scope — no imports, no render loops, no scene setup.
Inside the Import modal, switch to the Prompt tab. Enter a subject (e.g. "rocket ship") and click Generate Prompt to get a ready-made prompt you can paste into Claude, ChatGPT, or any other AI assistant. The generated code can then be pasted straight back into the code import box.
Once you have objects in your scene, the Export OBJ button in the Scene panel becomes active. Click it to download model.obj. The exporter:
- Merges all scene objects into a single geometry
- Applies each object's position, rotation, and scale transforms
- Outputs standard Wavefront OBJ format compatible with Blender, Maya, Cinema 4D, and most 3D tools
| Variable type | Behaviour |
|---|---|
THREE.Group |
Each child mesh becomes a separate scene object |
THREE.Mesh |
Added directly as a single scene object |
THREE.BufferGeometry |
Auto-wrapped in a MeshPhongMaterial mesh |
Materials are preserved for the live preview but normalized to MeshPhongMaterial for OBJ export compatibility.
| Renderer | Three.js r128 via CDN |
| Fonts | JetBrains Mono, Syne (Google Fonts) |
| Export format | Wavefront OBJ (hand-rolled, no plugins) |
| Runtime | Vanilla JS — no bundler, no framework |
mesh-forge/
└── threejs-obj-exporter.html # The entire application (single file)
Works in any modern browser that supports WebGL. Tested in Chrome, Firefox, and Safari.
MIT — see LICENSE for details.