docs: complete task-1 comparison report and capability mapping

Week-1/Task-1/report.md

@@ -1,60 +1,63 @@
-# Task: [Feature Name]
+# Task 1: [Basic Material Color Change]
 
 ## Objective
-What is the feature trying to do?
+Create a single 3D object and interactively change its material color using three different approaches.
 
-## Vanilla three.js
+## Vanilla Three.js
--Possible: Yes / Partial / No
+-Possible: **Yes**
--Notes:
+-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:
+-Key concepts: `Object mutation`, `Manual Animation Loop`, `Event Listeners`.
--Complexity: Easy / Medium / Hard
+-Complexity: **Easy** (High boilerplate).
 
 ## R3F
--Possible: Yes / Partial / No
+-Possible: **Yes**
--Notes:
+-Notes: Extremely efficient. Declarative structure makes it easy to read. Raycasting is abstracted into the `onClick` prop.
--What R3F abstracted:
+-What R3F abstracted: `Raycasting`, `Re-rendering`, `State Hooks`, `Scene Management`.
--Complexity: Easy / Medium / Hard
+-Complexity: **Easy** (Very concise).
 
 ## Thob Page Builder
--Possible: Yes / Partial / No
+-Possible: **Partial**
--Notes:
+-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:
+-Builder steps: `Canvas > Add Mesh > Select meshStandardMaterial > Use Color Picker`.
--Complexity: Easy / Medium / Hard
+-Complexity: **Easy** (for static) / **Hard** (for dynamic/interactive).
 
 ## Comparison Summary
--Possible in all 3? Yes / Partial / No
+-Possible in all 3? **Partial** (Dynamic interaction only supported in Code).
 -Main differences:
--Where Thob is better:
+  - **Vanilla**: Gives you full control, but requires a lot of extra code.
--Where Thob is weaker:
+  - **R3F**: The fastest way to write complex interactions with simple code.
--What feels awkward or unclear:
+  - **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
--[ ] Event system limitation
+- [x] Event system limitation
+- [x] Property binding limitation
 - [ ] Asset pipeline limitation
 - [ ] Unknown / needs investigation
 
 ## Workaround
--Is there a 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.
--If yes, what is it?
 
 ## Suggested Improvement
--What should improve in Thob?
+-What should improve in Thob? **Add a "Set Property" action for event triggers and better error feedback.**
 -Is it:
-  -editor
+- editor (Yes)
-  -runtime
+- runtime (Yes)
-  -component
+- component (No)
-  -UX
+- UX (Yes)
-  -schema/data
+- schema/data (Yes)
 
 ## Difficulty Estimate
--Easy / Medium / Hard
+- **Easy**
 
 ## Business Value
--Low / Medium / High
+- **Medium/High** (Essential for product configurators and UI/UX mockups).
 
 ## Recommendation
-Should Thob support this better? Why?
+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.