# Task: Camera Preset Switching (Front / Side / Top Angled)

## Objective
Switch the camera between predefined viewpoints and smoothly transition between them using UI buttons (and optional keyboard shortcuts).

## Vanilla three.js
-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:
  - Perspective camera setup
  - Preset position mapping
  - Input events for switching views
  - Frame-loop interpolation
-Complexity: Medium

## R3F
-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:
  - 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: Partial
-Notes:
  - I found two ways to approach this.
  - Way 1 (workaround): use radio buttons to switch between meshes/view proxies preconfigured at different angles. This gave stable visual switching.
  - Way 2 (direct preset intent): use Perspective Camera with Make Default toggling for preset switching. This did not work at all in my testing.
  - My first intuition was to use buttons for direct camera preset switching, but I could not make that setup work end-to-end.
  - Current button UX needs improvement.
  - It should be easier and more intuitive to connect a button and change target component prop values.
  - The current action wiring flow is not clear enough for reliable button-driven preset changes.
  - Conclusion: radio-button mesh/view switching is a workaround, not a reliable direct camera-preset flow.
-Builder steps:
  - 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? 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)
-[x] Editor UX limitation
-[ ] Runtime limitation
-[ ] Schema / data model limitation
-[ ] Component limitation
-[x] Event system limitation
-[ ] Asset pipeline limitation
-[ ] Unknown / needs investigation

## Workaround
-Is there a workaround?
  - Partial workaround.
-If yes, what is it?
  - Use radio buttons to switch between meshes (or view proxies) that are pre-set to different camera angles.
  - This gives stable visual preset-like switching.
  - Direct preset switching by toggling Perspective Camera Make Default did not work at all.

## 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
  - UX
  - component

## Difficulty Estimate
-Medium

## Business Value
-High

## Recommendation
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.