r3f-starter

r3f-starter is a command-line tool for scaffolding React Three Fiber (web-3d) projects. It allows you to quickly set up a project with optional physics support and choose between JavaScript and TypeScript.

Features

• Basic web-3d Template: Includes @react-three/fiber and @react-three/drei.
• Physics Support: Optionally add @react-three/rapier for physics-based interactions.
• Language Choice: Generate projects in either JavaScript or TypeScript.
• Ease of Use: Just a few prompts to get started.

Installation

You can use the tool directly with npx (no installation required):

npx r3f-starter

Or, install it globally for repeated use:

npm install -g r3f-starter

Usage

Run the CLI tool:

npx r3f-starter

Steps:

1. Enter Project Name: Provide a name for your new project folder.
2. Include Physics: Choose whether to include physics support with @react-three/rapier (y or n).
3. Select Language: Choose between JavaScript or TypeScript for your project.

Example:

npx r3f-starter

Sample Interaction:

Enter project name: my-web-3d-project
Include physics (rapier)? [y/N]: y
Choose the project language:
  ◉ JavaScript (.js and .jsx)
  ○ TypeScript (.ts and .tsx)

After completing the prompts, the tool will scaffold the project files in a new folder named my-web-3d-project.

Next Steps

1. Navigate to the project directory:

   cd my-web-3d-project

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser at the URL shown in the terminal to view your project.

Directory Structure

Here’s an overview of the generated project structure:

my-web-3d-project/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx       # Main component
│   └── main.jsx      # Entry point
├── package.json      # Project metadata and scripts
└── vite.config.js    # Vite configuration

For TypeScript projects, .jsx files will be replaced with .tsx.

Templates

The CLI generates projects based on the following templates:

• Basic: web-3d project with @react-three/fiber and @react-three/drei.
• Physics: web-3d project with @react-three/fiber, @react-three/drei, and @react-three/rapier.

Requirements

• Node.js: v14 or higher
• npm: v6 or higher

Contributing

If you encounter any issues or have feature requests, please feel free to open an issue or submit a pull request.

License

MIT License. See the LICENSE file for details.

Author

Vishnu

Acknowledgements

Thanks to the React Three Fiber, Drei, and Rapier communities for their excellent libraries and resources.