docs: add page builder implementation and screenshot

This commit is contained in:
divyap 2026-03-24 13:25:12 +05:30
parent 34b8c217cb
commit 6b88e148be
2 changed files with 25 additions and 7 deletions

View File

@ -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
- Click to scale (R3F version)
- OrbitControls — rotate, zoom, and pan the camera
- Responsive window resize
- Light gray background with ambient + point lighting
## 📁 Project Structure
## Project Structure
```
cube-scene/
@ -32,7 +32,7 @@ cube-scene/
└── .gitignore
```
## 🚀 Getting Started
## Getting Started
### Vanilla Three.js
@ -50,7 +50,7 @@ npm install
npm run dev
```
## 🔍 Vanilla vs R3F Comparison
## Vanilla vs R3F Comparison
| Feature | Vanilla Three.js | React Three Fiber |
|---|---|---|
@ -61,6 +61,24 @@ npm run dev
| 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.
![Builder Screenshot](./assets/builder_screenshot.png)
## 🛠️ Tech Stack
- [Three.js](https://threejs.org/) — 3D rendering library

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB