three-base 2.0.142 → 2.0.145

package/ExtrudeMesh.js

@@ -1,342 +1,342 @@
-/*
- * @Author: xiaosihan
- * @Date: 2022-06-08 14:20:52
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2025-06-25
- */
-import { clamp, cloneDeep, filter, first, get, isNumber, last } from "lodash";
-import { BufferAttribute, BufferGeometry, Matrix4, Mesh, Vector2, Vector3 } from "three";
-/**
- * 挤出模型
- * 此组件适合自动生成 公路 河流山川等 2d 平面上的模型
- *
- * @export
- * @class ExtrudeMesh
- * @extends {Mesh<BufferGeometry, Material>}
- */
-export default class ExtrudeMesh extends Mesh {
-    // 临时使用的二维顶点对象
-    static temp1Vector2 = new Vector2();
-    static temp2Vector2 = new Vector2();
-    static temp3Vector2 = new Vector2();
-    // 临时使用的3维顶点对象
-    static tempVector3 = new Vector3();
-    static temp1Vector3 = new Vector3();
-    static temp2Vector3 = new Vector3();
-    static temp3Vector3 = new Vector3();
-    // 临时使用的矩阵
-    static temp1Matrix4 = new Matrix4();
-    static temp2Matrix4 = new Matrix4();
-    static temp3Matrix4 = new Matrix4();
-    constructor(props, material) {
-        super(undefined, material);
-        this.updateGeometry(props);
-    }
-    //宽度
-    shapePathWidth = 1;
-    // 通过 props.paths 和圆角属性 计算出来的 最终路径
-    pointerWidthRadius = [];
-    // 通过2个顶点和缩放值计算矩阵
-    computerMatrix(vector1, vector2, scale) {
-        ExtrudeMesh.temp1Matrix4.identity();
-        ExtrudeMesh.temp1Matrix4.multiply(ExtrudeMesh.temp2Matrix4.lookAt(ExtrudeMesh.temp1Vector3.set(vector1[0], vector1[1], vector1[2]), ExtrudeMesh.temp2Vector3.set(vector2[0], vector1[1], vector2[2]), ExtrudeMesh.temp3Vector3.set(0, 1, 0)));
-        ExtrudeMesh.temp1Matrix4.scale(ExtrudeMesh.temp1Vector3.set(...scale));
-        return ExtrudeMesh.temp1Matrix4.transpose().toArray();
-    }
-    /**
-     * @计算渐变值 computerGradient([3,2,4], 0.3);
-     * @渐变区间 values:number[]
-     * @百分比 percentage:number
-     */
-    computerGradient(values, percentage) {
-        // 过滤有效数字类型
-        values = filter(values, v => isNumber(v));
-        // 限定取值范围
-        let P = clamp(percentage, 0, 1);
-        let VL = values.length;
-        for (let i = (VL - 1); i >= 0; i--) {
-            if (P === (i / (VL - 1))) {
-                return values[i];
-            }
-            else if (P > (i / (VL - 1))) {
-                P -= (i / (VL - 1));
-                P *= 1 / ((i + 1) / (VL - 1) - (i / (VL - 1)));
-                return (values[i + 1] - values[i]) * P + values[i];
-            }
-        }
-        return 0;
-    }
-    // 计算圆角路径 并存到 this.pointerWidthRadius 上
-    computerPointerWidthRadius(paths, closed) {
-        // 路径小于2个就不执行计算
-        if (paths.length < 2) {
-            return;
-        }
-        // 路径少于3个闭合路径参数不起作用
-        if (paths.length < 3) {
-            closed = false;
-        }
-        // 清空圆角路径
-        this.pointerWidthRadius = [];
-        paths = cloneDeep(paths);
-        // 如果是闭合路径的话就头尾相连
-        if (closed) {
-            Object.defineProperties(paths, {
-                [-1]: {
-                    value: last(paths),
-                    configurable: false,
-                    enumerable: false,
-                    writable: false // 此属性的值能否修改
-                },
-                [paths.length]: {
-                    value: first(paths),
-                    configurable: false,
-                    enumerable: false,
-                    writable: false // 此属性的值能否修改
-                }
-            });
-        }
-        paths.map((P, i) => {
-            const { vector3, radius = 0.1, segments = 0, scale = { x: 1, y: 1 } } = P;
-            //当前点位置前后都有点时就可以做圆角计算
-            if (paths[i - 1] && paths[i + 1]) {
-                // 第一个向量
-                let v1 = ExtrudeMesh.temp1Vector3
-                    .set(...vector3)
-                    .sub(ExtrudeMesh.tempVector3.set(...paths[i - 1].vector3))
-                    .normalize()
-                    .clone();
-                // 第二个向量    
-                let v2 = ExtrudeMesh.temp2Vector3
-                    .set(...paths[i + 1].vector3)
-                    .sub(ExtrudeMesh.tempVector3.set(...vector3))
-                    .normalize()
-                    .clone();
-                // 夹角
-                let innerAngle = v1.clone().multiplyScalar(-1).angleTo(v2);
-                // 边长
-                let sideLength = radius / Math.tan(innerAngle / 2);
-                // 圆角的起点
-                let startP = new Vector3(...vector3).sub(v1.clone().multiplyScalar(sideLength));
-                // 圆角的终点
-                let endP = new Vector3(...vector3).add(v2.clone().multiplyScalar(sideLength));
-                // 圆角起点到终点的向量
-                let StoE = endP.clone().sub(startP);
-                // 弦长
-                let chordLength = radius / Math.sin(innerAngle / 2);
-                // 圆心位置
-                let circleCenter = v2
-                    .clone()
-                    .add(v1)
-                    .multiplyScalar(0.5)
-                    .sub(v1)
-                    .setLength(chordLength)
-                    .add(ExtrudeMesh.tempVector3.set(...vector3));
-                //向量2是否在 向量1的左边
-                let v2Inv1Left = ExtrudeMesh.temp1Vector3
-                    .set(-v1.z, 0, v1.x)
-                    .angleTo(ExtrudeMesh.temp2Vector3.set(v2.x, 0, v2.z))
-                    < (Math.PI / 2);
-                // XZ平面上的夹角
-                let innerAngleXZ = ExtrudeMesh.temp1Vector3
-                    .set(v1.x, 0, v1.z)
-                    .angleTo(ExtrudeMesh.temp2Vector3.set(v2.x, 0, v2.z));
-                // 如果当前点的位置在前后2点的连线上,就不进行分段计算 并且应用上一个点的矩阵
-                if (innerAngleXZ === 0) {
-                    let { x = 1, y = 1 } = scale;
-                    let lastPointMatrix = last(this.pointerWidthRadius).matrix;
-                    this.pointerWidthRadius.push({
-                        vector3,
-                        matrix: ExtrudeMesh.temp1Matrix4
-                            .identity()
-                            .extractRotation(ExtrudeMesh.temp2Matrix4.set(...lastPointMatrix))
-                            .multiply(ExtrudeMesh.temp3Matrix4
-                            .identity()
-                            .scale(ExtrudeMesh.temp1Vector3.set(1, y, x)))
-                            .transpose()
-                            .toArray()
-                    });
-                }
-                else if (segments === 0) { // 分段数为0时不分段 并在前后各加一个点
-                    let { x = 1, y = 1 } = scale;
-                    this.pointerWidthRadius.push({
-                        vector3,
-                        matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : vector3), (v2Inv1Left ? vector3 : circleCenter.toArray()), [1, y, x / Math.sin(innerAngle / 2)])
-                    });
-                }
-                else {
-                    for (let ii = 0; ii <= segments; ii++) {
-                        // 圆角计算的第n个点的角度
-                        let Aa = ii * ((Math.PI - innerAngle) / segments);
-                        //半径对角
-                        let Cc = Math.PI - Aa - (innerAngle / 2);
-                        //圆角分段的弦长
-                        let a = radius * Math.sin(Aa) / Math.sin(Cc);
-                        // 每段圆角的弦长
-                        let StoEvector = StoE.clone().setLength(a).add(startP);
-                        // 当前点的位置
-                        let ridiusP = StoEvector
-                            .clone()
-                            .sub(circleCenter)
-                            .setLength(radius)
-                            .add(circleCenter);
-                        let { x: preX = 1, y: preY = 1 } = get(paths[i - 1], ["scale"]) || {};
-                        let { x: nextX = 1, y: nextY = 1 } = get(paths[i + 1], ["scale"]) || {};
-                        let { x = 1, y = 1 } = scale;
-                        // 缩放值过渡计算
-                        x = this.computerGradient([(preX + x) / 2, x, (x + nextX) / 2], ii / segments);
-                        y = this.computerGradient([(preY + y) / 2, y, (y + nextY) / 2], ii / segments);
-                        // 添加一个带矩阵的点
-                        this.pointerWidthRadius.push({
-                            vector3: ridiusP.toArray(),
-                            matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : ridiusP.toArray()), (v2Inv1Left ? ridiusP.toArray() : circleCenter.toArray()), [1, y, x])
-                        });
-                    }
-                }
-            }
-            else {
-                // 最后一个位置
-                if (i === paths.length - 1) {
-                    // 如果是闭合的话 就把第一个点的位置加入最后后面
-                    if (closed) {
-                        this.pointerWidthRadius.push(first(this.pointerWidthRadius));
-                    }
-                    else {
-                        // 如果路径未闭合并且遍历到最后一个时特殊处理
-                        let lastPoint = last(this.pointerWidthRadius);
-                        // 在没有闭合的情况下添加第一个点的位置
-                        let v = ExtrudeMesh.temp1Vector3
-                            .set(...vector3)
-                            .sub(ExtrudeMesh.temp3Vector3.set(...lastPoint.vector3))
-                            .normalize();
-                        let lookAtPoint = ExtrudeMesh.temp2Vector3
-                            .set(v.z, 0, -v.x)
-                            .add(ExtrudeMesh.temp3Vector3.set(...vector3))
-                            .toArray();
-                        let { x = 1, y = 1 } = scale;
-                        this.pointerWidthRadius.push({
-                            vector3,
-                            matrix: this.computerMatrix(vector3, lookAtPoint, [1, y, x])
-                        });
-                    }
-                }
-                else {
-                    let { x = 1, y = 1 } = scale;
-                    // 在没有闭合的情况下添加第一个点的位置
-                    let v2 = ExtrudeMesh.temp1Vector3
-                        .set(...paths[i + 1].vector3)
-                        .sub(ExtrudeMesh.temp2Vector3.set(...vector3))
-                        .normalize();
-                    let lookAtPoint = ExtrudeMesh.temp1Vector3
-                        .set(v2.z, 0, -v2.x)
-                        .add(ExtrudeMesh.temp2Vector3.set(...vector3))
-                        .toArray();
-                    this.pointerWidthRadius.push({
-                        vector3,
-                        matrix: this.computerMatrix(vector3, lookAtPoint, [1, y, x])
-                    });
-                }
-            } // else
-        });
-    }
-    // 计算三维路径的总长度
-    computerPathLength(points) {
-        let length = 0;
-        points.map((p, index) => {
-            if (index < points.length - 1) {
-                ExtrudeMesh.temp1Vector3.set(...p);
-                ExtrudeMesh.temp2Vector3.set(...points[index + 1]);
-                length += ExtrudeMesh.temp1Vector3.distanceTo(ExtrudeMesh.temp2Vector3);
-            }
-        });
-        return length;
-    }
-    // 通过一条线段计算挤出模型的各个顶点的位置和 uv坐标
-    setExtrudeMesh(startP, // 起点位置
-    startMatrix4, // 起点位置的矩阵
-    endP, // 终点位置
-    endMatrix4, // 终点位置的矩阵
-    uvx, // uv.x 的起始位置
-    shapePath) {
-        // 计算二维路径的总长度 作为uv坐标的边长
-        let shapePathLength = this.computerPathLength(shapePath.map(p => [...p, 0]));
-        // 挤出长度
-        let extrudeLength = this.computerPathLength([startP, endP]);
-        // 网格模型每个点
-        let geometryPoint = [];
-        // 网格模型每个点对应的uv坐标
-        let uvPoint = [];
-        shapePath.map((P, index) => {
-            if (index < shapePath.length - 1) {
-                // 计算出矩形面的4个顶点
-                let Pa = ExtrudeMesh.tempVector3
-                    .set(0, P[1], -P[0])
-                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...startMatrix4))
-                    .add(ExtrudeMesh.temp1Vector3.set(...startP))
-                    .toArray();
-                let Pb = ExtrudeMesh.tempVector3
-                    .set(0, shapePath[index + 1][1], -shapePath[index + 1][0])
-                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...startMatrix4))
-                    .add(ExtrudeMesh.temp1Vector3.set(...startP))
-                    .toArray();
-                let Pc = ExtrudeMesh.tempVector3
-                    .set(0, shapePath[index + 1][1], -shapePath[index + 1][0])
-                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...endMatrix4))
-                    .add(ExtrudeMesh.temp1Vector3.set(...endP))
-                    .toArray();
-                let Pd = ExtrudeMesh.tempVector3
-                    .set(0, P[1], -P[0])
-                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...endMatrix4))
-                    .add(ExtrudeMesh.temp1Vector3.set(...endP))
-                    .toArray();
-                // 组成矩形的2个三角面
-                geometryPoint.push(...Pa, ...Pb, ...Pc, ...Pa, ...Pc, ...Pd);
-                // 计算出矩形面的4个顶点的uv坐标
-                // 当前位置的 uv.y 位置
-                let currentUvy = this.computerPathLength([first(shapePath), ...shapePath.slice(0, index + 1)].map(sP => [...sP, 0])) / shapePathLength;
-                // 下一个坐标的 uv.y 位置
-                let nextUvy = this.computerPathLength([first(shapePath), ...shapePath.slice(0, index + 2)].map(sP => [...sP, 0])) / shapePathLength;
-                let Pauv = [uvx / shapePathLength, currentUvy];
-                let Pbuv = [uvx / shapePathLength, nextUvy];
-                let Pcuv = [(uvx + extrudeLength) / shapePathLength, nextUvy];
-                let Pduv = [(uvx + extrudeLength) / shapePathLength, currentUvy];
-                uvPoint.push(...Pauv, ...Pbuv, ...Pcuv, ...Pauv, ...Pcuv, ...Pduv);
-            }
-        });
-        return { geometryPoint, uvPoint };
-    }
-    //设置模型
-    updateGeometry(props) {
-        const { paths, shapePath, closed } = props;
-        this.shapePathWidth = Math.max(...shapePath.map(path => path[0])) - Math.min(...shapePath.map(path => path[0]));
-        // 计算圆角路径
-        this.computerPointerWidthRadius(paths, closed);
-        //网格模型的每个顶点位置
-        let geometryPoint = [];
-        // 网格模型每个点对应的uv坐标
-        let uvPoint = [];
-        for (let i = 0; i < this.pointerWidthRadius.length - 1; i++) {
-            let Point1 = this.pointerWidthRadius[i];
-            let Point2 = this.pointerWidthRadius[i + 1];
-            let uvx = this.computerPathLength(this.pointerWidthRadius.slice(0, i + 1).map(p => p.vector3));
-            const { geometryPoint: geo, uvPoint: uv } = this.setExtrudeMesh(Point1.vector3, Point1.matrix, Point2.vector3, Point2.matrix, uvx, shapePath);
-            // 把挤出的网格模型的顶点收集起来
-            geometryPoint.push(...geo);
-            // 把挤出的网格模型顶点的uv坐标收集起来
-            uvPoint.push(...uv);
-        }
-        let geometry = new BufferGeometry();
-        // 修改模型
-        let positionArray = new Float32Array(geometryPoint);
-        let position = new BufferAttribute(positionArray, 3, false);
-        geometry.setAttribute("position", position);
-        let uvArray = new Float32Array(uvPoint);
-        let uv = new BufferAttribute(uvArray, 2, false);
-        geometry.setAttribute("uv", uv);
-        // 计算顶点法线
-        geometry.computeVertexNormals();
-        this.geometry.dispose();
-        this.geometry = geometry;
-        this.dispatchEvent({ type: "loaded" });
-    }
-}
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-06-08 14:20:52
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2025-06-25
+ */
+import { clamp, cloneDeep, filter, first, get, isNumber, last } from "lodash";
+import { BufferAttribute, BufferGeometry, Matrix4, Mesh, Vector2, Vector3 } from "three";
+/**
+ * 挤出模型
+ * 此组件适合自动生成 公路 河流山川等 2d 平面上的模型
+ *
+ * @export
+ * @class ExtrudeMesh
+ * @extends {Mesh<BufferGeometry, Material>}
+ */
+export default class ExtrudeMesh extends Mesh {
+    // 临时使用的二维顶点对象
+    static temp1Vector2 = new Vector2();
+    static temp2Vector2 = new Vector2();
+    static temp3Vector2 = new Vector2();
+    // 临时使用的3维顶点对象
+    static tempVector3 = new Vector3();
+    static temp1Vector3 = new Vector3();
+    static temp2Vector3 = new Vector3();
+    static temp3Vector3 = new Vector3();
+    // 临时使用的矩阵
+    static temp1Matrix4 = new Matrix4();
+    static temp2Matrix4 = new Matrix4();
+    static temp3Matrix4 = new Matrix4();
+    constructor(props, material) {
+        super(undefined, material);
+        this.updateGeometry(props);
+    }
+    //宽度
+    shapePathWidth = 1;
+    // 通过 props.paths 和圆角属性 计算出来的 最终路径
+    pointerWidthRadius = [];
+    // 通过2个顶点和缩放值计算矩阵
+    computerMatrix(vector1, vector2, scale) {
+        ExtrudeMesh.temp1Matrix4.identity();
+        ExtrudeMesh.temp1Matrix4.multiply(ExtrudeMesh.temp2Matrix4.lookAt(ExtrudeMesh.temp1Vector3.set(vector1[0], vector1[1], vector1[2]), ExtrudeMesh.temp2Vector3.set(vector2[0], vector1[1], vector2[2]), ExtrudeMesh.temp3Vector3.set(0, 1, 0)));
+        ExtrudeMesh.temp1Matrix4.scale(ExtrudeMesh.temp1Vector3.set(...scale));
+        return ExtrudeMesh.temp1Matrix4.transpose().toArray();
+    }
+    /**
+     * @计算渐变值 computerGradient([3,2,4], 0.3);
+     * @渐变区间 values:number[]
+     * @百分比 percentage:number
+     */
+    computerGradient(values, percentage) {
+        // 过滤有效数字类型
+        values = filter(values, v => isNumber(v));
+        // 限定取值范围
+        let P = clamp(percentage, 0, 1);
+        let VL = values.length;
+        for (let i = (VL - 1); i >= 0; i--) {
+            if (P === (i / (VL - 1))) {
+                return values[i];
+            }
+            else if (P > (i / (VL - 1))) {
+                P -= (i / (VL - 1));
+                P *= 1 / ((i + 1) / (VL - 1) - (i / (VL - 1)));
+                return (values[i + 1] - values[i]) * P + values[i];
+            }
+        }
+        return 0;
+    }
+    // 计算圆角路径 并存到 this.pointerWidthRadius 上
+    computerPointerWidthRadius(paths, closed) {
+        // 路径小于2个就不执行计算
+        if (paths.length < 2) {
+            return;
+        }
+        // 路径少于3个闭合路径参数不起作用
+        if (paths.length < 3) {
+            closed = false;
+        }
+        // 清空圆角路径
+        this.pointerWidthRadius = [];
+        paths = cloneDeep(paths);
+        // 如果是闭合路径的话就头尾相连
+        if (closed) {
+            Object.defineProperties(paths, {
+                [-1]: {
+                    value: last(paths),
+                    configurable: false, // 此属性能否删除和修改
+                    enumerable: false, // 此属性能否被遍历
+                    writable: false // 此属性的值能否修改
+                },
+                [paths.length]: {
+                    value: first(paths),
+                    configurable: false, // 此属性能否删除和修改
+                    enumerable: false, // 此属性能否被遍历
+                    writable: false // 此属性的值能否修改
+                }
+            });
+        }
+        paths.map((P, i) => {
+            const { vector3, radius = 0.1, segments = 0, scale = { x: 1, y: 1 } } = P;
+            //当前点位置前后都有点时就可以做圆角计算
+            if (paths[i - 1] && paths[i + 1]) {
+                // 第一个向量
+                let v1 = ExtrudeMesh.temp1Vector3
+                    .set(...vector3)
+                    .sub(ExtrudeMesh.tempVector3.set(...paths[i - 1].vector3))
+                    .normalize()
+                    .clone();
+                // 第二个向量    
+                let v2 = ExtrudeMesh.temp2Vector3
+                    .set(...paths[i + 1].vector3)
+                    .sub(ExtrudeMesh.tempVector3.set(...vector3))
+                    .normalize()
+                    .clone();
+                // 夹角
+                let innerAngle = v1.clone().multiplyScalar(-1).angleTo(v2);
+                // 边长
+                let sideLength = radius / Math.tan(innerAngle / 2);
+                // 圆角的起点
+                let startP = new Vector3(...vector3).sub(v1.clone().multiplyScalar(sideLength));
+                // 圆角的终点
+                let endP = new Vector3(...vector3).add(v2.clone().multiplyScalar(sideLength));
+                // 圆角起点到终点的向量
+                let StoE = endP.clone().sub(startP);
+                // 弦长
+                let chordLength = radius / Math.sin(innerAngle / 2);
+                // 圆心位置
+                let circleCenter = v2
+                    .clone()
+                    .add(v1)
+                    .multiplyScalar(0.5)
+                    .sub(v1)
+                    .setLength(chordLength)
+                    .add(ExtrudeMesh.tempVector3.set(...vector3));
+                //向量2是否在 向量1的左边
+                let v2Inv1Left = ExtrudeMesh.temp1Vector3
+                    .set(-v1.z, 0, v1.x)
+                    .angleTo(ExtrudeMesh.temp2Vector3.set(v2.x, 0, v2.z))
+                    < (Math.PI / 2);
+                // XZ平面上的夹角
+                let innerAngleXZ = ExtrudeMesh.temp1Vector3
+                    .set(v1.x, 0, v1.z)
+                    .angleTo(ExtrudeMesh.temp2Vector3.set(v2.x, 0, v2.z));
+                // 如果当前点的位置在前后2点的连线上,就不进行分段计算 并且应用上一个点的矩阵
+                if (innerAngleXZ === 0) {
+                    let { x = 1, y = 1 } = scale;
+                    let lastPointMatrix = last(this.pointerWidthRadius).matrix;
+                    this.pointerWidthRadius.push({
+                        vector3,
+                        matrix: ExtrudeMesh.temp1Matrix4
+                            .identity()
+                            .extractRotation(ExtrudeMesh.temp2Matrix4.set(...lastPointMatrix))
+                            .multiply(ExtrudeMesh.temp3Matrix4
+                            .identity()
+                            .scale(ExtrudeMesh.temp1Vector3.set(1, y, x)))
+                            .transpose()
+                            .toArray()
+                    });
+                }
+                else if (segments === 0) { // 分段数为0时不分段 并在前后各加一个点
+                    let { x = 1, y = 1 } = scale;
+                    this.pointerWidthRadius.push({
+                        vector3,
+                        matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : vector3), (v2Inv1Left ? vector3 : circleCenter.toArray()), [1, y, x / Math.sin(innerAngle / 2)])
+                    });
+                }
+                else {
+                    for (let ii = 0; ii <= segments; ii++) {
+                        // 圆角计算的第n个点的角度
+                        let Aa = ii * ((Math.PI - innerAngle) / segments);
+                        //半径对角
+                        let Cc = Math.PI - Aa - (innerAngle / 2);
+                        //圆角分段的弦长
+                        let a = radius * Math.sin(Aa) / Math.sin(Cc);
+                        // 每段圆角的弦长
+                        let StoEvector = StoE.clone().setLength(a).add(startP);
+                        // 当前点的位置
+                        let ridiusP = StoEvector
+                            .clone()
+                            .sub(circleCenter)
+                            .setLength(radius)
+                            .add(circleCenter);
+                        let { x: preX = 1, y: preY = 1 } = get(paths[i - 1], ["scale"]) || {};
+                        let { x: nextX = 1, y: nextY = 1 } = get(paths[i + 1], ["scale"]) || {};
+                        let { x = 1, y = 1 } = scale;
+                        // 缩放值过渡计算
+                        x = this.computerGradient([(preX + x) / 2, x, (x + nextX) / 2], ii / segments);
+                        y = this.computerGradient([(preY + y) / 2, y, (y + nextY) / 2], ii / segments);
+                        // 添加一个带矩阵的点
+                        this.pointerWidthRadius.push({
+                            vector3: ridiusP.toArray(),
+                            matrix: this.computerMatrix((v2Inv1Left ? circleCenter.toArray() : ridiusP.toArray()), (v2Inv1Left ? ridiusP.toArray() : circleCenter.toArray()), [1, y, x])
+                        });
+                    }
+                }
+            }
+            else {
+                // 最后一个位置
+                if (i === paths.length - 1) {
+                    // 如果是闭合的话 就把第一个点的位置加入最后后面
+                    if (closed) {
+                        this.pointerWidthRadius.push(first(this.pointerWidthRadius));
+                    }
+                    else {
+                        // 如果路径未闭合并且遍历到最后一个时特殊处理
+                        let lastPoint = last(this.pointerWidthRadius);
+                        // 在没有闭合的情况下添加第一个点的位置
+                        let v = ExtrudeMesh.temp1Vector3
+                            .set(...vector3)
+                            .sub(ExtrudeMesh.temp3Vector3.set(...lastPoint.vector3))
+                            .normalize();
+                        let lookAtPoint = ExtrudeMesh.temp2Vector3
+                            .set(v.z, 0, -v.x)
+                            .add(ExtrudeMesh.temp3Vector3.set(...vector3))
+                            .toArray();
+                        let { x = 1, y = 1 } = scale;
+                        this.pointerWidthRadius.push({
+                            vector3,
+                            matrix: this.computerMatrix(vector3, lookAtPoint, [1, y, x])
+                        });
+                    }
+                }
+                else {
+                    let { x = 1, y = 1 } = scale;
+                    // 在没有闭合的情况下添加第一个点的位置
+                    let v2 = ExtrudeMesh.temp1Vector3
+                        .set(...paths[i + 1].vector3)
+                        .sub(ExtrudeMesh.temp2Vector3.set(...vector3))
+                        .normalize();
+                    let lookAtPoint = ExtrudeMesh.temp1Vector3
+                        .set(v2.z, 0, -v2.x)
+                        .add(ExtrudeMesh.temp2Vector3.set(...vector3))
+                        .toArray();
+                    this.pointerWidthRadius.push({
+                        vector3,
+                        matrix: this.computerMatrix(vector3, lookAtPoint, [1, y, x])
+                    });
+                }
+            } // else
+        });
+    }
+    // 计算三维路径的总长度
+    computerPathLength(points) {
+        let length = 0;
+        points.map((p, index) => {
+            if (index < points.length - 1) {
+                ExtrudeMesh.temp1Vector3.set(...p);
+                ExtrudeMesh.temp2Vector3.set(...points[index + 1]);
+                length += ExtrudeMesh.temp1Vector3.distanceTo(ExtrudeMesh.temp2Vector3);
+            }
+        });
+        return length;
+    }
+    // 通过一条线段计算挤出模型的各个顶点的位置和 uv坐标
+    setExtrudeMesh(startP, // 起点位置
+    startMatrix4, // 起点位置的矩阵
+    endP, // 终点位置
+    endMatrix4, // 终点位置的矩阵
+    uvx, // uv.x 的起始位置
+    shapePath) {
+        // 计算二维路径的总长度 作为uv坐标的边长
+        let shapePathLength = this.computerPathLength(shapePath.map(p => [...p, 0]));
+        // 挤出长度
+        let extrudeLength = this.computerPathLength([startP, endP]);
+        // 网格模型每个点
+        let geometryPoint = [];
+        // 网格模型每个点对应的uv坐标
+        let uvPoint = [];
+        shapePath.map((P, index) => {
+            if (index < shapePath.length - 1) {
+                // 计算出矩形面的4个顶点
+                let Pa = ExtrudeMesh.tempVector3
+                    .set(0, P[1], -P[0])
+                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...startMatrix4))
+                    .add(ExtrudeMesh.temp1Vector3.set(...startP))
+                    .toArray();
+                let Pb = ExtrudeMesh.tempVector3
+                    .set(0, shapePath[index + 1][1], -shapePath[index + 1][0])
+                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...startMatrix4))
+                    .add(ExtrudeMesh.temp1Vector3.set(...startP))
+                    .toArray();
+                let Pc = ExtrudeMesh.tempVector3
+                    .set(0, shapePath[index + 1][1], -shapePath[index + 1][0])
+                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...endMatrix4))
+                    .add(ExtrudeMesh.temp1Vector3.set(...endP))
+                    .toArray();
+                let Pd = ExtrudeMesh.tempVector3
+                    .set(0, P[1], -P[0])
+                    .applyMatrix4(ExtrudeMesh.temp1Matrix4.set(...endMatrix4))
+                    .add(ExtrudeMesh.temp1Vector3.set(...endP))
+                    .toArray();
+                // 组成矩形的2个三角面
+                geometryPoint.push(...Pa, ...Pb, ...Pc, ...Pa, ...Pc, ...Pd);
+                // 计算出矩形面的4个顶点的uv坐标
+                // 当前位置的 uv.y 位置
+                let currentUvy = this.computerPathLength([first(shapePath), ...shapePath.slice(0, index + 1)].map(sP => [...sP, 0])) / shapePathLength;
+                // 下一个坐标的 uv.y 位置
+                let nextUvy = this.computerPathLength([first(shapePath), ...shapePath.slice(0, index + 2)].map(sP => [...sP, 0])) / shapePathLength;
+                let Pauv = [uvx / shapePathLength, currentUvy];
+                let Pbuv = [uvx / shapePathLength, nextUvy];
+                let Pcuv = [(uvx + extrudeLength) / shapePathLength, nextUvy];
+                let Pduv = [(uvx + extrudeLength) / shapePathLength, currentUvy];
+                uvPoint.push(...Pauv, ...Pbuv, ...Pcuv, ...Pauv, ...Pcuv, ...Pduv);
+            }
+        });
+        return { geometryPoint, uvPoint };
+    }
+    //设置模型
+    updateGeometry(props) {
+        const { paths, shapePath, closed } = props;
+        this.shapePathWidth = Math.max(...shapePath.map(path => path[0])) - Math.min(...shapePath.map(path => path[0]));
+        // 计算圆角路径
+        this.computerPointerWidthRadius(paths, closed);
+        //网格模型的每个顶点位置
+        let geometryPoint = [];
+        // 网格模型每个点对应的uv坐标
+        let uvPoint = [];
+        for (let i = 0; i < this.pointerWidthRadius.length - 1; i++) {
+            let Point1 = this.pointerWidthRadius[i];
+            let Point2 = this.pointerWidthRadius[i + 1];
+            let uvx = this.computerPathLength(this.pointerWidthRadius.slice(0, i + 1).map(p => p.vector3));
+            const { geometryPoint: geo, uvPoint: uv } = this.setExtrudeMesh(Point1.vector3, Point1.matrix, Point2.vector3, Point2.matrix, uvx, shapePath);
+            // 把挤出的网格模型的顶点收集起来
+            geometryPoint.push(...geo);
+            // 把挤出的网格模型顶点的uv坐标收集起来
+            uvPoint.push(...uv);
+        }
+        let geometry = new BufferGeometry();
+        // 修改模型
+        let positionArray = new Float32Array(geometryPoint);
+        let position = new BufferAttribute(positionArray, 3, false);
+        geometry.setAttribute("position", position);
+        let uvArray = new Float32Array(uvPoint);
+        let uv = new BufferAttribute(uvArray, 2, false);
+        geometry.setAttribute("uv", uv);
+        // 计算顶点法线
+        geometry.computeVertexNormals();
+        this.geometry.dispose();
+        this.geometry = geometry;
+        this.dispatchEvent({ type: "loaded" });
+    }
+}