STACKR - 3D tower stacking game with physics

Live version: https://stckr.netlify.app/
Source: GitHub - R-zine/stackr: A block stacking game made using three.js (react-three-fiber, react-three-drei) and GSAP. The game has physics emulation via cannon.js. Highscore is saved on localStorage.

This is a full 3D tower stacking game made with React and react-three-fiber/drei. There is a lot of post-processing effects for the background and the floor. The movement/animations are handled with GSAP. I used Cannon.js as a rudimentary physics engine. I know there are quite a few similar games like this one, but I coded it from scratch and I’m pretty proud of the result. Hope you enjoy!

5 Likes

Nice work!

What would you think about removing the post-processing effects? The rendering is so slow for me that the frame rate is very choppy and it makes me miss the blocks!

Also, I’d love to hear your thoughts on the game I just posted: retro-futuristic tank game

Yes, this is something I’m aware of. It runs pretty badly on low-end laptops and mobile. What I have right now is supposed to be the high settings, my idea being to have lower settings so the app can be useful on more devices.

About your game, I think it’s pretty cool, it took me some time to get what I’m supposed to do, but after that it was fun. It really reminds me of that old Macintosh game, not sure what it was called but I think it was Tank or similar.

My laptop, I will confess, is not exactly state of the art. Let me know if the FPS gets improved; I’d love to give it another shot.

Thanks for the input on synthblast! You may be thinking of the exact game I was inspired by: Spectre. If you get a chance, could you leave a comment on the discussion page? It would be nice for others to hear your insight

Cannon has some tuning options. Physics doesn’t have to be 60 frames a second for all objects. There might be opportunities to slow down some checks.

I opted to not have physics running while the game is played, because it lowers performance too much and because it’s finicky and, more of then than not, negatively impacts gameplay. Physics are only added/calculated when the game is lost and the tower is forced to fall. One day when I come around to adding difficulty settings I’ll definitely lower the physics settings, as well as the post-processing.