Task: Parent Group Motion with Child Offset Inheritance

Objective

Build a step-based scene where a parent group is translated and rotated, while child meshes inherit those transforms and keep their relative spacing.

Vanilla three.js

-Possible: Yes -Notes:

Uses a parent group containing three child meshes.
Step data controls camera position, look target, group position, group rotation, and spin speed.
Animation loop lerps toward target transforms for smooth guided transitions. -Key concepts:
Group hierarchy and transform inheritance
Step-driven state config
Camera and group interpolation
Maintaining child local offsets under parent motion -Complexity: Medium

R3F

-Possible: Yes -Notes:

Uses a group with child meshes in declarative JSX.
Step index in React state drives camera and parent group targets.
useFrame performs smooth interpolation and optional spin per step. -What R3F abstracted:
Render-loop integration through hooks
Scene graph composition with nested components
State-driven UI to scene updates -Complexity: Medium

Thob Page Builder

-Possible: Partial -Notes:

We can make things like this by following the simple mesh-inside-mesh design.
Rotate the parent object, and children inherit the rotation and move with the parent while maintaining offset distance.
This matches the same parent-child transform behavior used in vanilla and R3F.
Perspective Camera component rotation feature appears broken right now: no matter how much camera rotation is changed on any axis, objects disappear. -Builder steps:
Create a parent mesh/group container.
Place child meshes inside it with different local positions.
Animate or rotate only the parent transform to drive combined motion.
Add camera positions per step if needed for guided presentation, but avoid camera rotation controls until this issue is fixed. -Complexity: Easy

Comparison Summary

-Possible in all 3? Partial -Main differences:

Vanilla is explicit and manual for hierarchy and animation wiring.
R3F keeps hierarchy readable and state-driven.
Thob can represent the same hierarchy visually with low setup effort, but camera rotation behavior blocks full parity. -Where Thob is better:
Fast scene assembly for parent-child structures.
Easier visual understanding of nested transforms. -Where Thob is weaker:
Perspective Camera rotation currently causes objects to disappear.
Fine-grained transition logic can still need extra workflow clarity. -What feels awkward or unclear:
Managing more advanced multi-step timing and orchestration can become less obvious than code-first flow.
Camera rotation controls are not reliable due to object disappearance.

Limitation Type (if any)

-[ ] Editor UX limitation -[x] Runtime limitation -[ ] Schema / data model limitation -[ ] Component limitation -[ ] Event system limitation -[ ] Asset pipeline limitation -[x] Unknown / needs investigation

Workaround

-Is there a workaround?

Partial workaround. -If yes, what is it?
Keep parent/child group rotation for the main motion behavior.
Avoid rotating the Perspective Camera component for now.
Use camera position changes and look target adjustments instead of direct camera rotation.

Suggested Improvement

-What should improve in Thob?

Fix Perspective Camera component rotation behavior so objects do not disappear when rotating on any axis.
Optional guided presets for common parent-child motion patterns.
Better timeline/state visualization for multi-step camera + transform storytelling. -Is it:
editor
runtime
UX

Difficulty Estimate

-Medium

Business Value

-High

Recommendation

Yes, Thob should support this strongly because parent-child transform inheritance is foundational for many real scenes, from product showcases to motion compositions. Priority should include fixing Perspective Camera rotation reliability first.

3.9 KiB Raw Blame History