diff --git a/BUILDER_EXPLORATION.md b/BUILDER_EXPLORATION.md new file mode 100644 index 0000000..1e2ab18 --- /dev/null +++ b/BUILDER_EXPLORATION.md @@ -0,0 +1,40 @@ +# Page Builder Exploration + +Beyond the core cube scene, I explored several advanced features of the **Page Builder** environment by building more complex layouts. + +These projects are in the builder **exclusive\_scarlet\_tilda** under **Divya's Team** in **new pages**. + +## Experimental Layouts + +### Experiment 1: 3D Sphere & UI Integration +This scene demonstrates integration between traditional UI elements (Flex and Text) and 3D Canvas elements exploring the builder's lighting and material capabilities. + +![Builder Exploration](./assets/builder_exploration.png) + +#### Key Components Used +- **Flex & Text**: Implemented a responsive text-based header ("The Invocation — Behold the sign and the..."). +- **RadioGroup**: Added for UI-based control/selection. +- **Canvas & Meshes**: + - Used `sphereGeometry` instead of a box. + - Applied `meshPhongMaterial` for different lighting properties (shining/specular highlights). +- **Advanced Lighting**: Used both a `PointLight` and a `DirectionalLight` to create more complex shadows and highlights on the sphere. +- **OrbitControls**: Enabled interactive camera movement in the 3D space. + +### Experiment 2: Complex UI & Tabs +A more complex UI structure focusing on structural components and tabbed layouts. + +![Builder New Page](./assets/builder_new_page.png) + +#### Key Components Used +- **Hierarchical Flex Layouts**: Nested multiple `Flex` containers to create a structured sidebar and content area. +- **Tabs System**: Implemented a full `Tabs` component including `TabsList`, `TabsTrigger`, and `TabsContent` for categories like "Fabrics" and "Jacket". +- **Form Elements**: Integrated `RadioGroup` and `RadioGroupItem` inside the tab content for user selections. +- **Visual Assets**: Included `Image` and `Text` blocks for a data-driven layout. + +## Insights from the Experiment + +These tests helped me understand how the builder handles: +- **Mixing UI & 3D**: Placing non-3D components (like `Flex`) alongside a 3D `Canvas`. +- **Complex UI Logic**: Utilizing `Tabs` to organize information in a clear, interactive way. +- **Phong Shading**: Observing how `meshPhongMaterial` reacts differently than the `meshStandardMaterial` used in the cube project. +- **Layer Organization**: Managing a more complex hierarchy with multiple nested components across the UI and 3D layers. diff --git a/assets/builder_exploration.png b/assets/builder_exploration.png new file mode 100644 index 0000000..94a40e1 Binary files /dev/null and b/assets/builder_exploration.png differ diff --git a/assets/builder_new_page.png b/assets/builder_new_page.png new file mode 100644 index 0000000..9fcf8fa Binary files /dev/null and b/assets/builder_new_page.png differ