添加输送线

src/designer/model3DView/Model3DView.vue

@@ -84,7 +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'
+import textureUrl from '@/assets/images/conveyor/shapes/RibSideSkirtThumbnail.jpg'
 
 // DOM refs
 const canvasContainer = ref(null)
@@ -167,18 +167,21 @@ 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);
+  const length = 20;    // 长度 (X轴)
+  const width = 0.8;    // 宽度 (Y轴)
+  const height = 0.2;   // 厚度/高度 (Z轴)
+
+  const geometry = new THREE.BoxGeometry(length, width, height);
 
   // 2. 加载纹理
   const textureLoader = new THREE.TextureLoader();
-  debugger
   textureLoader.load(textureUrl, (texture)=>{
-    debugger
     // 3. 设置纹理参数
     texture.wrapS = THREE.RepeatWrapping; // X方向重复（实际会拉伸）
     texture.wrapT = THREE.RepeatWrapping; // Y方向重复
+    texture.center.set(0.5,0.5)
+    texture.rotation  = Math.PI / 2
+
     texture.repeat.set(1, 1); // 初始不缩放，后面根据需要调整
 
     // 4. 根据输送线长度自动调整Y方向的重复次数
@@ -188,7 +191,8 @@ function addConveyor(){
     texture.repeat.set(1, 20); // 调整这个值来控制Y方向的重复频率
 
     // 5. 创建材质并应用纹理
-    const material = new THREE.MeshBasicMaterial({ map: texture });
+    const material = new THREE.MeshBasicMaterial(
+        { map: texture,color: 0x9f9f9f});
 
     // 6. 创建网格对象
     const conveyorBelt = new THREE.Mesh(geometry, material);
@@ -196,7 +200,30 @@ function addConveyor(){
     // 7. 可选：旋转为X轴方向（默认PlaneGeometry是X/Y平面）
     conveyorBelt.rotation.x = -Math.PI / 2; // 让其平放在地面上（X/Z 平面）
 
+    // 放置到合适的位置（如果需要）
+    conveyorBelt.position.y = height / 2; // 让底部贴地
     scene.add(conveyorBelt)
+
+    // 动画函数
+    let offsetSpeed = 0.01; // 控制滚动速度
+    function animate() {
+      requestAnimationFrame(animate);
+
+      // 沿Y轴滚动
+      if (texture) {
+        let currentOffset = texture.offset.y;
+        currentOffset += offsetSpeed;
+
+        // 当偏移量超过1时重置，以实现无缝循环
+        if (currentOffset >= 1) {
+          currentOffset -= 1;
+        }
+        texture.offset.set(texture.offset.x,currentOffset);
+      }
+
+      renderer.render(scene, camera);
+    }
+    animate();
   });