Made with Three.js and React Three Fiber
Three.js is a JavaScript library that uses 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 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.
In the project directory, you can run:
Runs the app in the development mode.
Open 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.