跳到主要内容

📦 俯视模型平面图

TopviewFloorplanPlugin​

此插件强依赖于平面图数据，请率先了解如何获取平面图数据。

示例效果​

点击俯视模型按钮，查看俯视模型状态下的平面图展示效果。

功能说明​

俯视模型平面图插件 无缝集成了一套基于 VR 3D 模型状态下平面图交互。

其功能为 模型平面图插件 ModelFloorplanPlugin 的简版，仅展示能力，相关用法和 API 可直接参考 ModelFloorplanPlugin。

区别：

俯视模型平面图插件 与 five 实例的 Mode 状态做了绑定：当 five.mode 为 Five.Mode.Topview 且动画执行完毕时，会自动展示二维平面图模块。当不处在Five.Mode.Topview 状态时，则自动隐藏二维平面图模块。

因此，您可以操作 five.mode 来间接控制二维平面图模块的展示和隐藏。其他功能及 API 完全一致。

安装引用​

请按需选择 yarn 或 npm 安装方式：

npm install @realsee/dnalogel

通过 es 引用：

import { TopviewFloorplanPlugin } from "@realsee/dnalogel"

开发指南​

初始化​

在初始化 Five 实例时，将 TopviewFloorplanPlugin 配置在初始化插件参数即可。

import { Five } from '@realsee/five'

const five = new Five({
    plugins: [
        [
            TopviewFloorplanPlugin,
            'topviewFloorplanPlugin', // 自定义插件名称
            {
                // 示例参数配置
                selector: '.plugin-full-screen-container',  // 替换成您的容器节点
                hoverEnable: true
                /** 是否开启放大缩小和拖动功能，默认为 false */
                // gestureEnable?: boolean 
            }
        ]
    ]
})

React 初始化​

在创建 FiveProvider 时，将 TopviewFloorplanPlugin 配置在初始化插件参数即可。

import { TopviewFloorplanPlugin } from "@realsee/dnalogel";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";

const FiveProvider = createFiveProvider({
    plugins: [
        [
            TopviewFloorplanPlugin,
            'topviewFloorplanPlugin', // 自定义插件名称
            {
                // 示例参数配置
                selector: '.plugin-full-screen-container',  // 替换成您的容器节点
                hoverEnable: true
                /** 是否开启放大缩小和拖动功能，默认为 false */
                // gestureEnable?: boolean 
            }
        ]
    ]
});

Vue 初始化​

在使用 FiveProvider 时，将 TopviewFloorplanPlugin 配置在初始化插件参数即可。

<template>
  <FiveProvider :fiveInitArgs="fiveInitArgs">
  </FiveProvider>
</template>
<script setup>
import TopviewFloorplanPlugin from "@realsee/dnalogel/libs/TopviewFloorplanPlugin";
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
const fiveInitArgs = {
    plugins: [
        [
            TopviewFloorplanPlugin,
            'topviewFloorplanPlugin', // 自定义插件名称
            {
                // 参数配置
            }
        ]
    ]
}
</script>

载入数据​

// 获取插件实例,其中 `topviewFloorplanPlugin` 是初始化时自定义的名称
const pluginInstance = five.plugins.topviewFloorplanPlugin 

// 调用 `load` 方法载入平面图数据
pluginInstance.load(floorplanServerData)

核心方法​

TopviewFloorplanPlugin 提供的核心方法有：

  • load(data: FloorplanServerData) 载入平面图数据

您需要手动载入平面图数据，[FloorplanServerData] 的数据来源请阅读如视开放平台 API。

  • appendTo(wrapper: Element) 挂载 DOM 节点

将平面图DOM模块载入您的 HTML 结构中。

demo 源码参考​

demo 源码参考