Group

group is the structural object type. It creates a real scene node, but it does not create visible geometry on its own.

Use it when several child objects should move as one unit.

When to use it

Use group for:

orbital layouts
shared rotation or scale
packaging several objects under one local coordinate space
separating scene structure from visible meshes

Do not use group when a visible mesh would already solve the problem. If the element itself should be rendered, use a visible object type instead.

Runtime contract

Required activation

HTML

<div string="3d" string-3d="group"></div>

Shared transform inputs

group uses the common transform variables:

--translate-x
--translate-y
--translate-z
--rotate-x
--rotate-y
--rotate-z
--scale
--scale-x
--scale-y
--scale-z

Example

HTML

<div
  string="3d"
  string-id="orbit"
  string-3d="group"
  style="
    --rotate-y: 30;
    --translate-z: 40;
  "
>
  <div
    string="3d"
    string-3d="box"
    style="width: 120px; height: 120px; --translate-x: -90"
  ></div>

  <div
    string="3d"
    string-3d="sphere"
    style="width: 90px; height: 90px; --translate-x: 90"
  ></div>
</div>

What the runtime does

During object initialization, StringTune-3D looks upward for the nearest ancestor with string-3d="group".
The child stores that parent reference and is attached below the group in the 3D scene graph.
Transform values on the group are applied before child-local transforms.

That means the group behaves exactly like a normal parent node in a 3D engine, but the relationship is declared through DOM nesting.

If motion should belong to the whole composition, put it on the group. If motion should belong only to one child, keep it on that child. The cleanest scenes usually use groups sparingly and intentionally.