rack 2D显示

src/components/Model3DView.vue

@@ -386,6 +386,7 @@ function createGroundStore() {
     side: THREE.DoubleSide  // 双面渲染:ml-citation{ref="5,8" data="citationList"}
   });
   const planeMesh = new THREE.Mesh(planeGeometry, material);
+  planeMesh.rotateX(Math.PI / 2)
   scene.add(planeMesh);
 }
 
@@ -928,4 +929,4 @@ function cleanupThree() {
   }
 }
 
-</style>
+</style>

src/core/Constract.ts

@@ -17,6 +17,7 @@ export default Object.freeze({
   CursorModeMeasure: 'measure',
   CursorModeWay: 'way',
   CursorModeGstore: 'gstore',
+  CursorModeRack: 'rack',
 
   // 选择模式
   CursorModeSelectByRec: 'selectByRec'

src/core/ModelUtils.ts

@@ -6,6 +6,7 @@ import { computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
 import { Vector2 } from 'three/src/math/Vector2'
 import type Toolbox from '@/model/itemType/Toolbox.ts'
 import EventBus from '@/runtime/EventBus.ts'
+import Decimal from 'decimal.js'
 
 /**
  * 确保所有实体之间的关系满足一致性：
@@ -453,3 +454,21 @@ function loadObject3DFromJson(items: ItemJson[]): THREE.Object3D[] {
 
   return result
 }
+
+/**
+ * 十进制求和
+ * @param collection
+ * @param iteratee
+ */
+export function decimalSumBy<T>(collection: ArrayLike<T> | null | undefined, iteratee?: ((value: T) => number)): number {
+
+  let sum = new Decimal(0)
+  _.forEach(collection, (t)=>{
+    if (typeof iteratee === 'function') {
+      sum = sum.add(new Decimal(iteratee(t)))
+    } else {
+      sum = sum.add(new Decimal(t))
+    }
+  })
+  return sum.toNumber()
+}

src/core/manager/WorldModel.ts

@@ -4,6 +4,7 @@ import EventBus from '@/runtime/EventBus'
 import Measure from '@/modules/measure'
 import Way from '@/modules/way'
 import Gstore from '@/modules/gstore'
+import Rack from '@/modules/rack'
 import StateManager from '@/core/manager/StateManager.ts'
 
 export interface WorldModelState {
@@ -64,7 +65,8 @@ export default class WorldModel {
     return Promise.all([
       Measure,
       Way,
-      Gstore
+      Gstore,
+      Rack
 
     ]).then(() => {
       console.log('世界模型初始化完成')
@@ -155,4 +157,4 @@ export default class WorldModel {
     }
     return Promise.reject('楼层不存在, catalogCode=' + catalogCode)
   }
-}
+}

src/editor/Model2DEditor.vue

@@ -53,6 +53,14 @@
                    :type="state?.cursorMode===Constract.CursorModeGstore?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeGstore"></el-button>
 
+        <el-button title="货架" :icon="renderIcon('antd BorderBottomOutlined')" link
+                   :type="state?.cursorMode===Constract.CursorModeRack?'primary':''"
+                   @click="()=>state.cursorMode = Constract.CursorModeRack"></el-button>
+
+        <el-button title="托盘" :icon="renderIcon('antd ProjectTwotone')" link
+                   :type="state?.cursorMode===Constract.CursorModeRack?'primary':''"
+                   @click="()=>state.cursorMode = Constract.CursorModeRack"></el-button>
+
       </div>
       <div class="section-toolbar-right">
         <el-input v-model="searchKeyword" size="small" style="width: 110px; margin-right: 5px;"

src/example/example1.js

@@ -77,6 +77,32 @@ export default {
         //   }
         // }
         {
+          id: 'rack1',
+          t: 'rack',
+          v: true,
+          tf: [[-1, 0.1, 3.5], [0, 0, 0], [1.5, 0.25, 0.1]],
+          dt: {
+            rackDepth: 1, // 货架深度
+            rackWidth: 8,
+            rackHeight: 4.2,
+            levelCount: 3,  // 总层数
+            bayCount: 5,    // 总列数
+            hideFloor: false,  // 隐藏底板
+            extendColumns: true, // 扩展挡板
+            columnSpacing: 1, // 支脚跨越
+            bays: [  // 每列的配置
+              {
+                bayWidth: 1.6,  // 列的宽度
+                levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
+              },
+              {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+              {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+              {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+              {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]},
+            ]
+          }
+        },
+        {
           id: 'P1',
           t: 'measure',
           v: true,
@@ -173,4 +199,4 @@ export default {
       ]
     }
   ]
-}
+}

src/modules/gstore/GstoreRenderer.ts

@@ -56,7 +56,7 @@ export default class GstoreRenderer extends BaseRenderer {
     group.name = GstoreRenderer.POINT_NAME
 
     // 绘制背景矩形框
-    const planeGeometry = new THREE.PlaneGeometry(item.dt.storeWidth, item.dt.storeDepth)
+    const planeGeometry = new THREE.PlaneGeometry(1, 1);
     planeGeometry.rotateX(-Math.PI / 2)
     const planeMaterial = new THREE.MeshBasicMaterial({
       color: 'white',
@@ -64,8 +64,8 @@ export default class GstoreRenderer extends BaseRenderer {
       opacity: 0.2,       // 50%透明度
       depthWrite: false,   // 防止深度冲突
       side: THREE.DoubleSide  // 双面渲染:ml-citation{ref="5,8" data="citationList"}
-    })
-    const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
+    });
+    const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
     group.add(planeMesh)
 
     if (!item.dt.storeWidth || !item.dt.storeDepth) {
@@ -77,22 +77,22 @@ export default class GstoreRenderer extends BaseRenderer {
     const lineYLen = item.dt.storeDepth - this.defaultLineWidth
 
     const lineGeometry = new LineGeometry().setPositions([
-      -(lineXLen / 2), -(lineYLen / 2), 0,
-      lineXLen / 2, -(lineYLen / 2), 0,
-      lineXLen / 2, lineYLen / 2, 0,
-      -(lineXLen / 2), lineYLen / 2, 0,
-      -(lineXLen / 2), -(lineYLen / 2), 0
-    ])
+      -(lineXLen/2),-(lineYLen/2),0,
+      lineXLen/2,-(lineYLen/2),0,
+      lineXLen/2,lineYLen/2,0,
+      -(lineXLen/2),lineYLen/2,0,
+      -(lineXLen/2),-(lineYLen/2),0
+    ]);
     lineGeometry.rotateX(-Math.PI / 2)
     const lineMaterial = new LineMaterial({
-      color: 0x00ff00,
+      color: '#038217',
       linewidth: 0.05,
       worldUnits: true,
       resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
       side: THREE.DoubleSide
-    })
+    });
     //
-    const line = new Line2(lineGeometry, lineMaterial)
+    const line = new Line2(lineGeometry, lineMaterial);
     group.add(line as THREE.Object3D)
 
     return [group]
@@ -100,6 +100,6 @@ export default class GstoreRenderer extends BaseRenderer {
 
   dispose() {
     super.dispose()
-    this.pointMaterial?.dispose()
+    this.pointMaterial.dispose()
   }
 }

src/modules/rack/RackRenderer.ts

@@ -3,12 +3,13 @@ import BaseRenderer from '@/core/base/BaseRenderer.ts'
 import { Line2 } from 'three/examples/jsm/lines/Line2.js'
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+import {decimalSumBy} from "@/core/ModelUtils";
 
 /**
- * 地堆货位渲染器
+ * 货架货位渲染器
  */
 export default class RackRenderer extends BaseRenderer {
-  static POINT_NAME = 'ground_store'
+  static POINT_NAME = 'rack'
 
   pointMaterial: THREE.Material
 
@@ -16,7 +17,7 @@ export default class RackRenderer extends BaseRenderer {
    * 默认点的高度, 防止和地面重合
    */
   readonly defulePositionY: number = 0.5 // 默认点的高度, 0.01, 防止和地面重合
-  readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1.5, 1.2, 0.1)
+  readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1, 1, 1)
   readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0)
   readonly defaultLineWidth: number = 0.05
 
@@ -32,7 +33,8 @@ export default class RackRenderer extends BaseRenderer {
 
     const point = objects[0]
     point.position.y = this.defulePositionY
-    point.scale.set(item.dt.storeWidth, this.defaultScale.y, item.dt.storeDepth)
+
+    //point.scale.set(_.sumBy(item.dt.bays, b=>b.bayWidth), this.defaultScale.y, item.dt.rackDepth)
     point.rotation.set(
       THREE.MathUtils.degToRad(this.defaultRotation.x),
       THREE.MathUtils.degToRad(this.defaultRotation.y),
@@ -49,57 +51,95 @@ export default class RackRenderer extends BaseRenderer {
     throw new Error('not allow store line.')
   }
 
-  createPointBasic(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] {
+
+  createPoint(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] {
     // 创建平面几何体
 
     const group = new THREE.Group()
     group.name = RackRenderer.POINT_NAME
 
+    const rackWidth = decimalSumBy(item.dt.bays, b=>b.bayWidth)
+    const heights = []
+    for (let i = 0; i < item.dt.bays.length; i++) {
+      const bay = item.dt.bays[i]
+      const bayHeight = decimalSumBy(bay.levelHeight)
+      heights.push(bayHeight)
+    }
+    const rackHeight = _.max(heights)
     // 绘制背景矩形框
-    const planeGeometry = new THREE.PlaneGeometry(item.dt.storeWidth, item.dt.storeDepth);
-    planeGeometry.rotateX(-Math.PI / 2)
+    const planeGeometry = new THREE.PlaneGeometry(rackWidth, item.dt.rackDepth);
+
+    planeGeometry.rotateX(Math.PI / 2)
+
     const planeMaterial = new THREE.MeshBasicMaterial({
-      color: 'white',
+      color: '#9a9090',
       transparent: true,  // 启用透明
-      opacity: 0.2,       // 50%透明度
+      opacity: 0.5,       // 50%透明度
       depthWrite: false,   // 防止深度冲突
       side: THREE.DoubleSide  // 双面渲染:ml-citation{ref="5,8" data="citationList"}
     });
     const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
     group.add(planeMesh)
 
-    if (!item.dt.storeWidth || !item.dt.storeDepth) {
+    if (!item.dt.bays || !item.dt.rackDepth) {
       return [group]
     }
 
     // 绘制边框
-    const lineXLen = item.dt.storeWidth - this.defaultLineWidth
-    const lineYLen = item.dt.storeDepth - this.defaultLineWidth
+    const lineXLen = rackWidth - this.defaultLineWidth
+    const lineYLen = item.dt.rackDepth - this.defaultLineWidth
 
     const lineGeometry = new LineGeometry().setPositions([
-      -(lineXLen/2),-(lineYLen/2),0,
-      lineXLen/2,-(lineYLen/2),0,
-      lineXLen/2,lineYLen/2,0,
-      -(lineXLen/2),lineYLen/2,0,
-      -(lineXLen/2),-(lineYLen/2),0
-    ]);
-    lineGeometry.rotateX(-Math.PI / 2)
+      -(lineXLen/2),0,-(lineYLen/2),
+      lineXLen/2,0,-(lineYLen/2),
+      lineXLen/2,0,lineYLen/2,
+      -(lineXLen/2),0,lineYLen/2,
+      -(lineXLen/2),0,-(lineYLen/2)
+    ])
     const lineMaterial = new LineMaterial({
-      color: 0x00ff00,
+      color: '#0d89a5',
       linewidth: 0.05,
       worldUnits: true,
       resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
       side: THREE.DoubleSide
     });
-    //
     const line = new Line2(lineGeometry, lineMaterial);
     group.add(line as THREE.Object3D)
 
-    return [group]
+    let lineDistanceX = 0
+
+    for (let i = 0; item.dt.bays.length > 1 && i < item.dt.bays.length - 1; i++) {
+      const bay = item.dt.bays[i]
+      lineDistanceX += bay.bayWidth
+      const lineGeometryT = new LineGeometry().setPositions([
+        -(lineDistanceX) +(lineXLen/2),0,lineYLen/2,
+        -(lineDistanceX)+(lineXLen/2),0,-(lineYLen/2)
+      ])
+      const lineT = new Line2(lineGeometryT, lineMaterial);
+      group.add(lineT as THREE.Object3D)
+    }
+
+    // 设置位置
+    group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2])
+
+
+    item.dt.rackWidth =  rackWidth
+    item.dt.rackHeight =  rackHeight
+
+    const points = [group]
+    this.fillObjectUserDataFromItem(item, ...points)
+    this.afterCreateOrUpdatePoint(item, option, points)
+    this.tempViewport.entityManager.appendObject(item.id, points)
+    this.appendToScene(...points)
+    return points
   }
 
   dispose() {
     super.dispose()
     this.pointMaterial.dispose()
   }
+
+  createPointBasic(item: ItemJson, option?: RendererCudOption): Object3D[] {
+    return [];
+  }
 }