geekplus-map3d

Geekplus-Map3d 极智嘉 3d 模拟器

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

在线演示

 cd demos && npm i
 npm run dev

使用说明

npm i three@0.160.0 -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 } }
}