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.
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!
nice! i dont know what to use it for yet myself but this is actually pretty awesome