R3F Character Controller with Rapier Physics

An interactive 3D playground built to demonstrate a physics based character controller in the browser. This project combines the power of react-three-fiber for rendering, rapier for rigid body physics, and the excellent ecctrl library to handle complex character movements for both keyboard and gamepad.

➡️ View Live Demo Here ⬅️

---

🚀 About The Project

This project serves as a boilerplate and learning resource for anyone looking to create third person 3D experiences on the web. The main goal was to integrate a robust character controller (ecctrl) with a dynamic physics world (@react-three/rapier). The scene includes basic objects to interact with and showcases how to implement smooth camera and player controls.

✨ Features

• Character Movement: Full player controls including walking and jumping.
• Dual Input Support: Seamlessly works with both Keyboard/Mouse and Gamepad/Joystick.
• Physics-Based World: Built with Rapier physics, allowing for realistic interactions like collisions, gravity, and object dynamics.
• Camera Controls: Uses drei for easy camera manipulation around the player.
• Simple 3D Scene: A clean environment with platforms and obstacles to test movement and physics.

🛠️ Tech Stack

• React: UI library for building the application structure.
• React Three Fiber: A React renderer for Three.js, allowing for a declarative and component-based 3D scene.
• Drei: A collection of useful helpers and abstractions for React Three Fiber.
• Rapier: A fast and lightweight physics engine, used via the @react-three/rapier library.
• Ecctrl: A flexible and easy-to-use character controller for React Three Fiber.
• Three.js: The underlying WebGL library that powers the 3D rendering.

---

⚙️ Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have Node.js and npm (or yarn/pnpm) installed on your machine.

• Node.js (v16 or higher)
• npm

Installation & Setup

1. Clone the repository:

   git clone https://github.com/ayushh2k/r3f-playground

2. Navigate to the project directory:

   cd r3f-playground

3. Install the dependencies:

   pnpm install

4. Start the development server:

   pnpm run dev

   Your project should now be running on http://localhost:5173

🎮 Controls

• Keyboard:
  • W, A, S, D: Move the character.
  • Shift: Run.
  • Space: Jump.
• Mouse:
  • Click and Drag: Rotate the camera around the player.
• Gamepad/Joystick:
  • Left Stick: Move the character.
  • Bottom Face Button (e.g., A on Xbox controller): Jump.

---