# Task: Parent-Child Hierarchy

## Objective
The objective was to create a simple 3D scene with two objects in a parent-child hierarchy, then verify that transformations applied to the parent (such as position and scale) are correctly inherited by the child.

## Vanilla three.js
-Possible: Yes 
-Notes: Implemented by creating sunMesh and attaching an earthOrbit group to it (`sunMesh.add(earthOrbit)`), then adding earthMesh to that group. Parent transforms propagate correctly to child.
-Key concepts: Scene graph hierarchy, `THREE.Group` as orbit pivot, local vs world transforms, animation loop for orbit/spin.
-Complexity: Easy

## R3F
-Possible: Yes 
-Notes: Implemented by nesting Earth inside a `<group ref={orbitRef}>` inside the Sun `<mesh>`, making Earth a child in the same scene graph hierarchy.
-What R3F abstracted: Declarative JSX scene creation, automatic render lifecycle integration with React, and frame updates via `useFrame` instead of manual renderer/loop setup.
-Complexity: Easy

## Thob Page Builder
-Possible: Yes 
-Notes: Implemented by putting the Earth mesh inside the Sun mesh (parent-child). Changing Sun position/scale also affects Earth as expected (Earth follows position and scale inheritance). However, when Earth position is changed directly, Earth shape appears to distort/stretch as it moves farther from Sun.
-Builder steps: Create Sun mesh -> add Earth mesh as child of Sun -> test parent transform inheritance by changing Sun position/scale -> test child local transform by changing Earth position.
-Complexity: Easy

## Comparison Summary
-Possible in all 3? Yes
-Main differences: Vanilla gives explicit low-level control; R3F gives cleaner declarative hierarchy; Thob gives fastest visual setup but less predictable child transform behavior in this case. Animation was not possible in Thob but was possible in vanilla and r3f.
-Where Thob is better: Quick setup and visual parenting without writing code.
-Where Thob is weaker: Child transform behavior is less transparent when editing child position under a transformed parent.
-What feels awkward or unclear: Local vs inherited transforms are not obvious in the editor, and distortion behavior on child position change is unexpected.

## Limitation Type (if any)
-[x] Editor UX limitation
-[ ] Runtime limitation
-[ ] Schema / data model limitation
-[x] Component limitation
-[ ] Event system limitation
-[ ] Asset pipeline limitation
-[ ] Unknown / needs investigation

## Workaround
-Is there a workaround? NO
-No, I tried a lot of different things, like many groupa and flex inside the parent mesh and different ways to place the components.

## Suggested Improvement
-What should improve in Thob? Make transform inheritance behavior explicit and stable for nested meshes, especially when parent scale is applied and child position is edited.
-Is it:
  -editor
  -component
  -UX

## Difficulty Estimate
-Easy

## Business Value
-High

## Recommendation
Should Thob support this better? Why? Yes. Parent-child transform consistency is a core 3D workflow; reliable nested transforms reduce confusion, improve trust in the builder, and make more advanced scenes practical without code-level debugging.