# 🌍 Survey - Storytelling - Real-Time Data Visualization

An interactive web app that reveals **gamified results** after users complete a climate change survey.  
Users explore their answers and compare with others inside a **3D visualization environment** powered by Three.js.

---

## 🧠 Project Goals

- Deliver real-time visual feedback from survey answers
- Use 3D environments for storytelling and engagement
- Create gamified, spatial UI interactions with zoom- and touch-support

---

## 🛠️ Technologies Used

- `React`
- `Three.js`, `@react-three/fiber`, `@react-three/drei`
- `CSS Modules`
- `HTML-over-3D` anchoring logic
- Touch & gesture handling for mobile

---

## 🎮 Key Features & Engineering Solutions

### 📌 Anchoring DOM to 3D (beyond Drei.Html)

- Enhanced `Drei.Html` with **dynamic offsets** to keep popups aligned to 3D anchor points
- Prevented misalignment during zoom, pan, and orbit
- Added `.is-top`, `.is-bottom`, etc., classes dynamically for **edge case styling**

### 🧲 Draggable UI Elements

- Toggleable popups anchored to draggable buttons
- Preserved separation between **dragging intent** vs **interaction**
- Ensured buttons stay visible (never off-viewport)

### 🎥 Motion UX Considerations

- Disabled canvas rotation while dragging UI to reduce **motion sickness**
- Supported mobile **pinch**, **zoom**, and **rotate** gestures

### 🎭 Rendering “I AM DONE” Button in 3D Context

- Couldn’t pass logic cleanly via context into `Drei` — limitations in bridging `Survey.jsx` logic into R3F
- Rendered **invisible version** inside Drei to maintain layout/transform
- Overlayed a visible copy in `dotGraph.jsx` for perfect hitbox + transform control

---

## 🤯 Lessons Learned

- R3F + React context don’t always play well — separate rendering layers help maintain logic control
- DOM ↔️ Canvas UX requires careful attention to *both z-index* and *transform origin*
- Blending 2D and 3D interaction requires more than positioning — you have to design for **intent**