Skip to content

README.md

Latest commit

 

History

History
116 lines (59 loc) · 4.4 KB

README.md

File metadata and controls

116 lines (59 loc) · 4.4 KB

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

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

JavaScript

HTML5

CSS3

React Three Fiber

Yarn

Getting Started

Prerequisites

Make sure you have the following installed:

  • Node.js
  • Yarn

3D Models Credits

Images

imgmap1 imgmap2 imgmap3

Live Demo

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!