Skip to content

lakshaybhushan/vecto3d

Repository files navigation

Vecto3d

GithubBanner

A super simple tool to convert your simple SVGs, mostly logos, to 3D models. Check it out at https://vecto3d.xyz

But why?

So, one day I was bored and decided to open Blender. I loaded up a logo that I designed in Figma (check it out here) and then started playing around with the different tools to make it 3D. I knew that you can convert any SVG to 3D models in Blender, but I wanted to make it easier and faster. So I checked out the web and found a few tools, but they were either paid or lacked a 3D model export feature. So I thought, why not make a tool that can do this easily and quickly?

Project Structure

vecto3d/
├── public/                 # Static assets
├── app/                    # Next.js App Router
│   └──edit/                # SVG editor route
├── components/             # React components
│   ├── ui/                 # UI components
│   └── controls/           # Control panel components
├── lib/                    # Libraries and utilities
├── hooks/                  # Custom React hooks
├── styles/                 # Styles CSS
└── ...config files         # e.g., next.config.ts, tsconfig.json, package.json...

What can you do with this?

  • Convert your simple SVGs to 3D models.
  • Multiple customization options, which include Geometry, Materials, Environment, and Background, with a simple, intuitive UI.
  • Customize your 3D models with your desired thickness or bevels.
  • Experiment with different colors and materials (Glass, Metal, Plastic, etc.).
  • Preview your 3D models in different environments and also add your own custom environment using any image you want.
  • Download 3D models in STL, GLB, and GLTF formats.
  • Export images in PNG in HD, 2K, and 4K quality.
  • Change the background color of the preview panel to see the 3D model in different colors.

Vibe Mode

Since vibe coding is currently in trend, I thought, why not add a "vibe mode" to this app? So I added a button to toggle this mode. This mode allows you to add a dreamy effect with bloom and soft shadows to your preview panel.

Acknowledgements

I've used multiple tools to make this app, especially V0.dev for quick prototyping, shadcn/ui, and Magic UI for the amazing UI components.

License & Contributing

This project uses the MIT License. See the LICENSE file for details. For contributing, please read the CONTRIBUTING.md file.

Sponsors

This project is proudly supported by:

Vercel OSS Program

Contact

You can contact me on X (Twitter) I'll be happy to help you :)