anshk/builder-research
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: task1 notes

Browse Source
This commit is contained in:
anshk 2026-04-07 11:08:11 +05:30
parent 4310263170
commit af093fa87a
2 changed files with 58 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Week-2/Task-1/ProductLens.md
View File

@ -1,5 +1,12 @@
## 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?
- 3D product viewers where users switch between front/side/detail viewpoints.
- Architecture/interior previews with predefined camera tour angles.
- Marketing/storytelling scenes that need guided perspective changes.
- Does Thob feel strong enough for this use case? - Does Thob feel strong enough for this use case?
- What would improve the experience? - Partial. The base setup works (Perspective Camera + Make Default), but interaction wiring for button-driven camera behavior is still hard to discover and execute.
- What would improve the experience?
- Improve Make Default button UX.
- Make button-to-component-prop binding easier and more intuitive.
- Add a clearer interaction flow: choose button -> choose target component -> choose prop -> choose value/preset.

68
Week-2/Task-1/TaskNotes.md
View File

@ -1,60 +1,90 @@
# Task: [Feature Name] # Task: Camera Preset Switching (Front / Side / Top Angled)
## Objective ## Objective
What is the feature trying to do? Switch the camera between predefined viewpoints and smoothly transition between them using UI buttons (and optional keyboard shortcuts).
## Vanilla three.js ## Vanilla three.js
-Possible: Yes / Partial / No -Possible: Yes
-Notes: -Notes:
- Uses `THREE.PerspectiveCamera` with three named presets (`front`, `side`, `topAngled`).
- Buttons and keyboard input update a `desiredPosition` vector.
- Camera movement is smoothed each frame using `camera.position.lerp(...)`.
-Key concepts: -Key concepts:
-Complexity: Easy / Medium / Hard - Perspective camera setup
- Preset position mapping
- Input events for switching views
- Frame-loop interpolation
-Complexity: Medium
## R3F ## R3F
-Possible: Yes / Partial / No -Possible: Yes
-Notes: -Notes:
- Uses React state (`preset`) for active camera view.
- `CameraController` reads R3F camera with `useThree()` and updates it in `useFrame()`.
- Buttons and key events only update state; camera logic stays isolated in one controller component.
-What R3F abstracted: -What R3F abstracted:
-Complexity: Easy / Medium / Hard - Render loop management via `useFrame`
- Camera access inside scene graph via hooks
- Cleaner state-driven UI-to-camera flow
-Complexity: Easy
## Thob Page Builder ## Thob Page Builder
-Possible: Yes / Partial / No -Possible: Partial
-Notes: -Notes:
- We can create the same result by using the Perspective Camera component and toggling the Make Default button.
- Current button UX needs improvement.
- It should be easier and more intuitive to connect a button and change target component prop values.
- I could not clearly figure out how to make the button functional end-to-end.
-Builder steps: -Builder steps:
-Complexity: Easy / Medium / Hard - Add a Perspective Camera component.
- Toggle Make Default on the camera.
- Try wiring UI button actions to camera property changes/preset values.
-Complexity: Hard
## Comparison Summary ## Comparison Summary
-Possible in all 3? Yes / Partial / No -Possible in all 3? Partial
-Main differences: -Main differences:
- Vanilla gives full control but needs more manual wiring.
- R3F gives a clean state-driven structure with less boilerplate.
- Thob is visually fast for setup but action-to-prop wiring is not intuitive yet.
-Where Thob is better: -Where Thob is better:
- Faster visual setup for camera and scene without coding everything.
-Where Thob is weaker: -Where Thob is weaker:
- Button interaction flow and property binding discoverability.
-What feels awkward or unclear: -What feels awkward or unclear:
- How to connect button actions directly to camera props/presets in a reliable way.
## Limitation Type (if any) ## Limitation Type (if any)
-[ ] Editor UX limitation -[x] 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
-[ ] Asset pipeline limitation -[ ] Asset pipeline limitation
-[ ] Unknown / needs investigation -[ ] Unknown / needs investigation
## Workaround ## Workaround
-Is there a workaround? -Is there a workaround?
- Partial workaround.
-If yes, what is it? -If yes, what is it?
- Use Perspective Camera + Make Default for a static/default view.
- For advanced preset switching behavior, implement custom logic outside the current builder button flow.
## Suggested Improvement ## Suggested Improvement
-What should improve in Thob? -What should improve in Thob?
- Improve Make Default button UX and action binding flow.
- Let buttons connect to component props more directly and transparently.
- Add a clearer UI for selecting target component, target prop, and value per interaction.
-Is it: -Is it:
-editor - editor
-runtime - UX
-component - component
-UX
-schema/data
## Difficulty Estimate ## Difficulty Estimate
-Easy / Medium / Hard -Medium
## Business Value ## Business Value
-Low / Medium / High -High
## Recommendation ## Recommendation
Should Thob support this better? Why? Yes, Thob should support this better because camera presets are common in product demos, configurators, and storytelling scenes. Easier camera-control UX would reduce setup time and increase confidence for non-code users.