diff --git a/src/designer/model3DView/Model3DView.vue b/src/designer/model3DView/Model3DView.vue index f9f571c..2adf674 100644 --- a/src/designer/model3DView/Model3DView.vue +++ b/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(); });