Conveyor 输送线

src/designer/model3DView/Model3DView.vue

@@ -15,6 +15,7 @@
                  list-type="picture">
         <el-button>打开材质</el-button>
       </el-upload>
+      <el-button @click="addConveyor">添加输送线</el-button>
       <div class="demo-color-block">
         <span class="demonstration">材质颜色</span>
         <el-color-picker v-model="restate.targetColor" />
@@ -83,6 +84,7 @@ import { TransformControls } from 'three/examples/jsm/controls/TransformControls
 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/Belt1.png'
 
 // DOM refs
 const canvasContainer = ref(null)
@@ -163,6 +165,43 @@ watch(() => restate.mode, (newVal) => {
   }
 })
 
+function addConveyor(){
+  // 1. 创建几何体：长 10 米，宽 0.8 米
+  const length = 10; // X方向长度
+  const width = 0.8; // Y方向宽度
+  const geometry = new THREE.PlaneGeometry(length, width);
+
+  // 2. 加载纹理
+  const textureLoader = new THREE.TextureLoader();
+  debugger
+  textureLoader.load(textureUrl, (texture)=>{
+    debugger
+    // 3. 设置纹理参数
+    texture.wrapS = THREE.RepeatWrapping; // X方向重复（实际会拉伸）
+    texture.wrapT = THREE.RepeatWrapping; // Y方向重复
+    texture.repeat.set(1, 1); // 初始不缩放，后面根据需要调整
+
+    // 4. 根据输送线长度自动调整Y方向的重复次数
+    // 假设你的纹理高度是 256px，想要在 0.8m 宽度上显示完整的一行
+    // 所以我们计算 repeat.y = 0.8 / (texture.height / texture.width * length)
+    // 或者你可以手动设置 repeat.y 来控制重复频率
+    texture.repeat.set(1, 20); // 调整这个值来控制Y方向的重复频率
+
+    // 5. 创建材质并应用纹理
+    const material = new THREE.MeshBasicMaterial({ map: texture });
+
+    // 6. 创建网格对象
+    const conveyorBelt = new THREE.Mesh(geometry, material);
+
+    // 7. 可选：旋转为X轴方向（默认PlaneGeometry是X/Y平面）
+    conveyorBelt.rotation.x = -Math.PI / 2; // 让其平放在地面上（X/Z 平面）
+
+    scene.add(conveyorBelt)
+  });
+
+
+}
+
 function initThree() {
   const viewerDom = canvasContainer.value