Robotic Arm Aquarium - Interactive Graphics

TEAM: orlandoT3D (solo, Alessandro Orlando, 2038123, AIRO)

GITHUB REPO: https://github.com/SapienzaInteractiveGraphicsCourse/final-project-orlandot3d

GITHUB PAGES RUN: https://sapienzainteractivegraphicscourse.github.io/final-project-orlandot3d/

A Three.js interactive graphics project: a hierarchical robotic arm waves, moves above a glass aquarium, captures a fish from the top, lifts it, releases it back into the water, and loops. All animation is code-driven with no imported animation clips.

Tech Stack

• Three.js 0.160.0 (ES modules)
• OrbitControls
• lil-gui
• WebGL (browser)

Run Locally

ES modules require a local server.

Option 1 (Python):

python -m http.server

Option 2 (Node):

npx serve

Open http://localhost:8000 (or the URL shown by the server).

Controls

• OrbitControls: drag to rotate, scroll to zoom
• GUI (top-right):
  • Start / Stop
  • Auto Mode (sequence) / Manual
  • Animation speed
  • Light toggles
  • Manual joint controls (manual mode only)

Implemented Features

• Hierarchical robotic arm with joints and gripper
• Hybrid animation sequence: wave -> setup -> IK search -> descend/grab -> lift -> wave -> release -> loop
• Fish procedural swim at mid-water height; pauses only when the gripper is within range
• Concave glass aquarium with internal water volume and surface
• PBR materials and textures (metal, wood, concrete)
• HDR environment lighting (4k or 1k if lagging) and shadows
• Aquarium-only fish shadow blob to avoid casting on the table or floor

Project Structure

Project/
  index.html
  README.md
  styles/
    main.css
  src/
    main.js
    scene.js
    lights.js
    aquarium.js
    robotArm.js
    fish.js
    animationController.js
    ui.js
  Environment/
    brown_photostudio_02_1k.hdr
    brown_photostudio_02_4k.hdr
  Fish/
    Fish.glb
  Texture/
    Metal046B_2K-PNG/...
    Metal049A_2K-PNG/...
    Wood067_2K-PNG/...
    Concrete048_2K-PNG/...

Assets

• Fish model: https://poly.pizza/m/52s3JpUSjmX (jeremy)
• HDRI: https://polyhaven.com/a/brown_photostudio_02
• Metal textures: https://ambientcg.com/view?id=Metal049A and https://ambientcg.com/view?id=Metal046B
• Wood texture: https://ambientcg.com/view?id=Wood067
• Concrete texture: https://ambientcg.com/view?id=Concrete048

Imports

• three in src/main.js, src/scene.js, src/lights.js, src/aquarium.js, src/robotArm.js, src/fish.js, and src/animationController.js: core Three.js API for scene graph, geometry, materials, math, lights, rendering, and animations.

• three/addons/controls/OrbitControls.js in src/scene.js: mouse-based orbital camera controls.

• three/addons/loaders/RGBELoader.js in src/scene.js: loads the HDR environment map used for image-based lighting.

• three/addons/loaders/GLTFLoader.js in src/fish.js: loads the fish model from the local .glb asset.

• https://cdn.jsdelivr.net/npm/lil-gui@0.19/+esm in src/ui.js: GUI library for the on-screen controls; this is the only external CDN import and it is used only for the interactive control panel.

Resources

• http://threejs.org/
• http://babylonjs.com/
• https://doc.babylonjs.com/
• https://doc.babylonjs.com/start
• https://github.com/tweenjs/tween.js/
• https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md
• https://schteppe.github.io/cannon.js/
• https://github.com/kripken/ammo.js/
• https://chandlerprall.github.io/Physijs/
• https://discoverthreejs.com/
• https://threejs.org/manual/
• https://codepen.io/rachsmith/post/beginning-with-3dwebgl-pt-1-the-scene
• https://threejs.org/docs/#manual/en/introduction/Usefullinks
• https://threejs.org/examples