https://github.com/pakagronglb/3d-physics-world-game
A 3D physics-based game built with React Three Fiber and Rapier physics engine, based on [Wawa Sensei's](https://wawasensei.dev/) excellent course.
https://github.com/pakagronglb/3d-physics-world-game
3d animation blender drei fiber rapier threejs vite
Last synced: 8 months ago
JSON representation
A 3D physics-based game built with React Three Fiber and Rapier physics engine, based on [Wawa Sensei's](https://wawasensei.dev/) excellent course.
- Host: GitHub
- URL: https://github.com/pakagronglb/3d-physics-world-game
- Owner: pakagronglb
- Created: 2025-03-04T13:29:27.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-04T13:32:28.000Z (8 months ago)
- Last Synced: 2025-03-04T14:29:40.514Z (8 months ago)
- Topics: 3d, animation, blender, drei, fiber, rapier, threejs, vite
- Language: JavaScript
- Homepage: https://3d-physics-world-game.vercel.app
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Physics World Game
https://github.com/user-attachments/assets/8cc43486-de05-4add-8046-089a43ce14e2
A 3D physics-based game built with React Three Fiber and Rapier physics engine, based on [Wawa Sensei's](https://wawasensei.dev/) excellent course.
## Overview
This project demonstrates essential concepts of 3D physics in web development, creating an interactive game where players can:
- Move a cube character with keyboard controls
- Experience realistic physics with gravity and collisions
- Interact with dynamic elements like a rotating swiper
- Navigate through teleportation gates
- Respawn when falling off the playground
## Technologies Used
- React Three Fiber - React renderer for Three.js
- @react-three/rapier - Physics engine integration
- @react-three/drei - Useful helpers and abstractions
- Three.js - 3D graphics library
## Features
- Physics-based movement and collisions
- Third-person camera controller
- Dynamic obstacles (rotating swiper)
- Teleportation system
- Respawn mechanism
- Realistic shadows and lighting
## Controls
To add animated instructions to your game, you can use Three.js animations in your React components:
```jsx
import { useFrame } from '@react-three/fiber'
import { Text3D } from '@react-three/drei'
export const Instructions = () => {
const textRef = useRef()
useFrame((state) => {
// Make text float up and down
textRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.2 + 2
// Slowly rotate
textRef.current.rotation.y = state.clock.elapsedTime * 0.3
})
return (
Use WASD to move
)
}
```
Add this component to your scene to display animated 3D text instructions.
Game Controls:
- Arrow keys / WASD - Move the character
- Space - Jump
- Left/Right arrows - Rotate character
- Up/Down arrows - Move forward/backward
## Credits
This project is based on the course material from [Wawa Sensei](https://wawasensei.dev/). The 3D assets are from the Mini-Game Variety Pack by Kay Lousberg.
### Special Thanks
- Wawa Sensei for the excellent course and tutorials
- Kay Lousberg for the Mini-Game Variety Pack assets
- The React Three Fiber and Rapier communities
## License
This project is for educational purposes. The course content belongs to Wawa Sensei, and the 3D assets are from Kay Lousberg's Mini-Game Variety Pack.