# 🧊 Cube Scene

The same interactive 3D cube scene built two ways — **Vanilla Three.js** and **React Three Fiber (R3F)** — to compare the approaches side by side.

## ✨ Features

- Two rotating orange cubes
- Hover effect — cubes turn **hotpink** on hover
- Click to scale (R3F version)
- OrbitControls — rotate, zoom, and pan the camera
- Responsive window resize
- Light gray background with ambient + point lighting

## 📁 Project Structure

```
cube-scene/
├── vanilla/          # Pure Three.js implementation
│   ├── index.html
│   ├── main.js
│   ├── package.json
│   └── .gitignore
│
└── r3f/              # React Three Fiber implementation
    ├── src/
    │   ├── App.jsx
    │   ├── main.jsx
    │   └── index.css
    ├── index.html
    ├── vite.config.js
    ├── package.json
    └── .gitignore
```

## 🚀 Getting Started

### Vanilla Three.js

```bash
cd vanilla
npm install
npm run dev
```

### React Three Fiber

```bash
cd r3f
npm install
npm run dev
```

## 🔍 Vanilla vs R3F Comparison

| Feature | Vanilla Three.js | React Three Fiber |
|---|---|---|
| Scene setup | Manual (`Scene`, `Camera`, `Renderer`) | `<Canvas>` handles it |
| Mesh creation | `new THREE.Mesh(geometry, material)` | `<mesh>` JSX component |
| Animation loop | `requestAnimationFrame` + `animate()` | `useFrame()` hook |
| Hover detection | Manual `Raycaster` + event listeners | `onPointerOver` / `onPointerOut` props |
| OrbitControls | Import, instantiate, call `update()` | `<OrbitControls />` |
| Window resize | Manual `resize` event listener | Automatic |

## 🛠️ Tech Stack

- [Three.js](https://threejs.org/) — 3D rendering library
- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber) — React renderer for Three.js
- [Drei](https://github.com/pmndrs/drei) — Useful helpers for R3F
- [Vite](https://vitejs.dev/) — Dev server and bundler