fl-web-component 1.2.11 → 1.2.13

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

@@ -1,281 +0,0 @@
-import * as THREE from 'three';
-import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
-var _this = null;
-var MeasureArea = 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.polygonMesh = undefined;
-  this.polygons = [];
-  this.width = width;
-  this.height = height;
-};
-
-MeasureArea.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);
-  },
-  updateParams(width, 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;
-    }
-    return null;
-  },
-  createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 20 });
-    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
-    const line = new THREE.Line(lineGeometry, lineMaterial);
-    line.frustumCulled = false;
-
-    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;
-  },
-  mousemove(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];
-      if (_this.tempLine) {
-        _this.tempLine.geometry.setFromPoints([p1, p2]);
-      } else {
-        _this.tempLine = _this.createLine(p1, p2);
-        _this.polyline.push(_this.tempLine);
-        _this.scene.add(_this.tempLine);
-      }
-      if (_this.pointArray.length > 2) {
-        const area = _this.calculateArea(_this.pointArray);
-        _this.createPolygon(_this.pointArray);
-        if (_this.tempLabel) {
-          _this.polygonMesh.geometry.computeBoundingSphere();
-          _this.tempLabel.element.textContent = _this.numberToString(area); // + '㎡'
-          _this.tempLabel.position.set(
-            _this.polygonMesh.geometry.boundingSphere.center.x,
-            _this.polygonMesh.geometry.boundingSphere.center.y,
-            _this.polygonMesh.geometry.boundingSphere.center.z,
-          );
-        } else {
-          _this.polygonMesh.geometry.computeBoundingSphere();
-          console.log(_this.polygonMesh.geometry);
-          _this.tempLabel = _this.createLabel(
-            'measure-label',
-            area,
-            _this.polygonMesh.geometry.boundingSphere.center,
-          );
-          _this.labels.push(_this.tempLabel);
-          _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;
-  },
-  click(e) {
-    if (_this.isCompleted) {
-      _this.renderer.domElement.addEventListener('mousemove', _this.mousemove);
-    }
-    clearTimeout(_this.timer);
-    _this.timer = setTimeout(() => {
-      _this.isCompleted = false;
-      const point = _this.getPosition(e);
-      if (point) {
-        if (_this.tipsLabel) {
-          _this.tipsLabel.position.set(point.x + 0.01, point.y, point.z + 0.05);
-        } else {
-          _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;
-        } else {
-          const geom = _this.createLabel('circle-tag', '', point);
-          _this.points.push(geom);
-          _this.scene.add(geom);
-        }
-        _this.tempLine = undefined;
-        _this.pointArray.push(point);
-      }
-    }, 100);
-  },
-  rightClick(e) {
-    if (_this.tipsLabel) {
-      _this.scene.remove(_this.tipsLabel);
-      _this.tipsLabel = undefined;
-    }
-    clearTimeout(_this.timer);
-    const point = _this.getPosition(e);
-    _this.pointArray.pop();
-    // this.remove(_this.points.pop());
-
-    // if (point) {
-    if (_this.pointArray.length == 2) {
-      _this.scene.remove(_this.points[_this.points.length - 1]);
-    }
-    if (_this.pointArray.length > 2) {
-      const area = _this.calculateArea(_this.pointArray);
-      _this.createPolygon(_this.pointArray);
-
-      if (_this.tempLabel) {
-        _this.polygonMesh.geometry.computeBoundingSphere();
-        _this.tempLabel.element.textContent = _this.numberToString(area); // + '㎡'
-      }
-    }
-    _this.scene.remove(_this.tempPoints);
-    _this.scene.remove(_this.tempLine);
-    // _this.scene.remove(_this.tempLabel)
-
-    _this.isCompleted = true;
-    if (_this.tempPoints) {
-      _this.tempPoints.position.set(point.x, point.y, point.z);
-      _this.tempPoints = undefined;
-    }
-    _this.tempLine = undefined;
-    _this.tempLabel = undefined;
-    _this.polygonMesh = 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.remove(this.polygons);
-    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];
-      if (element.geometry) {
-        element.geometry.dispose();
-      }
-      this.scene.remove(element);
-    }
-  },
-  calculateArea(points) {
-    let area = 0;
-    for (let i = 0, j = 1, k = 2; k < points.length; j++, k++) {
-      const a = points[i].distanceTo(points[j]);
-      const b = points[j].distanceTo(points[k]);
-      const c = points[k].distanceTo(points[i]);
-      const p = (a + b + c) / 2;
-      area += Math.sqrt(p * (p - a) * (p - b) * (p - c));
-    }
-    return area;
-  },
-  numberToString(num) {
-    if (num < 0.0001) {
-      return num.toString();
-    }
-    let fractionDigits = 2;
-    if (num < 0.01) {
-      fractionDigits = 4;
-    } else if (num < 0.1) {
-      fractionDigits = 3;
-    }
-    return num.toFixed(fractionDigits);
-  },
-  createPolygon(points) {
-    const length = points.length;
-    const faces = [];
-    for (let i = 0; i < length - 2; i++) {
-      faces.push(points[0].x, points[0].y, points[0].z);
-      faces.push(points[i + 1].x, points[i + 1].y, points[i + 1].z);
-      faces.push(points[i + 2].x, points[i + 2].y, points[i + 2].z);
-    }
-    if (faces.length > 3) {
-      if (_this.polygonMesh) {
-        _this.polygonMesh.geometry.setAttribute(
-          'position',
-          new THREE.BufferAttribute(new Float32Array(faces), 3),
-        );
-      } else {
-        const geom = new THREE.BufferGeometry();
-        geom.setAttribute('position', new THREE.BufferAttribute(new Float32Array(faces), 3));
-        const material = new THREE.MeshBasicMaterial({
-          color: 0xffffff,
-          transparent: true,
-          opacity: 0.5,
-          side: THREE.DoubleSide,
-        });
-        const mesh = new THREE.Mesh(geom, material);
-        mesh.name = 'polygonMesh';
-        _this.polygonMesh = mesh;
-        _this.scene.add(mesh);
-        _this.polygons.push(mesh);
-      }
-    }
-  },
-};
-export default {
-  MeasureArea,
-};

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

@@ -1,209 +0,0 @@
-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);
-  },
-  updateParams(width, 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;
-    }
-    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);
-    line.frustumCulled = false;
-    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;
-  },
-  mousemove(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);
-      }
-    }
-  },
-  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;
-  },
-  click(e) {
-    if (_this.isCompleted) {
-      _this.renderer.domElement.addEventListener('mousemove', _this.mousemove);
-    }
-    clearTimeout(_this.timer);
-    _this.timer = setTimeout(() => {
-      _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);
-        } else {
-          _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;
-        } else {
-          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);
-      }
-    });
-  },
-  rightClick(e) {
-    if (_this.tipsLabel) {
-      _this.scene.remove(_this.tipsLabel);
-      _this.tipsLabel = undefined;
-    }
-    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]);
-    }
-
-    _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);
-    // }
-  },
-  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';
-  },
-  remove(array) {
-    for (let index = 0; index < array.length; index++) {
-      const element = array[index];
-      if (element.geometry) {
-        element.geometry.dispose();
-      }
-      this.scene.remove(element);
-    }
-  },
-  numberToString(num) {
-    if (num < 0.0001) {
-      return num.toString();
-    }
-    let fractionDigits = 2;
-    if (num < 0.01) {
-      fractionDigits = 4;
-    } else if (num < 0.1) {
-      fractionDigits = 3;
-    }
-    return num.toFixed(fractionDigits);
-  },
-};
-export default {
-  MeasureDistance,
-};

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

@@ -1,97 +0,0 @@
-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);
-  },
-  updateParams(width, 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];
-    }
-    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;
-  },
-  click(e) {
-    const checkObj = _this.getPosition(e);
-    const obj = checkObj.object;
-    if (!obj.geometry.boundingBox) {
-      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);
-    if (_this.tempLabel) {
-      _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);
-    }
-  },
-  close() {
-    this.renderer.domElement.removeEventListener('click', this.click);
-  },
-  remove(array) {
-    for (let index = 0; index < array.length; index++) {
-      const element = array[index];
-      if (element.geometry) {
-        element.geometry.dispose();
-      }
-      this.scene.remove(element);
-    }
-  },
-  numberToString(num) {
-    if (num < 0.0001) {
-      return num.toString();
-    }
-    let fractionDigits = 2;
-    if (num < 0.01) {
-      fractionDigits = 4;
-    } else if (num < 0.1) {
-      fractionDigits = 3;
-    }
-    return num.toFixed(fractionDigits);
-  },
-};
-export default {
-  MeasureVolume,
-};