Objects Overview

Every scene node in StringTune-3D starts from the same contract:

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

The string-3d value decides which runtime object is created. After that, the object is driven through the element box, computed styles, and object-specific CSS variables.

The object families

Structure

• Group: transform-only parent node for hierarchy and shared motion

Geometry

• Primitives: fast built-in geometry for boxes, spheres, planes, and cylinders
• Model: imported 3D assets through the active provider and loaders

Lighting

• Lights: ambient, directional, point, spot, and hemisphere lights

Procedural and content-driven

• Particles: emitter systems and instanced distributions, including model-backed layouts
• Text: 3D text built from the element text content
• SVG: extruded vector geometry built from inline or external SVG

How to choose

Use group when you need parent-child transforms but no visible mesh.

Use primitives when you want the simplest possible geometry, fast setup, and no external assets.

Use model when the source of truth is already a 3D asset such as .glb.

Use text when the source of truth is still text content and you want extrusion, depth, and material control without leaving the DOM contract.

Use svg when the source of truth is vector artwork and you want to keep it path-based.

Use particles when the effect is procedural, distributed, or morph-driven rather than mesh-driven.

Shared rules across all objects

• All object types read the element box as their layout anchor.
• All object types participate in the shared transform contract such as --translate-*, --rotate-*, and --scale*.
• Most visible object types also participate in the shared material pipeline.
• CSS transitions on the relevant custom properties are the intended animation layer.

Minimal shape of a scene

<div string="3d" string-3d="ambientLight" style="--light-intensity: 0.4"></div>

<div
  string="3d"
  string-3d="box"
  style="
    width: 180px;
    height: 180px;
    --material-type: standard;
    --material-color: #ff6b2b;
    --rotate-y: 20;
    --translate-z: 80;
  "
></div>

That same pattern scales upward to every other object page in this section.