How to make a 3D hero scene

To build a 3-D hero, write a kind: "three" spec: place objects, add lights, and attach animation directives that reference each object by name.

Place the objects¶

Each object has a name, a geometry, and an optional material. Names are how animations target them.

"objects": [
  {
    "name": "knot",
    "geometry": { "type": "torusKnot", "radius": 1, "tube": 0.34, "p": 2, "q": 3 },
    "material": { "type": "standard", "color": "#5b8cff", "metalness": 0.7, "roughness": 0.25 }
  }
]

Light the scene¶

A standard material needs light. An ambient plus one directional light is a safe default; add a coloured point light for a highlight.

"lights": [
  { "type": "ambient", "intensity": 0.4 },
  { "type": "directional", "intensity": 1.2, "position": [3, 4, 5] },
  { "type": "point", "color": "#ff8be0", "intensity": 0.8, "position": [-3, -2, 2] }
]

Add motion¶

Animations are per-frame directives. Reference the object by name:

"animate": [
  { "target": "knot", "property": "rotation", "axis": "y", "speed": 0.6 },
  { "target": "knot", "property": "rotation", "axis": "x", "speed": 0.25 }
]

The full list of geometries, materials, lights, and animation properties is in the SceneSpec reference.