3D-Web-Game

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.

Project Overview

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.

About React Three Fiber

What is React Three Fiber ?

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.

Key Features

• 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.

Controls

• 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

Technologies Used

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• Yarn

3D Models Credits

• Castle on Hills

• De Dust 2 with Real Light

• Animal Crossing Map

• Medieval Fantasy Book

• City Scene Tokyo

Images

Live Demo

NOTE : If Character Not Visible Or Map Stuck Please Reload Page It Will Probably Fix It

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

Acknowledgements

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!