64 lines
2.8 KiB
Markdown
64 lines
2.8 KiB
Markdown
# Task 1: [Basic Material Color Change]
|
|
|
|
## Objective
|
|
Create a single 3D object and interactively change its material color using three different approaches.
|
|
|
|
## Vanilla Three.js
|
|
-Possible: **Yes**
|
|
-Notes: Requires manual setup of the Scene, Camera, and Renderer boilerplate. Interaction requires a `window` click event or a `Raycaster` to detect mesh clicks.
|
|
-Key concepts: `Object mutation`, `Manual Animation Loop`, `Event Listeners`.
|
|
-Complexity: **Easy** (High boilerplate).
|
|
|
|
## R3F
|
|
-Possible: **Yes**
|
|
-Notes: Extremely efficient. Declarative structure makes it easy to read. Raycasting is abstracted into the `onClick` prop.
|
|
-What R3F abstracted: `Raycasting`, `Re-rendering`, `State Hooks`, `Scene Management`.
|
|
-Complexity: **Easy** (Very concise).
|
|
|
|
## Thob Page Builder
|
|
-Possible: **Partial**
|
|
-Notes: **Excellent for static visual editing** via the side-panel color picker. However, **dynamic interaction** (changing color on click) is currently difficult and resulted in scripting errors.
|
|
-Builder steps: `Canvas > Add Mesh > Select meshStandardMaterial > Use Color Picker`.
|
|
-Complexity: **Easy** (for static) / **Hard** (for dynamic/interactive).
|
|
|
|
## Comparison Summary
|
|
-Possible in all 3? **Partial** (Dynamic interaction only supported in Code).
|
|
-Main differences:
|
|
- **Vanilla**: Gives you full control, but requires a lot of extra code.
|
|
- **R3F**: The fastest way to write complex interactions with simple code.
|
|
- **Thob**: Best for visual editing; lacks simple "No-Code" interaction logic.
|
|
-Where Thob is better: **Instantly seeing visual changes** without any code.
|
|
-Where Thob is weaker: **Interactive logic** (e.g., "if I click this, change that").
|
|
-What feels awkward or unclear: The lack of a clear "No-Code" interaction system makes dynamic updates difficult.
|
|
|
|
## Limitation Type (if any)
|
|
- [ ] Editor UX limitation
|
|
- [ ] Runtime limitation
|
|
- [ ] Schema / data model limitation
|
|
- [ ] Component limitation
|
|
- [x] Event system limitation
|
|
- [x] Property binding limitation
|
|
- [ ] Asset pipeline limitation
|
|
- [ ] Unknown / needs investigation
|
|
|
|
## Workaround
|
|
-Is there a workaround? **No reliable workaround found for 100% no-code dynamic updates.** Toggling visibility between two pre-colored objects might work but is not an efficient solution.
|
|
|
|
## Suggested Improvement
|
|
-What should improve in Thob? **Add a "Set Property" action for event triggers and better error feedback.**
|
|
-Is it:
|
|
- editor (Yes)
|
|
- runtime (Yes)
|
|
- component (No)
|
|
- UX (Yes)
|
|
- schema/data (Yes)
|
|
|
|
## Difficulty Estimate
|
|
- **Easy**
|
|
|
|
## Business Value
|
|
- **Medium/High** (Essential for product configurators and UI/UX mockups).
|
|
|
|
## Recommendation
|
|
Thob **should** support this better. Material color swapping is a core feature for product customization (e.g., choosing a sofa color), which is a major use case for 3D page builders.
|