输送线模型

src/assets/images/conveyor/shapes/arrow-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748495847249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1994" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512 741.504l338.752-338.752 90.496 90.496L512 922.496 82.752 493.248l90.496-90.496L512 741.504z m0-320l338.752-338.752 90.496 90.496L512 602.496 82.752 173.248l90.496-90.496L512 421.504z" fill="#f4ea2a" p-id="1995"></path></svg>

src/assets/images/conveyor/shapes/move.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748486386425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2383" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M768 320v128H576V256h128L512 64 320 256h128v192H256V320L64 512l64 64 128 128V576h192v192H320l192 192 64-64 128-128H576V576h192v128l192-192-192-192z" p-id="2384" fill="#d81e06"></path></svg>

src/designer/model3DView/Model3DView.vue

@@ -85,6 +85,10 @@ 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
 
 // DOM refs
 const canvasContainer = ref(null)
@@ -165,7 +169,7 @@ watch(() => restate.mode, (newVal) => {
   }
 })
 
-function addConveyor(){
+function addConveyor(){//输送线
   // 1. 创建几何体：长 10 米，宽 0.8 米
   const length = 20;    // 长度 (X轴)
   const width = 0.8;    // 宽度 (Y轴)
@@ -202,8 +206,11 @@ function addConveyor(){
 
     // 放置到合适的位置（如果需要）
     conveyorBelt.position.y = height / 2; // 让底部贴地
+    // // 示例：在输送线不同位置添加多个标记
+    addMarkerAt(-9.5, height,0,moveUrl);   // 起点
+    addMarkerAt(0,  height,0,arrowRightUrl);    // 中间
+    addMarkerAt(9.5,  height,0,moveUrl);    // 终点
     scene.add(conveyorBelt)
-
     // 动画函数
     let offsetSpeed = 0.01; // 控制滚动速度
     function animate() {
@@ -225,8 +232,32 @@ function addConveyor(){
     }
     animate();
   });
+}
+
+function addMarkerAt(x, y,z,textUrl, scale = 1) {
+  const loader = new THREE.TextureLoader();
+  loader.load(textUrl, (texture) => {
+    // 创建一个平面作为标记（大小可以调整）
+    const markerGeometry = new THREE.PlaneGeometry(.6 * scale, 0.5 * scale); // 宽高比例保持一致
+
+    const markerMaterial = new THREE.MeshBasicMaterial({
+      map: texture,
+      transparent: true,
+      opacity: 1,
+      depthWrite: false,
+      side: THREE.DoubleSide
+    });
 
+    const marker = new THREE.Mesh(markerGeometry, markerMaterial);
+    let yHeight=y+0.01
+    // 设置位置：位于输送线表面（Y轴略高于输送线一点）
+    marker.position.set(x, yHeight, z); // Y = 输送线高度 + 一点间距
 
+    // 旋转为 X/Z 平面方向（与输送线一致）
+    marker.rotation.x = -Math.PI / 2; // 和 conveyorBelt 一样旋转角度
+    marker.rotation.z = Math.PI / 2; // 在平面上旋转 90 度
+    scene.add(marker);
+  });
 }
 
 function initThree() {