-Update:
My internship is moving towards the end-date and I've learned many new things!
So I felt that I should use that new knowledge and apply it to this project to
get it towards the finishline!
New repository and created with (was latest when I started this refactoring)
Vite 6.0.5 and React 18.3.1. I've also added state management with Zustand!
It's still R3F, R3F-drei, react-spring, use-geture
I've also added Github Copilot in vsCode and I'm using Claude Sonnet 3.5
both in Copilot and online. The ammount of questions I've been asking is
crazy. Lyckily it doesn't get tired of me(yet?)!
As my final project at Hyper Island Frontend education I decided to re-make and finish the game I started making in the previous module.
The light(literally) overview of the game is that you are using the mouse to controll a spotlight from the players perspective. You are standing in the dark woods and when your light moves over a monster it slowly begins to die. If you pinch on your phone or scroll on on your mouse you can narrow the lightbeam and the monster will die faster.
It's now developed with React, React Three Fiber(r3f) and React Spring.
Unexpectedly I've also spent countless frustrated hours in Blender 💥 to edit models and exporting to get it to work with r3f! ⏲🧠💪
** First and foremost. WAWASENSEI! **
https://www.youtube.com/@WawaSensei
I've spent many hours now watching his videos and going through his repos!
** React three fiber docs, although they are lacking in some aspects: **
https://r3f.docs.pmnd.rs/getting-started/introduction
https://github.com/pmndrs/react-three-fiber
React three fiber is a direct overlay ontop of Three js though so everything is destructable.
The Poimandres groups have done an enormous job!
** The threejs forum. A great source of help and a very nice community! **
https://discourse.threejs.org/
** drei an extension on r3f **
https://github.com/pmndrs/drei
http://drei.docs.pmnd.rs/getting-started/introduction
** React Spring **
https://www.react-spring.dev/
https://github.com/pmndrs/react-spring
** To optimize glTF models and get a convinient *.jsx to use as a component! **
https://github.com/pmndrs/gltfjsx
** Quaternius! **
I've used several of their free models for this project! For example from the Cube World pack,
the Ultimate Monster Pack and so on.
https://quaternius.com/index.html
This game is open source under the MIT License to support learning and collaboration. However, as the original creator, I kindly request that:
-
✅ Feel free to:
- Study the code and learn from it
- Fork the repository for your own learning
- Suggest improvements and submit pull requests
- Use code snippets in your own projects
- Share and adapt the code for non-commercial purposes
-
❌ Please don't:
- Redistribute the game as-is commercially
- Sell copies of the game without significant modifications
- Present this work as your own
While the MIT License legally allows commercial use, this project was created as an educational endeavor, and I trust users to respect its intended purpose. If you're interested in commercial applications, please reach out to discuss your plans first.
Thank you for respecting these guidelines! 🙏
© [Daniel Pettersson] [2025]