90 lines
3.3 KiB
Markdown
90 lines
3.3 KiB
Markdown
# 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:
|
|
- 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:
|
|
- 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 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
|
|
- 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. |