Measure 测量工具

src/designer/Viewport.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import * as THREE from 'three'
-import { AxesHelper, GridHelper, OrthographicCamera, Raycaster, Scene, WebGLRenderer } from 'three'
+import { AxesHelper, GridHelper, OrthographicCamera, Raycaster, Scene, Vector3, WebGLRenderer } from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import EsDragControls from './model2DEditor/EsDragControls'
 import Stats from 'three/examples/jsm/libs/stats.module'
@@ -61,10 +61,6 @@ export default class Viewport {
       rotation: { x: 0, y: 0, z: 0 }
     },
     mouse: {
-      leftPx: 0,
-      topPx: 0,
-      posX: 0,
-      posZ: 0,
       x: 0,
       y: 0
     }
@@ -448,6 +444,21 @@ export default class Viewport {
 
     return this.raycaster.intersectObjects([this.gridHelper], false)
   }
+
+  /**
+   * 获取按下对应三维位置 相对于 canvas 元素 (renderer.domElement) 元素
+   */
+  getClosestIntersection(e: MouseEvent) {
+    const _point = new THREE.Vector2()
+    _point.x = e.offsetX / this.renderer.domElement.offsetWidth
+    _point.y = e.offsetY / this.renderer.domElement.offsetHeight
+
+    const intersects = this.getIntersects(_point)
+    if (intersects && intersects.length > 2) {
+      return new Vector3(intersects[0].point.x, 0.1, intersects[1].point.z)
+    }
+    return null
+  }
 }
 
 export interface ViewportState {
@@ -478,18 +489,6 @@ export interface ViewportState {
    * 鼠标位置(归一化坐标)
    */
   mouse: {
-    /*
-      * 鼠标在 DOM 上的位置
-     */
-    leftPx: number,
-    topPx: number,
-
-    /**
-     * 鼠标在 THREE 中的归一化坐标
-     */
-    posX: number,
-    posZ: number,
-
     /**
      * 鼠标在设计图上的坐标
      */

src/designer/model2DEditor/tools/MeasureTool.ts

@@ -56,7 +56,7 @@ export default class MeasureTool implements ICursorTool {
   init(viewport: Viewport) {
     this.viewport = viewport
     const viewerDom = this.viewport.viewerDom
-    this.canvas = $(viewerDom).children('canvas')[0] as HTMLCanvasElement
+    this.canvas = this.viewport.renderer.domElement as HTMLCanvasElement
 
     // 初始化group
     this.group = new THREE.Group()
@@ -120,7 +120,7 @@ export default class MeasureTool implements ICursorTool {
     this.mouseMoved = true
 
     // 当前鼠标所在的点
-    const point = this.getClosestIntersection(e)
+    const point = this.viewport.getClosestIntersection(e)
     if (!point) {
       return
     }
@@ -185,7 +185,7 @@ export default class MeasureTool implements ICursorTool {
     }
 
     // 获取鼠标点击位置的三维坐标
-    const point = this.getClosestIntersection(e)
+    const point = this.viewport.getClosestIntersection(e)
     if (!point) {
       return
     }
@@ -266,27 +266,6 @@ export default class MeasureTool implements ICursorTool {
 
 
   /**
-   * 获取按下对应三维位置
-   */
-  getClosestIntersection(e: MouseEvent) {
-    const _point = new THREE.Vector2()
-    _point.x = e.offsetX / this.viewport.renderer.domElement.offsetWidth
-    _point.y = e.offsetY / this.viewport.renderer.domElement.offsetHeight
-
-    const intersects = this.viewport.getIntersects(_point)
-    if (intersects && intersects.length > 2) {
-      if (intersects.length > 0 && intersects[0].distance < MeasureTool.MAX_DISTANCE) {
-        return new Vector3(
-          intersects[0].point.x,
-          0.1,
-          intersects[1].point.z
-        )
-      }
-    }
-    return null
-  }
-
-  /**
    * 添加或更新临时标签和位置
    */
   addOrUpdateTempLabel(label: string, position: THREE.Vector3) {
@@ -362,7 +341,7 @@ export default class MeasureTool implements ICursorTool {
    * 重绘监听鼠标移动
    */
   redrawMousemove(e: MouseEvent) {
-    let point = this.getClosestIntersection(e)
+    let point = this.viewport.getClosestIntersection(e)
 
     if (!point && this.tempPointMarker) {
       this.tempPointMarker.position.set(this.tempPointMarker.userData.point.x, this.tempPointMarker.userData.point.y, this.tempPointMarker.userData.point.z)

src/designer/model2DEditor/tools/MouseMoveInspect.ts

@@ -1,56 +1,40 @@
 import type Viewport from '@/designer/Viewport.ts'
 import type { ITool } from '@/designer/model2DEditor/tools/ITool.ts'
 
+let pmFn
+
 /**
  * 鼠标移动时，将鼠标位置的坐标转换为设计图上的坐标，并设置到 designer.mousePos 属性中
  */
 export default class MouseMoveInspect implements ITool {
   viewport: Viewport
+  canvas: HTMLCanvasElement
 
   constructor() {
   }
 
   init(viewport: Viewport) {
     this.viewport = viewport
-    const viewerDom = this.viewport.viewerDom
+    this.canvas = this.viewport.renderer.domElement as HTMLCanvasElement
 
-    viewerDom.addEventListener('mousemove', this.mouseMove.bind(this))
+    pmFn = this.mouseMove.bind(this)
+    this.canvas.addEventListener('pointermove', pmFn)
   }
 
   destory() {
-    const viewerDom = this.viewport.viewerDom
-    viewerDom.removeEventListener('mousemove', this.mouseMove.bind(this))
+    this.canvas.removeEventListener('pointermove', pmFn)
+    pmFn = undefined
   }
 
   mouseMove = _.throttle(function(this: MouseMoveInspect, event: MouseEvent) {
-    const viewer = this.viewport.viewerDom
-    // 获取鼠标在three.js 中的归一化坐标 取值范围是 (-1 to +1)
-    const rect = viewer.getBoundingClientRect()
-
-    this.viewport.state.mouse.leftPx = event.clientX - rect.left
-    this.viewport.state.mouse.topPx = event.clientY - rect.top
-
-    this.viewport.state.mouse.posX = ((event.clientX - rect.left) / rect.width) * 2 - 1
-    this.viewport.state.mouse.posZ = ((event.clientY - rect.top) / rect.height) * -2 + 1
-
-    const intersects = this.viewport.getGridHelpAtPosition({
-      x: this.viewport.state.mouse.posX,
-      z: this.viewport.state.mouse.posZ
-    })
-    if (!intersects || intersects.length < 2) {
-      this.viewport.state.mouse.x = NaN
-      this.viewport.state.mouse.z = NaN
-      return
-    }
-
-    if (!_.every(intersects, (intersect) => intersect.object.type === 'GridHelper')) {
-      this.viewport.state.mouse.x = NaN
-      this.viewport.state.mouse.z = NaN
+    // 当前鼠标所在的点
+    const point = this.viewport.getClosestIntersection(event)
+    if (!point) {
       return
     }
 
-    this.viewport.state.mouse.x = Math.floor(intersects[0].point.x * 10) / 10
-    this.viewport.state.mouse.z = Math.floor(intersects[1].point.z * 10) / 10
+    this.viewport.state.mouse.x = point.x
+    this.viewport.state.mouse.z = point.z
 
   }, 1)
 }