Skip to content

3D 场景与相机

3D 与 2D 共用同一套时间线 / Player / 序列化机制(design.md §10)。Scene3D 镜像 Scene2D:注册不可变对象、累积可 seek 的 storyboard;区别在于变换带四元数旋转、相机本身是时间线的一部分。

创建 3D 场景

ts
import { axes3D, createProgram, surface3D, xyz } from "@intermact/core";

const program = createProgram(async (ctx) => {
  const scene = ctx.createScene3D({ background: "#05070f" });
  const camera = ctx.createCamera3D(scene, { position: xyz(6, 4, 6), target: [0, 0, 0], fov: 45 });
  ctx.mount(scene, camera);

  scene.register(axes3D({ size: 2.5 }));
  const surf = scene.register(
    surface3D({ fn: (u, v) => [(u - 0.5) * 4, Math.sin(u * 6) * Math.cos(v * 6), (v - 0.5) * 4] }),
  );
  await scene.play(surf.create({ duration: 1.5 }));
});

3D 对象工厂

工厂几何通道
polyline3D / curve3D折线 / 参数曲线(line)
meshObject / surface3D三角网 / 参数曲面(mesh)
pointCloud3D点云(points,可标量着色)
axes3D3D 坐标轴
isosurface(field, opts)标量场等值面(marching-tetrahedra,水密无歧义)

每个工厂都打上 Geometry3DTrait 能力标记,因此 Create 揭示、分组等都按 trait 分发,而非判别具体 typedesign.md §4.2)。Create 对线几何按弧长揭示、对网格/点按构建序揭示。

相机即时间线对象

注册相机返回 RegisteredCamera3D,其 moveTo / lookAt / orbit / dollyTo 都追加四元数 look-at 补间,可被 seek:

ts
scene.marker("start");
await scene.play(camera.orbit(Math.PI, { duration: 3 }));
await scene.play(camera.dollyTo(3, { duration: 1.5 }));
await scene.play(camera.lookAt([1.5, 1, 0], { duration: 1.2 }));

相机可作为变换节点参与父子层级(camera.follow / setParent),随目标对象一起运动。

分组与层级

Scene3D.group3D(children, transform) 把多个已注册对象挂到一个 transform-only 空节点下,整体平移/旋转——Player 在快照期沿层级组合世界变换(design.md §9.3)。

ts
const a = scene.register(meshA, { position: xyz(1.2, 0, 0) });
const b = scene.register(meshB, { position: xyz(-1.2, 0, 0) });
const group = scene.group3D([a, b]);
await scene.play(group.orientTo({ x: 0.4, y: Math.PI * 1.2, z: 0 }, { duration: 4 }));

坐标系与轴

Scene3D.coordinateCoordinateTransform3D)在场景 domain 上做数据↔世界映射;scene.getAxes(props) 返回带 handle.c2p/p2cRegisteredAxes3D,可用标准动画 API 揭示。

嵌套子场景

render(scene, camera) 把一个独立的(可动画)子场景包装成一个可注册的 rendered-scene 对象(design.md §10.2)。SceneView/IntermactCanvas 会把它合成到离屏 render target,再像普通对象那样取景、淡入。

相关示例

  • 3d/surface-plotsurface3D 函数曲面 + axes3D
  • 3d/training-trajectorypolyline3D/pointCloud3D 轨迹
  • 3d/isosurfaceisosurface 标量场等值面(marching-cubes)
  • 3d/camera-moves — 相机作为时间线对象的运镜
  • 3d/groupinggroup3D 聚合 + polyline3D
  • 3d/nested-scene-panelrender(scene, camera) 嵌套子场景画中画

完整清单见示例索引

Intermact v1.0 — 文档覆盖 Phase-1 / Phase-2 / Phase-3(全阶段)