Geekplus-Map3d 极智嘉 3d 模拟器

基于 THREEJS 的物流公司 3D 模拟仓库

在线演示

 cd demos && npm i
 npm run dev

使用说明

npm i [email protected] -S npm i geekplus-map3d -S

import { GeekMap3d, RENDER_MODEL_TYPE } from "geekplus-map3d";

const GeekSim = new GeekMap3d({ dom: HTMLElement });

// model path: http://gitlab.geekplus.cc/geekplus-fed-components/geekplus-web-model.git
....
await GeekSimMap.registerModel(config: LoaderConfigs)
....
// init Map and frame
GeekSimMap.renderInitMap(floors: FloorsData );
GeekSimMap.renderInitFrame(frame: renderDisplayConfig );

// update frame
GeekSimMap.renderUpdateFram(frame: renderDisplayConfig)

/* 包裹Map-canvas的节点 */
.map-box{
  ....
  position: relative;
  overflow: hidden;
  width: 100%;
  ....
}

示例代码

示例代码

数据源来源： 直接修改 wsPath，或者使用 mock_serve@王政；

常用 API

| 方法名 | 说明 | 类型 | 可选值 | 默认值 | | ---------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------ | ----------------------- | | registerModel | 注册模型 | (config: LoaderConfigs):Promise<void> | — | — | | renderInitMap | 渲染 Map 地图 | (floorsData: FloorsData):Promise<any> | — | — | | renderInitFrame | 渲染初始化帧 | (data: renderDisplayConfig):Promise<any> | — | — | | renderUpdateFrame | 渲染更新帧 | (data: renderDisplayConfig):void | — | — | | renderUpdateInterpolateFrame | 插帧更新(即使 data 为 null，也按照 duration 时间返回) | (data: renderDisplayConfig,duration?: number):Promise<void> | — | 1000ms | | clearMap | 清除地图 | (floorId?: string):void | — | — | | clearFrame | 清楚渲染帧 | (floorId?: string, layer?: string):void | — | — | | resetView | 重置初始化视角 | ():void | — | — | | setViewFromFloor | 设置视角 | (floorId?: string, direction: ("lb" \| "lt" \| "rt" \| "rb" \| "ct" \| "cb"), theta: number):void | — | (1, 'lb', 30) | | destory | 销毁对象 | ():void | — | — | | resize | dom resize 以后重置视窗 | ():void | — | — | | pause | 暂停渲染 | ():void | — | — | | start | 开始渲染 | ():void | — | — | | openHotMap | 打开热力图 | ():void | — | — | | closeHotMap | 关闭热力图 | ():void | — | — | | openRSPTaskBox | 打开 RSP 场景中的任务货箱 | (floorId?: string, status:("TASK" \| "STATIONTASK")[] \| null):void | — | ["TASK", "STATIONTASK"] | | resetRSPBox | 恢复 RSP 场景中的货箱正常状态 | (floorId?:string):void | — | ["TASK", "STATIONTASK"] | | openPPTaskBox | 打开 PP 场景中的任务货箱 | (floorId?: string, status:("TASK")[] \| null):void | — | ["TASK"] | | resetPPBox | 恢复 PP 场景中的货箱正常状态 | (floorId?:string):void | — | — | | openRSPBoxLayer | 指定显示 RSP 场景中货箱楼层 | (floorId?: string, layer: string \| string[]):void | — | — | | resetRSPBoxLayer | 恢复 RSP 场景中所有货箱楼层 | (floorId?:string):void | — | — | | birdsEyeView | 打开地图俯视角 | ():void | — | — | | closeCell | 关闭单元格 Layer(依赖有 Cell 渲染数据) | (floorId: string):void | — | — | | showCell | 打开单元格 Layer(依赖有 Cell 渲染数据) | (floorId: string):void | — | — | | openRSPLayer | 打开 RSP 场景货位 | (floorId: string):void | — | — | | closeRSPLayer | 关闭 RSP 场景货位 | (floorId: string):void | — | — | | openPPStationAnimal | 打开 PP 工作站取还箱动画 | (floorId: string):void | — | — | | closePPStationAnimal | 打开 PP 工作站取还箱动画 | (floorId: string):void | — | — | | closePPStationAnimal | 打开 PP 工作站取还箱动画 | (floorId: string):void | — | — | | queryNode | 查询 Node 节点 | (floorId: string, layer: string, id:string):Node | — | — |

常用插件

MaskPlugin

| 方法名 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | ------------------------------ | ------------------------------------------------------------------------------- | ------ | ------ | | constructor | 实例化对象 | (map3d: Map3d, config?: MaskPluginsConfig):void | — | — | | setTargetByNode | 设置显示标签的 Node | (node: Node, config?: SetMaskTargetConfig):MaskPlugin | — | — | | setTargetByLayer | 根据层设置显示标签的 Node | (floorId: string, layerName: string, config?: SetMaskTargetConfig):MaskPlugin | — | — | | show | 显示 Node 对应的标签 | (node: Node):void | — | — | | hide | 隐藏 Node 对应的标签 | (hide: Node):void | — | — | | showAll | 显示设置所有 Node 对应的标签 | ():void | — | — | | getMaskNode | 获取 MaskNode 节点 | (node: Node):MaskNode | — | — | | hideAll | 隐藏所有 Node 对应的标签 | ():void | — | — | | render | 渲染设置的 Node 对应的标签 | (node: Node):void | — | — | | renderAll | 隐藏设置的所有 Node 对应的标签 | ():void | — | — | | clear | 删除 Node 对应的标签 | (node: Node):void | — | — | | clearAll | 删除所有 Node 对应的标签 | ():void | — | — | | destroy | 销毁 MaskPlugin 对象 | ():void | — | — | | resize | 视口变化需要调用 | ():void | — | — |

SelectPlugin

| 方法名 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ---------------------- | ------------------------- | ------ | ------ | | constructor | 实例化对象 | (map3d: Map3d):void | — | — | | getSelectNodes | 获取当前选择的节点 | ():void | — | — | | start | 开启 Click 监听 | ():void | — | — | | stop | 停止 Select 监听 | ():void | — | — | | select | 选择元素 | (node:Node):void | — | — | | multiSelect | 选择多个 Node | (node:Node[]):void | — | — | | clear | 清除选择状态 | (keepHalf:boolean):void | — | false | | destroy | 销毁 SelectPlugin 对象 | ():void | — | — |

TaskPlugin

| 方法名 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ------------------------- | --------------------- | ------ | ------ | | constructor | 实例化对象 | (map3d: Map3d):void | — | — | | start | 开启 RSP|PP 场景任务货箱 | ():void | — | — | | stop | 关闭 | ():void | — | — | | destroy | 销毁 TaskPlugin 对象 | ():void | — | — |

RobotPathPlugin

| 方法名 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ------------------------- | ------------------------------------------- | ------ | ------ | | constructor | 实例化对象 | (map3d: Map3d):void | — | — | | drawPath | 绘制线路 | (path: number[][], floorId?: string):void | — | — | | show | 显示路线 | ():void | — | — | | hide | 隐藏路线 | ():void | — | — | | destroy | 销毁 RobotPathPlugin 对象 | ():void | — | — |

ExceptionPlugin

| 方法名 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | -------------------- | ---------------------------- | ------ | ------ | | constructor | 实例化对象 | (map3d: Map3d):void | — | — | | setTarget | 设置异常数据 | (data: ExceptionData):this | — | — | | getNodes | 获取异常 NODE | ():BaseNode | — | — | | clear | 清除展示模型 | ():void | — | — | | destroy | 销毁 ExceptionPlugin | ():void | — | — |

ts 类型

更详细 ts 见 geekplus-map3d 包

type LoaderConfigs = LoaderConfig<THREE.BufferGeometry | THREE.Object3D | THREE.Mesh>[]

type LoaderConfig<T> = {
  model: string | (() => Promise<T>)
  name: string | (() => string)
  formatter?: <T>(mesh: T) => T
}

type FloorsData = {
  [floorId: floorId]: FloorData
}

type FloorData = {
  floorId: string | number
  background: FloorBackground
  cells: CellData[]
  leftDownPoint?: Coordinate3D
  leftUpPoint?: Coordinate3D
  rightDownPoint?: Coordinate3D
  rightUpPoint?: Coordinate3D
  [propName: string]: any
}

type FloorBackground = {
  width: number
  height: number
  resolution: number
  hasBg: boolean
  leftBottomPoint: { x: number; y: number; z: number }
  data: Array<any>
  // 扩展属性，仿真和RMS地板颜色可能不相同
  backgroundColor: string
}

type SetMaskTargetConfig = {
  uuid: string | ((data: any) => string)
  text: string | ((data: any) => string)
  render?: RenderTagContent
}

export type renderDisplayConfig = {
  shelves?: { [floorId: string]: { [shelfCode: string]: ShelfData } }
  robots?: { [floorId: string]: { [robotId: string]: RobotData } }
  stations?: { [floorId: string]: { [stationCode: string]: StationData } }
}