Task: Step Guided Scene Flow (Camera + Object State Changes)

Objective

Create a 3-step guided flow where each step changes camera position/look target and object states (visibility, position, rotation).

Vanilla three.js

Possible: Yes
Notes:
- Defines a step configuration array with camera and object state for each step.
- Buttons and keyboard shortcuts switch between steps.
- Animates transitions with interpolation for camera position, look target, object transforms, and visibility changes. -Key concepts:
- Step/state data model
- Camera target and lookAt transitions
- Object visibility toggling
- Smooth lerp-based animation -Complexity: Medium

R3F

-Possible: Yes -Notes:

Uses React state for active step and a shared STEPS config.
Uses refs for objects and useFrame for smooth interpolation each frame.
UI stays declarative while scene updates are handled in a guided controller pattern. -What R3F abstracted:
Render loop integration through hooks
Scene update flow tied to React state
Cleaner composition for scene and controls -Complexity: Medium

Thob Page Builder

-Possible: Partial -Notes:

We can create the same result by toggling multiple combinations of the Make Default button of the Perspective Camera component and by toggling the visibilty object component.
Same as before, the button UX needs improvement.
The button should connect to and change component prop values in an easier and more intuitive way.
I was not able to clearly figure out how to make the button functional end-to-end.
Builder steps:
- Add Perspective Camera component and toggle Make Default.
- Add object components and configure visibility states.
- Add step buttons and try to bind button actions to camera and object prop changes.
Complexity: Hard

Comparison Summary

Possible in all 3? Partial
Main differences:
- Vanilla and R3F both support full step transitions with explicit logic.
- Thob can represent the setup, but interaction wiring for step-driven prop updates is still difficult.
Where Thob is better:
- Fast visual setup of scene components without writing all code.
Where Thob is weaker:
- Button-to-prop binding discoverability and ease of use.
What feels awkward or unclear:
- How to make one button reliably update multiple target props (camera + object states) per step.

Limitation Type (if any)

Editor UX limitation
Runtime limitation
Schema / data model limitation
Component limitation
Event system limitation
Asset pipeline limitation
Unknown / needs investigation

Workaround

Is there a workaround?
- Partial workaround.
If yes, what is it?
- Use Make Default and object toggles for basic/static setups.
- For complete multi-step transitions, implement custom interaction logic outside the current builder button flow.

Suggested Improvement

-What should improve in Thob?

Improve Make Default button UX.
Make button binding to component props simpler and more intuitive.
Provide a clear mapping UI for action -> target component -> prop -> value.
Is it:
- editor
- UX
- component

Difficulty Estimate

Medium

Business Value

High

Recommendation

Yes, Thob should support this better because guided camera/object step flows are common in demos, onboarding scenes, and product explainers. Better interaction UX would make this practical for non-technical users.

3.4 KiB Raw Blame History