81 lines
3.1 KiB
Markdown
81 lines
3.1 KiB
Markdown
# 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
|
|
- [x] Runtime limitation (event execution unclear)
|
|
- [ ] Schema / data model limitation
|
|
- [ ] Component limitation
|
|
- [x] Event system limitation
|
|
- [x] 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. |