🤖 Grapple Bot

🎓 Quick Intro

• Course: Interactive Graphics Course
• Professor: Prof. Marco Schaerf
• Student: Monzoni Simone (2260450)
• Play the Game: link

---

📖 Project Description

Grapple Bot is an immersive, 3D web-based interactive experience built with WebGL and Three.js. Set in a jungle valley complete with flowing river, steep cliffs, and a towering waterfall.

The core gameplay revolves around a robotic character equipped with a grappling hook. The player must aim, shoot the grappling gun to latch onto lianas hanging over the river, and swing from one to the next to reach the finish line. Falling into the water costs a life and resets the player to the last reached checkpoint.

Key Features:

• Dynamic Physics & Momentum: Realistic swinging mechanics where the robot's velocity, slide position on the liana, and jump timing directly affect momentum.

• Day/Night Cycle: Players can seamlessly toggle between a bright, sunlit valley and a night mode featuring bioluminescent fireflies, and a player-mounted flashlight.

• Procedural Animations: Smooth, code-driven animations for walking, running, jumping, and sliding down the liana using Tween.js.

• Difficulty Scaling: Three difficulty modes (Easy, Medium, Hard). Hard mode introduces moving wooden wall obstacles that force the player to time their swings perfectly and self-destroying liana.

---

📂 File Structure

│   index.html
│   presentation.md
│   README.md
│
├───audio
│       fuse.wav
│       jump.wav
│       jungle_bgm.mp3
│       splash.mp3
│       walk.wav
│       waterfall_loop.wav
│       win.wav
│
├───models
│   ├───boat
│   │       boat_with_oars.glb
│   │
│   ├───bush
│   │       3_pine_bushes.glb
│   │       bush _1.glb
│   │       bush.glb
│   │
│   ├───finish_line
│   │       finish_line.glb
│   │
│   ├───grappling_gun
│   │       batmans_grapple_gun.glb
│   │
│   ├───house
│   │       wooden_house_house_in_the_woods_project.glb
│   │
│   ├───log
│   │       logs.glb
│   │       log_photogrammetrised.glb
│   │
│   ├───robot_model
│   │       somerobot.glb
│   │
│   ├───target
│   │       target.glb
│   │
│   ├───tree_model
│   │       tree_elm.glb
│   │
│   └───wood_panel
│           wooden_wall.glb
│
├───src
│       environment.js
│       game_logic.js
│       GrapplingHook.js
│       HomePage.js
│       main.js
│       Robot.js
│       RobotAnimator.js
│
└───textures
    ├───mud
    │       brown_mud_03_diff_4k.jpg
    │       brown_mud_03_nor_gl_4k.png
    │       brown_mud_03_spec_4k.png
    │
    └───water
            water_norm.jpg
            water_norm2.jpg
            water_norm3.jpg
            water_norm4.jpg
            water_norm5.png
            water_norm6.jpg

---

🎮 Possible User Interactions

The project heavily focuses on user interaction, allowing the player to fully control the robot, manipulate the camera, and configure the game state.

Main Menu Interactions:

• Difficulty Selection: Choose between EASY, MEDIUM, and HARD modes to alter the robot's momentum multiplier and enable moving obstacles.
• Environment Toggle: Click the sun/moon icon to switch between Day Mode and Night Mode before starting.

In-Game Controls:

• Time Slider (Day Mode only): Dynamically adjust the position of the sun to simulate different times of the day (from 07:00 to 19:00).

• Moving (On Ground):

  • W A S D: Move the robot around the starting platform or ground.
  • SHIFT: Hold to sprint.
  • SPACE: Jump (Press again mid-air for a Double/Spin Jump).

• Aiming (Hook System):

  • RIGHT CLICK (Hold): Enter aiming mode (locks the pointer and shifts the camera over the shoulder).
  • MOUSE MOVEMENT: Look around and aim the crosshair.
  • LEFT CLICK: Shoot the grappling hook at a valid target (liana or practice target).

• Swinging (On Liana):

  • W / S: Shift weight to swing forward or backward and build momentum.
  • A / D: Slide down or climb up the liana.
  • SPACE: Jump off the liana (timing is crucial to maintain forward velocity).

---

📦 Models, Textures, and Audio Imported

All imported assets have been carefully selected from suited website, while animations are entirely implemented in code rather than imported.

3D Models (.glb):

• somerobot.glb: The main hierarchical character model.
• batmans_grapple_gun.glb: The grappling hook weapon attached to the robot's arm.
• tree_elm.glb: Instanced trees populating the valley.
• 3_pine_bushes.glb, bush_1.glb, bush.glb: Assorted foliage to decorate the riverbanks.
• boat_with_oars.glb: The starting platform for the robot.
• wooden_house_house_in_the_woods_project.glb: Background scenery elements.
• wooden_wall.glb: Moving obstacles used in Hard mode.
• finish_line.glb: The final goal structure.

Textures:

• Ground: Brown mud maps (diffuse, normal, specular).
• Water: High-resolution normal map (water_norm6.jpg) animated to simulate river flow.

Audio:

• Background Music: jungle_bgm.mp3
• Environment: waterfall_loop.wav
• SFX: walk.wav, splash.mp3, win.wav.

---

🛠️ Libraries Used

• Three.js: The core 3D WebGL library used for rendering the scene, managing cameras, lights, and materials.
• GLTFLoader: To import the 3D models and their hierarchical structures.
• Tween.js: Used extensively for smooth interpolations and procedural animations of the robot's limbs (walking cycles, jumping, spinning).

---

🔍 Want to know more?

For a deeper dive into the technical implementation, hierarchical model structure, and shader logic, please check out the official project presentation