Three

three 元素使用 Three.js 在 Revideo 节点内渲染 3D 场景，适合产品模型、数据可视化、旋转 logo、立体标题等效果。

基本结构

{
  "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"
        }
      ]
    }
  ]
}

字段

• renderer.alpha / renderer.clearAlpha：控制 Three canvas 是否透明。
• renderer.shadows：启用 Three.js shadow map。
• camera.position / camera.rotation / camera.lookAt：相机位置、角度和目标点。
• lights：支持 ambient、directional、point、spot。
• objects：支持内置几何体，也支持 GLTF/GLB 模型。
• material：支持 normal、basic、standard、phong、lambert、toon。

内置几何体：

• box
• sphere
• plane
• cylinder
• cone
• torus
• icosahedron
• dodecahedron

GLTF/GLB 模型

模型可以直接写远程 URL，也可以通过 assets.models 引用。

{
  "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 支持：

• 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

相机动画写在 clip 的 cameraAnimations。