diff --git a/src/designer/Viewport.ts b/src/designer/Viewport.ts index f9d2a62..5525ab9 100644 --- a/src/designer/Viewport.ts +++ b/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 } diff --git a/src/model/itemType/ItemTypeLine.ts b/src/model/itemType/ItemTypeLine.ts index 82f00ab..57cc6a5 100644 --- a/src/model/itemType/ItemTypeLine.ts +++ b/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) } } } diff --git a/src/model/itemType/ToolboxLine.ts b/src/model/itemType/ToolboxLine.ts index 841b8f4..818889b 100644 --- a/src/model/itemType/ToolboxLine.ts +++ b/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) } diff --git a/src/model/itemType/line/conveyor/Conveyor.ts b/src/model/itemType/line/conveyor/Conveyor.ts index c429b31..6577d57 100644 --- a/src/model/itemType/line/conveyor/Conveyor.ts +++ b/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()