thob-capability-map/Week-1/Task-1/report.md

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
• Event system limitation
• 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.