fl-web-component 0.1.1 → 1.0.1

package/packages/components/model/utils/threejs/measure-distance.js

@@ -1,207 +1,209 @@
-import * as THREE from 'three'
-import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
-var _this = null
-var MeasureDistance = function(renderer, scene, camera, width, height) {
-  this.renderer = renderer
-  this.scene = scene
-  this.camera = camera
-  this.pointArray = [] // 保存当前操作所添加的点
-  this.raycaster = new THREE.Raycaster()
-  this.points = [] // 保存页面中所添加的点
-  this.polyline = [] //保存页面中所添加的直线
-  this.labels = [] // 保存页面中所添加的文本
-  this.tempPoints = undefined
-  this.tempLine = undefined
-  this.tempLabel = undefined
-  this.tipsLabel = undefined
-  this.isCompleted = false
-  this.timer = null
-  this.width = width
-  this.height = height
-}
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+var _this = null;
+var MeasureDistance = function (renderer, scene, camera, width, height) {
+  this.renderer = renderer;
+  this.scene = scene;
+  this.camera = camera;
+  this.pointArray = []; // 保存当前操作所添加的点
+  this.raycaster = new THREE.Raycaster();
+  this.points = []; // 保存页面中所添加的点
+  this.polyline = []; //保存页面中所添加的直线
+  this.labels = []; // 保存页面中所添加的文本
+  this.tempPoints = undefined;
+  this.tempLine = undefined;
+  this.tempLabel = undefined;
+  this.tipsLabel = undefined;
+  this.isCompleted = false;
+  this.timer = null;
+  this.width = width;
+  this.height = height;
+};
 
 MeasureDistance.prototype = {
   start() {
-    _this = this
-    this.renderer.domElement.style.cursor = 'crosshair'
-    this.renderer.domElement.addEventListener('click', this.click, false)
-    this.renderer.domElement.addEventListener('mousemove',  this.mousemove, false)
-    this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
+    _this = this;
+    this.renderer.domElement.style.cursor = 'crosshair';
+    this.renderer.domElement.addEventListener('click', this.click, false);
+    this.renderer.domElement.addEventListener('mousemove', this.mousemove, false);
+    this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false);
   },
   updateParams(width, height) {
-    this.camera.aspect = width / height
-    this.camera.updateProjectionMatrix()
-    this.renderer.setSize(width, height, true)
-    this.width = width
-    this.height = height
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height, true);
+    this.width = width;
+    this.height = height;
   },
   getPosition(e) {
-    const mouse = new THREE.Vector2()
-    mouse.x = (e.clientX / _this.width) * 2 - 1
-    mouse.y = -(e.clientY / _this.height) * 2 + 1
-    _this.raycaster.setFromCamera(mouse, this.camera)
-    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true)
-    if(intersects.length > 0) {
-      return intersects[0].point
+    const mouse = new THREE.Vector2();
+    mouse.x = (e.clientX / _this.width) * 2 - 1;
+    mouse.y = -(e.clientY / _this.height) * 2 + 1;
+    _this.raycaster.setFromCamera(mouse, this.camera);
+    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    if (intersects.length > 0) {
+      return intersects[0].point;
     }
-    return null
+    return null;
   },
-  createLine(p1, p2, config = {color: 0xff0000}) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 15 })
-    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2])
-    const line = new THREE.Line(lineGeometry, lineMaterial)
+  createLine(p1, p2, config = { color: 0xff0000 }) {
+    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 15 });
+    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
+    const line = new THREE.Line(lineGeometry, lineMaterial);
     line.frustumCulled = false;
-    return line
+    return line;
   },
   createLabel(name, text, position) {
-    const div = document.createElement('div')
-    div.className = name
-    div.textContent = text
-    const divLabel = new CSS2DObject(div)
-    divLabel.position.set(position.x, position.y, position.z)
-    return divLabel
+    const div = document.createElement('div');
+    div.className = name;
+    div.textContent = text;
+    const divLabel = new CSS2DObject(div);
+    divLabel.position.set(position.x, position.y, position.z);
+    return divLabel;
   },
   mousemove(e) {
-    if (_this.isCompleted || _this.pointArray.length === 0) return
-    const point = _this.getPosition(e)
+    if (_this.isCompleted || _this.pointArray.length === 0) return;
+    const point = _this.getPosition(e);
     if (point) {
-      _this.pointArray.length === 1 ? _this.pointArray.push(point) : _this.pointArray.splice(_this.pointArray.length - 1, 1, point)
-       const length = _this.pointArray.length
-       if (_this.tempPoints) {
-        _this.tempPoints.position.set(point.x, point.y, point.z)
-       } else {
-         const geom = _this.createLabel('circle-tag', '', point)
-         _this.tempPoints = geom
-         _this.points.push(geom)
-         _this.scene.add(geom)
-       }
-       const p1 = _this.pointArray[length - 2]
-       const p2 = _this.pointArray[length - 1]
-       const dist = p1.distanceTo(p2)
-       const label = `${_this.numberToString(dist)}`
-       const position = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2)
-       if (_this.tempLine) {
-        _this.tempLine.geometry.setFromPoints([p1, p2])
-        _this.tempLabel.element.textContent = label
-        _this.tempLabel.position.set(position.x, position.y, position.z)
-       } else {
-        _this.tempLine = _this.createLine(p1, p2)
-        _this.tempLabel = _this.createLabel('measure-label', label, position)
-        _this.polyline.push(_this.tempLine)
-        _this.labels.push(_this.tempLabel)
-        _this.scene.add(_this.tempLine)
-        _this.scene.add(_this.tempLabel)
-       }
-       if (_this.tipsLabel) {
-        _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05)
-       }
+      _this.pointArray.length === 1
+        ? _this.pointArray.push(point)
+        : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+      const length = _this.pointArray.length;
+      if (_this.tempPoints) {
+        _this.tempPoints.position.set(point.x, point.y, point.z);
+      } else {
+        const geom = _this.createLabel('circle-tag', '', point);
+        _this.tempPoints = geom;
+        _this.points.push(geom);
+        _this.scene.add(geom);
+      }
+      const p1 = _this.pointArray[length - 2];
+      const p2 = _this.pointArray[length - 1];
+      const dist = p1.distanceTo(p2);
+      const label = `${_this.numberToString(dist)}`;
+      const position = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
+      if (_this.tempLine) {
+        _this.tempLine.geometry.setFromPoints([p1, p2]);
+        _this.tempLabel.element.textContent = label;
+        _this.tempLabel.position.set(position.x, position.y, position.z);
+      } else {
+        _this.tempLine = _this.createLine(p1, p2);
+        _this.tempLabel = _this.createLabel('measure-label', label, position);
+        _this.polyline.push(_this.tempLine);
+        _this.labels.push(_this.tempLabel);
+        _this.scene.add(_this.tempLine);
+        _this.scene.add(_this.tempLabel);
+      }
+      if (_this.tipsLabel) {
+        _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
+      }
     }
   },
   createTipsLabel(label, position) {
-    const div = document.createElement('div')
-    div.className = 'tips-label'
-    div.textContent = label
-    div.style = 'top: -50px'
-    const tipsLabel = new CSS2DObject(div)
-    tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05)
-    return tipsLabel
+    const div = document.createElement('div');
+    div.className = 'tips-label';
+    div.textContent = label;
+    div.style = 'top: -50px';
+    const tipsLabel = new CSS2DObject(div);
+    tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
+    return tipsLabel;
   },
   click(e) {
     if (_this.isCompleted) {
-      _this.renderer.domElement.addEventListener('mousemove', _this.mousemove)
+      _this.renderer.domElement.addEventListener('mousemove', _this.mousemove);
     }
-    clearTimeout(_this.timer)
+    clearTimeout(_this.timer);
     _this.timer = setTimeout(() => {
-      _this.isCompleted = false
-      const point = _this.getPosition(e)
+      _this.isCompleted = false;
+      const point = _this.getPosition(e);
       if (point) {
-        if(_this.tipsLabel) {
-          _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05)
+        if (_this.tipsLabel) {
+          _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
         } else {
-          _this.tipsLabel = _this.createTipsLabel('左击绘制右击结束', point)
-          _this.scene.add(_this.tipsLabel)
+          _this.tipsLabel = _this.createTipsLabel('左击绘制右击结束', point);
+          _this.scene.add(_this.tipsLabel);
         }
         if (_this.tempPoints) {
-          _this.tempPoints.position.set(point.x, point.y, point.z)
-          _this.tempPoints = undefined
+          _this.tempPoints.position.set(point.x, point.y, point.z);
+          _this.tempPoints = undefined;
         } else {
-          const geom = _this.createLabel('circle-tag', '',  point)
-          _this.points.push(geom)
-          _this.scene.add(geom) 
+          const geom = _this.createLabel('circle-tag', '', point);
+          _this.points.push(geom);
+          _this.scene.add(geom);
         }
-        _this.tempLine = undefined
-        _this.tempLabel = undefined
-        _this.pointArray.push(point)
+        _this.tempLine = undefined;
+        _this.tempLabel = undefined;
+        _this.pointArray.push(point);
       }
-    })
+    });
   },
   rightClick(e) {
-    if(_this.tipsLabel) {
-      _this.scene.remove(_this.tipsLabel)
-      _this.tipsLabel = undefined
+    if (_this.tipsLabel) {
+      _this.scene.remove(_this.tipsLabel);
+      _this.tipsLabel = undefined;
     }
-    clearTimeout(_this.timer)
+    clearTimeout(_this.timer);
     // const point = _this.getPosition(e)
     // this.remove(_this.points.pop());
 
     // if (point) {
-      if (_this.pointArray.length == 2) {
-        _this.scene.remove(_this.points[_this.points.length-1])
-        _this.scene.remove(_this.points[_this.points.length-2])
-      }
+    if (_this.pointArray.length == 2) {
+      _this.scene.remove(_this.points[_this.points.length - 1]);
+      _this.scene.remove(_this.points[_this.points.length - 2]);
+    }
+
+    _this.scene.remove(_this.tempPoints);
+    _this.scene.remove(_this.tempLine);
+    _this.scene.remove(_this.tempLabel);
 
-      _this.scene.remove(_this.tempPoints)
-      _this.scene.remove(_this.tempLine)
-      _this.scene.remove(_this.tempLabel)
-   
-      _this.isCompleted = true
-      _this.tempPoints = undefined
-      _this.tempLine = undefined
-      _this.tempLabel = undefined
-      _this.pointArray.splice(0)
-      _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove)
+    _this.isCompleted = true;
+    _this.tempPoints = undefined;
+    _this.tempLine = undefined;
+    _this.tempLabel = undefined;
+    _this.pointArray.splice(0);
+    _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove);
     // }
   },
   close() {
-    this.renderer.domElement.removeEventListener('mousemove', this.mousemove)
-    this.renderer.domElement.removeEventListener('click', this.click)
-    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick)
-    this.remove(this.points)
-    this.remove(this.polyline)
-    this.remove(this.labels)
-    this.pointArray.splice(0)
-    this.points.splice(0)
-    this.polyline.splice(0)
-    this.labels.splice(0)
-    this.tempPoints = undefined
-    this.tempLabel = undefined
-    this.tempLine = undefined
-    this.scene.remove(this.tipsLabel)
-    this.tipsLabel = undefined
-    this.renderer.domElement.style.cursor = 'pointer'
+    this.renderer.domElement.removeEventListener('mousemove', this.mousemove);
+    this.renderer.domElement.removeEventListener('click', this.click);
+    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick);
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.tempPoints = undefined;
+    this.tempLabel = undefined;
+    this.tempLine = undefined;
+    this.scene.remove(this.tipsLabel);
+    this.tipsLabel = undefined;
+    this.renderer.domElement.style.cursor = 'pointer';
   },
   remove(array) {
     for (let index = 0; index < array.length; index++) {
-      const element = array[index]
+      const element = array[index];
       if (element.geometry) {
-        element.geometry.dispose()
+        element.geometry.dispose();
       }
-      this.scene.remove(element)
+      this.scene.remove(element);
     }
   },
   numberToString(num) {
     if (num < 0.0001) {
-      return num.toString()
+      return num.toString();
     }
-    let fractionDigits = 2
+    let fractionDigits = 2;
     if (num < 0.01) {
-      fractionDigits = 4
+      fractionDigits = 4;
     } else if (num < 0.1) {
-      fractionDigits = 3
+      fractionDigits = 3;
     }
-    return num.toFixed(fractionDigits)
-  }
-}
+    return num.toFixed(fractionDigits);
+  },
+};
 export default {
-  MeasureDistance
-}
+  MeasureDistance,
+};

package/packages/components/model/utils/threejs/measure-volume.js

@@ -1,94 +1,97 @@
-import * as THREE from 'three'
-import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
-var _this = null
-var MeasureVolume = function(renderer, scene, camera, width, height) {
-  this.renderer = renderer
-  this.scene = scene
-  this.camera = camera
-  this.pointArray = [] // 保存当前操作所添加的点
-  this.raycaster = new THREE.Raycaster()
-  this.vMeter = 0.3047999995367
-  this.tempLabel = undefined
-  this.width = width
-  this.height = height
-}
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+var _this = null;
+var MeasureVolume = function (renderer, scene, camera, width, height) {
+  this.renderer = renderer;
+  this.scene = scene;
+  this.camera = camera;
+  this.pointArray = []; // 保存当前操作所添加的点
+  this.raycaster = new THREE.Raycaster();
+  this.vMeter = 0.3047999995367;
+  this.tempLabel = undefined;
+  this.width = width;
+  this.height = height;
+};
 
 MeasureVolume.prototype = {
   start() {
-    _this = this
-    this.renderer.domElement.addEventListener('click', this.click, false)
+    _this = this;
+    this.renderer.domElement.addEventListener('click', this.click, false);
   },
   updateParams(width, height) {
-    this.camera.aspect = width / height
-    this.camera.updateProjectionMatrix()
-    this.renderer.setSize(width, height, true)
-    this.width = width
-    this.height = height
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height, true);
+    this.width = width;
+    this.height = height;
   },
   getPosition(e) {
-    const mouse = new THREE.Vector2()
-    mouse.x = (e.clientX / _this.width) * 2 - 1
-    mouse.y = -(e.clientY / _this.height) * 2 + 1
-    _this.raycaster.setFromCamera(mouse, this.camera)
-    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true)
-    if(intersects.length > 0) {
-      return intersects[0]
+    const mouse = new THREE.Vector2();
+    mouse.x = (e.clientX / _this.width) * 2 - 1;
+    mouse.y = -(e.clientY / _this.height) * 2 + 1;
+    _this.raycaster.setFromCamera(mouse, this.camera);
+    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    if (intersects.length > 0) {
+      return intersects[0];
     }
-    return null
+    return null;
   },
   createLabel(label, position) {
-    const div = document.createElement('div')
-    div.className = 'measure-label'
-    div.textContent = label
-    const divLabel = new CSS2DObject(div)
-    divLabel.position.set(position.x, position.y, position.z)
-    return divLabel
+    const div = document.createElement('div');
+    div.className = 'measure-label';
+    div.textContent = label;
+    const divLabel = new CSS2DObject(div);
+    divLabel.position.set(position.x, position.y, position.z);
+    return divLabel;
   },
   click(e) {
-    const checkObj = _this.getPosition(e)
-    const obj = checkObj.object
+    const checkObj = _this.getPosition(e);
+    const obj = checkObj.object;
     if (!obj.geometry.boundingBox) {
-      obj.geometry.computeBoundingBox()
+      obj.geometry.computeBoundingBox();
     }
-    const width = Math.abs(obj.geometry.boundingBox.max.x - obj.geometry.boundingBox.min.x) * obj.scale.x
-    const length = Math.abs(obj.geometry.boundingBox.max.y - obj.geometry.boundingBox.min.y) * obj.scale.y
-    const height = Math.abs(obj.geometry.boundingBox.max.z - obj.geometry.boundingBox.min.z) * obj.scale.z
-    const vol = (width * length * height) * _this.vMeter * _this.vMeter * _this.vMeter
-    const text = _this.numberToString(vol)
-    console.log(text)
+    const width =
+      Math.abs(obj.geometry.boundingBox.max.x - obj.geometry.boundingBox.min.x) * obj.scale.x;
+    const length =
+      Math.abs(obj.geometry.boundingBox.max.y - obj.geometry.boundingBox.min.y) * obj.scale.y;
+    const height =
+      Math.abs(obj.geometry.boundingBox.max.z - obj.geometry.boundingBox.min.z) * obj.scale.z;
+    const vol = width * length * height * _this.vMeter * _this.vMeter * _this.vMeter;
+    const text = _this.numberToString(vol);
+    console.log(text);
     if (_this.tempLabel) {
-      _this.tempLabel.element.textContent = text + 'm³'
-      _this.tempLabel.position.set(position.x, position.y, position.z)
+      _this.tempLabel.element.textContent = text + 'm³';
+      _this.tempLabel.position.set(position.x, position.y, position.z);
     } else {
-      _this.tempLabel = _this.createLabel(text + 'm³', obj.point)
-      _this.scene.add(_this.tempLabel)
+      _this.tempLabel = _this.createLabel(text + 'm³', obj.point);
+      _this.scene.add(_this.tempLabel);
     }
   },
   close() {
-    this.renderer.domElement.removeEventListener('click', this.click)
+    this.renderer.domElement.removeEventListener('click', this.click);
   },
   remove(array) {
     for (let index = 0; index < array.length; index++) {
-      const element = array[index]
+      const element = array[index];
       if (element.geometry) {
-        element.geometry.dispose()
+        element.geometry.dispose();
       }
-      this.scene.remove(element)
+      this.scene.remove(element);
     }
   },
   numberToString(num) {
     if (num < 0.0001) {
-      return num.toString()
+      return num.toString();
     }
-    let fractionDigits = 2
+    let fractionDigits = 2;
     if (num < 0.01) {
-      fractionDigits = 4
+      fractionDigits = 4;
     } else if (num < 0.1) {
-      fractionDigits = 3
+      fractionDigits = 3;
     }
-    return num.toFixed(fractionDigits)
-  }
-}
+    return num.toFixed(fractionDigits);
+  },
+};
 export default {
-  MeasureVolume
-}
+  MeasureVolume,
+};

package/src/main.js

@@ -1,9 +1,11 @@
-import Model from '../packages/components/com-graphics/index.vue';
-import MyButton from '../packages/components/button/index.vue';
+import FlModel from '../packages/components/com-graphics/index.vue';
+// import MyButton from '../packages/components/button/index.vue';
+import Fl2dcanvas from '../packages/components/com-flcanvas/index.vue';
 
 const components = [
-    Model,
-    MyButton,
+    FlModel,
+    Fl2dcanvas
+    // MyButton,
 ];
 
 const install = (Vue) => {
@@ -18,7 +20,8 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-    install, 
-    Model,
-    MyButton,
-};
+    install,
+    FlModel,
+    Fl2dcanvas
+    // MyButton,
+};