Final Project for the Interactive Graphics Course — Sapienza University of Rome
For the amount of the textures, we should wait at least 30 seconds after the click of the link.
▶ Click here to read the full Technical Report & User Manual
Once upon a time, the Luna Park was the heart of the city — a place of joy, laughter, and wonder. But time passed, the crowds faded, and the park fell into silence. The rides stopped turning, the lights went dark, and the only visitor left was a single forgotten robot.
Now, that robot must bring the park back to life. Four attractions lie dormant, waiting to be restored. Each one requires a different challenge to overcome. Only by reactivating all of them can the robot unlock the park's greatest secret — and discover who, or what, has been waiting in the shadows all along.
Your mission, should you choose to accept it: explore the abandoned park, restore the rides, and uncover the mystery of the Luna Park.
The protagonist is a small, curious robot designed to navigate the park and interact with its attractions. The robot is a fully articulated hierarchical model built from scratch using Three.js primitives. Every part of its body — head, torso, arms, legs, and even the antenna — moves independently through procedural animations written in JavaScript.
The robot can walk, run, jump, and perform specific interaction poses when pressing buttons, pulling levers, or riding attractions. Its animations are designed to feel lively and responsive, with subtle idle movements that give it personality.
Four rides await restoration. Each one is a unique challenge that tests different skills.
The carousel stands frozen in time. To bring it back to life, the robot must enter the control cabin, find the activation panel, and press the button. Once restored, the carousel spins again, and the robot can take a ride on one of the wooden horses.
The Ferris wheel is broken and overgrown with weeds. The robot must clear three areas of vegetation, search for a hidden key, and use it to unlock the control panel. With the wheel restored, the robot can board a cabin and enjoy a panoramic view of the park from above.
The roller coaster is out of electricity, and the control lever is stuck. The robot must locate the lever, pull it into position to reactivate the electricity and mount on the cart. Once activated, the coaster roars to life, carrying the robot through loops and turns at thrilling speed.
The archery stand is missing its ammunition. Three arrows are scattered somewhere in the park — the robot must find them all. With arrows in hand, the robot can take aim at the targets and prove its skills.
When all four attractions have been reactivated and ridden, the park reveals its final secret. A hidden avatar booth appears, containing a mysterious character waiting to be discovered. By entering the booth, the player can unlock and switch to BMO, a secret playable character with unique animations and a personality all its own.
With BMO, the game enters free‑play mode. The player can revisit any attraction without time pressure, explore the park at their leisure, and ultimately trigger the true ending by testing all four rides with their new companion.
Use the WASD keys to move the robot through the park. Press Space to jump over obstacles or explore elevated areas.
Approach any interactive object — a door, a switch, a lever, or a ride — and press E to perform the primary action. For special actions like pulling levers or picking up the bow, press R. A context‑sensitive prompt at the bottom of the screen will always tell you what to do next.
The camera follows the robot in third‑person view. Use the mouse wheel to zoom in and out. When interacting with an attraction, the camera automatically adjusts to provide the best view of the action.
Press keys 1 through 4 to select a specific mission, and press 0 to return to free exploration. The mission panel on the right side of the screen shows the status of each challenge.
The project is built on Three.js, a powerful WebGL library that handles all 3D rendering, lighting, and scene management. No external models or animations are imported — everything you see is created procedurally in code.
The robot is the centerpiece of the project. It is constructed from a hierarchy of groups and meshes, with individual pivots for the head, torso, arms, and legs. This structure allows for independent animation of each body part, creating fluid and natural movement.
The park features a dynamic lighting system with ambient, directional, and point lights. Textures are loaded from image files and applied to surfaces throughout the scene, including the grass, pavement, wood, metal, and bmo's face. The park lights switch toggles between day and night modes, transforming the atmosphere of the entire environment.
Interaction is handled through a raycast‑based system that detects when the robot is near an interactive object. Each object defines its own interaction logic, from opening doors to activating rides. The HUD provides real‑time feedback through context‑sensitive prompts and status messages.
All animations are implemented in JavaScript. The robot's movements are driven by trigonometric functions and interpolation, creating smooth walk cycles, and interaction poses. Attraction animations — the spinning carousel, the rotating Ferris wheel, the moving coaster cart — are all coded directly in the ride modules.
The codebase is organized into clean, modular files:
src/
├── main.js # Application bootstrap, game loop, event handling
├── scene.js # Scene construction (rides, terrain, lighting, colliders)
├── camera.js # Camera positioning and zoom logic
├── config.js # Global constants (speeds, durations, sizes)
├── game.js # Game state, timers, completion checks
├── input.js # Keyboard input state management
├── interactions.js # Interactable detection and prompt generation
├── missions.js # Timed mission system
├── audioManager.js # Audio initialisation and SFX playback
├── ui/
│ └── hud.js # HUD construction and updates (including avatar booth)
├── robot/
│ ├── robot.js # Factory and dispatcher for robot variants
│ ├── robot_default.js # Default robot (mesh, animation, poses)
│ ├── robot_bmo.js # BMO character (mesh, animation, poses)
│ ├── player.js # Movement physics, collision detection, support height
│ └── bow.js # Bow model attached during archery
└── rides/
├── horseRide.js # Carousel logic (boarding, cabin, button)
├── rollerCoaster.js # Roller coaster (lever, cart, track following)
├── ferrisWheel.js # Ferris wheel (weeds, key, boarding, rotation)
└── archeryStand.js # Archery mini‑game (meter, impacts, bow handling)
| Library | Purpose |
|---|---|
| Three.js | WebGL rendering, scene management, materials, lights, animations |
Because the project uses ES modules, it must be served through a local web server. Opening the files directly in the browser may take more time.
git clone https://github.com/SapienzaInteractiveGraphicsCourse/final-project-frameforge.git
cd final-project-frameforgepython -m http.server 8000Then open:
http://localhost:8000
Once the server is running, open the project in your browser from the local server address.
| Name | Student ID | |
|---|---|---|
| Letizia Sorriento | 2081376 | sorriento.2081376@studenti.uniroma1.it |
| Federico De Angelis | 2045775 | deangelis.2045775@studenti.uniroma1.it |