This project is a work in progress! There’s still some visual glitches and bugs that need to be worked out.
I’m a fan of a classic game of mini golf and I had been toying with the idea to build something fun like this using React Three Fiber for a couple months now.
I started with the player / ball component, trying to figure out how I wanted users to interact and play the game. I settled for a simple click and drag approach. Players click on the ball and drag away to build up force, once the player releases the ball takes off in the direction the arrow is pointing. I decided to do this with a flat invisible disk that sticks to the golf ball at all times. When the user clicks down on the ball a ray is fired every frame and the game tracks where it hits this invisible disc. This position relative to the center of the sphere is the force vector that gets applied to the ball! I chose this approach because it keeps the Y value (up/down) at zero and prevents the ball from going anywhere but horizontal.
There are two camera modes that players can switch between. Free camera mode lets the player adjust their view to line up their shot, and Play mode simply tracks the ball and allows you to make a stroke.
The rest of the game is fairly simple! It uses Zustand to keep track of player stats like strokes and which course they’re currently on. The physics is all running with React-Three/Rapier. It controls the forces applied to the ball, the collision detection, and the RigidBodies that make up the courses.
There are various sensor colliders throughout each course, some change the camera angles. At the end of the course they both raise the flag when the ball approaches, and trigger the end of the current course if the ball hits the bottom of the hole.
Every model in this R3F application was created by me in Blender 3D and textured using Substance Painter. Some elements were sculpted and painted in Nomad Sculpt (iPad OS) and retopologized in Cozy Blanket (also iPad OS)
Notable Bugs I’ll be working on clearing up:
- Ghost taps: Sometimes in free camera mode the ball will fly off in some direction. I have conditionals that are supposed to prevent this but it still happens.
- Physics Jitters: When the ball is rolling and encounters a change in direction the physics simulation starts to get a little jittery, especially when the ball is moving fast. Very noticeable on Course 9.
- Ball Physics: The ball takes a while to stop, it’s not as realistic as I would like it to be.
Additional Features / Improvements on my list as well:
- More Flair: I want to add some animations, maybe a confetti particle effect when a user scores well or a hole in one. Better design elements as well, and better transitions between courses.
- Better UX: Currently the game isn’t explained very well and is confusing without instruction.