Convert STL to GLB — Show Your 3D Prints on the Web

Two options depending on how much control you need. Easiest: Google's model-viewer web component — one script tag and one HTML element, no JavaScript. Add <model-viewer src="model.glb" auto-rotate camera-controls shadow-intensity="1"> and you get 360-degree rotation, zoom, and built-in AR preview on mobile. More control: Three.js with GLTFLoader — you manage the scene, camera, lighting, and post-processing yourself. For a portfolio or Etsy listing, model-viewer is the right choice (5 minutes setup). For a custom product configurator, Three.js.

GLB files are typically 20-40% larger than Binary STL for the same geometry. The extra size comes from glTF's scene graph metadata, material definitions (even the default gray PBR material adds data), and JSON structure overhead. A 5 MB Binary STL becomes roughly 6-7 MB GLB. For ASCII STL, the GLB will actually be smaller — a 15 MB ASCII STL might become 7 MB GLB because binary encoding is more compact than text. If the GLB is too large for web delivery, apply Draco compression with gltf-transform: npx @gltf-transform/cli optimize model.glb compressed.glb --compress draco. This typically cuts geometry size by 60-80%, bringing a 7 MB GLB down to 2-3 MB.

Three things to fix, in order of impact: (1) Lighting — the single biggest difference. Add an environment map (HDRI) to your Three.js scene or use model-viewer's built-in environment-image attribute. Without proper lighting, PBR materials look dead. (2) Material — the converter adds a neutral gray PBR material (roughness 0.5, metallic 0.0). For filament-colored prints, change baseColorFactor to match your filament color. In Three.js: mesh.material.color.set("#2196F3") for blue PLA. In model-viewer, you'd need to edit the GLB first — use gltf.report (free, browser-based) to change the material color visually. (3) Shadow — add shadow-intensity="1" in model-viewer or a ground plane with shadow in Three.js. Shadows ground the model and make it look physical instead of floating.

Yes, and it's easier than you'd think. model-viewer supports AR natively on both platforms: Android uses Scene Viewer (opens a fullscreen AR view, native GLB support), iOS uses Quick Look (requires a USDZ file as fallback). For Android-only AR, just add the ar attribute to your model-viewer tag. For iOS too, you need a USDZ version — convert with Apple's Reality Converter (free Mac app) or the usdzconvert command-line tool. One gotcha: scale matters. If your original STL was in millimeters, the AR preview will show the model at correct real-world size. If it was in meters (some CAD tools), the AR model will be 1000x too large.

Not directly in Etsy (they don't support embedded 3D viewers in listings yet), but there are two workarounds: (1) Host the GLB on your own domain and link to it from your listing description — customers click the link and see the interactive 3D preview in their browser. (2) Use a service like Sketchfab (free tier allows 3D embeds with a link) — upload the GLB, get a shareable URL. For your own website/portfolio, you have full control: embed with model-viewer, add AR preview, and link from your Etsy shop. Sellers who add 3D previews to their product pages consistently report higher engagement — buyers spend more time and feel more confident about the purchase.

Each conversion handles one STL file. If you have a multi-part print model (e.g., 8 separate STL files for an articulated figure), you have two options: (1) Convert each STL separately, then combine the GLBs using gltf-transform: npx @gltf-transform/cli merge part1.glb part2.glb ... combined.glb. (2) Import all STLs into Blender, position them in the scene, and export as a single GLB. Option 2 is better if you want to add materials or adjust part positions. For a simple "show all parts together" preview, option 1 works.