#  Cube Scene

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

##  Features

- Two rotating 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 |

##  Page Builder Implementation (Divya's Team)

Beyond the manual code, I also implemented the cube scene using a **Page Builder** environment under **Divya's Team**. 

### Builder Workflow
The builder allows for a hierarchical "Layers" view (as seen in the screenshot below) where I could:
- Add `mesh` containers for each cube.
- Add `ambientLight` and `pointLight`.
- Nest `boxGeometry` and `meshStandardMaterial` inside the meshes.
- Enable `OrbitControls` by dragging them into the scene.

###  Current Limitations
While the builder is great for static scenes and hierarchy management, there are some current technical limitations:
- **Continuous Animation**: Making the cubes "always rotate" on every frame (like the code-based versions) is currently not supported in the builder's interface.
- **Dynamic Interaction**: The "hover effect" (changing colors on mouse enter/leave) cannot yet be implemented directly within the builder's node system.

![Builder Screenshot](./assets/builder_screenshot.png)

## 🛠️ 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