Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (r3f-starter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

Enter Project Name: Provide a name for your new project folder.
Include Physics: Choose whether to include physics support with @react-three/rapier (y or n).
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

Navigate to the project directory:
```
cd my-web-3d-project
```
Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
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.