Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hotshot003/3d-web-game
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.
https://github.com/hotshot003/3d-web-game
3d-game learning-by-doing react react-three-fiber react-three-rapier three-js web3 yarn
Last synced: 9 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/hotshot003/3d-web-game
- Owner: HotShot003
- Created: 2024-06-27T10:31:57.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-10-01T14:05:29.000Z (3 months ago)
- Last Synced: 2024-12-23T01:15:20.086Z (9 days ago)
- Topics: 3d-game, learning-by-doing, react, react-three-fiber, react-three-rapier, three-js, web3, yarn
- Language: JavaScript
- Homepage:
- Size: 37.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://sketchfab.com/3d-models/castle-on-hills-b874cb19b42741729b950f6afbdf0dea)
- [De Dust 2 with Real Light](https://sketchfab.com/3d-models/de-dust-2-with-real-light-4ce74cd95c584ce9b12b5ed9dc418db5)
- [Animal Crossing Map](https://sketchfab.com/3d-models/animal-crossing-map-9f53cb8a02134037887875e022b2eae2)
- [Medieval Fantasy Book](https://sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91a)
- [City Scene Tokyo](https://sketchfab.com/3d-models/city-scene-tokyo-b25d23ff186949dca3df669c14447db5)
## Images
## Live Demo
[](https://3d-web-game-by-anuragpadhiyar.netlify.app/)
#### 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](https://github.com/wass08)
---
Thank you for checking out the 3D-Web-Game project. We hope you find it informative and engaging!