Week 2 Task 4 - Click to Highlight / Select

Objective

Implement a "Click to Select" pattern where clicking an object changes its visual state (glow, scale, or color).

Vanilla three.js

Possible: Yes
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: Raycasting, Intersection detection, NDC conversion.
Complexity: Medium-Hard (for beginners).

R3F

Possible: Yes
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: Raycasting setup and event propagation.
Complexity: Easy.

Thob Page Builder

Possible: No / Partial
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: Create an external UI -> Assign a selection state -> Link that state to a 3D property (like Emissive intensity).
Complexity: Hard (requires complex logic-linking to simulate a basic 3D interaction).

Comparison Summary

Possible in all 3?: No. Native 3D interaction is missing in Thob.
Main differences: Vanilla/R3F allow clicking the object; Thob forces you to click a 2D UI button.
Where Thob is better: Visual property animation is easy once triggered.
Where Thob is weaker: Total lack of Scene-level Raycasting.
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)

Editor UX limitation
Runtime limitation
Schema / data model limitation
Component limitation
Event system limitation (Critical: No 3D Raycasting)
Asset pipeline limitation

Workaround

Is there a workaround?: Yes. Offload all interaction to 2D UI Buttons and use them as triggers for 3D state changes.

Suggested Improvement

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: runtime, component, UX.

Business Value

Medium-High: Required for "Hotspots," "Guided Tours," and modern "Click-to-Configure" interiors.

Product Lens

Is this pattern useful for real customers?: Yes.
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?: No. Without native 3D interaction, the experience feels "disconnected" compared to modern 3D apps.
What would improve the experience?: Native pointer events on 3D meshes.

Recommendation

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.

3.1 KiB Raw Blame History