thomas-rooty / r3f-character-controls

🧍 A boilerplate for character movement and controls in a Three.js environment using React-Three-Fiber and React-Three-Cannon

R3F Character Controls

A robust boilerplate for initiating character movement and controls in a Three.js setting, leveraging the power of React-Three-Fiber and React-Three-Cannon.

Live demo

Live preview of the features, powered by Vercel

Features:

• Character Movement: Smooth character movement with acceleration and deceleration for a more realistic experience.
• Camera Control: Dynamic camera positioning that follows the character, ensuring a seamless navigation experience.
• Collision Detection: Utilizes Three.js raycasting for detecting objects in front of the character and setting interactive objects.
• Physics Integration: Built-in physics using React-Three-Cannon for realistic object dynamics.

Setup:

Clone the repository:

git clone https://github.com/thomas-rooty/r3f-character-controls.git

Navigate to the project directory and install the dependencies:

cd r3f-character-controls
npm install

Run the development server:

Copy code
npm start

Now, you should be able to see the boilerplate in action on your local server!

Customization:

• Character Attributes: Adjust the character's attributes such as speed, mass, and geometry within the Character component.
• Camera Positioning: Modify the camera's distance and angle with respect to the character by tweaking the distance variable.

Contributions:

Contributions, issues, and feature requests are welcome! Feel free to check issues page