docs: thob task 4 report (interaction audit)
This commit is contained in:
parent
7d7dcf7841
commit
95689beb85
@ -1,66 +1,56 @@
|
|||||||
# Task: Click To Highlight / Select Visual State
|
# Week 2 Task 4 - Click to Highlight / Select
|
||||||
|
|
||||||
## Objective
|
## Objective
|
||||||
Clicking an object changes it to a “selected” visual state (brighter color, scale increase, opacity shift, etc.).
|
Implement a "Click to Select" pattern where clicking an object changes its visual state (glow, scale, or color).
|
||||||
|
|
||||||
## Vanilla three.js
|
## Vanilla three.js
|
||||||
-Possible: Yes / Partial / No
|
- **Possible**: Yes
|
||||||
-Notes:
|
- **Notes**: Achieved using a `Raycaster` to detect mouse intersections with 3D objects. Requires manual math to convert mouse coordinates to NDC (Normalized Device Coordinates).
|
||||||
-Key concepts:
|
- **Key concepts**: Raycasting, Intersection detection, NDC conversion.
|
||||||
-Complexity: Easy / Medium / Hard
|
- **Complexity**: Medium-Hard (for beginners).
|
||||||
|
|
||||||
## R3F
|
## R3F
|
||||||
-Possible: Yes / Partial / No
|
- **Possible**: Yes
|
||||||
-Notes:
|
- **Notes**: Built-in support for pointer events directly on meshes (e.g., `<mesh onClick={...} />`). This is the industry standard for 3D web interactions.
|
||||||
-What R3F abstracted:
|
- **What R3F abstracted**: Raycasting setup and event propagation.
|
||||||
-Complexity: Easy / Medium / Hard
|
- **Complexity**: Easy.
|
||||||
|
|
||||||
## Thob Page Builder
|
## Thob Page Builder
|
||||||
-Possible: Yes / Partial / No
|
- **Possible**: **No / Partial**
|
||||||
-Notes:
|
- **Notes**: The 3D Mesh nodes do not support click or hover the triggers. The only way to "select" an object is through external UI buttons or RadioGroups.
|
||||||
-Builder steps:
|
- **Builder steps**: Create an external UI -> Assign a selection state -> Link that state to a 3D property (like Emissive intensity).
|
||||||
-Complexity: Easy / Medium / Hard
|
- **Complexity**: Hard (requires complex logic-linking to simulate a basic 3D interaction).
|
||||||
|
|
||||||
## Comparison Summary
|
## Comparison Summary
|
||||||
-Possible in all 3? Yes / Partial / No
|
- **Possible in all 3?**: **No**. Native 3D interaction is missing in Thob.
|
||||||
-Main differences:
|
- **Main differences**: Vanilla/R3F allow clicking the object; Thob forces you to click a 2D UI button.
|
||||||
-Where Thob is better:
|
- **Where Thob is better**: Visual property animation is easy once triggered.
|
||||||
-Where Thob is weaker:
|
- **Where Thob is weaker**: Total lack of Scene-level Raycasting.
|
||||||
-What feels awkward or unclear:
|
- **What feels awkward or unclear**: Trying to find interaction settings in the 3D properties panel, only to realize they don't exist yet.
|
||||||
|
|
||||||
## Limitation Type (if any)
|
## Limitation Type (if any)
|
||||||
-[ ] Editor UX limitation
|
- [ ] Editor UX limitation
|
||||||
-[ ] Runtime limitation
|
- [ ] Runtime limitation
|
||||||
-[ ] Schema / data model limitation
|
- [ ] Schema / data model limitation
|
||||||
-[ ] Component limitation
|
- [ ] Component limitation
|
||||||
-[ ] Event system limitation
|
- [x] Event system limitation (Critical: No 3D Raycasting)
|
||||||
-[ ] Asset pipeline limitation
|
- [ ] Asset pipeline limitation
|
||||||
-[ ] Unknown / needs investigation
|
|
||||||
|
|
||||||
## Workaround
|
## Workaround
|
||||||
-Is there a workaround?
|
- **Is there a workaround?**: Yes. Offload all interaction to **2D UI Buttons** and use them as triggers for 3D state changes.
|
||||||
-If yes, what is it?
|
|
||||||
|
|
||||||
## Suggested Improvement
|
## Suggested Improvement
|
||||||
-What should improve in Thob?
|
- **Primary Optimization**: Implement **3D Move/Click Triggers** on Mesh nodes. Thob needs an "Interactions" tab in the 3D Properties panel to allow users to trigger app-states directly from 3D objects.
|
||||||
-Is it:
|
- **Is it**: runtime, component, UX.
|
||||||
-editor
|
|
||||||
-runtime
|
|
||||||
-component
|
|
||||||
-UX
|
|
||||||
-schema/data
|
|
||||||
|
|
||||||
## Difficulty Estimate
|
|
||||||
-Easy / Medium / Hard
|
|
||||||
|
|
||||||
## Business Value
|
## Business Value
|
||||||
-Low / Medium / High
|
- **Medium-High**: Required for "Hotspots," "Guided Tours," and modern "Click-to-Configure" interiors.
|
||||||
|
|
||||||
## Product Lens
|
## Product Lens
|
||||||
- Is this pattern useful for real customers? Yes / Partial / No
|
- **Is this pattern useful for real customers?**: Yes.
|
||||||
- What kind of customer use case does this support?
|
- **What kind of customer use case does this support?**: Virtual showrooms, architectural hotspots, and feature discovery points.
|
||||||
- Does Thob feel strong enough for this use case?
|
- **Does Thob feel strong enough for this use case?**: **No**. Without native 3D interaction, the experience feels "disconnected" compared to modern 3D apps.
|
||||||
- What would improve the experience?
|
- **What would improve the experience?**: Native pointer events on 3D meshes.
|
||||||
|
|
||||||
## Recommendation
|
## Recommendation
|
||||||
Should Thob support this better? Why?.
|
Adding 3D Raycasting/Interactions should be a top priority roadmap item. It is the missing "bridge" that would allow designers to build truly immersive and interactive 3D digital products.
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user