Welcome to the 3D-Web-Game project! This project utilizes modern web technologies to create an immersive 3D web experience.
The goal is to develop a third-person controller game with animations, physics, and movement using React Three Fiber, HTML, CSS, and JavaScript. Yarn is used for package management.
I am creating this project to understand Three.js and React Three Fiber.
This project features:
-
3D Models: Detailed character models and maps.
-
Movement and Physics: Realistic movement and physics for a dynamic gaming experience.
-
React Three Fiber: A powerful library for rendering 3D graphics in React.
-
Animations: Smooth and responsive animations.
React Three Fiber (R3F) is a React renderer for Three.js, which is a popular JavaScript library for creating 3D graphics in the browser.
R3F provides a declarative way to build 3D scenes using React's component-based architecture, making it easier to manage complex 3D applications.
-
Declarative Syntax: With R3F, you can build 3D scenes using JSX, the same syntax you use for React components. This makes the code more readable and maintainable.
-
React Integration: It seamlessly integrates with React, allowing you to use hooks, state, and lifecycle methods to control 3D objects.
-
Reusability: React's component system promotes reusability, so you can create reusable 3D components.
-
Performance: R3F leverages React's diffing algorithm to optimize updates to the 3D scene, ensuring good performance even with complex scenes.
-
Extensibility: It supports Three.js plugins and custom shaders, giving you the flexibility to create advanced 3D graphics.
-
A : For Moving in Left Direction
-
D : For Moving in Right Direction
-
S : For Moving BackWard Direction
-
W : For Moving Ahead
-
SPACE : For Jump
-
SHIFT : For Run
-
F : Hold F key To WAVE Hi
Make sure you have the following installed:
- Node.js
- Yarn
Contributions are welcome! Please fork the repository and submit a pull request.
Special thanks to the creators of the 3D models used in this project and Also @Wawa Sensei
Thank you for checking out the 3D-Web-Game project. We hope you find it informative and engaging!