70 lines
1.9 KiB
Markdown
70 lines
1.9 KiB
Markdown
# 🧊 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
|