# Three Element

Use `three` to render 3D product models, data objects, rotating logos, and scene effects.

## Basic Shape

```json
{
  "type": "three",
  "start": 0,
  "duration": 5,
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": 1280,
    "height": 720
  },
  "renderer": {
    "clearAlpha": 0,
    "shadows": true
  },
  "camera": {
    "fov": 45,
    "position": [0, 0, 5],
    "lookAt": [0, 0, 0]
  },
  "lights": [
    { "type": "ambient", "intensity": 0.45 },
    { "type": "directional", "intensity": 1, "position": [3, 4, 5] }
  ],
  "objects": [
    {
      "id": "hero-cube",
      "shape": "box",
      "geometry": {
        "width": 1.5,
        "height": 1.5,
        "depth": 1.5
      },
      "material": {
        "type": "standard",
        "color": "#38bdf8",
        "roughness": 0.35,
        "metalness": 0.25
      },
      "animations": [
        {
          "property": "rotation.y",
          "from": 0,
          "to": 360,
          "duration": 4,
          "loop": true,
          "easing": "linear"
        }
      ]
    }
  ]
}
```

## Fields

- `renderer.alpha` / `renderer.clearAlpha`: transparency settings
- `renderer.shadows`: enables Three.js shadow maps
- `camera.position` / `camera.rotation` / `camera.lookAt`: camera placement
- `lights`: supports `ambient`, `directional`, `point`, and `spot`
- `objects`: built-in geometry or GLTF/GLB models
- `material`: supports `normal`, `basic`, `standard`, `phong`, `lambert`, and `toon`

Built-in shapes:
- `box`
- `sphere`
- `plane`
- `cylinder`
- `cone`
- `torus`
- `icosahedron`
- `dodecahedron`

## GLTF and GLB Models

Models can use direct URLs:

```json
{
  "type": "three",
  "start": 0,
  "duration": 5,
  "objects": [
    {
      "id": "product",
      "model": "https://example.com/product.glb",
      "autoCenter": true,
      "autoScale": 2.2
    }
  ]
}
```

Or reference `assets.models`:

```json
{
  "assets": {
    "models": [
      {
        "id": "duck",
        "src": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb"
      }
    ]
  },
  "tracks": [
    {
      "clips": [
        {
          "type": "three",
          "start": 0,
          "duration": 4,
          "objects": [
            {
              "id": "duck-model",
              "model": { "$ref": "duck" },
              "autoScale": 1.8
            }
          ]
        }
      ]
    }
  ]
}
```

## 3D Animations

Object animations support:
- `position`, `position.x`, `position.y`, `position.z`
- `rotation`, `rotation.x`, `rotation.y`, `rotation.z`
- `scale`, `scale.x`, `scale.y`, `scale.z`
- `material.color`
- `material.opacity`

Camera animations use `cameraAnimations`:

```json
{
  "type": "three",
  "start": 0,
  "duration": 4,
  "cameraAnimations": [
    {
      "property": "position.z",
      "from": 6,
      "to": 3.2,
      "duration": 2,
      "easing": "easeOutCubic"
    }
  ]
}
```