Vite-3

Vite-3 is a CLI tool that scaffolds production-ready Vite + Three.js projects with zero configuration. Choose your language, pick a template, and start building 3D experiences instantly.

✨ Features

| Feature | Description | |---------|-------------| | 🚀 Lightning Fast | Powered by Vite for instant HMR and blazing fast builds | | 📦 Zero Config | Pre-configured project setup, just run and code | | 🎨 Multiple Templates | Basic geometry or GLSL shader projects | | 📘 TypeScript Ready | Full TypeScript support with proper types | | 🎨 Tailwind CSS v4 | Optional modern CSS framework integration | | 🔮 GLSL Support | Built-in shader support via vite-plugin-glsl |

📦 Installation

# Install globally
npm install -g vite-3

# Or use directly with npx
npx vite-3

🚀 Quick Start

vite3

You'll be prompted to configure your project:

? Project name: my-3d-app
? Select a project type: basic / shaders
? Select a variant: JavaScript / TypeScript
? Do you want to include Tailwind CSS? Yes / No

Then start developing:

cd my-3d-app
npm run dev

📁 Project Structure

my-3d-app/
├── public/                 # Static assets
├── src/
│   ├── main.js|ts          # Three.js entry point
│   ├── styles.css          # Styles (with Tailwind if selected)
│   ├── shaders/            # GLSL files (shader template only)
│   │   ├── vertex.glsl
│   │   └── fragment.glsl
│   └── glsl.d.ts           # GLSL type definitions (TypeScript only)
├── index.html              # HTML entry point
├── package.json
├── vite.config.js
├── tsconfig.json           # TypeScript only
└── .gitignore

📜 Scripts

| Command | Description | |---------|-------------| | npm run dev | Start development server | | npm run build | Build for production | | npm run preview | Preview production build |

🎯 Templates

Basic

A simple Three.js scene with:

• Rotating cube with MeshNormalMaterial
• OrbitControls for camera interaction
• Responsive canvas with proper pixel ratio handling

Shaders

A GLSL shader playground with:

• Custom vertex and fragment shaders
• Time-based uniforms for animations
• Wave displacement effect

🎨 Tailwind CSS v4

When enabled, Tailwind CSS v4 is configured with the new CSS-first approach:

/* src/styles.css */
@import "tailwindcss";

/* Your custom styles */

No separate config file needed - Tailwind v4 uses CSS for configuration.

🌟 Author

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT © Aayush Chouhan