refactor(linelayer): remove normal line

demos/line.html

@@ -46,11 +46,9 @@ scene.on('loaded', () => {
         interval:1,
         duration:2,
         trailLength:0.1,
-        repeat:1,
+        repeat:1000,
     })
     .render();
-
-
    linelayer.on('animateEnd',()=>{
      scene.removeLayer(linelayer);
      //linelayer.hide();

src/geom/shape/line.js

@@ -1,60 +1,4 @@
-import { Vector3 } from '../../core/three';
 import getNormal from 'polyline-normals';
-/**
- * shape meshLine
- * @param {array} geo  坐标点
- * @param {object} props  属性数据
- * @param {int} index  原始数据ndex
- * @return {object} 顶点坐标，索引坐标
- */
-export function meshLine(geo, props, index) {
-  const dataLength = geo.length;
-  const width = props.size[0] * 50 || 100;
-  const dem = props.size[1] || 0;
-  const posArray = [];
-  const indexArray = [];
-  const points = [];
-  for (let i = 0; i < dataLength; i++) {
-    let previous = (i === 0) ? geo[0] : geo[i - 1];
-    let next = (i === dataLength - 1) ? geo[dataLength - 1] : geo[i + 1];
-    let current = geo[i];
-    previous = [ previous[0], previous[1], 0 ];
-    next = [ next[0], next[1], 0 ];
-    current = [ current[0], current[1], 0 ];
-
-    let dir = null;
-    if (i === 0 || i === dataLength - 1) {
-      dir = new Vector3(1, 1, 1);
-    } else {
-      const dir1 = new Vector3();
-      const dir2 = new Vector3();
-      dir = new Vector3();
-      dir1.subVectors(new Vector3(...current), new Vector3(...previous)).normalize();
-      dir2.subVectors(new Vector3(...next), new Vector3(...current)).normalize();
-      dir.addVectors(dir1, dir2).normalize();
-    }
-    let normal = [ -dir.y, dir.x, 0 ];
-    normal = [ normal[0] * width, normal[1] * width, 0 ];
-    const n1 = [ normal[0], normal[1], 0 ];
-    const n2 = [ -normal[0], -normal[1], 0 ];
-    const p1 = new Vector3();
-    const p2 = new Vector3();
-    p1.addVectors(new Vector3(...current), new Vector3(...n1));
-    p2.addVectors(new Vector3(...current), new Vector3(...n2));
-    points.push([ p1.x, p1.y, dem ], [ p2.x, p2.y, dem ]);
-  }// end of for
-  for (let i = 0; i < points.length - 2; i += 2) {
-    const ct = i;
-    const cb = i + 1;
-    const nt = i + 2;
-    const nb = i + 3;
-    posArray.push(points[ct], points[cb], points[nt]);
-    posArray.push(points[nt], points[cb], points[nb]);
-    indexArray.push(index, index, index);
-    indexArray.push(index, index, index);
-  }
-  return { positions: posArray, indexes: indexArray };
-}
 
 /**
  * shape arc

src/layer/lineLayer.js

@@ -1,12 +1,7 @@
 import Layer from '../core/layer';
-import * as THREE from '../core/three';
+import DrawLine from './render/line/drawMeshLine';
+import DrawArc from './render/line/drawArc';
 import { LineBuffer } from '../geom/buffer/index';
-import {
-  LineMaterial,
-  ArcLineMaterial,
-  MeshLineMaterial,
-  DashLineMaterial
-} from '../geom/material/lineMaterial';
 export default class LineLayer extends Layer {
   shape(type) {
     this.shapeType = type;
@@ -32,147 +27,24 @@ export default class LineLayer extends Layer {
   draw() {
     const layerData = this.layerData;
     const style = this.get('styleOptions');
+    const animateOptions = this.get('animateOptions');
+    const activeOption = this.get('activedOptions');
+    const layerCfg = {
+      zoom: this.scene.getZoom(),
+      style,
+      animateOptions,
+      activeOption
+    };
     const buffer = (this._buffer = new LineBuffer({
       layerData,
       shapeType: this.shapeType,
       style
     }));
-    const { opacity } = this.get('styleOptions');
-    const animateOptions = this.get('animateOptions');
-    const activeOption = this.get('activedOptions');
-    // const layerCfg = {
-    //   ...style,
-    //   ...animateOptions,
-    //   ...activeOption
-    // };
-    const geometry = new THREE.BufferGeometry();
     const { attributes } = buffer;
     if (this.shapeType === 'arc') {
-      geometry.setIndex(attributes.indexArray);
+      DrawArc(attributes, layerCfg, this);
-      geometry.addAttribute(
-        'pickingId',
-        new THREE.Float32BufferAttribute(attributes.pickingIds, 1)
-      );
-      geometry.addAttribute(
-        'position',
-        new THREE.Float32BufferAttribute(attributes.positions, 3)
-      );
-      geometry.addAttribute(
-        'a_color',
-        new THREE.Float32BufferAttribute(attributes.colors, 4)
-      );
-      geometry.addAttribute(
-        'a_instance',
-        new THREE.Float32BufferAttribute(attributes.instances, 4)
-      );
-      geometry.addAttribute(
-        'a_size',
-        new THREE.Float32BufferAttribute(attributes.sizes, 1)
-      );
-      const material = new ArcLineMaterial({
-        u_opacity: opacity,
-        u_zoom: this.scene.getZoom(),
-        activeColor: activeOption.fill
-      });
-      const mesh = new THREE.Mesh(geometry, material);
-      this.add(mesh);
-    } else if (this.shapeType === 'line') {
-      // DrawLine(attributes, layerCfg)
-      geometry.setIndex(attributes.indexArray);
-      geometry.addAttribute(
-        'pickingId',
-        new THREE.Float32BufferAttribute(attributes.pickingIds, 1)
-      );
-      geometry.addAttribute(
-        'position',
-        new THREE.Float32BufferAttribute(attributes.positions, 3)
-      );
-      geometry.addAttribute(
-        'a_color',
-        new THREE.Float32BufferAttribute(attributes.colors, 4)
-      );
-      geometry.addAttribute(
-        'a_size',
-        new THREE.Float32BufferAttribute(attributes.sizes, 1)
-      );
-      geometry.addAttribute(
-        'normal',
-        new THREE.Float32BufferAttribute(attributes.normal, 3)
-      );
-      geometry.addAttribute(
-        'a_miter',
-        new THREE.Float32BufferAttribute(attributes.miter, 1)
-      );
-      geometry.addAttribute(
-        'a_distance',
-        new THREE.Float32BufferAttribute(attributes.attrDistance, 1)
-      );
-      const lineType = style.lineType;
-      let material;
-
-      if (lineType !== 'dash') {
-        material = new MeshLineMaterial({
-          u_opacity: opacity,
-          u_zoom: this.scene.getZoom(),
-          activeColor: activeOption.fill
-        });
-
-        if (animateOptions.enable) {
-          material.setDefinesvalue('ANIMATE', true);
-          this.scene.startAnimate();
-          const {
-            duration,
-            interval,
-            trailLength,
-            repeat = Infinity
-          } = animateOptions;
-          this.animateDuration =
-            this.scene._engine.clock.getElapsedTime() + duration * repeat;
-          material.upDateUninform({
-            u_duration: duration,
-            u_interval: interval,
-            u_trailLength: trailLength
-          });
-        }
-      } else {
-        geometry.addAttribute(
-          'a_distance',
-          new THREE.Float32BufferAttribute(attributes.attrDistance, 1)
-        );
-        material = new DashLineMaterial({
-          u_opacity: opacity,
-          u_zoom: this.scene.getZoom(),
-          activeColor: activeOption.fill
-        });
-      }
-      const mesh = new THREE.Mesh(geometry, material);
-      this.add(mesh);
     } else {
-      // 直线
+      DrawLine(attributes, layerCfg, this);
-      geometry.addAttribute(
-        'pickingId',
-        new THREE.Float32BufferAttribute(attributes.pickingIds, 1)
-      );
-      geometry.addAttribute(
-        'position',
-        new THREE.Float32BufferAttribute(attributes.vertices, 3)
-      );
-      geometry.addAttribute(
-        'a_color',
-        new THREE.Float32BufferAttribute(attributes.colors, 4)
-      );
-      const material = new LineMaterial({
-        u_opacity: opacity,
-        u_time: 0,
-        activeColor: activeOption.fill
-      });
-      if (animateOptions.enable) {
-        material.setDefinesvalue('ANIMATE', true);
-        this.scene.startAnimate();
-      }
-
-      const mesh = new THREE.LineSegments(geometry, material);
-      this.add(mesh);
     }
   }
 }

src/layer/render/line/drawArc.js

@@ -1,6 +1,7 @@
 import * as THREE from '../../../core/three';
 import { ArcLineMaterial } from '../../../geom/material/lineMaterial';
-export default function DrawArcLine(attributes, style) {
+export default function DrawArcLine(attributes, cfg, layer) {
+  const { style, activeOption } = cfg;
   const { opacity, zoom } = style;
   const geometry = new THREE.BufferGeometry();
   geometry.setIndex(attributes.indexArray);
@@ -10,10 +11,11 @@ export default function DrawArcLine(attributes, style) {
   geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
   const lineMaterial = new ArcLineMaterial({
     u_opacity: opacity,
-    u_zoom: zoom
+    u_zoom: zoom,
+    activeColor: activeOption.fill
   }, {
     SHAPE: false
   });
   const arcMesh = new THREE.Mesh(geometry, lineMaterial);
-  return arcMesh;
+  layer.add(arcMesh);
 }

src/layer/render/line/drawMeshLine.js

@@ -1,7 +1,7 @@
 import * as THREE from '../../../core/three';
 import { MeshLineMaterial } from '../../../geom/material/lineMaterial';
-export default function DrawLine(attributes, style) {
+export default function DrawLine(attributes, cfg, layer) {
-  const { opacity, zoom, animate, duration, interval, trailLength } = style;
+  const { style, animateOptions, activeOption, zoom } = cfg;
   const geometry = new THREE.BufferGeometry();
   geometry.setIndex(attributes.indexArray);
   geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
@@ -11,33 +11,34 @@ export default function DrawLine(attributes, style) {
   geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normal, 3));
   geometry.addAttribute('a_miter', new THREE.Float32BufferAttribute(attributes.miter, 1));
   geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
+
   const lineMaterial = new MeshLineMaterial({
-    u_opacity: opacity,
+    u_opacity: style.opacity,
     u_zoom: zoom,
-    u_duration: duration,
+    u_time: 0,
-    u_interval: interval,
+    activeColor: activeOption.fill
-    u_trailLength: trailLength,
-    u_time: 0
   }, {
     SHAPE: false,
-    ANIMATE: animate
+    ANIMATE: false
   });
-  const arcMesh = new THREE.Mesh(geometry, lineMaterial);
+
-  if (animate) {
+  const lineMesh = new THREE.Mesh(geometry, lineMaterial);
-    this.scene.startAnimate();
+  if (animateOptions.enable) {
+    layer.scene.startAnimate();
     const {
-      duration,
+      duration = 2,
-      interval,
+      interval = 0.5,
-      trailLength,
+      trailLength = 0.5,
       repeat = Infinity
-    } = style;
+    } = animateOptions;
-    this.animateDuration =
+    layer.animateDuration =
-    this.scene._engine.clock.getElapsedTime() + duration * repeat;
+    layer.scene._engine.clock.getElapsedTime() + duration * repeat;
     lineMaterial.upDateUninform({
       u_duration: duration,
       u_interval: interval,
       u_trailLength: trailLength
     });
+    lineMaterial.setDefinesvalue('ANIMATE', true);
   }
-  return arcMesh;
+  layer.add(lineMesh);
 }