# contactmridulhere-commits/gestureholo.online architecture

> Architecture diagram of the GitHub repository contactmridulhere-commits/gestureholo.online, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/contactmridulhere-commits/gestureholo.online
- Repository: https://github.com/contactmridulhere-commits/gestureholo.online

## Overview

Gesture Holo is a browser-based, webcam-driven 3D object workspace. The app coordinates hand gestures and pinch interactions to select, move, scale, and inspect scene objects; users can also spawn catalog objects and draw/extrude custom models. The graph follows only relationships visible in excerpts, imports listed by the SOURCE INDEX, or documented behavior; unsampled subsystems and their wiring are not inferred.

Main entry points: [`js/app.js`](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js) (App Coordinator), [`js/objects.js`](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/objects.js) (Scene Objects), [`js/hands.js`](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/hands.js) (Hand Tracking), [`js/core.js`](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/core.js) (Scene and Renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Gesture Interaction"]
  node_hands["Hand Tracking<br/>[hands.js]"]
  node_config["Interaction Tuning<br/>[config.js]"]
  node_app["App Coordinator<br/>[app.js]"]
end

subgraph group_workspace["3D Workspace"]
  node_core["Scene and Renderer<br/>[core.js]"]
  node_objects["Scene Objects<br/>[objects.js]"]
  node_catalog["Object Catalog<br/>[app.js]"]
end

subgraph group_authoring["Model Authoring"]
  node_modeler["Gesture Modeler<br/>[modeler.js]"]
end

subgraph group_presentation["Interface"]
  node_cursor["Gesture Cursor<br/>[cursor.js]"]
  node_object_list["Object List<br/>[app.js]"]
  node_inspector["Object Inspector<br/>[inspector.js]"]
end

node_user(("User"))
node_webcam(("Webcam"))
node_three(("Three.js"))
node_mediapipe(("MediaPipe Tasks Vision"))

node_user -->|"presents hands"| node_webcam
node_webcam -.->|"video input"| node_hands
node_hands -->|"loads inference"| node_mediapipe
node_hands -->|"reads thresholds"| node_config
node_app -->|"reads tracking"| node_hands
node_app -->|"reads settings"| node_config
node_app -->|"initializes and renders"| node_core
node_app -->|"updates and draws"| node_cursor
node_cursor -->|"reads hand state"| node_hands
node_cursor -->|"reads hold state"| node_objects
node_app -->|"manages interactions"| node_objects
node_app -->|"builds and spawns"| node_catalog
node_catalog -->|"adds selected object"| node_objects
node_objects -->|"adds scene groups"| node_core
node_app -->|"rebuilds list"| node_object_list
node_app -->|"initializes and updates"| node_inspector
node_inspector -->|"reads object state"| node_objects
node_app -->|"routes draw controls"| node_modeler
node_modeler -->|"projects with camera"| node_core
node_modeler -->|"adds finished model"| node_objects
node_core -.->|"renders scene"| node_three

click node_hands "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/hands.js"
click node_config "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/config.js"
click node_app "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js"
click node_cursor "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/cursor.js"
click node_core "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/core.js"
click node_objects "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/objects.js"
click node_catalog "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js"
click node_object_list "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js"
click node_inspector "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/inspector.js"
click node_modeler "https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/modeler.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_hands,node_config,node_app,node_user toneBlue
class node_core,node_objects,node_catalog toneAmber
class node_modeler toneMint
class node_cursor,node_object_list,node_inspector,node_mediapipe toneRose
class node_webcam,node_three toneIndigo
```

## Components

### Gesture Interaction

- [Hand Tracking](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/hands.js): `js/hands.js`
- [Interaction Tuning](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/config.js): `js/config.js`
- [App Coordinator](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js): `js/app.js`

### 3D Workspace

- [Scene and Renderer](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/core.js): `js/core.js`
- [Scene Objects](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/objects.js): `js/objects.js`
- [Object Catalog](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js): `js/app.js`

### Model Authoring

- [Gesture Modeler](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/modeler.js): `js/modeler.js`

### Interface

- [Gesture Cursor](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/cursor.js): `js/cursor.js`
- [Object List](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/app.js): `js/app.js`
- [Object Inspector](https://github.com/contactmridulhere-commits/gestureholo.online/blob/main/js/inspector.js): `js/inspector.js`

### Other components

- **User**
- **Webcam**
- **Three.js**
- **MediaPipe Tasks Vision**

## Connections

- User → Webcam: presents hands
- Webcam → Hand Tracking: video input
- Hand Tracking → MediaPipe Tasks Vision: loads inference (evidence: `js/hands.js`)
- Hand Tracking → Interaction Tuning: reads thresholds (evidence: `js/hands.js`)
- App Coordinator → Hand Tracking: reads tracking (evidence: `js/app.js`)
- App Coordinator → Interaction Tuning: reads settings (evidence: `js/app.js`)
- App Coordinator → Scene and Renderer: initializes and renders (evidence: `js/app.js`)
- App Coordinator → Gesture Cursor: updates and draws (evidence: `js/app.js`)
- Gesture Cursor → Hand Tracking: reads hand state (evidence: `js/cursor.js`)
- Gesture Cursor → Scene Objects: reads hold state (evidence: `js/cursor.js`)
- App Coordinator → Scene Objects: manages interactions (evidence: `js/app.js`)
- App Coordinator → Object Catalog: builds and spawns (evidence: `js/app.js`)
- Object Catalog → Scene Objects: adds selected object (evidence: `js/app.js`)
- Scene Objects → Scene and Renderer: adds scene groups (evidence: `js/objects.js`)
- App Coordinator → Object List: rebuilds list (evidence: `js/app.js`)
- App Coordinator → Object Inspector: initializes and updates (evidence: `js/app.js`)
- Object Inspector → Scene Objects: reads object state (evidence: `js/inspector.js`)
- App Coordinator → Gesture Modeler: routes draw controls (evidence: `js/app.js`)
- Gesture Modeler → Scene and Renderer: projects with camera (evidence: `js/modeler.js`)
- Gesture Modeler → Scene Objects: adds finished model (evidence: `js/modeler.js`)
- Scene and Renderer → Three.js: renders scene