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

Task 4 Report: [Click To Toggle Visual State]

Objective

Click an object and persistently toggle between two visual states (e.g., color lime/blue).

Vanilla Three.js

• Possible: Yes
• Notes: Requires setting up a Raycaster + mousedown event, manually tracking a boolean state variable, and updating the material color on every click hit.
• Key concepts: Persistent State Variable, if/else logic, Mutation Loop.
• Complexity: Medium.

R3F

• Possible: Yes
• Notes: Inherently simple. React's useState hook naturally handles the persistent toggle, and the mesh declarative onClick prop makes wiring it trivial.
• What R3F abstracted: Raycaster computation, State-to-Visual binding.
• Complexity: Easy (Very concise).

Thob Page Builder

• Possible: No (based on current testing)
• Notes:
  • The onClick trigger is visible in the UI, but did not result in observable state changes during testing
  • No clear mechanism for defining or managing persistent state (e.g., toggle variable)
  • Unable to switch between two visual states using interaction
• Builder steps: N/A
• Complexity: Limited (interaction + state system not clearly supported)

Comparison Summary

• Possible in all 3? No (toggle interaction not achieved in builder)

• Main differences:

  • Vanilla: Powerful but requires manual state management and more code
  • R3F: Clean and efficient for state-driven interactions
  • Thob: Interaction system present but lacks clear state handling and reliable execution

• Where Thob is better:

  • Static visual configuration

• Where Thob is weaker:

  • Lack of state management system
  • Unclear event-to-property binding
  • Interaction execution is not reliable during testing

• What feels awkward or unclear:

  • No visible way to define or store state (e.g., toggle)
  • Interaction triggers exist but do not clearly connect to visual updates

Limitation Type (if any)

• Editor UX limitation
• Runtime limitation (event execution unclear)
• Schema / data model limitation
• Component limitation
• Event system limitation
• Property binding limitation (no state system)
• Asset pipeline limitation
• Unknown / needs investigation

Workaround

• No reliable workaround found for toggle interaction
• May require additional configuration or future feature support

Suggested Improvement

• Improve reliability of onClick event execution

• Introduce a simple state management system (e.g., boolean variables)

• Allow property binding between state and visual properties (e.g., color)

• Provide clearer feedback when interaction actions fail

• Is it:

  • editor (Yes)
  • runtime (Yes)
  • component (No)
  • UX (Yes)
  • schema/data (Yes)

Difficulty Estimate

• Medium

Business Value

• Critical (Toggle interactions are essential for product configurators and interactive experiences)

Recommendation

To support real-world interactive use cases, the builder should improve its event system and introduce a clear state management mechanism, enabling reliable toggle-based interactions.