https://github.com/farrukhras/3D-Tic-Tac-Toe-Game
A 3D Tic Tac Toe game built with React Three Fiber and Three.js
https://github.com/farrukhras/3D-Tic-Tac-Toe-Game
reactjs reactthreefiber threejs
Last synced: about 1 year ago
JSON representation
A 3D Tic Tac Toe game built with React Three Fiber and Three.js
- Host: GitHub
- URL: https://github.com/farrukhras/3D-Tic-Tac-Toe-Game
- Owner: farrukhras
- Created: 2022-09-05T17:53:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-14T04:04:16.000Z (over 3 years ago)
- Last Synced: 2024-10-23T18:12:07.984Z (over 1 year ago)
- Topics: reactjs, reactthreefiber, threejs
- Language: JavaScript
- Homepage: https://3-d-tic-tac-toe-game.vercel.app/
- Size: 4.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 3D Tic Tac Toe
> Made with Three.js and React Three Fiber
[Three.js](https://threejs.org/) is a JavaScript library that uses [WebGL](https://developer.mozilla.org/en-US/docs/Glossary/WebGL) to render and display animated 2D and 3D objects in the browser. It provides the functionality to add textures and materials to our objects. It also provides different types of light sources, effects, shaders, etc., to enhance a scene.
[React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) is a renderer for Three.js that renders 3D models and animations for React applications. It allows us to build Three.js components using React states, hooks, and props. These are stateful, interactive, and reusable React components.
I have used Three.js and React Three Fiber to build a 3D Tic Tac Toe game using pre-build components to render 3D shapes. First, I create a simple scene by setting up the camera, lights, and environment. Then, I create a 3D **3x3** grid, along with sphere and cube shapes to display on the scene. I then add animations to these shapes by altering their rotation properties. I also style the components by changing their color and dimensions. The final version of the game will allow playing the game between two different 3D shapes, win or tie a game and also restart the game at any point.
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.