Compare commits
No commits in common. "cb1004584e0cfaf90a25fe4901ffc6fdcdc0cd1d" and "d7267ebaef5ec34f232e3bceeb44287aee0bd2df" have entirely different histories.
cb1004584e
...
d7267ebaef
@ -1,79 +1,60 @@
|
|||||||
# Task 3 Report: [Hover Interaction (Visual Feedback)]
|
# Task: [Feature Name]
|
||||||
|
|
||||||
## Objective
|
## Objective
|
||||||
When the user hovers over the 3D object, something changes visually (e.g., color, scale).
|
What is the feature trying to do?
|
||||||
|
|
||||||
## Vanilla Three.js
|
## Vanilla three.js
|
||||||
- Possible: **Yes**
|
-Possible: Yes / Partial / No
|
||||||
- Notes: Requires setting up a `Raycaster`, calculating **Normalized Device Coordinates (NDC)** for the mouse, and manually toggling states inside a `mousemove` event listener.
|
-Notes:
|
||||||
- Key concepts: `THREE.Raycaster`, `mousemove`, `NDC calculation`, `Manual State Management`.
|
-Key concepts:
|
||||||
- Complexity: **Medium** (High math/boilerplate).
|
-Complexity: Easy / Medium / Hard
|
||||||
|
|
||||||
## R3F
|
## R3F
|
||||||
- Possible: **Yes**
|
-Possible: Yes / Partial / No
|
||||||
- Notes: Extremely intuitive. Built-in `onPointerOver` and `onPointerOut` props handle everything declaratively. State management is simple with `useState`.
|
-Notes:
|
||||||
- What R3F abstracted: `Raycaster computation`, `Normalized Coordinates`, `Event-to-Mesh mapping`.
|
-What R3F abstracted:
|
||||||
- Complexity: **Easy** (Very concise, 5-10 lines of code).
|
-Complexity: Easy / Medium / Hard
|
||||||
|
|
||||||
## Thob Page Builder
|
## Thob Page Builder
|
||||||
- Possible: **No (for hover interaction)**
|
-Possible: Yes / Partial / No
|
||||||
-Notes:
|
-Notes:
|
||||||
- Hover interaction is not supported in the current UI
|
-Builder steps:
|
||||||
- Click trigger exists but did not produce consistent results during testing
|
-Complexity: Easy / Medium / Hard
|
||||||
- Interaction system appears limited or unstable for dynamic visual feedback
|
|
||||||
- Complexity: **Limited** (interaction features not fully functional)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Comparison Summary
|
## Comparison Summary
|
||||||
|
-Possible in all 3? Yes / Partial / No
|
||||||
- Possible in all 3? **No** (hover interaction not supported in builder)
|
|
||||||
|
|
||||||
-Main differences:
|
-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:
|
-Where Thob is better:
|
||||||
- **Static visual prototyping**
|
|
||||||
|
|
||||||
-Where Thob is weaker:
|
-Where Thob is weaker:
|
||||||
- **Interaction system reliability**
|
|
||||||
- Lack of hover support
|
|
||||||
- Unclear event-to-property binding
|
|
||||||
|
|
||||||
-What feels awkward or unclear:
|
-What feels awkward or unclear:
|
||||||
- Interaction triggers are visible but behavior is not always predictable
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Limitation Type
|
|
||||||
|
|
||||||
|
## Limitation Type (if any)
|
||||||
-[ ] Editor UX limitation
|
-[ ] Editor UX limitation
|
||||||
- [x] Runtime limitation (event execution unclear)
|
-[ ] Runtime limitation
|
||||||
-[ ] Schema / data model limitation
|
-[ ] Schema / data model limitation
|
||||||
-[ ] Component limitation
|
-[ ] Component limitation
|
||||||
- [x] Event system limitation
|
-[ ] Event system limitation
|
||||||
- [x] Property binding limitation
|
|
||||||
-[ ] Asset pipeline limitation
|
-[ ] Asset pipeline limitation
|
||||||
|
-[ ] Unknown / needs investigation
|
||||||
---
|
|
||||||
|
|
||||||
## Workaround
|
## Workaround
|
||||||
|
-Is there a workaround?
|
||||||
- No reliable workaround found for hover interaction
|
-If yes, what is it?
|
||||||
- Click interaction may require further investigation or configuration
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Suggested Improvement
|
## Suggested Improvement
|
||||||
|
-What should improve in Thob?
|
||||||
|
-Is it:
|
||||||
|
-editor
|
||||||
|
-runtime
|
||||||
|
-component
|
||||||
|
-UX
|
||||||
|
-schema/data
|
||||||
|
|
||||||
- Improve reliability of event execution (e.g., onClick behavior)
|
## Difficulty Estimate
|
||||||
- Introduce hover interaction support (`onHoverStart`, `onHoverEnd`)
|
-Easy / Medium / Hard
|
||||||
- Provide clearer feedback when event actions fail
|
|
||||||
|
|
||||||
---
|
## Business Value
|
||||||
|
-Low / Medium / High
|
||||||
|
|
||||||
## Recommendation
|
## Recommendation
|
||||||
|
Should Thob support this better? Why?
|
||||||
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.
|
|
||||||
|
|||||||
@ -1,51 +0,0 @@
|
|||||||
# Builder Exploration Notes — Task 3: Hover Interaction
|
|
||||||
|
|
||||||
## Capability Gap Identified
|
|
||||||
|
|
||||||
- **Hover Events**: No visible support for `onPointerOver` / `onPointerOut` (hover) in the interaction panel
|
|
||||||
- **Click Behavior**: `onClick` trigger is present in UI, but actions did not produce visible results during testing
|
|
||||||
- **Visual Logic**: No clear way to connect user interaction to visual state changes (e.g., color/scale)
|
|
||||||
- **Interaction Experience**: Scene appears static due to lack of responsive feedback
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Observations
|
|
||||||
|
|
||||||
- Interaction UI exists but execution behavior is unclear or inconsistent
|
|
||||||
- Hover-based interaction is not exposed as a first-class concept
|
|
||||||
- Click interaction may require additional configuration or may be unstable in current environment
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Comparison vs Code
|
|
||||||
|
|
||||||
- **Vanilla**:
|
|
||||||
- Requires raycasting and mouse tracking
|
|
||||||
- Fully controllable but complex
|
|
||||||
|
|
||||||
- **R3F**:
|
|
||||||
- Hover interaction is simple using `onPointerOver` / `onPointerOut`
|
|
||||||
- Very intuitive and minimal code
|
|
||||||
|
|
||||||
- **Thob**:
|
|
||||||
- Hover interaction not available
|
|
||||||
- Click interaction present but did not behave as expected during testing
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Key Insight
|
|
||||||
|
|
||||||
The builder currently lacks clear support for continuous pointer-based interactions (like hover) and shows limitations in reliably executing event-based visual updates.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Product Perspective
|
|
||||||
|
|
||||||
Hover interactions are essential for user feedback (highlighting, selection cues). The absence or instability of such interactions limits the builder’s ability to create engaging 3D experiences.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Verdict
|
|
||||||
|
|
||||||
Strong for **static visual setup**
|
|
||||||
Limited for **interactive behavior (hover and dynamic feedback)**
|
|
||||||
Loading…
x
Reference in New Issue
Block a user