smittenn / whac-react

A simulator for a whac-a-mole game using react-three-fiber

Whac React: A 3D Whac-A-Mole Simulator

About

For this assignment, I knew I wanted to make a 3D game and decided to experiment with using react-three-fiber, a React renderer for three.js.

I found inspiration in their examples and I created my game combining different techniques I learned there.

The end result ended up feeling like equal parts game and physics simulator. I liked the look of simple materials and colors on these 3D objects.

What I did

• Created React components for each element of the game
• Animated elements via useFrame and other means from react-three-fiber
• Created a simple application state via valtio
• Created simple physics with cannon
• Did some modeling in Blender. Created models from scratch and modified found models.
• Generated .glb/.gtlf files

With more time I would

• Use collision checking with the mallet to increment score
• Add a way to reset the game
• Add a timer for the game
• Add a sound that plays when a mole is whacked
• Make the mole movement feel more random
• Make the game more satisfying to play, generally improve the feel of it

Running it locally

Install the dependencies: npm install

Then run the application in the development mode: npm start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

Precompiled

The precompiled application can be found in the docs folder. To serve the compiled version use: serve -s docs

The application can be re-built with: npm run-script build

---

This project was bootstrapped with Create React App.