Feature: 3D Design Atelier
Relevant source files
The following files were used as context for generating this wiki page:
- src/features/design3D/screens/Design3DAtelierScreen.js
- src/features/design3D/components/viewport/Viewport3D.js
- src/features/design3D/components/layout/RightSidebar.js
- src/features/design3D/components/ui/ColorPicker.js
- TASK_3_SUMMARY.md
- src/core/utils/constants.js
- src/features/design3D/components/layout/LeftSidebar.js
The 3D Design Atelier is the primary interface for 3D garment design within the application, intended for web and desktop platforms. It provides a comprehensive suite of tools and controls for real-time material editing, property adjustment, and visualization. The feature is structured as a single-screen application layout, comprising a central 3D viewport surrounded by toolbars and property panels.
On mobile and tablet devices, this full-featured interface is replaced by a MobileFallback component, which informs the user that the 3D design experience is optimized for desktop and provides alternative navigation options. The entire UI is built as a scaffold, ready for the integration of a 3D rendering engine like React Three Fiber.
Sources: README.md, TASK_3_SUMMARY.md, src/features/design3D/screens/Design3DAtelierScreen.js:31-33
Architecture and Core Components
The 3D Atelier is architected around a main container component, Design3DAtelierScreen.js, which orchestrates the state and layout of all child components. This screen is responsible for managing the state of selected tools, materials, colors, and other design properties, passing them down to the relevant UI components.
The layout is divided into five main parts: a header, a left sidebar for tools, a right sidebar for properties, a bottom bar for actions, and a central viewport for 3D rendering.
Sources: src/features/design3D/screens/Design3DAtelierScreen.js, TASK_3_SUMMARY.md
Component Hierarchy
The following diagram illustrates the high-level component structure of the 3D Design Atelier screen.
This diagram shows Design3DAtelierScreen as the parent component that composes the main layout elements.
Sources: TASK_3_SUMMARY.md, src/features/design3D/screens/Design3DAtelierScreen.js
Layout Components
The UI is composed of several dedicated layout components:
| Component | File | Description |
|---|---|---|
| Header | Header.js | Displays app branding, navigation tabs, notifications, and user profile. |
| LeftSidebar | LeftSidebar.js | Contains view controls (Rotate, Pan, Zoom), garment selectors, and design tools (Select, Material, Draw). |
| RightSidebar | RightSidebar.js | Provides controls for view orientation, material selection, color picking, and material property adjustments. |
| BottomBar | BottomBar.js | Includes primary action buttons (Save, Export, Share), view mode toggles, and zoom controls. |
| Viewport3D | Viewport3D.js | The central canvas area, currently a placeholder for the 3D model rendering. |
Sources: TASK_3_SUMMARY.md
State Management
State is managed locally within the Design3DAtelierScreen component using React's useState hook. This centralized approach allows sibling components to share and react to state changes, such as a tool selection in the LeftSidebar affecting the properties shown in the RightSidebar.
Sources: src/features/design3D/screens/Design3DAtelierScreen.js:15-28
State Variables
| State Variable | Type | Initial Value | Description |
|---|---|---|---|
selectedTool | String | 'select' | The currently active tool from the LeftSidebar. |
selectedGarment | String | 'jumpsuit' | The currently selected garment type. |
selectedMaterial | String | 'denim' | The active material being edited. |
selectedColor | String | '#4A90E2' | The currently selected color from the ColorPicker. |
viewOrientation | String | 'front' | The camera orientation for the 3D model. |
isSimulating | Boolean | false | Toggles the physics simulation state. |
materialProps | Object | { roughness: 0.7, ... } | An object holding values for material properties like roughness and shininess. |
Sources: src/features/design3D/screens/Design3DAtelierScreen.js:15-28, TASK_3_SUMMARY.md
State Update Flow
The diagram below shows how a user interaction in a child component updates the parent screen's state, which then re-renders other child components.
This sequence shows how selecting a material in the RightSidebar triggers a state update in the parent Design3DAtelierScreen, which in turn would cause the Viewport3D to update the model's appearance.
Sources: src/features/design3D/screens/Design3DAtelierScreen.js, src/features/design3D/components/layout/RightSidebar.js
Detailed Components
Right Sidebar
The RightSidebar is a key component for editing the appearance of the 3D model. It contains selectors for view orientation, materials, a color picker, and sliders for material properties.
Sources: src/features/design3D/components/layout/RightSidebar.js
Material Properties
The sidebar includes sliders to control physical properties of the selected material. The default values for these properties are defined in src/core/utils/constants.js.
| Property | Controlled By | Description |
|---|---|---|
| Roughness | PropertySlider | Controls the microscopic roughness of the material surface. |
| Shininess | PropertySlider | Controls the specular highlight intensity. |
| Thickness | PropertySlider | Adjusts the perceived thickness of the fabric. |
| Weight | PropertySlider | Influences how the fabric behaves in physics simulations. |
Sources: src/features/design3D/components/layout/RightSidebar.js, TASK_3_SUMMARY.md, src/core/utils/constants.js:116-146
3D Viewport
The Viewport3D component serves as the placeholder for the main 3D canvas where the garment will be rendered. It is designed to be replaced with a @react-three/fiber canvas.
Current placeholder features include:
- A toggleable background grid.
- An X, Y, Z axis helper.
- A "Simulation" indicator.
- A notice informing the developer that the 3D engine needs to be integrated.
Sources: src/features/design3D/components/viewport/Viewport3D.js, TASK_3_SUMMARY.md
Color Picker
The ColorPicker UI component, used within the RightSidebar, provides multiple ways to select a color:
- A display for the current color with its hex code.
- A grid of 16 preset colors.
- HSV (Hue, Saturation, Value) sliders for fine-tuned color selection.
It's noted that the HSV sliders are currently for visual representation only and do not yet implement the color conversion logic.
Sources: src/features/design3D/components/ui/ColorPicker.js, TASK_3_SUMMARY.md
Platform Detection
The 3D Atelier is designed for desktop/web use. To handle other platforms, Design3DAtelierScreen uses a supports3D utility function. If the function returns false (indicating a mobile or tablet environment), the component renders a MobileFallback UI instead of the full 3D interface.
// src/features/design3D/screens/Design3DAtelierScreen.js:31-33
if (!supports3D()) {
return <MobileFallback navigation={navigation} />;
}
Sources: src/features/design3D/screens/Design3DAtelierScreen.js:31-33, TASK_3_SUMMARY.md
Conclusion
The 3D Design Atelier feature is a comprehensive and well-structured UI foundation for the application's core 3D design functionality. It effectively separates concerns into distinct layout and UI components, managed by a central screen component. While currently a visual scaffold, it is fully prepared for the integration of a 3D rendering engine and backend services to bring its interactive design capabilities to life. The inclusion of platform detection ensures a graceful user experience on non-supported devices.
Sources: TASK_3_SUMMARY.md, README.md