docs: add page builder exploration documentation
This commit is contained in:
parent
6b88e148be
commit
29ca5eb263
40
BUILDER_EXPLORATION.md
Normal file
40
BUILDER_EXPLORATION.md
Normal file
@ -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.
|
||||
|
||||

|
||||
|
||||
#### 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.
|
||||
|
||||

|
||||
|
||||
#### 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.
|
||||
BIN
assets/builder_exploration.png
Normal file
BIN
assets/builder_exploration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
assets/builder_new_page.png
Normal file
BIN
assets/builder_new_page.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Loading…
x
Reference in New Issue
Block a user