| I'm currently building a game (https://nebulaser.io) that runs in the browser, and wanted to add some icons to the game that accurately resemble the 3D model I am using for the player's ship. I wanted something that could make either a flat or "cel-shaded" SVG from the original 3D file. Additionally, I wanted to be able to manually pose the model before taking a "snapshot". Looking into this, I found some options but a few themes emerged. They either: - Produced massive SVGs with bloated path counts. - Required installing desktop software (Blender pipelines, local utilities, etc.). - Were hidden behind paywalls or SaaS subscriptions. So, I built a 3D to SVG tool. Everything runs entirely client-side in the browser, and I don't plan on monetizing it (it's a fairly niche need after all). Some notes on how it works: - Three.js is used for the 3D arcball and to pre-simplify dense meshes via grid vertex welding. - All geometry calculations and the SVG path generation is handled on a Web Worker, so the main UI thread stays snappy when rendering a new pose. - Uses 2D polygon unions to merge mesh triangles into clean silhouettes, sealing hairline gaps between "cel-shaded" regions. The output size is reduced with Douglas-Peucker path simplification. - Outputs minimal markup using currentColor so the exported icon can be directly recolored via CSS. You can copy/paste the output or download an SVG. Hopefully it can benefit someone else! |