83 lines
3.7 KiB
Markdown
83 lines
3.7 KiB
Markdown
# Task: Parent-Child-Grandchild Hierarchy (Sun -> Earth -> Moon)
|
|
|
|
## Objective
|
|
The objective was to create a 3-level hierarchy where the Sun is parent, Earth is child, and Moon is grandchild, then validate orbit and self-rotation behavior with clear local vs inherited transforms.
|
|
|
|
## Vanilla three.js
|
|
- Possible: Yes
|
|
- Notes: Implemented as `solarSystem -> sun -> earthOrbit -> earth -> moonOrbit -> moon`. Earth orbits Sun by rotating `earthOrbit`; Moon orbits Earth by rotating `moonOrbit`; Earth self-rotates on local Y.
|
|
- Key concepts: Scene graph hierarchy, transform inheritance, local transform pivots with `Object3D`, frame-time based animation.
|
|
- Complexity: Easy
|
|
|
|
## R3F
|
|
- Possible: Yes
|
|
- Notes: Implemented the same hierarchy with nested JSX nodes and `group` refs in `useFrame` for orbit updates.
|
|
- What R3F abstracted: Declarative tree for parent/child relationships, lifecycle/render loop integration with `useFrame`, less boilerplate for setup.
|
|
- Complexity: Easy
|
|
|
|
## Thob Page Builder
|
|
- Possible: Partial (based on Task 1 behavior)
|
|
- Notes: Parent-child worked in Task 1, but child transform behavior became unstable when editing child position under transformed parent. Task 2 extends this to a deeper hierarchy (parent-child-grandchild), so predictability risk increases.
|
|
- Builder steps:
|
|
1. Create Sun mesh.
|
|
2. Create Earth as child of Sun.
|
|
3. Create Moon as child of Earth (grandchild of Sun).
|
|
4. Test parent transform inheritance (Sun move/scale).
|
|
5. Test child and grandchild local transforms independently.
|
|
- Complexity: Medium
|
|
|
|
## Comparison Summary
|
|
- Possible in all 3? Partial
|
|
- Main differences:
|
|
- Vanilla gives explicit and predictable control over every transform.
|
|
- R3F keeps the same predictability with easier hierarchy expression.
|
|
- Thob is fast for setup, but deeper nested transform behavior may be harder to trust when local edits are involved.
|
|
- Where Thob is better: Fast visual authoring and parenting without code.
|
|
- Where Thob is weaker: Transform debugging and local-vs-inherited clarity in deeper hierarchies.
|
|
- What feels awkward or unclear: It is not always obvious which transform comes from parent inheritance vs local overrides.
|
|
|
|
## Evaluation Questions
|
|
- Are transforms predictable?
|
|
- Vanilla: Yes.
|
|
- R3F: Yes.
|
|
- Thob: Partially; basic inheritance works, but nested local edits can feel unstable.
|
|
- Is it easy to reason about local vs inherited motion?
|
|
- Vanilla: Yes, because hierarchy and pivot objects are explicit in code.
|
|
- R3F: Yes, because nested JSX mirrors scene graph structure clearly.
|
|
- Thob: Not always; editor feedback for transform source is limited.
|
|
- Does the builder make hierarchy understandable?
|
|
- Partially. Parenting can be created quickly, but understanding and debugging multi-level transform behavior is less transparent than code-based setups.
|
|
|
|
## Limitation Type (if any)
|
|
- [x] Editor UX limitation
|
|
- [x] Runtime limitation
|
|
- [ ] Schema / data model limitation
|
|
- [x] Component limitation
|
|
- [ ] Event system limitation
|
|
- [ ] Asset pipeline limitation
|
|
- [ ] Unknown / needs investigation
|
|
|
|
## Workaround
|
|
- Is there a workaround?
|
|
- No
|
|
|
|
## Suggested Improvement
|
|
- What should improve in Thob?
|
|
- Add clearer transform inspector support for inherited vs local values in nested hierarchies.
|
|
- Provide stable multi-level pivot behavior (parent-child-grandchild) when position/scale are edited.
|
|
- Add hierarchy visualization and world/local gizmo clarity.
|
|
- Is it:
|
|
- editor
|
|
- runtime
|
|
- component
|
|
- UX
|
|
|
|
## Difficulty Estimate
|
|
Medium
|
|
|
|
## Business Value
|
|
High
|
|
|
|
## Recommendation
|
|
Should Thob support this better? Why?
|
|
- Yes. Parent-child-grandchild transform reliability is fundamental for non-trivial 3D scenes and directly affects trust, speed, and correctness for builders making interactive experiences. |