三维空间

利用 Five 快速渲染一个三维空间。

创建 Five 实例

首先，我们从创建一个 Five 实例开始：

const five = new Five({
  backgroundColor: 0xffffff, // 背景色
  imageOptions: { size: 1024 }, // 图片默认分辨率
  textureOptions: { size: 512 }, // 贴图默认分辨率
  /* 其它配置选项 */
});

提示

您可以在 Five API 中浏览完整的 Five 配置项。

载入 DOM 结构

创建好 Five 实例后，您需要将该实例载入 DOM 结构中：

// 将 Five 实例载入 DOM 结构中
five.appendTo(document.getElementById("app")!);

默认情况下，Five 渲染占用的二维平面即是载入 DOM 节点占用的区域。

加载 Work 数据

现在，我们可以来渲染一个三维空间。渲染前，我们需要准备一份描述如视三维空间信息的 Work 数据，然后通过执行 five.load(work) 完成渲染：

// 我们从如视开放 Work 数据集中选择一份 Work 数据。
import work from "@realsee/open-works/virtual/81RojBlJQdVTglNNMr.json";
five.load(work);

提示

关于 Work 数据更详细的介绍请移步 什么是 Work？ 。

效果展示

稍等片刻之后，您就可以看到一副全景模态的三维空间画面。

🌹🌹🌹~

恭喜，您现在可以通过点击、旋转、缩放、移动等手势对其进行交互。