fl-web-component 1.0.11 → 1.1.0

package/src/main.js

@@ -1,16 +1,18 @@
 import FlModel from '../packages/components/com-graphics/index.vue';
 import Fl2dcanvas from '../packages/components/com-flcanvas/index.vue';
 import FLPerControl from '../packages/components/com-graphics/per-control.vue';
+import FlSvg from '../packages/components/com-graphics/pid.vue';
 import * as THREE from 'three';
 
 const components = [
     FlModel,
     Fl2dcanvas,
-    FLPerControl
+    FLPerControl,
+    FlSvg
 ];
 
 const install = (Vue) => {
-    Vue.prototype.THREE = THREE
+    Vue.prototype.THREE = THREE;
     components.forEach(component => {
         Vue.component(component.name, component);
     });
@@ -24,6 +26,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default {
     install,
     FlModel,
+    FlSvg,
     Fl2dcanvas,
     FLPerControl
 };

package/src/utils/instance-parser.js

@@ -48,12 +48,18 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
       if (!targetGroup) {
         const drawObj = drawObjMapInstance[instances[i].drawObject];
         const group = new THREE.Group();
+        // let grouphName = ''
+        for (const key in meshNameConfig) {
+          group.userData[key] = meshNameConfig[key]
+          // grouphName += ':' + meshNameConfig[key]
+        }
+        // grouphName !== '' ? instances[i].drawObject + grouphName: instances[i].drawObject;
         group.name = instances[i].drawObject;
         group.userData.isInstancedMeshGroup = true;
-  
+        group.userData.instanceId = instances[i].drawObject;
         const instanceCount = drawObj.MapInstance.length;
         drawObj.MapMesh?.forEach(mesh => {
-          const model = drawModel(mesh, group.name, instanceCount, customColor);
+          const model = drawModel(mesh, instances[i].drawObject, instanceCount, customColor);
           if (!model) {
             return;
           }

package/src/utils/threejs/measure-angle.js

@@ -20,6 +20,7 @@ var MeasureAngle = function(renderer, scene, camera, width, height) {
   this.timer = null
   this.width = width
   this.height = height
+  this.firstTime = 0
   // this.POINT_MATERIAL = new THREE.PointsMaterial({ color: 0xff5000, size: 1, opacity: 0.6, transparent: true, depthWrite: false, depthTest: false })
   // this.LINE_MATERIAL = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3, opacity: 0.8, transparent: true, side: THREE.DoubleSide, depthWrite: false, depthTest: false })
 }
@@ -28,7 +29,8 @@ MeasureAngle.prototype = {
   start() {
     _this = this
     this.renderer.domElement.style.cursor = 'crosshair'
-    this.renderer.domElement.addEventListener('click', this.click, false)
+    this.renderer.domElement.addEventListener('mouseup', this.click, false)
+    this.renderer.domElement.addEventListener('mousedown', this.mousedown, false)
     this.renderer.domElement.addEventListener('mousemove',  this.mousemove, false)
     this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
   },
@@ -132,34 +134,41 @@ MeasureAngle.prototype = {
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05)
     return tipsLabel
   },
+  mousedown() {
+    this.firstTime = new Date().getTime();
+  },
   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)
+    let lastTime = new Date().getTime();
+    if (lastTime = this.firstTime < 300) {
+      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) {
@@ -178,9 +187,10 @@ MeasureAngle.prototype = {
     }
   },
   close() {
-    this.renderer.domElement.removeEventListener('mousemove', this.mousemove)
-    this.renderer.domElement.removeEventListener('click', this.click)
-    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick)
+    this.renderer.domElement.removeEventListener('mouseup', this.click, false)
+    this.renderer.domElement.removeEventListener('mousedown', this.mousedown, false)
+    this.renderer.domElement.removeEventListener('mousemove',  this.mousemove, false)
+    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick, false)
     this.remove(this.points)
     this.remove(this.polyline)
     this.remove(this.labels)

package/src/utils/threejs/measure-area.js

@@ -20,13 +20,15 @@ var MeasureArea = function(renderer, scene, camera, width, height) {
   this.polygons = []
   this.width = width
   this.height = height
+  this.firstTime = 0
 }
 
 MeasureArea.prototype = {
   start() {
     _this = this
    this.renderer.domElement.style.cursor = 'crosshair'
-   this.renderer.domElement.addEventListener('click', this.click, false)
+   this.renderer.domElement.addEventListener('mouseup', this.click, false)
+   this.renderer.domElement.addEventListener('mousedown', this.mousedown, false)
    this.renderer.domElement.addEventListener('mousemove', this.mousemove, false)
    this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
   },
@@ -114,34 +116,39 @@ MeasureArea.prototype = {
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05)
     return tipsLabel
   },
+  mousedown() {
+    this.firstTime = new Date().getTime();
+  },
   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)
+    let lastTime = new Date().getTime();
+    if (lastTime - this.firstTime < 300) {
+      if (_this.isCompleted) {
+        _this.renderer.domElement.addEventListener('mousemove', _this.mousemove)
       }
-    }, 100)
-
+      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) {
@@ -164,23 +171,24 @@ MeasureArea.prototype = {
     }
   },
   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'
+    this.renderer.domElement.removeEventListener('mouseup', this.click)
+    this.renderer.domElement.removeEventListener('mousedown', this.mousedown)
+    this.renderer.domElement.removeEventListener('mousemove', this.mousemove)
+    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++) {

package/src/utils/threejs/measure-distance.js

@@ -18,13 +18,15 @@ var MeasureDistance = function(renderer, scene, camera, width, height) {
   this.timer = null
   this.width = width
   this.height = height
+  this.firstTime = 0
 }
 
 MeasureDistance.prototype = {
   start() {
     _this = this
     this.renderer.domElement.style.cursor = 'crosshair'
-    this.renderer.domElement.addEventListener('click', this.click, false)
+    this.renderer.domElement.addEventListener('mousedown', this.mousedown, false)
+    this.renderer.domElement.addEventListener('mouseup', this.click, false)
     this.renderer.domElement.addEventListener('mousemove',  this.mousemove, false)
     this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
   },
@@ -105,34 +107,40 @@ MeasureDistance.prototype = {
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05)
     return tipsLabel
   },
+  mousedown() {
+    this.firstTime = new Date().getTime();
+  },
   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)
+    let lastTime = new Date().getTime();
+    if (lastTime - this.firstTime < 300) {
+      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) {
@@ -151,8 +159,9 @@ MeasureDistance.prototype = {
     }
   },
   close() {
-    this.renderer.domElement.removeEventListener('mousemove', this.mousemove)
-    this.renderer.domElement.removeEventListener('click', this.click)
+    this.renderer.domElement.removeEventListener('mousedown', this.mousedown)
+    this.renderer.domElement.removeEventListener('mouseup', this.click)
+    this.renderer.domElement.removeEventListener('mousemove',  this.mousemove)
     this.renderer.domElement.removeEventListener('contextmenu', this.rightClick)
     this.remove(this.points)
     this.remove(this.polyline)
@@ -167,6 +176,7 @@ MeasureDistance.prototype = {
     this.scene.remove(this.tipsLabel)
     this.tipsLabel = undefined
     this.renderer.domElement.style.cursor = 'pointer'
+    this.firstTime = 0
   },
   remove(array) {
     for (let index = 0; index < array.length; index++) {

package/src/utils/threejs/rain-shader.js

@@ -0,0 +1,58 @@
+import * as THREE from 'three'
+const RainShader = {
+  uniforms: {
+    'tDiffuse': {value: null},
+    'iResolution': {value: null},
+    'iTime': {value: 0},
+    'radian': {value: 0 / 360 * Math.PI},
+    'rainSpeed': {value: 0.2},
+    'rainColor': {value: new THREE.Color(1, 1, 1)}
+  },
+  vertexShader: `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    uniform sampler2D tDiffuse;
+    uniform vec2 iResolution;
+    uniform float iTime;
+    uniform float radian;
+    uniform float rainSpeed;
+    uniform vec3 rainColor;
+    varying vec2 vUv;
+
+    float hash(vec2 p){
+      p  = 50.0 * fract(p * 0.3183099 + vec2(0.71, 0.113) );
+      return -1.0+2.0 * fract(p.x * p.y * (p.x + p.y));
+    }
+
+    float noise(in vec2 p){
+      vec2 i = floor(p);
+      vec2 f = fract(p);
+      vec2 u = f * f * (3.0 - 2.0 * f);
+      return mix(mix( hash( i + vec2(0.0,0.0) ), hash( i + vec2(1.0,0.0) ), u.x),  mix( hash( i + vec2(0.0,1.0) ), hash( i + vec2(1.0,1.0) ), u.x), u.y);
+    }
+
+    void main() {
+      vec3 col = texture(tDiffuse, vUv).rgb;
+      vec2 q = gl_FragCoord.xy / iResolution.xy;
+      vec2 p = -1.0 + 2.0 * q;
+      p.x *= iResolution.x / iResolution.y;
+      vec2 st =  (p * vec2(.5, .01) + vec2 (iTime) * 0.05 * rainSpeed )-vec2(q.y*cos(radian), 0.0);
+      st *= 1000.;
+      float f = noise(st) * noise(st*.773)* 1.3;
+      f = clamp(pow(abs(f), 23.0) * 13.0, 0.0, q.y*.14) * 2.7;
+      col += clamp(f, 0.0, 1.0) * rainColor;
+      if(col.x > f){
+        gl_FragColor = vec4(col,1.0);
+      }else{
+        gl_FragColor = vec4(col,0.0);
+      }
+    }
+  `
+}
+
+export { RainShader }

package/src/utils/threejs/snow-shader.js

@@ -0,0 +1,75 @@
+const SnowShader = {
+  uniforms: {
+    'tDiffuse': {value: null},
+    'iResolution': {value: null},
+    'iTime': {value: 0.2},
+    'size': {value: 0.05},
+    'density': {value: 1.0},
+    'snowSpeed': {value: 0.6}
+  },
+  vertexShader: `
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+  fragmentShader: `
+    #define PI 3.14159265359
+    uniform sampler2D tDiffuse;
+    uniform vec2 iResolution;
+    uniform float iTime;
+    uniform float size;
+    uniform float density;
+    uniform float snowSpeed;
+    varying vec2 vUv;
+
+    float ball(vec2 p){
+      float d = distance(vec2(.5), p);
+      return smoothstep(size, size - 0.05, d);
+    }
+
+    float N11(float n){
+      return fract(sin(n * 871.213) * 3134.422);
+    }
+
+    float N21(vec2 uv){
+      return N11(N11(uv.x) + uv.y);
+    }
+
+    float snow(vec2 uv,float t){
+      vec2 org_uv = vec2(uv.x, uv.y);
+      float z = 10.;
+      uv.y += t * 0.5;
+      vec2 gv = fract(uv * z);
+      vec2 id = floor(uv * z);
+      gv.x += (sin(N21(id) * 128. + t) * .4);
+      gv.y += (sin(N11(N21(id)) * 128. + t) * .4);
+      float dots = ball(gv);
+      return dots;
+    }
+
+    void main(){
+      vec3 col = texture(tDiffuse, vUv).rgb;
+      vec2 uv = gl_FragCoord.xy / iResolution.xy;
+      uv.x *= iResolution.x / iResolution.y;
+      float t = iTime * 0.3 * snowSpeed;
+      vec2 gh_uv = uv;
+      vec3 colSnow = vec3(0.0);
+      float m = 0.0;
+      for(float i = 0.; i <= 1.; i += 1. / (10.* density)){
+        float z = mix(1., .5 , i);
+        vec2 offset = vec2(N11(i), N11(N11(i)));
+        m += snow((uv + offset) * z, t) * .1;
+      }
+      colSnow = vec3(m) * 1.2;
+      colSnow += col * 1.0 * mix(0.5, 1., uv.y);
+      if(colSnow.x > vec3(m).x * 1.2){
+        gl_FragColor = vec4(colSnow,1.0);
+      }else{
+        gl_FragColor = vec4(colSnow,0.0);
+      }
+    }
+  `
+}
+export { SnowShader }