Conveyor 输送线

src/designer/Viewport.ts

@@ -146,6 +146,9 @@ export default class Viewport {
     // 创建正交摄像机
     this.initMode2DCamera()
 
+    // 注册拖拽组件
+    this.dragControl = new EsDragControls(this)
+
     // 辅助线
     const gridOption = this.worldModel.gridOption
     const axesHelper = new THREE.GridHelper(gridOption.axesSize, gridOption.axesDivisions)
@@ -249,8 +252,6 @@ export default class Viewport {
       tool.init(this)
     }
 
-    // 注册拖拽组件
-    this.dragControl = new EsDragControls(this)
 
     _.forEach(getAllItemTypes(), (itemType: ItemTypeDefineOption) => {
       itemType.clazz.afterAddViewport(this)
@@ -316,7 +317,7 @@ export default class Viewport {
     this.animationFrameId = requestAnimationFrame(this.animate.bind(this))
     this.renderView()
 
-    this.offset -= 0.05
+    this.offset -= 0.002
     window['lineMaterial'].dashOffset = this.offset
   }
 

src/model/itemType/ItemTypeLine.ts

@@ -19,7 +19,7 @@ export default abstract class ItemTypeLine extends ItemType {
 
   abstract createPointBasic(position: THREE.Vector3): THREE.Object3D
 
-  abstract createLineBasic(): THREE.Mesh
+  abstract createLineBasic(isTemplate?: boolean): THREE.Mesh
 
   public init(worldModel: WorldModel) {
     return super.init(worldModel).then(() => {
@@ -32,7 +32,7 @@ export default abstract class ItemTypeLine extends ItemType {
   afterUpdateLine(line: THREE.Mesh, startPoint: THREE.Object3D, endPoint: THREE.Object3D): void {
   }
 
-  createLine(scene: THREE.Scene, startPoint: THREE.Object3D, endPoint: THREE.Object3D): THREE.Mesh {
+  createLine(viewport: Viewport, scene: THREE.Scene, startPoint: THREE.Object3D, endPoint: THREE.Object3D): THREE.Mesh {
     const line = this.createLineBasic()
     const geom = line.geometry
     geom.setFromPoints([startPoint.position, endPoint.position])
@@ -62,6 +62,11 @@ export default abstract class ItemTypeLine extends ItemType {
     this.afterCreateLine(line, startPoint, endPoint)
     //@ts-ignore
     if (typeof line.computeLineDistances === 'function') {
+      // const canvas = viewport.renderer.domElement
+
+      //@ts-ignore
+      // this.lineMaterial.resolution.set(canvas.width, canvas.height)
+
       //@ts-ignore
       line.computeLineDistances()
     }
@@ -90,7 +95,7 @@ export default abstract class ItemTypeLine extends ItemType {
           continue
         }
 
-        const line = this.createLine(scene, startPoint, endPoint)
+        const line = this.createLine(viewport, scene, startPoint, endPoint)
       }
     }
   }

src/model/itemType/ToolboxLine.ts

@@ -32,7 +32,7 @@ export default class ToolboxLine extends Toolbox {
   afterAddPoint(startPoint: THREE.Object3D, point: THREE.Object3D) {
     // 如果起始点存在，则将新点添加到起始点的链接中
     startPoint.userData.link.push(point.uuid)
-    this.itemType.createLine(this.viewport.scene, this.startPoint, point)
+    this.itemType.createLine(this.viewport, this.viewport.scene, this.startPoint, point)
   }
 
   mousemove(e: MouseEvent): THREE.Vector3 | undefined {
@@ -45,7 +45,7 @@ export default class ToolboxLine extends Toolbox {
     if (this.startPoint) {
       // 获取最后一个点
       if (!this.tempLine) {
-        this.tempLine = this.itemType.createLineBasic()
+        this.tempLine = this.itemType.createLineBasic(true)
         this.viewport.scene.add(this.tempLine)
       }
 

src/model/itemType/line/conveyor/Conveyor.ts

@@ -7,6 +7,7 @@ import ConveyorToolbox from './ConveyorToolbox.ts'
 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'
+import _ from 'lodash'
 
 export default class Conveyor extends ItemTypeLine {
   defaultScale: THREE.Vector3 = new THREE.Vector3(0.25, 0.1, 0.25)
@@ -15,6 +16,8 @@ export default class Conveyor extends ItemTypeLine {
   pointMaterial!: THREE.Material
 
   lineMaterial!: LineMaterial
+  lineMaterialTemplate!: LineMaterial
+  lineMaterialOutline!: LineMaterial
 
   static POINT_NAME = 'conveyor_point'
   static LINE_NAME = 'conveyor_line'
@@ -28,13 +31,30 @@ export default class Conveyor extends ItemTypeLine {
         alphaToCoverage: true,
         side: THREE.DoubleSide,
         color: 0x0088ff,
-        linewidth: 0.8,
         dashed: true,
+        resolution: new THREE.Vector2(1, 1), // 需要在afterAddScene中设置
         dashOffset: 0,
+        linewidth: 0.8,
         dashScale: 1,
         dashSize: 0.2,
         gapSize: 0.2,
         worldUnits: true
+        // linewidth: 10,
+        // worldUnits: false,
+        // dashSize: 0.2,
+        // gapSize: 0.2,
+        // dashScale: 1
+      })
+
+      this.lineMaterialTemplate = new LineMaterial({
+        color: 0x0088ff,
+        linewidth: 0.8,
+        worldUnits: true,
+        opacity: 0.5,
+        transparent: true,
+        alphaToCoverage: true,
+        depthWrite: false,     // 避免深度冲突
+        blending: THREE.NormalBlending
       })
 
       window['lineMaterial'] = this.lineMaterial // 方便调试查看
@@ -48,7 +68,7 @@ export default class Conveyor extends ItemTypeLine {
     super.afterAddScene(viewport, scene, objects)
     _.defer(() => {
       const canvas = viewport.renderer.domElement
-      this.lineMaterial.resolution.set(canvas.width, canvas.height)
+      // this.lineMaterial.resolution.set(canvas.width, canvas.height)
     })
   }
 
@@ -87,9 +107,14 @@ export default class Conveyor extends ItemTypeLine {
   /**
    * 创建测量线
    */
-  createLineBasic(): Line2 {
+  createLineBasic(isTemplate?: boolean): THREE.Mesh {
     const geom = new LineGeometry()
-    const obj = new Line2(geom, this.lineMaterial)
+    let obj: THREE.Mesh
+    if (isTemplate) {
+      obj = new Line2(geom, this.lineMaterialTemplate)
+    } else {
+      obj = new Line2(geom, this.lineMaterial)
+    }
     obj.frustumCulled = false
     obj.name = Conveyor.LINE_NAME
     obj.uuid = THREE.MathUtils.generateUUID()