https://github.com/liubomyr123/marble-race
"Marble Race" is a simple 3D browser game built with three.js and React. In this game, the player observes a marble navigating a track filled with obstacles and challenges, relying on physics for its movement.
https://github.com/liubomyr123/marble-race
blender css html physics r3f r3f-rapier react three-js typescript vitejs
Last synced: 2 months ago
JSON representation
"Marble Race" is a simple 3D browser game built with three.js and React. In this game, the player observes a marble navigating a track filled with obstacles and challenges, relying on physics for its movement.
- Host: GitHub
- URL: https://github.com/liubomyr123/marble-race
- Owner: liubomyr123
- Created: 2023-11-05T09:30:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T15:48:15.000Z (over 1 year ago)
- Last Synced: 2025-03-03T21:11:43.044Z (over 1 year ago)
- Topics: blender, css, html, physics, r3f, r3f-rapier, react, three-js, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 128 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Marble Race: 3D Browser Game with Three.js and React
**Marble Race** is an interactive 3D browser game built with **Three.js** and **React**. In this game, the player observes a marble navigating a track filled with exciting obstacles, relying on physics for its movement. The game provides a smooth user experience with realistic physics-based mechanics.
## Features
- **3D Environment**: Powered by **Three.js** for immersive and realistic graphics.
- **Physics-based Movement**: Marble movement based on **React-Three/Fiber** and **Rapier** physics engine.
- **Interactive Gameplay**: Navigate the marble through a series of obstacles on the track.
- **Smooth Animations**: Built with **Framer Motion** for smooth transitions and animations.
## How to Play
1. Open the game in your browser.
2. Watch the marble as it rolls and interacts with the track.
3. The objective is to overcome the obstacles and complete the track.
## Live Demo
You can try the game live:
[**Marble Race Live Demo**](https://lighthearted-licorice-2abc43.netlify.app/)
## Technologies Used
- **React**: To handle game logic and UI components.
- **Three.js**: For rendering the 3D track and marble.
- **React-Three/Fiber**: A React renderer for Three.js to simplify 3D graphics management in React.
- **Rapier**: For physics-based movement and collision detection in the game.
- **Framer Motion**: For animations and smooth transitions.
- **Zustand**: For state management in React.