cube-scene/README.md

🧊 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

cd vanilla
npm install
npm run dev

React Three Fiber

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 — 3D rendering library
• React Three Fiber — React renderer for Three.js
• Drei — Useful helpers for R3F
• Vite — Dev server and bundler