# 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.