From d549332e6910e093e00a78e74185e508b939b9fe Mon Sep 17 00:00:00 2001 From: luoyifan Date: Tue, 27 May 2025 23:50:29 +0800 Subject: [PATCH] =?UTF-8?q?Conveyor=20=E8=BE=93=E9=80=81=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/designer/Viewport.ts | 11 ++++++++++- src/model/ModelUtils.ts | 4 ++-- src/model/WorldModel.ts | 13 ++++++------- src/model/itemType/ItemType.ts | 2 +- src/model/itemType/ItemTypeLine.ts | 10 +++++++--- src/model/itemType/line/conveyor/Conveyor.ts | 29 ++++++++++++++++------------ 6 files changed, 43 insertions(+), 26 deletions(-) diff --git a/src/designer/Viewport.ts b/src/designer/Viewport.ts index bf0e522..f9d2a62 100644 --- a/src/designer/Viewport.ts +++ b/src/designer/Viewport.ts @@ -14,6 +14,10 @@ import { getAllItemTypes } from '@/runtime/DefineItemType.ts' import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts' import type Toolbox from '@/model/itemType/Toolbox.ts' import { calcPositionUseSnap } from '@/model/ModelUtils.ts' +import textureUrl from '@/assets/images/conveyor/shapes/Belt1.png' +import { Line2 } from 'three/examples/jsm/lines/Line2.js' +import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js' +import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js' /** * 编辑器对象 @@ -88,7 +92,7 @@ export default class Viewport { this.worldModel.registerViewport(this) // 场景 - const scene = this.worldModel.getSceneByFloor(this.state.currentFloor) + const scene = this.worldModel.getSceneByFloor(this, this.state.currentFloor) this.scene = scene // 渲染器 @@ -303,12 +307,17 @@ export default class Viewport { this.syncCameraState() } + offset = 0 + /** * 动画循环 */ animate() { this.animationFrameId = requestAnimationFrame(this.animate.bind(this)) this.renderView() + + this.offset -= 0.05 + window['lineMaterial'].dashOffset = this.offset } /** diff --git a/src/model/ModelUtils.ts b/src/model/ModelUtils.ts index 88a095c..148a1df 100644 --- a/src/model/ModelUtils.ts +++ b/src/model/ModelUtils.ts @@ -170,7 +170,7 @@ export function findObject3DByCondition(scene: THREE.Object3D, condition: (objec return foundObjects } -export function loadSceneFromJson(scene: THREE.Scene, items: ItemJson[]) { +export function loadSceneFromJson(viewport: Viewport, scene: THREE.Scene, items: ItemJson[]) { console.time('loadSceneFromJson') const object3ds: THREE.Object3D[] = [] @@ -194,7 +194,7 @@ export function loadSceneFromJson(scene: THREE.Scene, items: ItemJson[]) { // afterAddScene 通知所有加载的对象, 模型加载完成 getAllItemTypes().forEach(itemType => { - itemType.clazz.afterAddScene(scene, object3ds) + itemType.clazz.afterAddScene(viewport, scene, object3ds) }) console.log('loadSceneFromJson:', items.length, 'items,', object3ds.length, 'objects') diff --git a/src/model/WorldModel.ts b/src/model/WorldModel.ts index 86a2d72..81f8f62 100644 --- a/src/model/WorldModel.ts +++ b/src/model/WorldModel.ts @@ -62,7 +62,7 @@ export default class WorldModel { }) } - loadFloorToScene(scene: THREE.Scene, levelCode: string) { + loadFloorToScene(viewport: Viewport, scene: THREE.Scene, levelCode: string) { let floor = _.find(this.data.items, r => r.name === levelCode && r.t === 'floor') if (!floor) { console.info(`新建楼层: ${levelCode}`) @@ -74,7 +74,7 @@ export default class WorldModel { this.data.items.push(floor) } - loadSceneFromJson(scene, floor.items) + loadSceneFromJson(viewport, scene, floor.items) } open() { @@ -99,13 +99,12 @@ export default class WorldModel { /** * 获取当前楼层的场景, 如果没有则创建一个新的场景 - * @param floor */ - getSceneByFloor(floor: string) { + getSceneByFloor(viewport: Viewport, floor: string) { if (this.sceneMap.has(floor)) { return this.sceneMap.get(floor) } else { - const scene = this.createScene(floor) + const scene = this.createScene(viewport, floor) this.sceneMap.set(floor, scene) return scene @@ -115,11 +114,11 @@ export default class WorldModel { /** * 创建一个新的场景 */ - createScene(floor: string) { + createScene(viewport: Viewport, floor: string) { const scene = new Scene() scene.background = new THREE.Color(0xeeeeee) - this.loadFloorToScene(scene, floor) + this.loadFloorToScene(viewport, scene, floor) return scene } diff --git a/src/model/itemType/ItemType.ts b/src/model/itemType/ItemType.ts index d0a00b6..67ae75c 100644 --- a/src/model/itemType/ItemType.ts +++ b/src/model/itemType/ItemType.ts @@ -53,7 +53,7 @@ export default abstract class ItemType { /** * 添加到 scene 后的回调 */ - afterAddScene(scene: THREE.Scene, objects: THREE.Object3D[]): void { + afterAddScene(viewport:Viewport, scene: THREE.Scene, objects: THREE.Object3D[]): void { } /** diff --git a/src/model/itemType/ItemTypeLine.ts b/src/model/itemType/ItemTypeLine.ts index 3e8ffeb..82f00ab 100644 --- a/src/model/itemType/ItemTypeLine.ts +++ b/src/model/itemType/ItemTypeLine.ts @@ -60,15 +60,19 @@ export default abstract class ItemTypeLine extends ItemType { endPoint.userData.lines.push(line.uuid) this.afterCreateLine(line, startPoint, endPoint) - + //@ts-ignore + if (typeof line.computeLineDistances === 'function') { + //@ts-ignore + line.computeLineDistances() + } return line } /** * 所有点数据加载完成后，添加进场景之后，需要根据 link 数组创建连接线 */ - afterAddScene(scene: THREE.Scene, objects: THREE.Object3D[]) { - super.afterAddScene(scene, objects) + afterAddScene(viewport: Viewport, scene: THREE.Scene, objects: THREE.Object3D[]) { + super.afterAddScene(viewport, scene, objects) // 为所有的 pointArray 连接线 for (let i = 0; i < this.pointArray.length; i++) { diff --git a/src/model/itemType/line/conveyor/Conveyor.ts b/src/model/itemType/line/conveyor/Conveyor.ts index 462732c..c429b31 100644 --- a/src/model/itemType/line/conveyor/Conveyor.ts +++ b/src/model/itemType/line/conveyor/Conveyor.ts @@ -25,27 +25,31 @@ export default class Conveyor extends ItemTypeLine { this.pointMaterial = new THREE.MeshBasicMaterial({ color: 0x303133, transparent: true, opacity: 0.9 }) this.lineMaterial = new LineMaterial({ + alphaToCoverage: true, + side: THREE.DoubleSide, color: 0x0088ff, - linewidth: 50, - vertexColors: false, // 关闭顶点颜色 + linewidth: 0.8, dashed: true, - dashSize: 20, - gapSize: 10, - alphaToCoverage: true + dashOffset: 0, + dashScale: 1, + dashSize: 0.2, + gapSize: 0.2, + worldUnits: true }) + window['lineMaterial'] = this.lineMaterial // 方便调试查看 + } catch (error) { system.showErrorDialog('Texture loading failed:' + error) } } - - afterAddScene(scene: THREE.Scene, objects: THREE.Object3D[]) { - super.afterAddScene(scene, objects) - - const geometry = new THREE.PlaneGeometry(10, 1) - const beltMesh = new THREE.Mesh(geometry, this.lineMaterial) - scene.add(beltMesh) + afterAddScene(viewport: Viewport, scene: THREE.Scene, objects: THREE.Object3D[]) { + super.afterAddScene(viewport, scene, objects) + _.defer(() => { + const canvas = viewport.renderer.domElement + this.lineMaterial.resolution.set(canvas.width, canvas.height) + }) } getDefaultScale(): THREE.Vector3 { @@ -89,6 +93,7 @@ export default class Conveyor extends ItemTypeLine { obj.frustumCulled = false obj.name = Conveyor.LINE_NAME obj.uuid = THREE.MathUtils.generateUUID() + return obj } } \ No newline at end of file