@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/element/mesh-line-2d.js

@@ -0,0 +1,887 @@
+/* eslint-disable max-len */
+import Color from 'color';
+import * as turf from '@turf/turf';
+import { Externals, NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+import { BasicCalcTool } from '../utils';
+// import { BasicCalcTool, TurningInfo, Helper } from '../utils';
+class MeshLine2D extends Element {
+    constructor(points, options = { width: 0.3 }) {
+        super();
+        this.initialized = false;
+        this.ready = true;
+        this.points = [];
+        this.distances = [];
+        this.currentMoveIndex = 0;
+        this.options = Object.assign({ textureMode: 'repeat' }, options);
+        if (!options.animateSpeed) {
+            this.options.animateSpeed = 0.01;
+        }
+        if (options.textureMode === 'tail') {
+            this.createTailArrow();
+        }
+        this.renderPixelLine = options.renderPixelLine || false;
+        this.init(points);
+    }
+    calcPoints(points, scale = 0.30) {
+        const { THREE } = Externals.getInstance();
+        const len = points.length;
+        if (len < 2)
+            return [];
+        const res = [];
+        const linePoints = points.map((v) => [v[0], v[1]]);
+        for (let i = 0; i < len; i++) {
+            const cur = new THREE.Vector2(...linePoints[i]);
+            const prev = i === 0 ? null : new THREE.Vector2(...linePoints[i - 1]);
+            const next = i === len - 1 ? null : new THREE.Vector2(...linePoints[i + 1]);
+            const formP2C = prev ? new THREE.Vector2().subVectors(cur, prev).normalize() : null;
+            const formC2N = next ? new THREE.Vector2().subVectors(next, cur).normalize() : null;
+            const fromP2N = formC2N && formP2C ? new THREE.Vector2().addVectors(formC2N, formP2C).normalize() : null;
+            // eslint-disable-next-line no-nested-ternary
+            const normal = i === 0 ? new THREE.Vector2(-formC2N.y, formC2N.x)
+                : (i === len - 1 ? new THREE.Vector2(-formP2C.y, formP2C.x)
+                    : new THREE.Vector2(-fromP2N.y, fromP2N.x));
+            const n1 = new THREE.Vector2().addVectors(cur, normal.clone().multiplyScalar(-scale));
+            const n2 = new THREE.Vector2().addVectors(cur, normal.clone().multiplyScalar(scale));
+            res.push([n1.x, n1.y, 0], [n2.x, n2.y, 0], [normal.x, normal.y, 0]);
+        }
+        return res;
+    }
+    createTailArrow() {
+        const { THREE } = Externals.getInstance();
+        const textureUrl = this.options.textureUrl;
+        new NS_THREE.TextureLoader().load(textureUrl, (texture) => {
+            const fWidth = this.options.width || 0.3;
+            const renderPathWidth = this.options.strokeWidth ? fWidth + this.options.strokeWidth * 2 : this.options.width;
+            const width = this.options.textureSize ? this.options.textureSize[0] : renderPathWidth;
+            const height = this.options.textureSize ? this.options.textureSize[1] : width;
+            const planeG = new THREE.PlaneGeometry(width, height);
+            const color = this.options.color ? this.options.color : 0xffffff;
+            const material = new THREE.MeshBasicMaterial({
+                color: color,
+                map: texture,
+                transparent: true,
+                opacity: 1.0,
+                depthTest: false,
+            });
+            material.needsUpdate = true;
+            const plane = new THREE.Mesh(planeG, material);
+            plane.renderOrder = 2;
+            this.tailArrow = plane;
+            this.tailArrow.visible = false;
+            this.add(this.tailArrow);
+        });
+    }
+    // 返回 {point, normal: 法向量, scale: 沿着法向量增加/减少得到端点的 scale} 的格式、
+    orgPoints(points, nScale = 0.3) {
+        const normalScale = nScale > 1 ? 0.01 : nScale;
+        const { THREE } = Externals.getInstance();
+        // this.testLines = [];
+        // 得到路径上的拐点信息
+        const pLength = points.length;
+        const orgedPoints = this.calcPoints(points, normalScale); // 传入的一个点拓展为3个信息: 法向量 起 终
+        const vec3orgedPoint = orgedPoints.map((pt) => new THREE.Vector3(...pt));
+        const vec3Chunk = BasicCalcTool.chunk(vec3orgedPoint, 3);
+        const res = points.map((v, i) => ({
+            point: v,
+            normal: [vec3Chunk[i][2].x, vec3Chunk[i][2].y],
+            scale: 1.0,
+        }));
+        const v2Pts = points.map((v) => [v[0], v[1]]);
+        const turningPoints = BasicCalcTool.calcTurning(v2Pts);
+        if (!turningPoints.length)
+            return res;
+        const turningAreas = turningPoints.map((v) => {
+            const { startIndex, endIndex, angle } = v;
+            // angle < 180 右转   angle > 180 左转
+            const pickIndex = angle > 180 ? 1 : 0;
+            const line10 = startIndex > 0 ? vec3Chunk[startIndex - 1][pickIndex] : vec3Chunk[startIndex - 1][pickIndex];
+            const line11 = vec3Chunk[startIndex - 1][pickIndex];
+            const line1NormalizeVec = new THREE.Vector3().subVectors(line11, line10).normalize().multiplyScalar(normalScale);
+            const line12 = new THREE.Vector3().addVectors(line11, line1NormalizeVec);
+            const line13 = new THREE.Vector3().subVectors(line10, line1NormalizeVec);
+            const line20 = vec3Chunk[endIndex + 1][pickIndex];
+            const line21 = pLength > endIndex + 2 ? vec3Chunk[endIndex + 2][pickIndex] : vec3Chunk[endIndex][pickIndex];
+            const line2NormalizeVec = new THREE.Vector3().subVectors(line21, line20).normalize().multiplyScalar(normalScale);
+            const line22 = new THREE.Vector3().addVectors(line21, line2NormalizeVec);
+            const line23 = new THREE.Vector3().subVectors(line20, line2NormalizeVec);
+            const line1 = turf.lineString([[line13.x, line13.y], [line10.x, line10.y], [line11.x, line11.y], [line12.x, line12.y]]);
+            const line2 = turf.lineString([[line23.x, line23.y], [line20.x, line20.y], [line21.x, line21.y], [line22.x, line22.y]]);
+            const intersects = turf.lineIntersect(line1, line2);
+            if (!intersects.features[0]) {
+                // console.log('有拐角 但无相交');
+                // const lin01 = Helper.createLine([[line13.x, line13.y, 0], [line10.x, line10.y, 0], [line11.x, line11.y, 0], [line12.x, line12.y, 0]], '#ff0000', 3000);
+                // const lin02 = Helper.createLine([[p3[0], p3[1], 0], [p4[0], p4[1], 0]], '#00ff00', 3000);
+                // const lin3 = Helper.createLine([[p0[0], p0[1], 0], [p4[0], p4[1], 0], [p2[0], p2[1], 0], [p3[0], p3[1], 0]], '#0000ff', 3000);
+                // this.testLines.push(lin01);
+                // this.testLines.push(lin2);
+                // this.testLines.push(lin3);
+                return null;
+            }
+            const intersectCrd = intersects.features[0].geometry.coordinates;
+            // console.log('有交点', line1, line2, intersects, intersectCrd);
+            // 根据 endCrd 和 startCrd 取 向量作延长线s
+            const vecFromStE = new THREE.Vector2(points[endIndex][0] - points[startIndex - 1][0], points[endIndex][1] - points[startIndex - 1][1]).normalize().multiplyScalar(normalScale);
+            const p0 = [intersectCrd[0] - vecFromStE.x, intersectCrd[1] - vecFromStE.y];
+            const p2 = [intersectCrd[0] + vecFromStE.x, intersectCrd[1] + vecFromStE.y];
+            const normal = angle > 180 ? vecFromStE.normalize().multiplyScalar(-1) : vecFromStE.normalize().multiplyScalar(1);
+            // [p0, p2] 的连线中点就是intersectCrd
+            const p3 = [intersectCrd[0] - normal.y * normalScale, intersectCrd[1] + normal.x * normalScale];
+            const p4 = [intersectCrd[0] + normal.y * normalScale, intersectCrd[1] - normal.x * normalScale];
+            const poly = turf.featureCollection([
+                turf.point(p0),
+                turf.point(p4),
+                turf.point(p2),
+                turf.point(p3),
+                turf.point(p0),
+            ]);
+            // const lin1 = Helper.createLine([[p0[0], p0[1], 0], [p2[0], p2[1], 0]], '#ff0000', 3000);
+            // const lin2 = Helper.createLine([[p3[0], p3[1], 0], [p4[0], p4[1], 0]], '#00ff00', 3000);
+            // const lin3 = Helper.createLine([[p0[0], p0[1], 0], [p4[0], p4[1], 0], [p2[0], p2[1], 0], [p3[0], p3[1], 0]], '#0000ff', 3000);
+            // this.testLines.push(lin1);
+            // this.testLines.push(lin2);
+            // this.testLines.push(lin3);
+            const hull = turf.convex(poly);
+            return {
+                hull,
+                intersectCrd,
+                startIndex,
+                endIndex,
+            };
+        });
+        let inCurrentArea = 0;
+        let l = 0;
+        let ifInTuring = false;
+        while (l < pLength && turningAreas[inCurrentArea]) {
+            const [ls, le] = vec3Chunk[l];
+            const curHull = turningAreas[inCurrentArea].hull;
+            const curIntersectCrd = turningAreas[inCurrentArea].intersectCrd;
+            const nextIntersectCrd = turningAreas[inCurrentArea + 1] ? turningAreas[inCurrentArea + 1].intersectCrd : null;
+            const nextHull = turningAreas[inCurrentArea + 1] ? turningAreas[inCurrentArea + 1].hull : null;
+            const ifBoolinLs = turf.booleanWithin(turf.point([ls.x, ls.y]), curHull);
+            const ifBoolinLe = turf.booleanWithin(turf.point([le.x, le.y]), curHull);
+            const ifBoolin = ifBoolinLs || ifBoolinLe;
+            if (ifBoolin && ifBoolinLs) {
+                // 右转
+                ifInTuring = true;
+                const startCoord = new THREE.Vector3(...curIntersectCrd, 0);
+                let end = le;
+                // 判断 end 是否在 下一个 area
+                if (nextIntersectCrd && nextHull && turf.booleanWithin(turf.point([le.x, le.y]), nextHull)) {
+                    end = new THREE.Vector3(nextIntersectCrd[0], nextIntersectCrd[1], nextIntersectCrd[2]);
+                }
+                // 缩放比例是: V<ls.x - le.x, ls.y - le.y> 的length
+                const oL = new THREE.Vector3().subVectors(le, ls).length();
+                const newL = new THREE.Vector3().subVectors(end, new THREE.Vector3(startCoord.x, startCoord.y, 0)).length();
+                const nv = new THREE.Vector3().subVectors(end, new THREE.Vector3(startCoord.x, startCoord.y, 0)).normalize();
+                res.splice(l, 1, {
+                    point: [(startCoord.x + end.x) / 2, (startCoord.y + end.y) / 2, 0],
+                    scale: newL / oL,
+                    normal: [nv.x, nv.y],
+                });
+            }
+            else if (ifBoolin && ifBoolinLe) {
+                // 左转
+                // console.log('ifBoolin && ifBoolinLe', ifBoolinLs, ifBoolinLe);
+                ifInTuring = true;
+                const endCoord = new THREE.Vector3(...curIntersectCrd, 0);
+                let start = ls;
+                if (nextIntersectCrd && nextHull && turf.booleanWithin(turf.point([ls.x, ls.y]), nextHull)) {
+                    start = new THREE.Vector3(nextIntersectCrd[0], nextIntersectCrd[1], nextIntersectCrd[2]);
+                }
+                const oL = new THREE.Vector3().subVectors(le, ls).length();
+                const newL = new THREE.Vector3().subVectors(start, new THREE.Vector3(endCoord.x, endCoord.y, 0)).length();
+                const nv = new THREE.Vector3().subVectors(new THREE.Vector3(endCoord.x, endCoord.y, 0), start).normalize();
+                res.splice(l, 1, {
+                    point: [(endCoord.x + start.x) / 2, (endCoord.y + start.y) / 2, 0],
+                    scale: newL / oL,
+                    normal: [nv.x, nv.y],
+                });
+            }
+            else if (ifInTuring) {
+                l--; // 当前点需要再判断一次
+                ifInTuring = false;
+                inCurrentArea++;
+            }
+            l++;
+        }
+        return res;
+    }
+    init(pts) {
+        const { THREE } = Externals.getInstance();
+        const points = pts;
+        const sWidth = this.options.strokeWidth || 0;
+        const fWidth = this.options.width ? this.options.width : 0.3;
+        const normalScale = sWidth + fWidth / 2;
+        const res = this.orgPoints(points, normalScale);
+        this.orgedPoints = res;
+        this.points = [];
+        const firstDis = 0.1;
+        if (points.length > 1) {
+            const [first, second, secondLast, last] = [
+                points[0],
+                points[1],
+                points[points.length - 2],
+                points[points.length - 1],
+            ];
+            const firstVec = new THREE.Vector3(...first);
+            const secondVec = new THREE.Vector3(...second);
+            const dirFirst = new THREE.Vector3().subVectors(firstVec, secondVec)
+                .normalize().multiplyScalar(firstVec.distanceTo(secondVec) * 0.05);
+            const head = firstVec.clone().add(dirFirst);
+            const secondLastVec = new THREE.Vector3(...secondLast);
+            const lastVec = new THREE.Vector3(...last);
+            const dirLast = new THREE.Vector3().subVectors(secondLastVec, lastVec)
+                .normalize().multiplyScalar(firstVec.distanceTo(secondVec) * 0.05);
+            const tail = lastVec.clone().sub(dirLast); // 增加端点[尾巴]
+            const originH = this.orgedPoints[0];
+            const originT = this.orgedPoints[this.orgedPoints.length - 1];
+            this.orgedPoints.unshift({
+                point: [head.x, head.y, head.z],
+                normal: originH.normal,
+                scale: 1.0,
+            });
+            this.orgedPoints.push({
+                point: [tail.x, tail.y, tail.z],
+                normal: originT.normal,
+                scale: 1.0,
+            });
+            this.points.push([head.x, head.y, head.z]);
+            this.points.push(...points);
+            this.points.push([tail.x, tail.y, tail.z]);
+        }
+        this.distances = [-firstDis];
+        for (let i = 1, l = this.points.length, prevVec = new THREE.Vector3(...this.points[0]), currentVec = new THREE.Vector3(); i < l; i += 1) {
+            currentVec.set(...this.points[i]);
+            this.distances.push(i === 1 ? 0 : this.distances[i - 1] + currentVec.distanceTo(prevVec));
+            prevVec.copy(currentVec);
+        }
+        this.bufferGeometry = new THREE.BufferGeometry();
+        const components = 9;
+        let [lx, ly, lz] = this.points[0];
+        let d = 0;
+        const vertices = [];
+        for (let i = 0; i < this.orgedPoints.length; i += 1) {
+            const [x, y, z] = this.orgedPoints[i].point;
+            const [normalX, normalY] = this.orgedPoints[i].normal;
+            const scale = this.orgedPoints[i].scale;
+            let nx = x - lx;
+            let ny = y - ly;
+            let nz = z - lz;
+            const l = Math.sqrt(nx * nx + ny * ny + nz * nz);
+            nx /= l;
+            ny /= l;
+            nz /= l;
+            d += l * 3;
+            if (this.options.strokeWidth) {
+                vertices.push(x, y, z, -2, d, this.distances[i], normalX, normalY, scale);
+                vertices.push(x, y, z, -1, d, this.distances[i], normalX, normalY, scale);
+                vertices.push(x, y, z, 1, d, this.distances[i], normalX, normalY, scale);
+                vertices.push(x, y, z, 2, d, this.distances[i], normalX, normalY, scale);
+            }
+            else {
+                vertices.push(x, y, z, -1, d, this.distances[i], normalX, normalY, scale);
+                vertices.push(x, y, z, 1, d, this.distances[i], normalX, normalY, scale);
+            }
+            lx = x;
+            ly = y;
+            lz = z;
+        }
+        const vertexBuffer = new Float32Array(vertices);
+        const pointToCrdsNum = this.options.strokeWidth ? 4 : 2; // 路线上的一个顶点会生成几个点
+        const verticesBuffer = new THREE.InterleavedBuffer(vertexBuffer, components); // 交叉存储, 表明多个类型的attributes(例如，顶点位置、法向量、UV 和颜色值)被存储到一个队列中。
+        // InterleavedBuffer( array : TypedArray 一个基于共享缓存的类型化队列, stride : Integer 每个顶点占用类型化队列的多少个元素 )
+        const lastAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 4, 0, false);
+        this.bufferGeometry.setAttribute('last', lastAttrib);
+        const currentAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 4, components * pointToCrdsNum, false);
+        this.bufferGeometry.setAttribute('current', currentAttrib);
+        const nextAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 4, components * pointToCrdsNum * 2, false);
+        this.bufferGeometry.setAttribute('next', nextAttrib);
+        const texoffAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 4, false);
+        this.bufferGeometry.setAttribute('texoff', texoffAttrib);
+        const progressAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 5, false);
+        this.bufferGeometry.setAttribute('progress', progressAttrib);
+        const normalAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 2, components * pointToCrdsNum + 6, false);
+        this.bufferGeometry.setAttribute('normalVec', normalAttrib);
+        const scaleAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 8, false);
+        this.bufferGeometry.setAttribute('normalScale', scaleAttrib);
+        const positionVertBuffer = new THREE.InterleavedBuffer(vertexBuffer.slice(components * pointToCrdsNum, vertices.length - components * pointToCrdsNum), components);
+        const positionAttrib = new THREE.InterleavedBufferAttribute(positionVertBuffer, 4, 0);
+        this.bufferGeometry.setAttribute('position', positionAttrib);
+        this.bufferGeometry.computeBoundingBox();
+        this.bufferGeometry.computeBoundingSphere();
+        this.bufferGeometry.computeVertexNormals();
+        let indices = [];
+        if (this.options.strokeWidth) {
+            const arr = [
+                0, 1, 4,
+                1, 4, 5,
+                1, 2, 5,
+                2, 5, 6,
+                2, 3, 6,
+                3, 6, 7,
+            ];
+            for (let i = 4; i < vertices.length / components - 8; i += 4) {
+                const curLineNum = i / 4 - 1;
+                const curInds = arr.map((v) => v + curLineNum * 4);
+                indices = [...indices, ...curInds];
+            }
+        }
+        else {
+            for (let i = 2; i < vertices.length / components - 4; i += 2) {
+                indices.push(i - 2, i - 1, i);
+                indices.push(i, i - 1, i + 1);
+            }
+        }
+        this.bufferGeometry.setIndex(indices);
+        // const resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);
+        const resolution = new THREE.Vector2(1, 1);
+        const fillColor = this.options.color ? new Color(this.options.color) : new Color('rgb(255, 255, 255)').alpha(0.0);
+        const strokeColor = this.options.strokeColor ? new Color(this.options.strokeColor) : new Color('rgb(255, 255, 255)').alpha(0.0);
+        this.uniforms = {
+            stripTexture: {
+                type: 't',
+                value: null,
+            },
+            fillColor: {
+                type: 'v4',
+                value: new THREE.Vector4(fillColor.red() / 255, fillColor.green() / 255, fillColor.blue() / 255, fillColor.alpha()),
+            },
+            strokeColor: {
+                type: 'v4',
+                // eslint-disable-next-line max-len
+                value: new THREE.Vector4(strokeColor.red() / 255, strokeColor.green() / 255, strokeColor.blue() / 255, strokeColor.alpha()),
+            },
+            width: {
+                type: 'f',
+                value: this.options.width || 0.3,
+            },
+            strokeWidth: {
+                type: 'f',
+                value: this.options.strokeWidth || 0.1,
+            },
+            renderPixelLine: {
+                type: 'f',
+                value: this.renderPixelLine ? 1.0 : 0.0,
+            },
+            fillOpacity: {
+                type: 'f',
+                value: this.options.fillOpacity || 0.8,
+            },
+            resolution: {
+                type: 'v2',
+                value: resolution,
+            },
+            currentDistance: { type: 'f', value: this.options.current || 0 },
+            texOffset: { type: 'f', value: 0 },
+            fullLength: { type: 'f', value: this.distances[this.distances.length - 1] },
+            viewDistance: { type: 'f', value: this.options.viewDistance === null || typeof (this.options.viewDistance) === 'undefined' ? 15 : this.options.viewDistance },
+            gradientDistance: { type: 'f', value: this.options.gradientDistance || 4 },
+            gradientEnabled: { value: this.options.gradientEnabled || false },
+        };
+        this.material = new THREE.ShaderMaterial({
+            fragmentShader: MeshLine2D.FragmentShader,
+            vertexShader: MeshLine2D.VertexShader,
+            uniforms: this.uniforms,
+            depthTest: false,
+            side: THREE.DoubleSide,
+            wireframe: false,
+            transparent: true,
+            opacity: 1.0,
+            blending: THREE.NormalBlending,
+            blendEquation: THREE.AddEquation,
+            blendSrc: THREE.SrcAlphaFactor,
+            blendDst: THREE.OneMinusSrcAlphaFactor,
+        });
+        if (this.options.textureUrl && this.options.textureMode === 'repeat') {
+            new THREE.TextureLoader().load(this.options.textureUrl, (texture) => {
+                texture.wrapS = THREE.RepeatWrapping;
+                texture.wrapT = THREE.RepeatWrapping;
+                texture.generateMipmaps = true;
+                this.uniforms.stripTexture.value = texture;
+                this.needsUpdate = true;
+            });
+        }
+        else if (this.options.textureUrl && this.options.textureMode === 'tail') {
+            const lastDistance = this.distances[this.distances.length - 1];
+            this.updateTailArrowPos(lastDistance);
+        }
+        this.mesh = new THREE.Mesh(this.bufferGeometry, this.material);
+        this.mesh.renderOrder = 1000;
+        this.add(this.mesh);
+    }
+    setContainer(container) {
+        if (EnvironmentUtils.GetEnv() === Env.Miniapp)
+            return;
+        this.resize(container.clientWidth, container.clientHeight);
+    }
+    resize(containerWidth, containerHeight) {
+        if (this.viewWidth === containerWidth && this.viewHeight === containerHeight)
+            return;
+        const resolution = new NS_THREE.Vector2(containerWidth, containerHeight);
+        this.uniforms.resolution.value = resolution;
+        this.needsUpdate = true;
+        this.viewWidth = containerWidth;
+        this.viewHeight = containerHeight;
+    }
+    getBestView(currentPoint, fromDistance, toDistance) {
+        let nearPoint = this.getPointOnDistance(fromDistance + 0.2).point;
+        let curPoint = currentPoint;
+        const { THREE } = Externals.getInstance();
+        // 过滤0.5米转角
+        let f = fromDistance + 1;
+        for (; f < (fromDistance + 10); f += 1) {
+            const scan = this.getPointOnDistance(f);
+            const dir1 = new THREE.Vector3().subVectors(scan.point, nearPoint);
+            const dir2 = new THREE.Vector3().subVectors(nearPoint, curPoint);
+            const rad = THREE.MathUtils.radToDeg(dir1.angleTo(dir2));
+            if (rad > 30) {
+                nearPoint = this.getPointOnDistance(f + 0.5).point;
+                curPoint = scan.point;
+                break;
+            }
+        }
+        let maxDistance = 0;
+        for (let i = f; i < toDistance; i++) {
+            const scan = this.getPointOnDistance(i);
+            const dir1 = new THREE.Vector3().subVectors(scan.point, nearPoint);
+            const dir2 = new THREE.Vector3().subVectors(nearPoint, curPoint);
+            const rad = THREE.MathUtils.radToDeg(dir1.angleTo(dir2));
+            if (rad > 32 && (i - fromDistance) > 10) {
+                maxDistance = i;
+                break;
+            }
+            if (rad > 20 && (i - fromDistance) > 15) {
+                maxDistance = i;
+                break;
+            }
+        }
+        return (maxDistance - fromDistance);
+    }
+    getPointOnDistance(distance) {
+        const { THREE } = Externals.getInstance();
+        let left = 0;
+        const { distances, points } = this;
+        let right = points.length - 1;
+        let p = -1;
+        while (left < right - 1) {
+            p = Math.floor((left + right) / 2);
+            if (distances[p] > distance)
+                right = p;
+            else if (distances[p] < distance)
+                left = p;
+            else {
+                left = p;
+                break;
+            }
+        }
+        p = left;
+        if (p > -1) {
+            const from = new THREE.Vector3(...this.points[p]);
+            if (p === this.points.length - 1 || distance <= 0) {
+                return {
+                    point: from,
+                    index: p + 1,
+                };
+            }
+            const fromDist = this.distances[p];
+            const to = new THREE.Vector3(...this.points[p + 1]);
+            const toDist = this.distances[p + 1];
+            const distDiff = toDist - fromDist;
+            const vecDiff = to.clone().sub(from);
+            return {
+                point: from.clone().add(vecDiff.multiplyScalar((distance - fromDist) / distDiff)),
+                index: p + 1,
+            };
+        }
+        throw new Error(`Cannot find point on distance ${distance}`);
+    }
+    getNearestPoint(position, startDistance = 0) {
+        const { THREE } = Externals.getInstance();
+        const pathLength = this.distances[this.distances.length - 1];
+        let precision = 8;
+        let best = new THREE.Vector3();
+        let bestLength = 0;
+        let bestDistance = Infinity;
+        let bestIndex = -1;
+        for (let scan, scanLength = startDistance, scanDistance; scanLength <= pathLength; scanLength += precision) {
+            scan = this.getPointOnDistance(scanLength);
+            scanDistance = position.distanceTo(scan.point);
+            if (scanDistance < bestDistance) {
+                best = scan.point;
+                bestLength = scanLength;
+                bestDistance = scanDistance;
+                bestIndex = scan.index;
+            }
+        }
+        let before;
+        let after;
+        let beforeLength;
+        let afterLength;
+        let beforeDistance;
+        let afterDistance;
+        precision /= 2;
+        while (precision > 0.1) {
+            beforeLength = bestLength - precision;
+            beforeDistance = position.distanceTo(before = this.getPointOnDistance(beforeLength).point);
+            afterLength = bestLength + precision;
+            afterDistance = position.distanceTo(after = this.getPointOnDistance(afterLength).point);
+            if (beforeLength >= 0 && beforeDistance < bestDistance) {
+                best = before;
+                bestLength = beforeLength;
+                bestDistance = beforeDistance;
+            }
+            else if (afterLength <= pathLength && afterDistance < bestDistance) {
+                best = after;
+                bestLength = afterLength;
+                bestDistance = afterDistance;
+            }
+            else {
+                precision /= 2;
+            }
+        }
+        return {
+            point: best,
+            distance: bestLength,
+            index: bestIndex,
+        };
+    }
+    getPathWithScope(startDistance, endDistance) {
+        if (startDistance >= endDistance) {
+            const endPoint = this.getPointOnDistance(endDistance).point;
+            return [
+                [endPoint.x, endPoint.y, 0],
+            ];
+        }
+        let i = this.distances.length - 1;
+        let j = 0;
+        while (i >= 0 && this.distances[i] > startDistance)
+            i -= 1;
+        while (j < this.distances.length && this.distances[j] < endDistance)
+            j += 1;
+        const startPoint = this.getPointOnDistance(startDistance).point;
+        const endPoint = this.getPointOnDistance(endDistance).point;
+        return [
+            [startPoint.x, startPoint.y, 0],
+            ...this.points.slice(i + 1, j - i - 1),
+            [endPoint.x, endPoint.y, 0],
+        ];
+    }
+    getPathBaseStartPoint(distance) {
+        const startPoint = this.getPointOnDistance(distance).point;
+        for (let i = 0; i < this.distances.length; i += 1) {
+            if (this.distances[i] > distance) {
+                return [
+                    [startPoint.x, startPoint.y, 0],
+                    ...this.points.slice(i),
+                ];
+            }
+        }
+        return this.points.slice(this.distances.length - 1);
+    }
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (!this.initialized && this.ready) {
+            this.initialized = true;
+            frameContext.needUpdate = true;
+        }
+        else if (this.needsUpdate) {
+            frameContext.needUpdate = true;
+            this.needsUpdate = false;
+        }
+        if (this.options.animateEnabled) {
+            this.uniforms.texOffset.value -= this.options.animateSpeed;
+            // this.uniforms.texOffset.value -= this.options.animateSpeed!;
+            frameContext.needUpdate = true;
+        }
+        if (this.initialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+        }
+        return frameContext;
+    }
+    dispose() {
+        if (this.parentOverlay) {
+            this.parentOverlay.removePath(this);
+        }
+        super.dispose();
+        this.remove(this.mesh);
+        this.material.dispose();
+        this.bufferGeometry.dispose();
+    }
+    setCurrent(current) {
+        this.uniforms.currentDistance.value = current;
+        this.needsUpdate = true;
+    }
+    getLength() {
+        return this.distances[this.distances.length - 1];
+    }
+    setCurrentIndex(currentIndex) {
+        this.currentMoveIndex = currentIndex;
+        const current = this.distances[currentIndex + 1];
+        this.uniforms.currentDistance.value = current;
+        this.needsUpdate = true;
+    }
+    getCurrent() {
+        return this.uniforms.currentDistance.value;
+    }
+    getCurrentIndex() {
+        return this.currentMoveIndex;
+        // return this.uniforms.currentDistance.value as number;
+    }
+    setViewDistance(value) {
+        this.uniforms.viewDistance.value = value;
+        const distance = value + this.uniforms.currentDistance.value;
+        if (this.options.textureUrl && this.options.textureMode === 'tail') {
+            if (!this.tailArrow) {
+                setTimeout(() => {
+                    this.setViewDistance(value);
+                }, 1000);
+                return;
+            }
+            this.updateTailArrowPos(distance);
+        }
+    }
+    updateTailArrowPos(distance) {
+        if (!this.tailArrow) {
+            setTimeout(() => {
+                this.updateTailArrowPos(distance);
+            }, 1000);
+            return;
+        }
+        this.tailArrow.visible = true;
+        const { index } = this.getPointOnDistance(distance);
+        const orgedPoint = this.orgedPoints[index];
+        const x = orgedPoint.point[0];
+        const y = orgedPoint.point[1];
+        const z = orgedPoint.point[2];
+        const normal2 = [-orgedPoint.normal[1], orgedPoint.normal[0]];
+        const atan3 = Math.atan2(normal2[1], normal2[0]);
+        const rotationZ = atan3 + Math.PI / 2;
+        this.tailArrow.position.set(x, y, z);
+        this.tailArrow.rotation.z = rotationZ;
+        this.needsUpdate = true;
+    }
+    setWidth(width) {
+        if (this.uniforms.width.value !== width) {
+            this.uniforms.width.value = width;
+            this.needsUpdate = true;
+        }
+    }
+    setColor(color) {
+        if (color == null)
+            return;
+        const c = new Color(color);
+        const v = this.uniforms.fillColor.value;
+        const { THREE } = Externals.getInstance();
+        const cv = new THREE.Vector4(c.red(), c.green(), c.blue(), c.alpha());
+        if (cv.equals(v))
+            return;
+        this.uniforms.fillColor.value = cv;
+        this.needsUpdate = true;
+    }
+    getViewDistance() {
+        return this.uniforms.viewDistance.value;
+    }
+    setParentOverlay(parent) {
+        this.parentOverlay = parent;
+    }
+}
+MeshLine2D.VertexShader = `
+    attribute vec4 last, current, next;
+    attribute vec2 normalVec;
+    attribute float normalScale;
+    attribute float texoff;
+    attribute float progress;
+
+    varying vec2 texcoord;
+    varying float vProgress;
+    varying float isBorder;
+
+    uniform float width;
+    uniform float texOffset;
+    uniform float strokeWidth;
+    uniform float renderPixelLine;
+    uniform vec2 resolution;
+
+    float pi = 3.141592653589793;
+    float fwidth = width;
+    float swidth = strokeWidth;
+
+    vec4 transform(vec3 coord){
+      return projectionMatrix * modelViewMatrix * vec4(coord, 1.0);
+    }
+
+    vec2 project(vec4 device) {
+      vec3 device_normal = device.xyz / device.w;
+      vec2 clip_pos = (device_normal * 0.5 + 0.5).xy;
+      return clip_pos * resolution;
+    }
+
+    vec4 unproject(vec2 screen, float z, float w) {
+      vec2 clip_pos = screen / resolution;
+      vec2 device_normal = clip_pos * 2.0 - 1.0;
+      return vec4(device_normal * w, z, w);
+    }
+
+    // 计算系数: 0,0,0 到 0,1,0 对应的屏幕坐标距离 越大,  coefficient越大
+    float calcCoefficient() {
+      vec3 p1 = vec3(0, 0, 0);
+      vec2 sp1 = project(transform(p1.xyz));
+      vec3 p2 = vec3(0, 1, 0);
+      vec2 sp2 = project(transform(p2.xyz));
+      // 计算屏幕坐标的距离
+      float dist = distance(sp1, sp2);
+      return dist * 10.0 / width;
+    }
+
+    void main(){
+      vec2 sLast; // screenLast
+      vec2 sNext; // screenNext
+      vec2 sCurrent; // screenCurrent
+      vec2 normal1; // normal1
+      vec2 normal2; // normal2
+      vec2 normal; // 当前normal
+      vec4 dCurrent; //
+
+      float coefficient = 10.0;
+      float off = 1.0;
+      if (current.w < 0.0 ) {
+        off = -1.0;
+      }
+      vec4 position = vec4(0, 0, 0, 0);
+      vec3 pos;
+
+      float offsetW = fwidth / 2.0 * normalScale;
+      isBorder = -1.0;
+      if (abs(current.w) > 1.0) {
+        offsetW = swidth + (fwidth / 2.0) * normalScale;
+        isBorder = 1.0;
+      }
+      if (renderPixelLine < 1.0) {
+        // 3d 中
+        vec2 dir = vec2(normalVec.x, normalVec.y)*off;
+        float factor = 0.6 / fwidth * 0.2;
+        pos = vec3(current.xy + dir * offsetW, 0.0);
+        texcoord = vec2(off*0.5+0.5, texoff * factor + texOffset);
+        vProgress = progress;
+        gl_Position = transform(pos);
+      } else {
+        // vec2 dir = vec2(normalVec.x, normalVec.y)*off;
+        // pos = vec3(current.xy + dir * offsetW, 0.0);
+        // texcoord = vec2(off*0.5+0.5, texoff*0.2 + texOffset);
+        // vProgress = progress;
+        // gl_Position = transform(pos);
+
+        coefficient = calcCoefficient();
+        sLast = project(transform(last.xyz)); // last的屏幕坐标
+        sNext = project(transform(next.xyz)); // next的屏幕坐标
+
+        dCurrent = transform(current.xyz);
+        sCurrent = project(dCurrent); // current的屏幕坐标
+
+        normal1 = normalize(sLast - sCurrent);
+        vec2 normal2 = normalize(sCurrent - sNext);
+        normal = normalize(normal1 + normal2);
+        texcoord = vec2(off*0.5+0.5, texoff* 0.03 * coefficient + texOffset);
+        vProgress = progress;
+
+        vec2 dir = vec2(-normal.y, normal.x) * off;
+        float cosAngle = abs(dot(dir, -normal1)); // cos 45 基本 为 0.79   得到的是弧度值
+        float x = 90.0 - acos(cosAngle) * 180.0 / pi; // 得到角度 90 - x 则为需要 20 / length = cos(x)
+        float divideBy = cos(x / 180.0 * pi);
+        if (abs(divideBy) < 0.6) {
+          float positiveNum = divideBy > 0.0 ? 1.0 : -1.0;
+          divideBy = 0.6 * positiveNum;
+        }
+        pos = vec3((sCurrent + offsetW / divideBy * dir).xy, 0.0);
+        position = unproject(pos.xy, 0.0, 1.0);
+        gl_Position = position;
+      }
+
+      // texcoord = vec2(off*0.5+0.5, texoff* 0.03 * coefficient + texOffset);
+      // vProgress = progress;
+
+      // vec2 dir = vec2(-normal.y, normal.x) * off;
+      // float cosAngle = abs(dot(dir, -normal1)); // cos 45 基本 为 0.79   得到的是弧度值
+      // float x = 90.0 - acos(cosAngle) * 180.0 / pi; // 得到角度 90 - x 则为需要 20 / length = cos(x)
+      // float divideBy = cos(x / 180.0 * pi);
+
+      // vec4 position = vec4(0, 0, 0, 0);
+      // vec3 pos;
+
+      // if (renderPixelLine < 1.0) {
+      //   pos = current.xyz + vec3(dir * offsetW, 0.0);
+      //   position = transform(pos);
+      // } else {
+      //   // 计算 dir 和 normal1 的夹角 , 要 叠加的长度 是 offsetW * dir
+      //   pos = vec3((sCurrent + offsetW / divideBy * dir).xy, 0.0);
+      //   position = unproject(pos.xy, 0.0, 1.0);
+      // }
+
+      // gl_Position = position;
+    }
+  `;
+MeshLine2D.FragmentShader = `
+    uniform sampler2D stripTexture;
+    uniform float currentDistance;
+    uniform float fullLength;
+    uniform float viewDistance;
+    uniform float gradientDistance;
+    uniform vec4 fillColor;
+    uniform vec4 strokeColor;
+    uniform bool gradientEnabled;
+    uniform float renderPixelLine;
+    uniform float fillOpacity;
+
+    varying vec2 texcoord;
+    varying float vProgress;
+    varying float isBorder;
+
+    float opacity = 1.0;
+
+    void main(){
+      vec4 texColor = texture2D(stripTexture, texcoord);
+
+      float alpha = fillOpacity;
+      float cur = currentDistance;
+      float grad = gradientDistance;
+      float view = viewDistance;
+
+      if (gradientEnabled) {
+        if (vProgress < cur) {
+          alpha = 0.0;
+        } else {
+          if (vProgress > cur + view) {
+            alpha = 0.0;
+          } else {
+            if (fullLength <= cur + view) {
+              view = fullLength - cur;
+              if (view < 2.0 * grad) {
+                grad = view * 0.5;
+              }
+            }
+
+            if (vProgress > cur + grad) {
+              alpha = fillOpacity;
+              if (vProgress > cur + view - grad) {
+                  alpha = abs(cur + view - vProgress) / grad * fillOpacity;
+              }
+            } else {
+              alpha = abs(vProgress - cur) / grad * fillOpacity;
+            }
+          }
+        }
+      } else if (renderPixelLine == 1.0) {
+        if (vProgress < cur) {
+          alpha = 0.0;
+        }
+      }
+      if (isBorder > -0.99) {
+        gl_FragColor = vec4(strokeColor.rgb, opacity * alpha * strokeColor.a);
+      } else {
+        gl_FragColor = vec4((fillColor * (1.0 - texColor.a) + texColor * texColor.a).rgb, opacity * alpha * (fillColor.a * (1.0 - texColor.a) + texColor.a));
+      }
+    }
+  `;
+export { MeshLine2D };