88 lines
2.9 KiB
Markdown
88 lines
2.9 KiB
Markdown
# 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.
|
|
|
|
|
|
|
|
## 🛠️ 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
|