diff --git a/Week-2/Task-1/ProductLens.md b/Week-2/Task-1/ProductLens.md index ba487ce..443829a 100644 --- a/Week-2/Task-1/ProductLens.md +++ b/Week-2/Task-1/ProductLens.md @@ -1,5 +1,12 @@ ## 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? + - 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? -- What would improve the experience? \ No newline at end of file + - 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. \ No newline at end of file diff --git a/Week-2/Task-1/TaskNotes.md b/Week-2/Task-1/TaskNotes.md index e8be752..9f094e8 100644 --- a/Week-2/Task-1/TaskNotes.md +++ b/Week-2/Task-1/TaskNotes.md @@ -1,60 +1,90 @@ -# Task: [Feature Name] +# Task: Camera Preset Switching (Front / Side / Top Angled) ## 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 --Possible: Yes / Partial / No +-Possible: Yes -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: --Complexity: Easy / Medium / Hard + - Perspective camera setup + - Preset position mapping + - Input events for switching views + - Frame-loop interpolation +-Complexity: Medium ## R3F --Possible: Yes / Partial / No +-Possible: Yes -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: --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 --Possible: Yes / Partial / No +-Possible: Partial -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: --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 --Possible in all 3? Yes / Partial / No +-Possible in all 3? Partial -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: + - Faster visual setup for camera and scene without coding everything. -Where Thob is weaker: + - Button interaction flow and property binding discoverability. -What feels awkward or unclear: + - How to connect button actions directly to camera props/presets in a reliable way. ## Limitation Type (if any) --[ ] Editor UX limitation +-[x] Editor UX limitation -[ ] Runtime limitation -[ ] Schema / data model limitation -[ ] Component limitation --[ ] Event system limitation +-[x] Event system limitation -[ ] Asset pipeline limitation -[ ] Unknown / needs investigation ## Workaround -Is there a workaround? + - Partial workaround. -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 -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: - -editor - -runtime - -component - -UX - -schema/data + - editor + - UX + - component ## Difficulty Estimate --Easy / Medium / Hard +-Medium ## Business Value --Low / Medium / High +-High ## Recommendation -Should Thob support this better? Why? \ No newline at end of file +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. \ No newline at end of file