Skip to content

Welcome to the 3D-Web-Game project! This immersive 3D web experience is built with React Three Fiber, HTML, CSS, and JavaScript, featuring detailed 3D models, realistic physics, and smooth animations.

Notifications You must be signed in to change notification settings

HotShot003/3D-Web-Game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

About

Welcome to the 3D-Web-Game project! This immersive 3D web experience is built with React Three Fiber, HTML, CSS, and JavaScript, featuring detailed 3D models, realistic physics, and smooth animations.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published