模型分间标签
ModelRoomLabelPlugin
功能说明
模型分间标签插件 集成了一套能够在模型状态下快速查看房间名称 & 快速访问房间全景的交互。
详细功能点如下：
- 在模型态下，用标签展示对应的房屋名称。
- 当标签标记的房间被其他房屋所遮挡时，自动隐藏此标签。
- 移动模型时，对应标签也能跟随模型移动。
- 点击标签时，从模型状态切换到全景，并移动到对应的房间中心的点位上。
- 切换到房间时，相机视角会朝向房间中心。
效果展示
点击空间总览按钮，查看空间总览模态下的房屋标签效果。
安装引用
请按需选择 yarn 或 npm 安装方式：
- npm
- Yarn
- pnpm
npm install @realsee/dnalogel
yarn add @realsee/dnalogel
pnpm add @realsee/dnalogel
通过 es 引用：
import { ModelRoomLabelPlugin } from "@realsee/dnagel";
开发指南
初始化
在初始化 Five 实例时，将 ModelRoomLabelPlugin 配置在初始化插件参数即可。
import { Five } from "@realsee/five";
import { ModelRoomLabelPlugin } from "@realsee/dnalogel";
const five = new Five({
plugins: [
[
ModelRoomLabelPlugin,
"modelRoomLabelPlugin", // 自定义插件名称
{
// 参数配置
},
],
],
});
React 初始化
在创建 FiveProvider 时，将 ModelRoomLabelPlugin 配置在初始化插件参数即可。
import { ModelRoomLabelPlugin } from "@realsee/dnalogel";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";
const FiveProvider = createFiveProvider({
plugins: [
[
ModelRoomLabelPlugin,
"modelRoomLabelPlugin", // 自定义插件名称
{
// 参数配置
},
],
],
});
Vue 初始化
在使用 FiveProvider 时，将 ModelRoomLabelPlugin 配置在初始化插件参数即可。
<template>
<FiveProvider :fiveInitArgs="fiveInitArgs"> </FiveProvider>
</template>
<script setup>
import ModelRoomLabelPlugin from "@realsee/dnalogel/libs/ModelRoomLabelPlugin";
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
const fiveInitArgs = {
plugins: [
[
ModelRoomLabelPlugin,
"modelRoomLabelPlugin", // 自定义插件名称
{
// 参数配置
},
],
],
};
</script>
载入数据
// 获取插件实例,其中 `modelRoomLabelPlugin` 是初始化时自定义的名称
const pluginInstance = five.plugins.modelRoomLabel;
// 调用 `load` 方法载入模型房屋标签数据
pluginInstance.load(modelRoomLabels);
节点挂载
// 调用 appendTo(wrapper: Element) 方法挂载 DOM 节点
five.plugins.modelRoomLabel.appendTo(wrapper);
// 示例
React.useEffect(() => {
// plugin-full-screen-container 即为提前准备好的挂载节点
const wrapper = document.querySelector(".plugin-full-screen-container");
if (wrapper) {
five.plugins.modelRoomLabelPlugin.appendTo(wrapper);
}
}, []);
核心方法
load(data: ModelRoomLabelPluginData)载入插件数据
您需要手动载入插件数据，数据来源请阅读如视开放平台 API。
appendTo(wrapper: Element)挂载 DOM 节点
您可以将插件 DOM 模块载入您的 HTML 结构中。