添加物体

Five 基于 Three.js 实现，你可以利用 Three.js 生态中所有的能力。 比如，在三维空间中添加三维坐标辅助对象AxesHelper:

const axesHelper = new THREE.AxesHelper(5);
five.scene.add(axesHelper);

这样可以看到三维空间中坐标轴和原点位置。

添加 THREE 中的 Mesh

Five 实例保留 five.scene 对象引用，你可以在三维空间中添加任意由 Three.js 体系中构建的 Mesh 物体。

比如，在三维空间中添加个 网格球：

// 等模型加载完成
five.once("modelLoaded", () => {
  const geometry = new THREE.SphereGeometry(3, 32, 16);
  const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    wireframe: true,
  });
  const sphere = new THREE.Mesh(geometry, material);
  // 添加球
  five.scene.add(sphere);
  // 切换到 三维模型模态，更方便地看到球
  five.setState({ mode: "Floorplan" });
});

添加 glTF 模型

glTF 模型文件是三维领域的 .png/.jpeg，Five 内置 GLTFLoader ，你可以很方便地载入 glTF 模型。

如下示例，我们在餐厅空白位置处载入一个 glTF 汽车模型：

const baseURL =
  "//vrlab-public.ljcdn.com/release/static/image/release/five/demo/gltf/";
const gltfLoader = new GLTFLoader();

// 等模型加载完再载入其他 glTF 模型
five.once("modelLoaded", () => {
  // 载入 glTF 模型
  gltfLoader.load(baseURL + "pony_cartoon/scene.gltf", ({ scene }) => {
    // 加入到 Five 三维空间场景中
    five.scene.add(scene);
    // 设置好大小和空间位置
    scene.scale.set(1, 1, 1);
    scene.position.set(
      -2.8741698071921214,
      0.220446049250313,
      -4.631508324407246
    );
    // 切换到空间总览模态：更方便看到 glTF 模型
    five.setState({ mode: Five.Mode.Floorplan });
  });
});

最终效果如下：