docs: add page builder implementation and screenshot
This commit is contained in:
parent
34b8c217cb
commit
6b88e148be
32
README.md
32
README.md
@ -1,17 +1,17 @@
|
|||||||
# 🧊 Cube Scene
|
# 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.
|
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
|
## Features
|
||||||
|
|
||||||
- Two rotating orange cubes
|
- Two rotating cubes
|
||||||
- Hover effect — cubes turn **hotpink** on hover
|
- Hover effect — cubes turn **hotpink** on hover
|
||||||
- Click to scale (R3F version)
|
- Click to scale (R3F version)
|
||||||
- OrbitControls — rotate, zoom, and pan the camera
|
- OrbitControls — rotate, zoom, and pan the camera
|
||||||
- Responsive window resize
|
- Responsive window resize
|
||||||
- Light gray background with ambient + point lighting
|
- Light gray background with ambient + point lighting
|
||||||
|
|
||||||
## 📁 Project Structure
|
## Project Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
cube-scene/
|
cube-scene/
|
||||||
@ -32,7 +32,7 @@ cube-scene/
|
|||||||
└── .gitignore
|
└── .gitignore
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🚀 Getting Started
|
## Getting Started
|
||||||
|
|
||||||
### Vanilla Three.js
|
### Vanilla Three.js
|
||||||
|
|
||||||
@ -50,7 +50,7 @@ npm install
|
|||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🔍 Vanilla vs R3F Comparison
|
## Vanilla vs R3F Comparison
|
||||||
|
|
||||||
| Feature | Vanilla Three.js | React Three Fiber |
|
| Feature | Vanilla Three.js | React Three Fiber |
|
||||||
|---|---|---|
|
|---|---|---|
|
||||||
@ -61,6 +61,24 @@ npm run dev
|
|||||||
| OrbitControls | Import, instantiate, call `update()` | `<OrbitControls />` |
|
| OrbitControls | Import, instantiate, call `update()` | `<OrbitControls />` |
|
||||||
| Window resize | Manual `resize` event listener | Automatic |
|
| 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
|
## 🛠️ Tech Stack
|
||||||
|
|
||||||
- [Three.js](https://threejs.org/) — 3D rendering library
|
- [Three.js](https://threejs.org/) — 3D rendering library
|
||||||
|
|||||||
BIN
assets/builder_screenshot.png
Normal file
BIN
assets/builder_screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Loading…
x
Reference in New Issue
Block a user