Conveyor 输送线

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
   }
 
   /**

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')

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
   }
 

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 {
   }
 
   /**

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++) {

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
   }
 }