From 556335b6d9d7a356cf7e45251b1d619ed0c56472 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Tue, 2 Apr 2019 11:47:38 +0800 Subject: [PATCH] refactor(linelayer): remove normal line --- demos/line.html | 4 +- src/geom/shape/line.js | 56 ------- src/layer/lineLayer.js | 152 ++---------------- src/layer/render/line/drawArc.js | 8 +- .../line/{drawLine.js => drawMeshLine.js} | 37 ++--- 5 files changed, 37 insertions(+), 220 deletions(-) rename src/layer/render/line/{drawLine.js => drawMeshLine.js} (65%) diff --git a/demos/line.html b/demos/line.html index 7c38f6cf1d..3f2e31c871 100644 --- a/demos/line.html +++ b/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(); diff --git a/src/geom/shape/line.js b/src/geom/shape/line.js index ee6ea123e2..ec68f55770 100644 --- a/src/geom/shape/line.js +++ b/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 diff --git a/src/layer/lineLayer.js b/src/layer/lineLayer.js index bd039bc178..dc26bd307b 100644 --- a/src/layer/lineLayer.js +++ b/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); - 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); + DrawArc(attributes, layerCfg, this); } else { - // 直线 - 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); + DrawLine(attributes, layerCfg, this); } } } diff --git a/src/layer/render/line/drawArc.js b/src/layer/render/line/drawArc.js index 246b8b55aa..5324e0c821 100644 --- a/src/layer/render/line/drawArc.js +++ b/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); } diff --git a/src/layer/render/line/drawLine.js b/src/layer/render/line/drawMeshLine.js similarity index 65% rename from src/layer/render/line/drawLine.js rename to src/layer/render/line/drawMeshLine.js index c509db47f4..bb3fbe15c7 100644 --- a/src/layer/render/line/drawLine.js +++ b/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) { - const { opacity, zoom, animate, duration, interval, trailLength } = style; +export default function DrawLine(attributes, cfg, layer) { + 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_interval: interval, - u_trailLength: trailLength, - u_time: 0 + u_time: 0, + activeColor: activeOption.fill }, { SHAPE: false, - ANIMATE: animate + ANIMATE: false }); - const arcMesh = new THREE.Mesh(geometry, lineMaterial); - if (animate) { - this.scene.startAnimate(); + + const lineMesh = new THREE.Mesh(geometry, lineMaterial); + if (animateOptions.enable) { + layer.scene.startAnimate(); const { - duration, - interval, - trailLength, + duration = 2, + interval = 0.5, + trailLength = 0.5, repeat = Infinity - } = style; - this.animateDuration = - this.scene._engine.clock.getElapsedTime() + duration * repeat; + } = animateOptions; + layer.animateDuration = + 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); }