Web Golf
Challenge the course in this 3D minigolf adventure, beautifully engineered for pixel-perfect putts.
How to Play
Master the controls to conquer the course.
Objective
- Goal: Get the golf ball into the hole in as few strokes as possible.
- Par: Each hole has a 'Par' score, which is the target number of strokes to aim for.
- Power Bar: The power bar at the bottom fills from green to red, indicating shot strength.
Desktop Controls
- Aim & Shoot: Left-click and drag away from the ball. The direction and distance determine aim and power. Release to shoot.
- Camera Orbit: Right-click and drag to rotate the camera around the scene.
- Camera Pan: Left-click and drag to pan the camera across the scene.
- Camera Zoom: Use the mouse scroll wheel to zoom in and out.
Mobile Controls
- Aim & Shoot: Tap and drag on the screen away from the ball. Release to shoot.
- Camera Orbit: Use a one-finger drag to orbit the camera.
- Camera Zoom/Pan: Use standard two-finger pinch and drag gestures.
Project Features
An exercise in web-based 3D.
Scene & Asset Rendering
A Three.js scene was initialized with camera, lighting, and rendering. 3D models for the course were loaded and the golf ball was rendered.
Basic Physics & Interaction
Implemented user input to apply velocity to the ball, with simplified friction for realistic movement, without a full physics engine.
Core Gameplay & State
Managed game state like hole, par, and strokes, and implemented goal detection to complete levels.
Player Controls
Developed intuitive controls for aiming precision and power, with clear visual feedback for an enhanced user experience.
Interactive Camera System
Provided interactive camera controls, including orbit, pan, and zoom, for inspecting the course.
User Interface (UI)
A clean UI displays essential game info like hole number and stroke count, and provides interactive controls.
Level Management
A system was implemented for loading multiple levels with terrain variations like slopes and ramps.
Level Navigator
Created a UI for players to select levels and transition between them after completing a hole.
Persistent Scoring
Tracked total scores across all levels, saved in a database linked to email-based authentication so players can continue their progress across sessions.