地堆显示

src/components/Model3DView.vue

@@ -17,6 +17,7 @@
       </el-upload>
       <el-button @click="addConveyor">添加输送线</el-button>
       <el-button @click="createShelf">添加货架</el-button>
+      <el-button @click="createGroundStore">添加地堆</el-button>
       <div class="demo-color-block">
         <span class="demonstration">材质颜色</span>
         <el-color-picker v-model="restate.targetColor" />
@@ -378,6 +379,15 @@ function createShelf(){//创建货架
   })
 }
 
+function createGroundStore() {
+  const planeGeometry = new THREE.PlaneGeometry(1, 1);
+  const material = new THREE.MeshBasicMaterial({
+    color: 0x00ff00,
+    side: THREE.DoubleSide  // 双面渲染:ml-citation{ref="5,8" data="citationList"}
+  });
+  const planeMesh = new THREE.Mesh(planeGeometry, material);
+  scene.add(planeMesh);
+}
 
 function initThree() {
   const viewerDom = canvasContainer.value

src/modules/gstore/GstoreRenderer.ts

@@ -1,15 +1,14 @@
 import * as THREE from 'three'
 import BaseRenderer from '@/core/base/BaseRenderer.ts'
-import { Text } from 'troika-three-text'
-import MoveLinePointPng from '@/assets/images/moveline_point.png'
-import SimSunTTF from '@/assets/fonts/simsunb.ttf'
-import { getLineId } from '@/core/ModelUtils.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'
 
 /**
- * 辅助测量工具渲染器
+ * 地堆货位渲染器
  */
 export default class GstoreRenderer extends BaseRenderer {
-  static POINT_NAME = 'way_point'
+  static POINT_NAME = 'ground_store'
 
   pointMaterial: THREE.Material
 
@@ -19,6 +18,7 @@ export default class GstoreRenderer extends BaseRenderer {
   readonly defulePositionY: number = 0.5 // 默认点的高度, 0.01, 防止和地面重合
   readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1.5, 1.2, 0.1)
   readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0)
+  readonly defaultLineWidth: number = 0.05
 
   constructor(itemTypeName: string) {
     super(itemTypeName)
@@ -50,13 +50,56 @@ export default class GstoreRenderer extends BaseRenderer {
   }
 
   createPointBasic(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] {
-    const obj = new THREE.Sprite(this.pointMaterial as THREE.SpriteMaterial)
-    obj.name = GstoreRenderer.POINT_NAME
-    return [obj]
+    // 创建平面几何体
+
+    const group = new THREE.Group()
+    group.name = GstoreRenderer.POINT_NAME
+
+    // 绘制背景矩形框
+    const planeGeometry = new THREE.PlaneGeometry(item.dt.storeWidth, item.dt.storeDepth);
+    planeGeometry.rotateX(-Math.PI / 2)
+    const planeMaterial = new THREE.MeshBasicMaterial({
+      color: 'white',
+      transparent: true,  // 启用透明
+      opacity: 0.2,       // 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) {
+      return [group]
+    }
+
+    // 绘制边框
+    const lineXLen = item.dt.storeWidth - this.defaultLineWidth
+    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
+    ]);
+    lineGeometry.rotateX(-Math.PI / 2)
+    const lineMaterial = new LineMaterial({
+      color: 0x00ff00,
+      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]
   }
 
   dispose() {
     super.dispose()
     this.pointMaterial.dispose()
   }
-}
+}