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.

3.3 KiB Raw Blame History