Skip to main content

三维空间

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

创建 Five 实例

首先,我们从创建一个 Five 实例开始:

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

您可以在 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)
tip

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

效果展示

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

🌹🌹🌹~

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