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 but when POI controls are added and we move around a bit we can notice that the earth is correct in size and shape it is just appering distorted/stretched from certain positions/angels.
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)

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
No, I tried a lot of different things, like grouping and wraping in 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.
It is:
- editor
- component
- runtime
- 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.

3.4 KiB Raw Blame History