Task 3 Report: [Hover Interaction (Visual Feedback)]

Objective

When the user hovers over the 3D object, something changes visually (e.g., color, scale).

Vanilla Three.js

Possible: Yes
Notes: Requires setting up a Raycaster, calculating Normalized Device Coordinates (NDC) for the mouse, and manually toggling states inside a mousemove event listener.
Key concepts: THREE.Raycaster, mousemove, NDC calculation, Manual State Management.
Complexity: Medium (High math/boilerplate).

R3F

Possible: Yes
Notes: Extremely intuitive. Built-in onPointerOver and onPointerOut props handle everything declaratively. State management is simple with useState.
What R3F abstracted: Raycaster computation, Normalized Coordinates, Event-to-Mesh mapping.
Complexity: Easy (Very concise, 5-10 lines of code).

Thob Page Builder

Possible: No (for hover interaction)
Notes:
- Hover interaction is not supported in the current UI
- Click trigger exists but did not produce consistent results during testing
- Interaction system appears limited or unstable for dynamic visual feedback
Complexity: Limited (interaction features not fully functional)

Comparison Summary

Possible in all 3? No (hover interaction not supported in builder)
Main differences:
- Vanilla: Powerful but requires manual setup
- R3F: Simplest and most reliable interaction system
- Thob: Limited interaction support; hover missing and click behavior unclear
Where Thob is better:
- Static visual prototyping
Where Thob is weaker:
- Interaction system reliability
- Lack of hover support
- Unclear event-to-property binding
What feels awkward or unclear:
- Interaction triggers are visible but behavior is not always predictable

Limitation Type

Editor UX limitation
Runtime limitation (event execution unclear)
Schema / data model limitation
Component limitation
Event system limitation
Property binding limitation
Asset pipeline limitation

Workaround

No reliable workaround found for hover interaction
Click interaction may require further investigation or configuration

Suggested Improvement

Improve reliability of event execution (e.g., onClick behavior)
Introduce hover interaction support (onHoverStart, onHoverEnd)
Provide clearer feedback when event actions fail

Recommendation

To enable interactive 3D experiences, the builder should strengthen its event system, ensuring reliable execution of click triggers and adding support for hover-based interactions.

2.6 KiB Raw Permalink Blame History