viber3D - a modern starter kit for 3D browser games.
- 🔥 React 19 - Latest React features including concurrent rendering
- 🎮 React Three Fiber - Declarative Three.js in React
- 🧰 Drei - Useful helpers for React Three Fiber
- 🏎️ Vite - Lightning-fast development server and build tool
- 🎨 TailwindCSS - Utility-first CSS framework
- 📱 Responsive Design - Works on all devices
- 🧠 State Management - Zustand for simple state management
- 🔋 Physics - React Three Rapier for physics simulations
- 📏 TypeScript - Type safety for your project
- 🤖 Cursor AI Integration - Predefined
.cursor/rulesfor enhanced AI assistance - 🧩 Entity Component System - Flexible and performant game architecture via koota library
Try out Viber3D with our live demo: viber3d-spacewars.kevinkern.dev
- Install Node.js
- A package manager (pnpm, npm, yarn, bun)
- Create a new viber3d project:
npx viber3d@latest init-
Open in Cursor
-
Run your project
npm run dev
# or
pnpm run dev- Open your browser and visit
http://localhost:5173to see your app in action 🥳
- Build your project
npm run build
- Deploy on a live server! 🌎
viber3D comes with comprehensive documentation to help you get started:
- Core Concepts - Learn about the fundamental architecture and patterns
- ECS Overview - Detailed guide to the Entity Component System architecture
- Tutorials - Step-by-step guides for common game development tasks
Visit the documentation site to learn more.
viber3d comes with predefined .cursor/rules to enhance your development experience when using Cursor AI:
- Code Style Rules - Ensures AI-generated code follows project conventions
- Component Structure - Guides AI to create components that match the project architecture
- Three.js Best Practices - Helps AI generate optimized 3D code
- Documentation Standards - Ensures consistent documentation in AI-generated code
These rules help maintain code quality and consistency when using AI assistance, making it easier to integrate AI-generated code into your project.
npx viber3d@latest [project-name] [options]
Options:
--cwd, -c The working directory. Defaults to the current directory
--name Project name
--force, -f Override existing directory
--install Skip installing dependencies (default: true)
--gitInit Initialize git repository
--packageManager Package manager choice (npm, pnpm, yarn)
--yes, -y Skip confirmation prompt (default: false)
--defaults, -d Use default configuration (default: false)
--silent, -s Mute output (default: false)
--help, -h Display help for command- React Three Fiber Documentation
- Drei Documentation
- Three.js Documentation
- React Documentation
- Vite Documentation
Contributions are welcome! Please feel free to submit a Pull Request.
For detailed contribution guidelines, development workflow, and coding standards, please see our CONTRIBUTE.md document.
We recommend installing the following VS Code extensions for the best development experience:
- Activitus Bar: Provides a convenient way to start/stop the development server directly from the VS Code activity bar
- ESLint: For code linting
- Prettier: For code formatting
This project is licensed under the MIT License - see the LICENSE file for details.
- X/Twitter: @kregenrek
- Bluesky: @kevinkern.dev
- Learn Cursor AI: Ultimate Cursor Course
- Learn to build software with AI: instructa.ai
- AI Prompts - Curated AI Prompts for Cursor AI, Cline, Windsurf and Github Copilot
- codefetch - Turn code into Markdown for LLMs with one simple terminal command
- aidex A CLI tool that provides detailed information about AI language models, helping developers choose the right model for their needs.
- codetie - XCode CLI
Viber3D stands on the shoulders of giants:
- Koota - The ECS library that powers our game architecture
- React Three Fiber - React renderer for Three.js
- Three.js - The core 3D library
- Nuxt & UnJS - Powering our docs + build system
See our full credits page for more details.