Three JS - Basic Character Controller

Project Overview

This project is a simple character controller built using Three.js and React-Three-Fiber. It serves as an introduction to 3D rendering and game development, allowing you to control a character within a 3D environment. The entire project was created by following a tutorial by @WawaSensei and using some of the code and models from the original repository by @Wass08.

Key Components

To understand the project, you can pay attention to the following key components:

Character Movement:

The character's movement is controlled using keyboard inputs and mouse interactions. The useKeyboardControls hook from @react-three/drei is used to detect key presses for forward, backward, left, and right movements.
Mouse events are captured to adjust the character's direction, providing a more interactive experience. This feature enables the mobile experience too.

Animation Management:

The character's animations are managed using a custom hook called useAnimations. This allows for smooth transitions between different states like "idle", "walk", and "run".
The animations are triggered based on the character's speed and direction, providing a realistic movement experience.

Physics Integration:

The project uses @react-three/rapier to handle physics, including collisions and movement dynamics. This ensures that the character interacts realistically with the environment. In this case, the character is a capsule and the environment is a plane, so the character can move around the plane without falling.

Tip:

The main reason the character is represented as a capsule is to prevent it from getting stuck when trying to ascend small heights like ramps or stairs. This design choice avoids the flat face of the character's associated RigidBody from colliding with the flat face of the surface it is trying to climb.

Learnings from the YouTube Tutorial

The YouTube tutorial by @WawaSensei provided valuable insights into setting up a character controller using Three.js and React-Three-Fiber, also providing some tips and tricks to handle the library as well:

Model Loading and Animation: The tutorial demonstrated how to load 3D models using useGLTF and manage the animations related to the character. This was crucial in understanding how to integrate complex models and animations into a React application.

Tip:

One of the hardest parts (in my case) was understanding how to create the animations (or actions) of the model. To understand this better, I recommend watching the following tutorial: How to create animations for your 3D models on Blender. In this case, each action created related to the character will be translated as an animation with the same name that you assigned to the action on Blender.

Camera Control: It covered techniques for controlling the camera to follow the character smoothly, enhancing the player's experience by maintaining a consistent view of the character and environment.
Optimization Tips: The tutorial provided tips on optimizing performance, such as using useFrame for efficient rendering and managing state updates to prevent unnecessary re-renders.

Insights from the Original GitHub Repository

The original GitHub repository by Wass08 served as a foundational reference for this project. Here are some insights gained:

Code Structure: The repository showcased a well-organized code structure, separating concerns into different components. This modular approach made it easier to understand and modify specific parts of the codebase.

Note:

In my case, I had to change the code a little bit to make it work like I wanted. However, the component structure is very good and is very useful to understand how to organize your project.

Advanced Features: It included advanced features like character rotation and velocity calculations, which were instrumental in creating a realistic character controller.

How It Works

The character controller works by integrating various components to create a cohesive experience:

Input Handling: Keyboard and mouse inputs are captured to determine the character's movement and direction.
Physics and Animation: The character's physics are managed using @react-three/rapier, ensuring realistic interactions with the environment. Animations are triggered based on the character's state, providing visual feedback to the player.
Rendering and Camera: The scene is rendered using @react-three/fiber, with the camera positioned to follow the character. This setup ensures that the player always has a clear view of the action.

Conclusion

Implementing this basic character controller was a rewarding experience, combining insights from tutorials and open-source projects. It provided a solid foundation for further exploration into 3D game development, with opportunities to expand and enhance the project with new features and optimizations.

Special thanks to WawaSensei's YouTube Channel. This channel is a great resource for learning about Three.js and React-Three-Fiber (in my case, this was my big discovery this week).