From 34b8c217cb124cd54b9b30b4b0e29bbda6d6cfbd Mon Sep 17 00:00:00 2001
From: divyap <divyapahuja31@gmail.com>
Date: Mon, 23 Mar 2026 23:17:41 +0530
Subject: [PATCH] docs: add README

---
 README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4fc3c5f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,69 @@
+# 🧊 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