90 lines
3.4 KiB
Markdown
90 lines
3.4 KiB
Markdown
# 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)
|
|
- [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 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. |