builder-research/Week-1/Task-2/TaskNotes.md

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)

• 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?
  • 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.