Simple web based character controller build on react-three-fiber

Floating Capsule Character Controller

Simple web based character controller build on react-three-fiber and react-three-rapier. It provides a playground demo where you can experience the following features:

  1. Seamless movement over small obstacles
  2. Enhanced control with floating force incorporating spring and damping forces
  3. Rigidbody character functionality for interaction with the game environment
  4. Customizable ground friction for tailored control
  5. Realistic simulation with applied mass on supporting surfaces
  6. Smooth integration with moving and rotating platforms

Project Link

Live Demo: Floating Capsule Character Controller

Setup

Download Node.js. Run this followed commands:

# Install dependencies (only the first time)
npm install

# Run the local server at localhost:8080
npm run dev

# Build for production in the dist/ directory
npm run build

Next Steps

As I continue to improve and expand the Floating Capsule Character Controller, here are some next steps I am considering:

  1. Better handling of slope and stairs movement
  2. Implementing camera collision to prevent clipping
  3. Adding a dust effect triggered by character movement or jumps
  4. Developing a character animation state machine for seamless animation transitions

Contributions

I appreciate your interest in this project! If you have any feedback, suggestions, or resources related to the controller or the next steps, please feel free to share.

Thank you!

GitHub

View Github