divyap/cube-scene
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
cube-scene/BUILDER_EXPLORATION.md

2.3 KiB
Raw Permalink Blame History

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

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

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.