添加货架-半成品

src/designer/model3DView/Model3DView.vue

@@ -16,6 +16,7 @@
         <el-button>打开材质</el-button>
       </el-upload>
       <el-button @click="addConveyor">添加输送线</el-button>
+      <el-button @click="createShelf">添加货架</el-button>
       <div class="demo-color-block">
         <span class="demonstration">材质颜色</span>
         <el-color-picker v-model="restate.targetColor" />
@@ -85,10 +86,9 @@ import Split from '@/components/split/split.vue'
 import SplitArea from '@/components/split/split-area.vue'
 import { renderIcon } from '@/utils/webutils.js'
 import textureUrl from '@/assets/images/conveyor/shapes/RibSideSkirtThumbnail.jpg'
-import textureUrl2 from '@/assets/images/conveyor/shapes/logo.png'
 import moveUrl from '@/assets/images/conveyor/shapes/move.svg'
 import arrowRightUrl from '@/assets/images/conveyor/shapes/arrow-right.svg'
-// import pointImg from '@/assets/images/logo.png' arrow-right.svg
+import rackUrl from '@/assets/images/conveyor/shapes/Rack.png'
 
 // DOM refs
 const canvasContainer = ref(null)
@@ -260,6 +260,125 @@ function addMarkerAt(x, y,z,textUrl, scale = 1) {
   });
 }
 
+function createShelf(){//创建货架
+  const textureLoader = new THREE.TextureLoader();
+  const metalTexture = textureLoader.load('path/to/your/metal/texture.jpg'); // 替换为实际路径
+
+  // 材质设置
+  const material = new THREE.MeshStandardMaterial({
+    map: metalTexture,
+    metalness: 1.0,
+    roughness: 0.5
+  });
+
+  // 货架参数
+  const shelfLength = 10;       // 总长
+  const shelfWidth = 0.8;       // 宽度（深度）
+  const shelfThickness = 0.1;   // 层板厚度
+  const rows = 3;               // 层数
+  const columns = 4;            // 列数
+  const spacingY = 1;           // 层间距
+
+  const unitLength = shelfLength / columns; // 每个格子长度：2.5m
+
+  // ✅ 整体上浮高度：让模型位于水平面之上
+  const baseHeight = 2; // 单位：米
+
+  // ---------------------
+  // 创建层板（3层 × 4列）
+  // ---------------------
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < columns; col++) {
+      const geometry = new THREE.BoxGeometry(unitLength, shelfThickness, shelfWidth);
+      const mesh = new THREE.Mesh(geometry, material);
+
+      const x = -shelfLength / 2 + unitLength * col + unitLength / 2;
+      const y = -(shelfThickness + spacingY) * row - shelfThickness / 2 + baseHeight; // 加上偏移
+      const z = 0;
+
+      mesh.position.set(x, y, z);
+      scene.add(mesh);
+    }
+  }
+
+  // ---------------------
+  // 计算第三层层板底部位置（用于支撑柱对齐）
+  // ---------------------
+  const thirdShelfCenterY = -(shelfThickness + spacingY) * 2 - shelfThickness / 2 + baseHeight;
+  const thirdShelfBottomY = thirdShelfCenterY - shelfThickness / 2;
+
+  // ---------------------
+// 创建支撑柱 + 添加贴纸
+// ---------------------
+
+  const postWidth = 0.1;
+  const postDepth = 0.1;
+  const postHeight = 3.3;
+
+
+
+
+  const postPositionsX = [0, 2.5, 5, 7.5, 10];
+  const postPositionsZ = [-shelfWidth / 2, shelfWidth / 2];
+
+// 加载贴纸纹理（可以是透明PNG）
+  const loader = new THREE.TextureLoader();
+  loader.load(rackUrl, (texture) => {
+    // 创建贴纸材质（支持透明）
+    const stickerMaterial = new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      side: THREE.DoubleSide // 双面可见
+    });
+
+    postPositionsX.forEach(x => {
+      postPositionsZ.forEach(z => {
+        // 创建柱子
+        const postGeometry = new THREE.BoxGeometry(postWidth, postHeight, postDepth);
+        const post = new THREE.Mesh(postGeometry, material);
+
+        // 设置柱子中心 Y 坐标，使其底部对齐第三层层板底部
+        const postCenterY = thirdShelfBottomY + postHeight / 2;
+
+        post.position.set(
+            x - shelfLength / 2,
+            postCenterY,
+            z
+        );
+
+        scene.add(post);
+
+        // ---------------------
+        // 创建贴纸（附加在外侧面上）
+        // ---------------------
+        const stickerWidth = 0.08;  // 贴纸宽度
+        const stickerHeight = 0.2;  // 贴纸高度
+
+        const stickerGeometry = new THREE.PlaneGeometry(stickerWidth, stickerHeight);
+        const sticker = new THREE.Mesh(stickerGeometry, stickerMaterial);
+
+        // 将贴纸放在柱子外侧表面中间位置
+        sticker.position.set(
+            post.position.x + postWidth / 2,     // 柱子外侧
+            post.position.y,                     // Y 中心
+            post.position.z                      // Z 对齐
+        );
+
+        // 让贴纸始终面向相机（可选）
+        // 使用 dcm.orientation.lookAt(camera.position) 或手动设置朝向
+        // 这里简单设置固定朝向正面（可根据需求扩展为自动朝向相机）
+        sticker.lookAt(new THREE.Vector3(1, 0, 0)); // 面向 X 正方向
+
+        // 微调：让贴纸略微浮出柱子表面，避免深度冲突
+        sticker.position.x += 0.01;
+
+        scene.add(sticker);
+      });
+    });
+  })
+}
+
+
 function initThree() {
   const viewerDom = canvasContainer.value
 

src/designer/viewWidgets/toolbox/ToolboxView.vue

@@ -102,8 +102,8 @@ export default {
         {
           name: 'other', icon: 'antd CiOutlined', label: '辅助',
           children: [
-            { name: 'source', label: '发生器' },
+            { name: 'source', icon:'antd SoundOutlined',label: '发生器' },
-            { name: 'sink', label: '消失器' },
+            { name: 'sink',icon:'fa Eraser', label: '消失器' },
             { name: 'dispatcher', label: '任务分配器' },
             { name: 'text', label: '文本' },
             { name: 'image', label: '图片' },