GLB Composer

A static, client-side web app for arranging several .glb models relative to each other and exporting the arrangement as a single .glb. Built for contributors who assemble a composite object (e.g. a landmark made of props) and send the result to the maintainer. Nothing is uploaded: there is no backend.

Stack: Vite + vanilla JS, with Three.js as the only runtime dependency.

Run

npm install
npm run dev       # dev server
npm run build     # static site in dist/
npm run preview   # serve dist/ locally

Use

• Add .glb (or self-contained .gltf) files with the button or by dragging them onto the viewport. Each load creates an independent instance at the origin.
• Click an object to select it. W / E / R switch move / rotate / scale; F frames, Delete removes, Ctrl/Cmd+D duplicates, Ctrl/Cmd+Z and Shift+Ctrl/Cmd+Z undo/redo.
• A translucent ground plane marks y = 0 (toggleable). The selected object gets a ring on the ground and, if it floats, a drop line. Objects that are not touching the ground, or anything resting on it, get a ⚠ in the list and a warning in the export panel.
• The right panel has numeric position/rotation/scale, snapping, "drop to ground", an optional 18×17×18 reference box (never exported) and the export controls.
• Export GLB bakes all visible objects into one scene, with its base on y = 0 and centred on x = 0, z = 0 (Y-up, single root scene, no cameras/lights/helpers). Skinned or animated models are flattened to their static pose. A warning appears above ~20 MB.

Limits: Draco-compressed models are not supported (Meshopt is). External .gltf buffers/textures are not resolved, so only self-contained .gltf files work.

Configure

Edit src/config.js: the contact text shown in the privacy notice (CONTACT), the reference box size, the size-warning threshold and the default export filename.

Deploy

npm run build produces dist/, which uses relative asset paths (base: './'), so it works on any static host or subpath (GitHub Pages project sites, Netlify, Cloudflare Pages).

GitHub Pages

.github/workflows/deploy.yml builds and publishes the site on every push to main.

1. Push this repo to GitHub (default branch main).
2. In the repo, go to Settings → Pages and set Source to GitHub Actions.
3. Push to main (or run the workflow from the Actions tab). The site appears at https://<user>.github.io/<repo>/.

Don't open dist/index.html straight from disk: browsers block module scripts on file://. Use npm run preview instead.