diff --git a/README.md b/README.md index 4fc3c5f..094a272 100644 --- a/README.md +++ b/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 - 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()` | `` | | 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 diff --git a/assets/builder_screenshot.png b/assets/builder_screenshot.png new file mode 100644 index 0000000..9f74bd6 Binary files /dev/null and b/assets/builder_screenshot.png differ