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