@galacean/effects-plugin-editor-gizmo 1.2.3 → 2.0.0-alpha.1

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects player editor gizmo plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 茂安,旻诺
- * Version: v1.2.3
+ * Version: v2.0.0-alpha.1
  */
 
 'use strict';
@@ -342,341 +342,175 @@ function createGizmoShader(marcos, shader, shaderType, level) {
     return effects.createShaderWithMarcos(marcos, newShader, shaderType, level);
 }
 
-var Euler$1 = effects.math.Euler, Vector3$7 = effects.math.Vector3, Matrix4$5 = effects.math.Matrix4;
-var rectSize = 0.04;
-var DEG2RAD = Math.PI / 180;
-function arcPath(radius, arc, options) {
-    if (options === void 0) { options = {}; }
-    var plane = options.plane, _a = options.translate, translate = _a === void 0 ? [0, 0, 0] : _a, _b = options.rotate, rotate = _b === void 0 ? [0, 0, 0] : _b;
-    var rotMat4 = Euler$1.fromArray(rotate).negate().toMatrix4(new Matrix4$5());
-    var points = [];
-    var indices = [];
-    addPoint(radius, 0);
-    var i = 1;
-    for (; i <= arc; i++) {
-        var angle = i * DEG2RAD;
-        indices.push(i - 1, i);
-        addPoint(Math.cos(angle) * radius, Math.sin(angle) * radius);
+var Matrix4$5 = effects.math.Matrix4, Vector2$2 = effects.math.Vector2;
+function distanceOfPointAndLine(point, line) {
+    //三角形三个边长
+    var AC = new Vector2$2();
+    var BC = new Vector2$2();
+    var AB = new Vector2$2();
+    AC.subtractVectors(point, line[0]);
+    BC.subtractVectors(point, line[1]);
+    AB.subtractVectors(line[1], line[0]);
+    var lengthAC = AC.length();
+    var lengthBC = BC.length();
+    var lengthAB = AB.length();
+    //利用海伦公式计算三角形面积
+    //周长的一半
+    var P = (lengthAC + lengthBC + lengthAB) / 2;
+    var allArea = Math.abs(Math.sqrt(P * (P - lengthAC) * (P - lengthBC) * (P - lengthAB)));
+    //普通公式计算三角形面积反推点到线的垂直距离
+    var distance = (2 * allArea) / lengthAB;
+    var l1 = Math.sqrt(Math.pow(lengthAC, 2) - Math.pow(distance, 2));
+    var l2 = Math.sqrt(Math.pow(lengthBC, 2) - Math.pow(distance, 2));
+    var isInLine = false;
+    if (l1 <= lengthAB && l2 <= lengthAB) {
+        isInLine = true;
     }
     return {
-        points: points,
-        indices: indices,
+        distance: distance,
+        isInLine: isInLine,
     };
-    function addPoint(cos, sin) {
-        var point = new Vector3$7();
-        if (plane === 'xz') {
-            point.set(cos, 0, sin);
-        }
-        else if (plane === 'yz') {
-            point.set(0, cos, sin);
-        }
-        else {
-            point.set(cos, sin, 0);
-        }
-        rotMat4.transformNormal(point);
-        points.push(point.add(translate));
-    }
 }
-function line(p0, p1) {
-    return {
-        points: [
-            Vector3$7.fromArray(p0),
-            Vector3$7.fromArray(p1),
-        ],
-        indices: [0, 1],
-    };
+function projectionOfPointAndLine(point, line) {
+    var AC = new Vector2$2();
+    var BC = new Vector2$2();
+    var AB = new Vector2$2();
+    var line0 = line[0].toVector2();
+    var line1 = line[1].toVector2();
+    AC.subtractVectors(point, line0);
+    BC.subtractVectors(point, line1);
+    AB.subtractVectors(line1, line0);
+    var lengthAC = AC.length();
+    var lengthBC = BC.length();
+    var lengthAB = AB.length();
+    //利用海伦公式计算三角形面积
+    //周长的一半
+    var P = (lengthAC + lengthBC + lengthAB) / 2;
+    var allArea = Math.abs(Math.sqrt(P * (P - lengthAC) * (P - lengthBC) * (P - lengthAB)));
+    //普通公式计算三角形面积反推点到线的垂直距离
+    var distance = (2 * allArea) / lengthAB;
+    var l1 = Math.sqrt(Math.pow(lengthAC, 2) - Math.pow(distance, 2));
+    var l2 = Math.sqrt(Math.pow(lengthBC, 2) - Math.pow(distance, 2));
+    var worldAB = line[1].clone().subtract(line[0]);
+    var worldAP = worldAB.clone().multiply(l1 / (l1 + l2));
+    var worldP = line[0].clone().add(worldAP);
+    return worldP;
 }
-function box(width, height, depth, center) {
-    var w = width / 2;
-    var h = height / 2;
-    var d = depth / 2;
-    var myCenter = center !== null && center !== void 0 ? center : [0, 0, 0];
-    var points = [
-        [-w, h, -d], [-w, -h, -d], [-w, h, d], [-w, -h, d],
-        [w, h, -d], [w, -h, -d], [w, h, d], [w, -h, d],
-    ].map(function (item) {
-        return new Vector3$7(item[0] + myCenter[0], item[1] + myCenter[1], item[2] + myCenter[2]);
-    });
-    return {
-        points: points,
-        indices: [
-            0, 1, 1, 3, 3, 2, 2, 0,
-            4, 5, 5, 7, 7, 6, 6, 4,
-            0, 4, 2, 6, 3, 7, 1, 5,
-        ],
-    };
+function computeOrthographicOffCenter(left, right, bottom, top, near, far) {
+    var a = 1.0 / (right - left);
+    var b = 1.0 / (top - bottom);
+    var c = 1.0 / (far - near);
+    var tx = -(right + left) * a;
+    var ty = -(top + bottom) * b;
+    var tz = -(far + near) * c;
+    a *= 2.0;
+    b *= 2.0;
+    c *= -2.0;
+    return new Matrix4$5(a, 0.0, 0.0, 0.0, 
+    //
+    0.0, b, 0.0, 0.0, 
+    //
+    0.0, 0.0, c, 0.0, 
+    //
+    tx, ty, tz, 1.0);
 }
-function rect(width, height, pos) {
-    var w = width / 2;
-    var h = height / 2;
-    var points = [
-        new Vector3$7(-w, h, 0),
-        new Vector3$7(w, h, 0),
-        new Vector3$7(w, -h, 0),
-        new Vector3$7(-w, -h, 0),
-    ];
-    if (pos) {
-        points.forEach(function (vec) {
-            vec.add(pos);
+
+/**
+ * 下载图片
+ * @param imageUrl - 图片url
+ * @returns 图片对象
+ */
+function createImage(imageUrl) {
+    return __awaiter(this, void 0, void 0, function () {
+        var image;
+        return __generator(this, function (_a) {
+            image = new Image();
+            image.src = imageUrl;
+            return [2 /*return*/, new Promise(function (resolve, reject) {
+                    image.onload = function () {
+                        resolve(image);
+                    };
+                    image.onerror = reject;
+                })];
         });
-    }
-    return {
-        points: points,
-        indices: [
-            0, 1, 1, 2, 2, 3, 3, 0,
-        ],
-    };
+    });
 }
-function combineGeometries(geometries) {
-    var points = [];
-    var indices = [];
-    var _loop_1 = function (i, indicesBase) {
-        var geometry = geometries[i];
-        if (geometry) {
-            geometry.points.forEach(function (point) {
-                points.push(point.x, point.y, point.z);
-            });
-            geometry.indices.forEach(function (index) { return indices.push(index + indicesBase); });
-            indicesBase += geometry.points.length;
-        }
-        out_indicesBase_1 = indicesBase;
-    };
-    var out_indicesBase_1;
-    for (var i = 0, indicesBase = 0; i < geometries.length; i++) {
-        _loop_1(i, indicesBase);
-        indicesBase = out_indicesBase_1;
+/**
+ * 创建 Texture 对象
+ * @param engine - engine 对象
+ * @param image - 图片对象
+ * @returns 纹理
+ */
+function createTexture(engine, image, hookDestroy) {
+    var texture = effects.Texture.create(engine, { image: image });
+    if (hookDestroy) {
+        texture.dispose = effects.noop;
     }
-    return {
-        points: new Float32Array(points),
-        indices: new Uint16Array(indices),
-    };
+    return texture;
 }
-var Shapes = {
-    Texture: function (arg) {
-        var ret = [];
-        if (arg.detail) {
-            var anchors = arg.detail.anchors;
-            var block = arg.detail.block;
-            var width = arg.width;
-            var height = arg.height;
-            for (var i = 0; i < anchors.length; i += 2) {
-                ret.push(rect(block[0] * width, block[1] * height, [
-                    width * (anchors[i] - 0.5),
-                    height * (anchors[i + 1] - 0.5),
-                    0,
-                ]));
-            }
+/**
+ * 移动到距离目标点指定距离的位置
+ * @param targetPos - 目标点
+ * @param currentPos - 当前点
+ * @returns 指定点
+ */
+function moveToPointWidthFixDistance(targetPos, currentPos) {
+    var vecCameraItem = currentPos.clone().subtract(targetPos);
+    var normalVecCameraItem = vecCameraItem.clone().normalize();
+    var scalerVecCameraItem = normalVecCameraItem.clone().multiply(20);
+    var vecScalerItem = vecCameraItem.clone().subtract(scalerVecCameraItem);
+    var vecItemScaler = vecScalerItem.clone().multiply(-1);
+    return currentPos.clone().add(vecItemScaler);
+}
+
+/**
+ * 基础几何数据[抽象类，不可以直接用来初始化]
+ */
+var GeometryData = /** @class */ (function () {
+    function GeometryData() {
+        this.points = [];
+        this.uvs = [];
+        this.normals = [];
+        this.indices = [];
+    }
+    /**
+     * 构件 XY 平面圆（圆心为(0, 0, z)）
+     * @param radius - 圆半径
+     * @param z - z 值
+     * @param segments - 圆精度
+     * @param thetaStart - 起始弧度
+     * @param thetaLength - 终止弧度
+     * @param startIndex - 索引起始值
+     * @param points - 点数据
+     * @param indices - 索引数据
+     */
+    GeometryData.prototype.createXYPlaneCircle = function (radius, z, segments, thetaStart, thetaLength, startIndex, points, indices) {
+        for (var i = 0; i < segments; i++) {
+            var theta = thetaStart + i * thetaLength / segments;
+            var x = radius * Math.cos(theta);
+            var y = radius * Math.sin(theta);
+            points.push(x, y, z);
+            indices.push(startIndex + i, startIndex + (i + 1) % segments);
         }
-        else {
-            ret.unshift(Shapes.Rectangle(arg)[0]);
-        }
-        return ret;
-    },
-    Circle: function (arg) {
-        var radius = arg.radius, arc = arg.arc;
-        return [
-            arcPath(radius, arc),
-            arc !== 360 && line([0, 0, 0], [radius, 0, 0]),
-            arc !== 360 && line([0, 0, 0], [Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0]),
-        ];
-    },
-    Box: function (arg) {
-        var width = arg.width, height = arg.height, depth = arg.depth, center = arg.center;
-        var data = box(width, height, depth, center);
-        return [data];
-    },
-    Sphere: function (arg) {
-        var radius = arg.radius, arc = arg.arc;
-        var ret = [
-            line([0, 0, -radius], [0, 0, radius]),
-            arcPath(radius, arc > 180 ? 360 : 180, { plane: 'xz', rotate: [0, 90, 0] }),
-            arcPath(radius, arc, { plane: 'xy' }),
-            arcPath(radius, 180, { plane: 'xz', rotate: [0, 90, arc] }),
-        ];
-        if (arc > 90) {
-            ret.push(arcPath(radius, arc > 270 ? 360 : 180, { plane: 'yz', rotate: [-90, 0, 0] }));
-        }
-        return ret;
-    },
-    Hemisphere: function (arg) {
-        var radius = arg.radius, arc = arg.arc;
-        var ret = [
-            line([0, 0, radius], [0, 0, 0]),
-            line([arc > 180 ? -radius : 0, 0, 0], [radius, 0, 0]),
-            arg > 90 && line([0, arc > 270 ? -radius : 0, 0], [0, radius, 0]),
-            arcPath(radius, (arc > 180 ? 360 : 180) / 2, { plane: 'xz' }),
-            arcPath(radius, arc, { plane: 'xy' }),
-            arcPath(radius, 90, { plane: 'xz', rotate: [0, 0, arc] }),
-            line([0, 0, 0], [Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0]),
-        ];
-        if (arc > 90) {
-            ret.push(arcPath(radius, arc > 270 ? 180 : 90, { plane: 'yz' }));
-        }
-        return ret;
-    },
-    Cone: function (arg) {
-        var radius = arg.radius, arc = arg.arc;
-        var outerRadius = radius * Math.tan(arg.angle * DEG2RAD) + radius;
-        return [
-            arcPath(outerRadius, arc, { translate: [0, 0, radius] }),
-            line([radius, 0, 0], [outerRadius, 0, radius]),
-            arc > 90 && line([0, radius, 0], [0, outerRadius, radius]),
-            arc > 180 && line([-radius, 0, 0], [-outerRadius, 0, radius]),
-            arc > 270 && line([0, -radius, 0], [0, -outerRadius, radius]),
-            line([Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0], [Math.cos(arc * DEG2RAD) * outerRadius, Math.sin(arc * DEG2RAD) * outerRadius, radius]),
-        ].concat(Shapes.Circle(arg));
-    },
-    Edge: function (arg) {
-        var hw = arg.width / 2;
-        return [
-            line([-hw, 0, 0], [hw, 0, 0]),
-        ];
-    },
-    Rectangle: function (arg) {
-        return [
-            rect(arg.width, arg.height),
-        ];
-    },
-    RectangleEdge: function (arg) {
-        return [
-            rect(arg.width, arg.height),
-        ];
-    },
-    Donut: function (arg) {
-        var arc = arg.arc, radius = arg.radius, donutRadius = arg.donutRadius;
-        return [
-            arcPath(donutRadius, 360, { translate: [radius, 0, 0], rotate: [90, 0, 0] }),
-            arcPath(radius - donutRadius, arc),
-            arcPath(radius + donutRadius, arc),
-            arcPath(radius, arc, { translate: [0, 0, donutRadius] }),
-            arcPath(radius, arc, { translate: [0, 0, -donutRadius] }),
-            arc % 360 === 0 ? arcPath(donutRadius, 360, {
-                translate: [-radius, 0, 0],
-                rotate: [90, 0, 0],
-            }) : arcPath(donutRadius, 360, {
-                translate: [Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0],
-                rotate: [90, 0, arc],
-            }),
-        ];
-    },
-    path: function (arg) {
-        var positions = arg.keys;
-        var ret = [];
-        for (var i = 0; i < positions.length - 1; i++) {
-            ret.push(rect(rectSize, rectSize, positions[i]));
-            ret.push(line(positions[i], positions[i + 1]));
-        }
-        ret.push(rect(rectSize, rectSize, positions[positions.length - 1]));
-        return ret;
-    },
-};
-Shapes['0'] = Shapes.None;
-Shapes['1'] = Shapes.Sphere;
-Shapes['2'] = Shapes.Cone;
-Shapes['3'] = Shapes.Hemisphere;
-Shapes['4'] = Shapes.Circle;
-Shapes['5'] = Shapes.Donut;
-Shapes['6'] = Shapes.Rectangle;
-Shapes['7'] = Shapes.RectangleEdge;
-Shapes['8'] = Shapes.Edge;
-Shapes['9'] = Shapes.Texture;
-function createMeshFromShape(engine, args, options) {
-    var ret = Shapes[args.type || args.shape](args);
-    var geo = combineGeometries(ret);
-    return createMesh(engine, geo.points, geo.indices, options.color || [1, 0, 0], options.depthTest, args.shape);
-}
-function createMesh(engine, points, indices, color, depthTest, name) {
-    if (depthTest === void 0) { depthTest = false; }
-    var material = effects.Material.create(engine, {
-        uniformValues: {
-            u_color: new Float32Array(color),
-            u_model: new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]),
-        },
-        uniformSemantics: {
-            u_vp: 'VIEWPROJECTION',
-            u_et: 'EDITOR_TRANSFORM',
-        },
-        shader: {
-            shared: true,
-            fragment: "\n    precision mediump float;\n\n    uniform vec3 u_color;\n\n    void main(){\n      gl_FragColor = vec4(u_color,1.0);\n    }",
-            vertex: "precision highp float;\n\n    attribute vec3 a_Position;\n\n    uniform mat4 u_model;\n    uniform mat4 effects_MatrixVP;\n    uniform vec4 uEditorTransform;\n    void main(){\n      gl_Position = effects_MatrixVP * u_model * vec4(a_Position,1.0);\n      gl_Position = vec4(gl_Position.xy * uEditorTransform.xy + uEditorTransform.zw * gl_Position.w,gl_Position.zw);\n    }",
-        },
-    });
-    material.setVector3('u_color', Vector3$7.fromArray(color));
-    material.setMatrix('u_model', Matrix4$5.IDENTITY);
-    material.depthTest = depthTest;
-    material.stencilTest = false;
-    material.blending = false;
-    material.depthMask = true;
-    var geometry = effects.Geometry.create(engine, {
-        attributes: {
-            a_Position: {
-                size: 3,
-                data: points,
-            },
-        },
-        indices: {
-            data: indices,
-        },
-        mode: effects.glContext.LINES,
-        drawCount: indices.length,
-    });
-    return effects.Mesh.create(engine, {
-        name: name,
-        geometry: geometry,
-        material: material,
-        priority: 3000,
-    });
-}
-
-/**
- * 基础几何数据[抽象类，不可以直接用来初始化]
- */
-var GeometryData = /** @class */ (function () {
-    function GeometryData() {
-        this.points = [];
-        this.uvs = [];
-        this.normals = [];
-        this.indices = [];
-    }
-    /**
-     * 构件 XY 平面圆（圆心为(0, 0, z)）
-     * @param radius - 圆半径
-     * @param z - z 值
-     * @param segments - 圆精度
-     * @param thetaStart - 起始弧度
-     * @param thetaLength - 终止弧度
-     * @param startIndex - 索引起始值
-     * @param points - 点数据
-     * @param indices - 索引数据
-     */
-    GeometryData.prototype.createXYPlaneCircle = function (radius, z, segments, thetaStart, thetaLength, startIndex, points, indices) {
-        for (var i = 0; i < segments; i++) {
-            var theta = thetaStart + i * thetaLength / segments;
-            var x = radius * Math.cos(theta);
-            var y = radius * Math.sin(theta);
-            points.push(x, y, z);
-            indices.push(startIndex + i, startIndex + (i + 1) % segments);
-        }
-    };
-    /**
-     * 构件 XZ 平面圆（圆心为(0, y, 0)）
-     * @param radius - 圆半径
-     * @param y - y 值
-     * @param segments - 圆精度
-     * @param thetaStart - 起始弧度
-     * @param thetaLength - 终止弧度
-     * @param startIndex - 索引起始值
-     * @param points - 点数据
-     * @param indices - 索引数据
-     */
-    GeometryData.prototype.createXZPlaneCircle = function (radius, y, segments, thetaStart, thetaLength, startIndex, points, indices) {
-        for (var i = 0; i < segments; i++) {
-            var theta = thetaStart + i * thetaLength / segments;
-            var x = radius * Math.cos(theta);
-            var z = radius * Math.sin(theta);
-            points.push(x, y, z);
-            indices.push(startIndex + i, startIndex + (i + 1) % segments);
+    };
+    /**
+     * 构件 XZ 平面圆（圆心为(0, y, 0)）
+     * @param radius - 圆半径
+     * @param y - y 值
+     * @param segments - 圆精度
+     * @param thetaStart - 起始弧度
+     * @param thetaLength - 终止弧度
+     * @param startIndex - 索引起始值
+     * @param points - 点数据
+     * @param indices - 索引数据
+     */
+    GeometryData.prototype.createXZPlaneCircle = function (radius, y, segments, thetaStart, thetaLength, startIndex, points, indices) {
+        for (var i = 0; i < segments; i++) {
+            var theta = thetaStart + i * thetaLength / segments;
+            var x = radius * Math.cos(theta);
+            var z = radius * Math.sin(theta);
+            points.push(x, y, z);
+            indices.push(startIndex + i, startIndex + (i + 1) % segments);
         }
     };
     /**
@@ -702,7 +536,7 @@ var GeometryData = /** @class */ (function () {
     return GeometryData;
 }());
 
-var Vector3$6 = effects.math.Vector3;
+var Vector3$8 = effects.math.Vector3;
 /**
  *
  */
@@ -752,7 +586,7 @@ var SphereGeometryData = /** @class */ (function (_super) {
                 var z = radius * Math.sin(phiStart + u * phiLength) * Math.sin(thetaStart + v * thetaLength);
                 _this.points.push(x, y, z);
                 // normal
-                var normal = new Vector3$6(x, y, z).normalize();
+                var normal = new Vector3$8(x, y, z).normalize();
                 (_a = _this.normals).push.apply(_a, __spreadArray([], __read(normal.toArray()), false));
                 // uv
                 _this.uvs.push(u + uOffset, 1 - v);
@@ -841,7 +675,7 @@ var BoxGeometryData = /** @class */ (function (_super) {
     return BoxGeometryData;
 }(GeometryData));
 
-var Vector3$5 = effects.math.Vector3;
+var Vector3$7 = effects.math.Vector3;
 /**
  *
  */
@@ -898,7 +732,7 @@ var CylinderGeometryData = /** @class */ (function (_super) {
                     var py = -v * height + halfHeight;
                     var pz = radius * cosTheta;
                     points.push(px, py, pz);
-                    var normal = new Vector3$5(sinTheta, slope, cosTheta).normalize();
+                    var normal = new Vector3$7(sinTheta, slope, cosTheta).normalize();
                     normals.push.apply(normals, __spreadArray([], __read(normal.toArray()), false));
                     uvs.push(u, 1 - v);
                     indexRow.push(index++);
@@ -986,7 +820,7 @@ var ConeGeometryData = /** @class */ (function (_super) {
     return ConeGeometryData;
 }(CylinderGeometryData));
 
-var Vector3$4 = effects.math.Vector3;
+var Vector3$6 = effects.math.Vector3;
 /**
  *
  */
@@ -1020,8 +854,8 @@ var TorusGeometryData = /** @class */ (function (_super) {
                 _this.points.push(px, py, pz);
                 var cx = radius * Math.cos(u);
                 var cy = radius * Math.sin(u);
-                var p = new Vector3$4(px, py, pz);
-                var c = new Vector3$4(cx, cy, 0);
+                var p = new Vector3$6(px, py, pz);
+                var c = new Vector3$6(cx, cy, 0);
                 var normal = p.subtract(c).normalize();
                 (_a = _this.normals).push.apply(_a, __spreadArray([], __read(normal.toArray()), false));
                 _this.uvs.push(i / tubularSegments);
@@ -1094,7 +928,7 @@ var PlaneGeometryData = /** @class */ (function (_super) {
     return PlaneGeometryData;
 }(GeometryData));
 
-var Euler = effects.math.Euler, Vector3$3 = effects.math.Vector3, Matrix4$4 = effects.math.Matrix4;
+var Euler$1 = effects.math.Euler, Vector3$5 = effects.math.Vector3, Matrix4$4 = effects.math.Matrix4;
 /**
  *
  */
@@ -1116,11 +950,11 @@ var FrustumGeometryData = /** @class */ (function (_super) {
         var ratio = aspect;
         var halfY = far * Math.tan(fovY / 2);
         var halfX = halfY * ratio;
-        var point1 = new Vector3$3(halfX, halfY, far);
-        var point2 = new Vector3$3(-halfX, halfY, far);
-        var point3 = new Vector3$3(-halfX, -halfY, far);
-        var point4 = new Vector3$3(halfX, -halfY, far);
-        var matrix = Euler.fromArray(rotation).toMatrix4(new Matrix4$4());
+        var point1 = new Vector3$5(halfX, halfY, far);
+        var point2 = new Vector3$5(-halfX, halfY, far);
+        var point3 = new Vector3$5(-halfX, -halfY, far);
+        var point4 = new Vector3$5(halfX, -halfY, far);
+        var matrix = Euler$1.fromArray(rotation).toMatrix4(new Matrix4$4());
         var result1 = matrix.transformPoint(point1).add(position);
         var result2 = matrix.transformPoint(point2).add(position);
         var result3 = matrix.transformPoint(point3).add(position);
@@ -1395,7 +1229,7 @@ axisIconMap.set('negX', "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABmC
 axisIconMap.set('negY', "data:image/png;base64,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\n  5ErkJggg==");
 axisIconMap.set('negZ', "data:image/png;base64,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");
 
-var Vector2$2 = effects.math.Vector2, Vector3$2 = effects.math.Vector3, Matrix4$3 = effects.math.Matrix4;
+var Vector2$1 = effects.math.Vector2, Vector3$4 = effects.math.Vector3, Matrix4$3 = effects.math.Matrix4;
 /**
  * 根据 gizmoSubType 类型创建几何体 Mesh
  * @param subType - gizmoSubType 类型
@@ -1548,9 +1382,9 @@ function getTriangle(geometry, transform) {
             var i0 = indices[i] * 3;
             var i1 = indices[i + 1] * 3;
             var i2 = indices[i + 2] * 3;
-            var p0 = new Vector3$2(points[i0], points[i0 + 1], points[i0 + 2]);
-            var p1 = new Vector3$2(points[i1], points[i1 + 1], points[i1 + 2]);
-            var p2 = new Vector3$2(points[i2], points[i2 + 1], points[i2 + 2]);
+            var p0 = new Vector3$4(points[i0], points[i0 + 1], points[i0 + 2]);
+            var p1 = new Vector3$4(points[i1], points[i1 + 1], points[i1 + 2]);
+            var p2 = new Vector3$4(points[i2], points[i2 + 1], points[i2 + 2]);
             result.push({
                 p0: mat4.projectPoint(p0),
                 p1: mat4.projectPoint(p1),
@@ -1781,7 +1615,7 @@ function createScaleMesh(engine, options, boundingMap) {
     createAxisBounding({ width: boxSize.width * 1.2, length: axisSize.width + boxSize.width / 2 }, boundingMap);
     boundingMap.set('center', {
         type: BoundingType.sphere,
-        center: new Vector3$2(),
+        center: new Vector3$4(),
         radius: Math.pow(Math.pow(centerBoxSize.width, 2) + Math.pow(centerBoxSize.height, 2) + Math.pow(centerBoxSize.depth, 2), 0.5) / 2,
     });
     return result;
@@ -2047,7 +1881,7 @@ function createSpriteMesh(engine, options, texture, boundingMap) {
  * @returns 纯色材质，无光照，无透明
  */
 function createMaterial(engine, color, depthTest) {
-    var myColor = color ? Vector3$2.fromArray(color) : new Vector3$2(255, 255, 255);
+    var myColor = color ? Vector3$4.fromArray(color) : new Vector3$4(255, 255, 255);
     var myDepthTest = depthTest ? depthTest : false;
     var material = effects.Material.create(engine, {
         uniformValues: {
@@ -2082,7 +1916,7 @@ function createMaterial(engine, color, depthTest) {
  * @returns
  */
 function createHideBackMaterial(engine, color, depthTest) {
-    var myColor = color ? Vector3$2.fromArray(color) : new Vector3$2(255, 255, 255);
+    var myColor = color ? Vector3$4.fromArray(color) : new Vector3$4(255, 255, 255);
     var myDepthTest = depthTest ? depthTest : false;
     var material = effects.Material.create(engine, {
         uniformValues: {
@@ -2105,8 +1939,8 @@ function createHideBackMaterial(engine, color, depthTest) {
     });
     material.setVector3('u_color', myColor);
     material.setMatrix('u_model', Matrix4$3.IDENTITY);
-    material.setVector3('u_cameraPos', Vector3$2.ZERO);
-    material.setVector3('u_center', Vector3$2.ZERO);
+    material.setVector3('u_cameraPos', Vector3$4.ZERO);
+    material.setVector3('u_center', Vector3$4.ZERO);
     material.depthTest = myDepthTest;
     material.stencilTest = false;
     material.blending = false;
@@ -2122,7 +1956,7 @@ function createHideBackMaterial(engine, color, depthTest) {
  * @returns
  */
 function createBlendMaterial(engine, color, depthTest, alpha) {
-    var myColor = color ? Vector3$2.fromArray(color) : new Vector3$2(255, 255, 255);
+    var myColor = color ? Vector3$4.fromArray(color) : new Vector3$4(255, 255, 255);
     var myDepthTest = depthTest ? depthTest : false;
     var myAlpha = alpha ? alpha : 1;
     var material = effects.Material.create(engine, {
@@ -2144,7 +1978,7 @@ function createBlendMaterial(engine, color, depthTest, alpha) {
         },
     });
     material.setVector3('u_color', myColor);
-    material.setVector2('u_alpha', new Vector2$2(myAlpha, 0));
+    material.setVector2('u_alpha', new Vector2$1(myAlpha, 0));
     material.setMatrix('u_model', Matrix4$3.IDENTITY);
     material.depthTest = myDepthTest;
     material.stencilTest = false;
@@ -2175,7 +2009,7 @@ function createSpriteMaterial(engine, data, depthTest) {
         },
     });
     material.setMatrix('u_model', Matrix4$3.IDENTITY);
-    material.setVector2('u_alpha', new Vector2$2(1, 0));
+    material.setVector2('u_alpha', new Vector2$1(1, 0));
     if (data instanceof effects.Texture) {
         material.setTexture('u_iconTex', data);
         // uniformValues.u_iconTex = data;
@@ -2183,10 +2017,10 @@ function createSpriteMaterial(engine, data, depthTest) {
     else {
         var color_1;
         if (data === undefined) {
-            color_1 = new Vector3$2(255, 255, 255);
+            color_1 = new Vector3$4(255, 255, 255);
         }
         else {
-            color_1 = Vector3$2.fromArray(data);
+            color_1 = Vector3$4.fromArray(data);
         }
         material.setVector3('u_color', color_1);
         // uniformValues.u_color = new Float32Array(color);
@@ -2207,238 +2041,578 @@ function createSpriteMaterial(engine, data, depthTest) {
 function createAxisBounding(size, boundingMap) {
     boundingMap.set('xAxis', {
         type: BoundingType.line,
-        points: [new Vector3$2(0, 0, 0), new Vector3$2(size.length, 0, 0)],
+        points: [new Vector3$4(0, 0, 0), new Vector3$4(size.length, 0, 0)],
         width: size.width,
     });
     boundingMap.set('yAxis', {
         type: BoundingType.line,
-        points: [new Vector3$2(0, 0, 0), new Vector3$2(0, size.length, 0)],
+        points: [new Vector3$4(0, 0, 0), new Vector3$4(0, size.length, 0)],
         width: size.width,
     });
     boundingMap.set('zAxis', {
         type: BoundingType.line,
-        points: [new Vector3$2(0, 0, 0), new Vector3$2(0, 0, size.length)],
+        points: [new Vector3$4(0, 0, 0), new Vector3$4(0, 0, size.length)],
         width: size.width,
     });
 }
 
-var Matrix4$2 = effects.math.Matrix4, Vector2$1 = effects.math.Vector2;
-function distanceOfPointAndLine(point, line) {
-    //三角形三个边长
-    var AC = new Vector2$1();
-    var BC = new Vector2$1();
-    var AB = new Vector2$1();
-    AC.subtractVectors(point, line[0]);
-    BC.subtractVectors(point, line[1]);
-    AB.subtractVectors(line[1], line[0]);
-    var lengthAC = AC.length();
-    var lengthBC = BC.length();
-    var lengthAB = AB.length();
-    //利用海伦公式计算三角形面积
-    //周长的一半
-    var P = (lengthAC + lengthBC + lengthAB) / 2;
-    var allArea = Math.abs(Math.sqrt(P * (P - lengthAC) * (P - lengthBC) * (P - lengthAB)));
-    //普通公式计算三角形面积反推点到线的垂直距离
-    var distance = (2 * allArea) / lengthAB;
-    var l1 = Math.sqrt(Math.pow(lengthAC, 2) - Math.pow(distance, 2));
-    var l2 = Math.sqrt(Math.pow(lengthBC, 2) - Math.pow(distance, 2));
-    var isInLine = false;
-    if (l1 <= lengthAB && l2 <= lengthAB) {
-        isInLine = true;
+var Euler = effects.math.Euler, Vector3$3 = effects.math.Vector3, Matrix4$2 = effects.math.Matrix4;
+var rectSize = 0.04;
+var DEG2RAD = Math.PI / 180;
+function arcPath(radius, arc, options) {
+    if (options === void 0) { options = {}; }
+    var plane = options.plane, _a = options.translate, translate = _a === void 0 ? [0, 0, 0] : _a, _b = options.rotate, rotate = _b === void 0 ? [0, 0, 0] : _b;
+    var rotMat4 = Euler.fromArray(rotate).negate().toMatrix4(new Matrix4$2());
+    var points = [];
+    var indices = [];
+    addPoint(radius, 0);
+    var i = 1;
+    for (; i <= arc; i++) {
+        var angle = i * DEG2RAD;
+        indices.push(i - 1, i);
+        addPoint(Math.cos(angle) * radius, Math.sin(angle) * radius);
     }
     return {
-        distance: distance,
-        isInLine: isInLine,
+        points: points,
+        indices: indices,
     };
+    function addPoint(cos, sin) {
+        var point = new Vector3$3();
+        if (plane === 'xz') {
+            point.set(cos, 0, sin);
+        }
+        else if (plane === 'yz') {
+            point.set(0, cos, sin);
+        }
+        else {
+            point.set(cos, sin, 0);
+        }
+        rotMat4.transformNormal(point);
+        points.push(point.add(translate));
+    }
 }
-function projectionOfPointAndLine(point, line) {
-    var AC = new Vector2$1();
-    var BC = new Vector2$1();
-    var AB = new Vector2$1();
-    var line0 = line[0].toVector2();
-    var line1 = line[1].toVector2();
-    AC.subtractVectors(point, line0);
-    BC.subtractVectors(point, line1);
-    AB.subtractVectors(line1, line0);
-    var lengthAC = AC.length();
-    var lengthBC = BC.length();
-    var lengthAB = AB.length();
-    //利用海伦公式计算三角形面积
-    //周长的一半
-    var P = (lengthAC + lengthBC + lengthAB) / 2;
-    var allArea = Math.abs(Math.sqrt(P * (P - lengthAC) * (P - lengthBC) * (P - lengthAB)));
-    //普通公式计算三角形面积反推点到线的垂直距离
-    var distance = (2 * allArea) / lengthAB;
-    var l1 = Math.sqrt(Math.pow(lengthAC, 2) - Math.pow(distance, 2));
-    var l2 = Math.sqrt(Math.pow(lengthBC, 2) - Math.pow(distance, 2));
-    var worldAB = line[1].clone().subtract(line[0]);
-    var worldAP = worldAB.clone().multiply(l1 / (l1 + l2));
-    var worldP = line[0].clone().add(worldAP);
-    return worldP;
-}
-function computeOrthographicOffCenter(left, right, bottom, top, near, far) {
-    var a = 1.0 / (right - left);
-    var b = 1.0 / (top - bottom);
-    var c = 1.0 / (far - near);
-    var tx = -(right + left) * a;
-    var ty = -(top + bottom) * b;
-    var tz = -(far + near) * c;
-    a *= 2.0;
-    b *= 2.0;
-    c *= -2.0;
-    return new Matrix4$2(a, 0.0, 0.0, 0.0, 
-    //
-    0.0, b, 0.0, 0.0, 
-    //
-    0.0, 0.0, c, 0.0, 
-    //
-    tx, ty, tz, 1.0);
+function line(p0, p1) {
+    return {
+        points: [
+            Vector3$3.fromArray(p0),
+            Vector3$3.fromArray(p1),
+        ],
+        indices: [0, 1],
+    };
 }
-
-var Matrix4$1 = effects.math.Matrix4; effects.math.Vector2; var Vector3$1 = effects.math.Vector3;
-/**
- * 线条包围盒射线检测算法
- * @param out - 射线与包围盒交点位置
- * @param pointInCanvas - 归一化的画布交互点坐标
- * @param points - 线条包围盒两端点位置
- * @param radius - 线条包围盒辐射半径
- * @param camera - 相机对象
- * @returns 射线与包围盒交点位置 | undefined
- */
-function intersectRayLine(out, pointInCanvas, points, radius, worldMat4, camera) {
-    // 构造一个辐射半径边缘的点 radiusPoint
-    var up = new Vector3$1(worldMat4.elements[1], worldMat4.elements[5], worldMat4.elements[9]).normalize();
-    var radiusPoint = up.clone().multiply(radius);
-    radiusPoint.add(points[0]);
-    // 计算 start、end、radius 在屏幕空间上的投影
-    var mvpMat4 = camera.getModelViewProjection(new Matrix4$1(), worldMat4);
-    var screenStart = mvpMat4.projectPoint(points[0], new Vector3$1());
-    var screenEnd = mvpMat4.projectPoint(points[1], new Vector3$1());
-    var screenRadiusPoint = mvpMat4.projectPoint(radiusPoint, new Vector3$1());
-    var screenRadiusVector = screenRadiusPoint.clone().subtract(screenStart);
-    var screenRadius = screenRadiusVector.length();
-    // 计算屏幕交互点与线条的距离
-    var _a = distanceOfPointAndLine(pointInCanvas, [screenStart.toVector2(), screenEnd.toVector2()]), distance = _a.distance, isInLine = _a.isInLine;
-    if (distance <= screenRadius && isInLine) { // 距离小于阈值且交互点在线条上的投影位于线段内
-        // 计算交互点在线条上的投影并转换为世界坐标
-        var screenPosition = projectionOfPointAndLine(pointInCanvas, [screenStart, screenEnd]);
-        var inverseViewProjection = camera.getInverseViewProjectionMatrix();
-        inverseViewProjection.projectPoint(screenPosition, out);
-        return out;
-    }
+function box(width, height, depth, center) {
+    var w = width / 2;
+    var h = height / 2;
+    var d = depth / 2;
+    var myCenter = center !== null && center !== void 0 ? center : [0, 0, 0];
+    var points = [
+        [-w, h, -d], [-w, -h, -d], [-w, h, d], [-w, -h, d],
+        [w, h, -d], [w, -h, -d], [w, h, d], [w, -h, d],
+    ].map(function (item) {
+        return new Vector3$3(item[0] + myCenter[0], item[1] + myCenter[1], item[2] + myCenter[2]);
+    });
+    return {
+        points: points,
+        indices: [
+            0, 1, 1, 3, 3, 2, 2, 0,
+            4, 5, 5, 7, 7, 6, 6, 4,
+            0, 4, 2, 6, 3, 7, 1, 5,
+        ],
+    };
 }
-
-/**
- * 下载图片
- * @param imageUrl - 图片url
- * @returns 图片对象
- */
-function createImage(imageUrl) {
-    return __awaiter(this, void 0, void 0, function () {
-        var image;
-        return __generator(this, function (_a) {
-            image = new Image();
-            image.src = imageUrl;
-            return [2 /*return*/, new Promise(function (resolve, reject) {
-                    image.onload = function () {
-                        resolve(image);
-                    };
-                    image.onerror = reject;
-                })];
+function rect(width, height, pos) {
+    var w = width / 2;
+    var h = height / 2;
+    var points = [
+        new Vector3$3(-w, h, 0),
+        new Vector3$3(w, h, 0),
+        new Vector3$3(w, -h, 0),
+        new Vector3$3(-w, -h, 0),
+    ];
+    if (pos) {
+        points.forEach(function (vec) {
+            vec.add(pos);
         });
-    });
+    }
+    return {
+        points: points,
+        indices: [
+            0, 1, 1, 2, 2, 3, 3, 0,
+        ],
+    };
 }
-/**
- * 创建 Texture 对象
- * @param engine - engine 对象
- * @param image - 图片对象
- * @returns 纹理
- */
-function createTexture(engine, image, hookDestroy) {
-    var texture = effects.Texture.create(engine, { image: image });
-    if (hookDestroy) {
-        texture.dispose = effects.noop;
+function combineGeometries(geometries) {
+    var points = [];
+    var indices = [];
+    var _loop_1 = function (i, indicesBase) {
+        var geometry = geometries[i];
+        if (geometry) {
+            geometry.points.forEach(function (point) {
+                points.push(point.x, point.y, point.z);
+            });
+            geometry.indices.forEach(function (index) { return indices.push(index + indicesBase); });
+            indicesBase += geometry.points.length;
+        }
+        out_indicesBase_1 = indicesBase;
+    };
+    var out_indicesBase_1;
+    for (var i = 0, indicesBase = 0; i < geometries.length; i++) {
+        _loop_1(i, indicesBase);
+        indicesBase = out_indicesBase_1;
     }
-    return texture;
+    return {
+        points: new Float32Array(points),
+        indices: new Uint16Array(indices),
+    };
+}
+var Shapes = {
+    Texture: function (arg) {
+        var ret = [];
+        if (arg.detail) {
+            var anchors = arg.detail.anchors;
+            var block = arg.detail.block;
+            var width = arg.width;
+            var height = arg.height;
+            for (var i = 0; i < anchors.length; i += 2) {
+                ret.push(rect(block[0] * width, block[1] * height, [
+                    width * (anchors[i] - 0.5),
+                    height * (anchors[i + 1] - 0.5),
+                    0,
+                ]));
+            }
+        }
+        else {
+            ret.unshift(Shapes.Rectangle(arg)[0]);
+        }
+        return ret;
+    },
+    Circle: function (arg) {
+        var radius = arg.radius, arc = arg.arc;
+        return [
+            arcPath(radius, arc),
+            arc !== 360 && line([0, 0, 0], [radius, 0, 0]),
+            arc !== 360 && line([0, 0, 0], [Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0]),
+        ];
+    },
+    Box: function (arg) {
+        var width = arg.width, height = arg.height, depth = arg.depth, center = arg.center;
+        var data = box(width, height, depth, center);
+        return [data];
+    },
+    Sphere: function (arg) {
+        var radius = arg.radius, arc = arg.arc;
+        var ret = [
+            line([0, 0, -radius], [0, 0, radius]),
+            arcPath(radius, arc > 180 ? 360 : 180, { plane: 'xz', rotate: [0, 90, 0] }),
+            arcPath(radius, arc, { plane: 'xy' }),
+            arcPath(radius, 180, { plane: 'xz', rotate: [0, 90, arc] }),
+        ];
+        if (arc > 90) {
+            ret.push(arcPath(radius, arc > 270 ? 360 : 180, { plane: 'yz', rotate: [-90, 0, 0] }));
+        }
+        return ret;
+    },
+    Hemisphere: function (arg) {
+        var radius = arg.radius, arc = arg.arc;
+        var ret = [
+            line([0, 0, radius], [0, 0, 0]),
+            line([arc > 180 ? -radius : 0, 0, 0], [radius, 0, 0]),
+            arg > 90 && line([0, arc > 270 ? -radius : 0, 0], [0, radius, 0]),
+            arcPath(radius, (arc > 180 ? 360 : 180) / 2, { plane: 'xz' }),
+            arcPath(radius, arc, { plane: 'xy' }),
+            arcPath(radius, 90, { plane: 'xz', rotate: [0, 0, arc] }),
+            line([0, 0, 0], [Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0]),
+        ];
+        if (arc > 90) {
+            ret.push(arcPath(radius, arc > 270 ? 180 : 90, { plane: 'yz' }));
+        }
+        return ret;
+    },
+    Cone: function (arg) {
+        var radius = arg.radius, arc = arg.arc;
+        var outerRadius = radius * Math.tan(arg.angle * DEG2RAD) + radius;
+        return [
+            arcPath(outerRadius, arc, { translate: [0, 0, radius] }),
+            line([radius, 0, 0], [outerRadius, 0, radius]),
+            arc > 90 && line([0, radius, 0], [0, outerRadius, radius]),
+            arc > 180 && line([-radius, 0, 0], [-outerRadius, 0, radius]),
+            arc > 270 && line([0, -radius, 0], [0, -outerRadius, radius]),
+            line([Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0], [Math.cos(arc * DEG2RAD) * outerRadius, Math.sin(arc * DEG2RAD) * outerRadius, radius]),
+        ].concat(Shapes.Circle(arg));
+    },
+    Edge: function (arg) {
+        var hw = arg.width / 2;
+        return [
+            line([-hw, 0, 0], [hw, 0, 0]),
+        ];
+    },
+    Rectangle: function (arg) {
+        return [
+            rect(arg.width, arg.height),
+        ];
+    },
+    RectangleEdge: function (arg) {
+        return [
+            rect(arg.width, arg.height),
+        ];
+    },
+    Donut: function (arg) {
+        var arc = arg.arc, radius = arg.radius, donutRadius = arg.donutRadius;
+        return [
+            arcPath(donutRadius, 360, { translate: [radius, 0, 0], rotate: [90, 0, 0] }),
+            arcPath(radius - donutRadius, arc),
+            arcPath(radius + donutRadius, arc),
+            arcPath(radius, arc, { translate: [0, 0, donutRadius] }),
+            arcPath(radius, arc, { translate: [0, 0, -donutRadius] }),
+            arc % 360 === 0 ? arcPath(donutRadius, 360, {
+                translate: [-radius, 0, 0],
+                rotate: [90, 0, 0],
+            }) : arcPath(donutRadius, 360, {
+                translate: [Math.cos(arc * DEG2RAD) * radius, Math.sin(arc * DEG2RAD) * radius, 0],
+                rotate: [90, 0, arc],
+            }),
+        ];
+    },
+    path: function (arg) {
+        var positions = arg.keys;
+        var ret = [];
+        for (var i = 0; i < positions.length - 1; i++) {
+            ret.push(rect(rectSize, rectSize, positions[i]));
+            ret.push(line(positions[i], positions[i + 1]));
+        }
+        ret.push(rect(rectSize, rectSize, positions[positions.length - 1]));
+        return ret;
+    },
+};
+Shapes['0'] = Shapes.None;
+Shapes['1'] = Shapes.Sphere;
+Shapes['2'] = Shapes.Cone;
+Shapes['3'] = Shapes.Hemisphere;
+Shapes['4'] = Shapes.Circle;
+Shapes['5'] = Shapes.Donut;
+Shapes['6'] = Shapes.Rectangle;
+Shapes['7'] = Shapes.RectangleEdge;
+Shapes['8'] = Shapes.Edge;
+Shapes['9'] = Shapes.Texture;
+function createMeshFromShape(engine, args, options) {
+    var ret = Shapes[args.type || args.shape](args);
+    var geo = combineGeometries(ret);
+    return createMesh(engine, geo.points, geo.indices, options.color || [1, 0, 0], options.depthTest, args.shape);
 }
-/**
- * 移动到距离目标点指定距离的位置
- * @param targetPos - 目标点
- * @param currentPos - 当前点
- * @returns 指定点
- */
-function moveToPointWidthFixDistance(targetPos, currentPos) {
-    var vecCameraItem = currentPos.clone().subtract(targetPos);
-    var normalVecCameraItem = vecCameraItem.clone().normalize();
-    var scalerVecCameraItem = normalVecCameraItem.clone().multiply(20);
-    var vecScalerItem = vecCameraItem.clone().subtract(scalerVecCameraItem);
-    var vecItemScaler = vecScalerItem.clone().multiply(-1);
-    return currentPos.clone().add(vecItemScaler);
+function createMesh(engine, points, indices, color, depthTest, name) {
+    if (depthTest === void 0) { depthTest = false; }
+    var material = effects.Material.create(engine, {
+        uniformValues: {
+            u_color: new Float32Array(color),
+            u_model: new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]),
+        },
+        uniformSemantics: {
+            u_vp: 'VIEWPROJECTION',
+            u_et: 'EDITOR_TRANSFORM',
+        },
+        shader: {
+            shared: true,
+            fragment: "\n    precision mediump float;\n\n    uniform vec3 u_color;\n\n    void main(){\n      gl_FragColor = vec4(u_color,1.0);\n    }",
+            vertex: "precision highp float;\n\n    attribute vec3 a_Position;\n\n    uniform mat4 u_model;\n    uniform mat4 effects_MatrixVP;\n    uniform vec4 uEditorTransform;\n    void main(){\n      gl_Position = effects_MatrixVP * u_model * vec4(a_Position,1.0);\n      gl_Position = vec4(gl_Position.xy * uEditorTransform.xy + uEditorTransform.zw * gl_Position.w,gl_Position.zw);\n    }",
+        },
+    });
+    material.setVector3('u_color', Vector3$3.fromArray(color));
+    material.setMatrix('u_model', Matrix4$2.IDENTITY);
+    material.depthTest = depthTest;
+    material.stencilTest = false;
+    material.blending = false;
+    material.depthMask = true;
+    var geometry = effects.Geometry.create(engine, {
+        attributes: {
+            a_Position: {
+                size: 3,
+                data: points,
+            },
+        },
+        indices: {
+            data: indices,
+        },
+        mode: effects.glContext.LINES,
+        drawCount: indices.length,
+    });
+    return effects.Mesh.create(engine, {
+        name: name,
+        geometry: geometry,
+        material: material,
+        priority: 3000,
+    });
 }
 
+var Vector2 = effects.math.Vector2, Vector3$2 = effects.math.Vector3, Matrix4$1 = effects.math.Matrix4, Quaternion$1 = effects.math.Quaternion;
 var constants = effects.glContext;
-var Vector2 = effects.math.Vector2, Vector3 = effects.math.Vector3, Matrix4 = effects.math.Matrix4; effects.math.Ray; var Quaternion = effects.math.Quaternion;
-/**
- * 包围盒类型
- */
-var BoundingType;
-(function (BoundingType) {
-    BoundingType[BoundingType["box"] = 0] = "box";
-    BoundingType[BoundingType["sphere"] = 1] = "sphere";
-    BoundingType[BoundingType["triangle"] = 2] = "triangle";
-    BoundingType[BoundingType["line"] = 3] = "line";
-})(BoundingType || (BoundingType = {}));
-/**
- *
- */
-var GizmoVFXItem = /** @class */ (function (_super) {
-    __extends(GizmoVFXItem, _super);
-    function GizmoVFXItem() {
+var GizmoComponent = /** @class */ (function (_super) {
+    __extends(GizmoComponent, _super);
+    function GizmoComponent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.boundingMap = new Map();
-        _this.mat = Matrix4.fromIdentity();
+        _this.mat = Matrix4$1.fromIdentity();
         _this.wireframeMeshes = [];
         return _this;
     }
-    Object.defineProperty(GizmoVFXItem.prototype, "type", {
-        get: function () {
-            return GizmoVFXItemType;
-        },
-        set: function (t) {
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(GizmoVFXItem.prototype, "content", {
-        get: function () {
-            return this._content;
-        },
-        set: function (content) {
-        },
-        enumerable: false,
-        configurable: true
-    });
-    GizmoVFXItem.prototype.onConstructed = function (options) {
-        this.duration = 999;
-        var opt = options.content.options;
-        this.target = opt.target;
-        this.subType = opt.subType;
-        this.renderMode = opt.renderMode || this.getDefaultRenderMode();
-        this.size = opt.size || this.getDefaultSize();
-        this.depthTest = opt.depthTest;
-        var c = (opt.color || [255, 255, 255]);
-        this.color = [c[0] / 255, c[1] / 255, c[2] / 255];
-        if (options.content) {
-            this.transform = new effects.Transform(options.content.transform);
+    GizmoComponent.prototype.start = function () {
+        var e_1, _a, e_2, _b, e_3, _c;
+        try {
+            for (var _d = __values(this.item.composition.items), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var item = _e.value;
+                if (item.id === this.item.target.toString()) {
+                    this.targetItem = item;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        var targetItem = this.targetItem;
+        if (!targetItem) {
+            return;
+        }
+        var composition = this.item.composition;
+        try {
+            for (var _f = __values(composition.pluginSystem.plugins), _g = _f.next(); !_g.done; _g = _f.next()) {
+                var plugin = _g.value;
+                if (plugin.name === 'editor-gizmo') {
+                    this.gizmoPlugin = plugin;
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        var gizmoPlugin = this.gizmoPlugin;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
+        if (targetItem.type === '7' || !gizmoPlugin) {
+            return;
+        }
+        var gizmoVFXItemList = composition.loaderData.gizmoTarget[targetItem.id];
+        if (gizmoVFXItemList && gizmoVFXItemList.length > 0) {
+            try {
+                for (var gizmoVFXItemList_1 = __values(gizmoVFXItemList), gizmoVFXItemList_1_1 = gizmoVFXItemList_1.next(); !gizmoVFXItemList_1_1.done; gizmoVFXItemList_1_1 = gizmoVFXItemList_1.next()) {
+                    var gizmoVFXItem = gizmoVFXItemList_1_1.value;
+                    switch (gizmoVFXItem.subType) {
+                        case exports.GizmoSubType.particleEmitter:
+                            this.createParticleContent(targetItem, gizmoPlugin.meshToAdd);
+                            break;
+                        case exports.GizmoSubType.modelWireframe:
+                            this.needCreateModelContent = true;
+                            // gizmoVFXItem.createModelContent(targetItem, gizmoPlugin.meshToAdd);
+                            break;
+                        case exports.GizmoSubType.box:
+                        case exports.GizmoSubType.sphere:
+                        case exports.GizmoSubType.cylinder:
+                        case exports.GizmoSubType.cone:
+                        case exports.GizmoSubType.torus:
+                        case exports.GizmoSubType.sprite:
+                        case exports.GizmoSubType.frustum:
+                        case exports.GizmoSubType.directionLight:
+                        case exports.GizmoSubType.pointLight:
+                        case exports.GizmoSubType.spotLight:
+                        case exports.GizmoSubType.floorGrid:
+                            this.createBasicContent(targetItem, gizmoPlugin.meshToAdd, gizmoVFXItem.subType);
+                            break;
+                        case exports.GizmoSubType.camera:
+                        case exports.GizmoSubType.light:
+                            this.createBasicContent(targetItem, gizmoPlugin.meshToAdd, gizmoVFXItem.subType, iconTextures);
+                            break;
+                        case exports.GizmoSubType.rotation:
+                        case exports.GizmoSubType.scale:
+                        case exports.GizmoSubType.translation:
+                            this.createCombinationContent(targetItem, gizmoPlugin.meshToAdd, gizmoVFXItem.subType);
+                            break;
+                        case exports.GizmoSubType.viewHelper:
+                            this.createCombinationContent(targetItem, gizmoPlugin.meshToAdd, gizmoVFXItem.subType, iconTextures);
+                            break;
+                        case exports.GizmoSubType.boundingBox:
+                            this.createBoundingBoxContent(targetItem, gizmoPlugin.meshToAdd);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (gizmoVFXItemList_1_1 && !gizmoVFXItemList_1_1.done && (_c = gizmoVFXItemList_1.return)) _c.call(gizmoVFXItemList_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
+        composition.loaderData.gizmoItems.push(this.item);
+    };
+    GizmoComponent.prototype.update = function (dt) {
+        this.updateRenderData();
+    };
+    GizmoComponent.prototype.lateUpdate = function (dt) {
+        if (this.needCreateModelContent) {
+            this.createModelContent(this.targetItem, this.gizmoPlugin.meshToAdd);
+            this.needCreateModelContent = false;
+        }
+    };
+    GizmoComponent.prototype.updateRenderData = function () {
+        var e_4, _a;
+        var _b;
+        var item = this.item;
+        if (item.subType === exports.GizmoSubType.particleEmitter) { // 粒子发射器
+            if (this.targetItem && item.content) {
+                this.mat = this.targetItem.transform.getWorldMatrix();
+                item.content.material.setMatrix('u_model', this.mat);
+            }
+            if (item.wireframeMesh && this.targetItem) {
+                var particle = this.targetItem.content;
+                if (particle) {
+                    updateWireframeMesh(particle.particleMesh.mesh, item.wireframeMesh, WireframeGeometryType.quad);
+                    item.wireframeMesh.worldMatrix = particle.particleMesh.mesh.worldMatrix;
+                }
+            }
+        }
+        else if (item.subType === exports.GizmoSubType.modelWireframe) { // 模型线框
+            if (item.wireframeMesh && this.targetItem) {
+                // @ts-expect-error
+                var meshes = (_b = this.targetItem.getComponent(effects.RendererComponent)) === null || _b === void 0 ? void 0 : _b.content.mriMeshs;
+                var wireframeMeshes = this.wireframeMeshes;
+                if ((meshes === null || meshes === void 0 ? void 0 : meshes.length) > 0) {
+                    for (var i = 0; i < meshes.length; i++) {
+                        updateWireframeMesh(meshes[i], wireframeMeshes[i], WireframeGeometryType.triangle);
+                    }
+                }
+            }
+        }
+        else { // 几何体模型
+            if (this.targetItem) {
+                if (item.contents) { // 组合几何体
+                    // const targetTransform = this.targetItem.transform.clone();
+                    var worldPos = new Vector3$2();
+                    var worldQuat = new Quaternion$1();
+                    var worldScale = new Vector3$2(1, 1, 1);
+                    this.targetItem.transform.assignWorldTRS(worldPos, worldQuat);
+                    var targetTransform = new effects.Transform({
+                        position: worldPos,
+                        quat: worldQuat,
+                        scale: worldScale,
+                        valid: true,
+                    });
+                    // 移动\旋转\缩放gizmo去除近大远小
+                    if (item.subType === exports.GizmoSubType.rotation || item.subType === exports.GizmoSubType.scale || item.subType === exports.GizmoSubType.translation) {
+                        var camera = item.composition.camera;
+                        var cameraPos = camera.position || new Vector3$2();
+                        var itemPos = targetTransform.position;
+                        var newPos = moveToPointWidthFixDistance(cameraPos, itemPos);
+                        targetTransform.setPosition(newPos.x, newPos.y, newPos.z);
+                    }
+                    this.mat = targetTransform.getWorldMatrix();
+                    var center = targetTransform.position;
+                    try {
+                        for (var _c = __values(item.contents), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var _e = __read(_d.value, 2), mesh = _e[0], transform = _e[1];
+                            var worldMat4 = void 0;
+                            transform.parentTransform = targetTransform;
+                            var position = new Vector3$2();
+                            transform.assignWorldTRS(position);
+                            // 物体和中心点在屏幕空间上投影的距离
+                            var distanceToCneter = 100;
+                            var theta = 1;
+                            if (item.subType === exports.GizmoSubType.viewHelper) {
+                                // 正交投影只需要计算物体在XY平面上的投影与中心点的距离
+                                if (mesh.name === 'sprite') {
+                                    distanceToCneter = position.toVector2().distance(center.toVector2());
+                                    theta = item.boundingMap.get('posX').radius;
+                                }
+                                // 将物体挂到相机的transform上
+                                var fov = 30; // 指定fov角度
+                                var screenWidth = item.composition.renderer.getWidth();
+                                var screenHeight = item.composition.renderer.getHeight();
+                                var distance = 16; // 指定物体与相机的距离
+                                var width = 2 * Math.tan(fov * Math.PI / 360) * distance;
+                                var aspect = screenWidth / screenHeight;
+                                var height = width / aspect;
+                                var cameraModelMat4 = item.composition.camera.getInverseViewMatrix();
+                                var padding = item.size.padding || 1; // 指定viewHelper与屏幕右上角的边距
+                                var localMat = void 0;
+                                localMat = transform.getWorldMatrix();
+                                var worldTransform = new effects.Transform({
+                                    valid: true,
+                                });
+                                worldTransform.cloneFromMatrix(localMat);
+                                worldTransform.setPosition((position.x + width / 2) - padding, (position.y + height / 2) - padding, position.z);
+                                localMat = worldTransform.getWorldMatrix();
+                                worldMat4 = cameraModelMat4.clone().multiply(localMat);
+                                // 正交投影到屏幕上
+                                var proMat5 = computeOrthographicOffCenter(-width / 2, width / 2, -height / 2, height / 2, -distance, distance);
+                                mesh.material.setMatrix('_MatrixP', proMat5);
+                            }
+                            else {
+                                if (item.subType === exports.GizmoSubType.rotation) {
+                                    var cameraPos = item.composition.camera.position || [0, 0, 0];
+                                    mesh.material.setVector3('u_cameraPos', cameraPos);
+                                    mesh.material.setVector3('u_center', center);
+                                }
+                                worldMat4 = transform.getWorldMatrix();
+                                // TODO 计算物体和中心点在屏幕空间上投影的距离 distanceToCneter
+                            }
+                            mesh.material.setMatrix('u_model', worldMat4);
+                            // 使用distanceToCneter处理坐标轴旋转到中心点附近时的遮挡问题
+                            if (distanceToCneter < theta) {
+                                if (distanceToCneter < theta * 0.5) {
+                                    mesh.material.setVector2('u_alpha', new Vector2(0, 0));
+                                }
+                                else {
+                                    mesh.material.setVector2('u_alpha', new Vector2((2 / theta) * distanceToCneter - 1, 0));
+                                }
+                            }
+                        }
+                    }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                        }
+                        finally { if (e_4) throw e_4.error; }
+                    }
+                }
+                if (item.content) { // 基础几何体
+                    var worldPos = new Vector3$2();
+                    var worldQuat = new Quaternion$1();
+                    var worldSca = new Vector3$2(1, 1, 1);
+                    this.targetItem.transform.assignWorldTRS(worldPos, worldQuat);
+                    var targetTransform = new effects.Transform({
+                        position: worldPos,
+                        quat: worldQuat,
+                        scale: worldSca,
+                        valid: true,
+                    });
+                    if (item.subType === exports.GizmoSubType.light || item.subType === exports.GizmoSubType.camera) {
+                        var camera = item.composition.camera;
+                        var cameraPos = camera.position || new Vector3$2(0, 0, 0);
+                        var itemPos = targetTransform.position;
+                        var newPos = moveToPointWidthFixDistance(cameraPos, itemPos);
+                        targetTransform.setPosition(newPos.x, newPos.y, newPos.z);
+                    }
+                    this.mat = targetTransform.getWorldMatrix();
+                    item.content.material.setMatrix('u_model', targetTransform.getWorldMatrix());
+                }
+            }
         }
     };
     /**
      * 获取默认绘制模式
      * @returns 绘制模式常量
      */
-    GizmoVFXItem.prototype.getDefaultRenderMode = function () {
+    GizmoComponent.prototype.getDefaultRenderMode = function () {
         var result;
-        switch (this.subType) {
+        var item = this.item;
+        switch (item.subType) {
             case exports.GizmoSubType.particleEmitter:
             case exports.GizmoSubType.modelWireframe:
             case exports.GizmoSubType.frustum:
@@ -2458,9 +2632,10 @@ var GizmoVFXItem = /** @class */ (function (_super) {
      * 获取默认尺寸
      * @returns 几何体尺寸
      */
-    GizmoVFXItem.prototype.getDefaultSize = function () {
+    GizmoComponent.prototype.getDefaultSize = function () {
         var result = {};
-        switch (this.subType) {
+        var item = this.item;
+        switch (item.subType) {
             case exports.GizmoSubType.box:
                 result = { width: 1, height: 1, depth: 1 };
                 break;
@@ -2479,62 +2654,55 @@ var GizmoVFXItem = /** @class */ (function (_super) {
         }
         return result;
     };
-    GizmoVFXItem.prototype.createModelContent = function (item, meshesToAdd) {
+    GizmoComponent.prototype.createModelContent = function (item, meshesToAdd) {
         var _this = this;
         var _a;
-        var ms = item.content.mriMeshs;
-        var engine = (_a = this.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
+        var modelComponent = item.getComponent(effects.RendererComponent);
+        // @ts-expect-error
+        var ms = modelComponent.content.mriMeshs;
+        var engine = (_a = item.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
         effects.assertExist(engine);
         if (ms) {
             this.targetItem = item;
             this.wireframeMeshes = [];
             ms.forEach(function (m) {
-                var mesh = _this.wireframeMesh = createModeWireframe(engine, m, _this.color);
+                var mesh = _this.item.wireframeMesh = createModeWireframe(engine, m, _this.color);
                 _this.wireframeMeshes.push(mesh);
                 meshesToAdd.push(mesh);
             });
         }
     };
-    GizmoVFXItem.prototype.createParticleContent = function (item, meshesToAdd) {
-        var _a, _b;
-        var shape = (_a = item.particle) === null || _a === void 0 ? void 0 : _a.shape;
-        var engine = (_b = this.composition) === null || _b === void 0 ? void 0 : _b.renderer.engine;
+    GizmoComponent.prototype.createParticleContent = function (item, meshesToAdd) {
+        var _a;
+        var shape = item.props.content.shape;
+        var engine = (_a = this.item.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
         effects.assertExist(engine);
         this.targetItem = item;
         if (shape && shape.type) {
-            var mesh = this._content = createMeshFromShape(engine, shape, { color: this.color });
+            var mesh = this.item._content = createMeshFromShape(engine, shape, { color: this.color });
             meshesToAdd.push(mesh);
         }
-        // if (item.content?.particleMesh) {
-        //   const mesh = this.wireframeMesh = createParticleWireframe(engine, item.content.particleMesh.mesh, this.color);
-        //   meshesToAdd.push(mesh);
-        // }
-        if (effects.VFXItem.isSprite(item) || effects.VFXItem.isFilterSprite(item)) {
-            var color = this.color.slice();
-            var mesh = this.spriteMesh = item.createWireframeMesh(item.content, color);
-            this.wireframeMesh = mesh.mesh;
-            meshesToAdd.push(mesh.mesh);
-        }
     };
     /**
      * 创建 BoundingBox 几何体模型
      * @param item - VFXItem
      * @param meshesToAdd - 插件缓存的 Mesh 数组
      */
-    GizmoVFXItem.prototype.createBoundingBoxContent = function (item, meshesToAdd) {
+    GizmoComponent.prototype.createBoundingBoxContent = function (item, meshesToAdd) {
         var _a;
+        var gizmoItem = this.item;
         var shape = {
             shape: 'Box',
-            width: this.size.width,
-            height: this.size.height,
-            depth: this.size.depth,
-            center: this.size.center,
+            width: gizmoItem.size.width,
+            height: gizmoItem.size.height,
+            depth: gizmoItem.size.depth,
+            center: gizmoItem.size.center,
         };
-        var engine = (_a = this.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
+        var engine = (_a = gizmoItem.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
         effects.assertExist(engine);
         this.targetItem = item;
         if (shape) {
-            var mesh = this._content = createMeshFromShape(engine, shape, { color: this.color, depthTest: this.depthTest });
+            var mesh = gizmoItem._content = createMeshFromShape(engine, shape, { color: this.color, depthTest: this.depthTest });
             meshesToAdd.push(mesh);
         }
     };
@@ -2544,17 +2712,18 @@ var GizmoVFXItem = /** @class */ (function (_super) {
      * @param meshesToAdd - 插件缓存的 Mesh 数组
      * @param subType - GizmoSubType 类型
      */
-    GizmoVFXItem.prototype.createBasicContent = function (item, meshesToAdd, subType, iconTextures) {
+    GizmoComponent.prototype.createBasicContent = function (item, meshesToAdd, subType, iconTextures) {
         var _a;
+        var gizmoItem = this.item;
         var options = {
-            size: this.size,
+            size: gizmoItem.size,
             color: this.color,
             renderMode: this.renderMode,
             depthTest: this.depthTest,
         };
-        var engine = (_a = this.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
+        var engine = (_a = gizmoItem.composition) === null || _a === void 0 ? void 0 : _a.renderer.engine;
         effects.assertExist(engine);
-        var mesh = this._content = createMeshFromSubType(engine, subType, this.boundingMap, iconTextures, options);
+        var mesh = gizmoItem._content = createMeshFromSubType(engine, subType, gizmoItem.boundingMap, iconTextures, options);
         this.targetItem = item;
         meshesToAdd.push(mesh);
     };
@@ -2565,178 +2734,120 @@ var GizmoVFXItem = /** @class */ (function (_super) {
      * @param subType - GizmoSubType 类型
      * @param iconTextures - XYZ 图标纹理（viewHelper 专用）
      */
-    GizmoVFXItem.prototype.createCombinationContent = function (item, meshesToAdd, subType, iconTextures) {
-        var e_1, _a;
+    GizmoComponent.prototype.createCombinationContent = function (item, meshesToAdd, subType, iconTextures) {
+        var e_5, _a;
         var _b;
+        var gizmoItem = this.item;
         var options = {
-            size: this.size,
+            size: gizmoItem.size,
             renderMode: this.renderMode,
         };
-        var engine = (_b = this.composition) === null || _b === void 0 ? void 0 : _b.renderer.engine;
+        var engine = (_b = gizmoItem.composition) === null || _b === void 0 ? void 0 : _b.renderer.engine;
         effects.assertExist(engine);
-        this.contents = createMeshFromSubType(engine, subType, this.boundingMap, iconTextures, options);
+        gizmoItem.contents = createMeshFromSubType(engine, subType, gizmoItem.boundingMap, iconTextures, options);
         try {
-            for (var _c = __values(this.contents.keys()), _d = _c.next(); !_d.done; _d = _c.next()) {
+            for (var _c = __values(gizmoItem.contents.keys()), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var mesh = _d.value;
                 meshesToAdd.push(mesh);
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         this.targetItem = item;
     };
-    GizmoVFXItem.prototype.onItemUpdate = function () {
-    };
-    GizmoVFXItem.prototype.updateRenderData = function () {
-        var e_2, _a;
-        if (this.subType === exports.GizmoSubType.particleEmitter) { // 粒子发射器
-            if (this.targetItem && this.content) {
-                this.mat = this.targetItem.transform.getWorldMatrix();
-                this.content.material.setMatrix('u_model', this.mat);
-            }
-            if (this.spriteMesh) {
-                this.spriteMesh.updateItem(this.targetItem.content);
-            }
-            else if (this.wireframeMesh && this.targetItem) {
-                var particle = this.targetItem.content;
-                if (particle) {
-                    updateWireframeMesh(particle.particleMesh.mesh, this.wireframeMesh, WireframeGeometryType.quad);
-                    this.wireframeMesh.worldMatrix = particle.particleMesh.mesh.worldMatrix;
-                }
-            }
-        }
-        else if (this.subType === exports.GizmoSubType.modelWireframe) { // 模型线框
-            if (this.wireframeMesh && this.targetItem) {
-                var meshes = this.targetItem.content.mriMeshs;
-                var wireframeMeshes = this.wireframeMeshes;
-                if ((meshes === null || meshes === void 0 ? void 0 : meshes.length) > 0) {
-                    for (var i = 0; i < meshes.length; i++) {
-                        updateWireframeMesh(meshes[i], wireframeMeshes[i], WireframeGeometryType.triangle);
-                    }
-                }
-            }
-        }
-        else { // 几何体模型
-            if (this.targetItem) {
-                if (this.contents) { // 组合几何体
-                    // const targetTransform = this.targetItem.transform.clone();
-                    var worldPos = new Vector3();
-                    var worldQuat = new Quaternion();
-                    var worldScale = new Vector3(1, 1, 1);
-                    this.targetItem.transform.assignWorldTRS(worldPos, worldQuat);
-                    var targetTransform = new effects.Transform({
-                        position: worldPos,
-                        quat: worldQuat,
-                        scale: worldScale,
-                        valid: true,
-                    });
-                    // 移动\旋转\缩放gizmo去除近大远小
-                    if (this.subType === exports.GizmoSubType.rotation || this.subType === exports.GizmoSubType.scale || this.subType === exports.GizmoSubType.translation) {
-                        var camera = this.composition.camera;
-                        var cameraPos = camera.position || new Vector3();
-                        var itemPos = targetTransform.position;
-                        var newPos = moveToPointWidthFixDistance(cameraPos, itemPos);
-                        targetTransform.setPosition(newPos.x, newPos.y, newPos.z);
-                    }
-                    this.mat = targetTransform.getWorldMatrix();
-                    var center = targetTransform.position;
-                    try {
-                        for (var _b = __values(this.contents), _c = _b.next(); !_c.done; _c = _b.next()) {
-                            var _d = __read(_c.value, 2), mesh = _d[0], transform = _d[1];
-                            var worldMat4 = void 0;
-                            transform.parentTransform = targetTransform;
-                            var position = new Vector3();
-                            transform.assignWorldTRS(position);
-                            // 物体和中心点在屏幕空间上投影的距离
-                            var distanceToCneter = 100;
-                            var theta = 1;
-                            if (this.subType === exports.GizmoSubType.viewHelper) {
-                                // 正交投影只需要计算物体在XY平面上的投影与中心点的距离
-                                if (mesh.name === 'sprite') {
-                                    distanceToCneter = position.toVector2().distance(center.toVector2());
-                                    theta = this.boundingMap.get('posX').radius;
-                                }
-                                // 将物体挂到相机的transform上
-                                var fov = 30; // 指定fov角度
-                                var screenWidth = this.composition.renderer.getWidth();
-                                var screenHeight = this.composition.renderer.getHeight();
-                                var distance = 16; // 指定物体与相机的距离
-                                var width = 2 * Math.tan(fov * Math.PI / 360) * distance;
-                                var aspect = screenWidth / screenHeight;
-                                var height = width / aspect;
-                                var cameraModelMat4 = this.composition.camera.getInverseViewMatrix();
-                                var padding = this.size.padding || 1; // 指定viewHelper与屏幕右上角的边距
-                                var localMat = void 0;
-                                localMat = transform.getWorldMatrix();
-                                var worldTransform = new effects.Transform({
-                                    valid: true,
-                                });
-                                worldTransform.cloneFromMatrix(localMat);
-                                worldTransform.setPosition((position.x + width / 2) - padding, (position.y + height / 2) - padding, position.z);
-                                localMat = worldTransform.getWorldMatrix();
-                                worldMat4 = cameraModelMat4.clone().multiply(localMat);
-                                // 正交投影到屏幕上
-                                var proMat5 = computeOrthographicOffCenter(-width / 2, width / 2, -height / 2, height / 2, -distance, distance);
-                                mesh.material.setMatrix('_MatrixP', proMat5);
-                            }
-                            else {
-                                if (this.subType === exports.GizmoSubType.rotation) {
-                                    var cameraPos = this.composition.camera.position || [0, 0, 0];
-                                    mesh.material.setVector3('u_cameraPos', cameraPos);
-                                    mesh.material.setVector3('u_center', center);
-                                }
-                                worldMat4 = transform.getWorldMatrix();
-                                // TODO 计算物体和中心点在屏幕空间上投影的距离 distanceToCneter
-                            }
-                            mesh.material.setMatrix('u_model', worldMat4);
-                            // 使用distanceToCneter处理坐标轴旋转到中心点附近时的遮挡问题
-                            if (distanceToCneter < theta) {
-                                if (distanceToCneter < theta * 0.5) {
-                                    mesh.material.setVector2('u_alpha', new Vector2(0, 0));
-                                }
-                                else {
-                                    mesh.material.setVector2('u_alpha', new Vector2((2 / theta) * distanceToCneter - 1, 0));
-                                }
-                            }
-                        }
-                    }
-                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                    finally {
-                        try {
-                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                        }
-                        finally { if (e_2) throw e_2.error; }
-                    }
-                }
-                if (this.content) { // 基础几何体
-                    var worldPos = new Vector3();
-                    var worldQuat = new Quaternion();
-                    var worldSca = new Vector3(1, 1, 1);
-                    this.targetItem.transform.assignWorldTRS(worldPos, worldQuat);
-                    var targetTransform = new effects.Transform({
-                        position: worldPos,
-                        quat: worldQuat,
-                        scale: worldSca,
-                        valid: true,
-                    });
-                    if (this.subType === exports.GizmoSubType.light || this.subType === exports.GizmoSubType.camera) {
-                        var camera = this.composition.camera;
-                        var cameraPos = camera.position || new Vector3(0, 0, 0);
-                        var itemPos = targetTransform.position;
-                        var newPos = moveToPointWidthFixDistance(cameraPos, itemPos);
-                        targetTransform.setPosition(newPos.x, newPos.y, newPos.z);
-                    }
-                    this.mat = targetTransform.getWorldMatrix();
-                    this.content.material.setMatrix('u_model', targetTransform.getWorldMatrix());
-                }
-            }
+    GizmoComponent.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+        var item = this.item;
+        var options = data;
+        item.duration = 999;
+        var opt = options.content.options;
+        item.target = opt.target;
+        item.subType = opt.subType;
+        this.renderMode = opt.renderMode || this.getDefaultRenderMode();
+        item.size = opt.size || this.getDefaultSize();
+        this.depthTest = opt.depthTest;
+        var c = (opt.color || [255, 255, 255]);
+        this.color = [c[0] / 255, c[1] / 255, c[2] / 255];
+        //@ts-expect-error
+        if (options.content) {
+            item.transform = new effects.Transform(options.content.transform);
         }
     };
+    return GizmoComponent;
+}(effects.ItemBehaviour));
+
+var Matrix4 = effects.math.Matrix4; effects.math.Vector2; var Vector3$1 = effects.math.Vector3;
+/**
+ * 线条包围盒射线检测算法
+ * @param out - 射线与包围盒交点位置
+ * @param pointInCanvas - 归一化的画布交互点坐标
+ * @param points - 线条包围盒两端点位置
+ * @param radius - 线条包围盒辐射半径
+ * @param camera - 相机对象
+ * @returns 射线与包围盒交点位置 | undefined
+ */
+function intersectRayLine(out, pointInCanvas, points, radius, worldMat4, camera) {
+    // 构造一个辐射半径边缘的点 radiusPoint
+    var up = new Vector3$1(worldMat4.elements[1], worldMat4.elements[5], worldMat4.elements[9]).normalize();
+    var radiusPoint = up.clone().multiply(radius);
+    radiusPoint.add(points[0]);
+    // 计算 start、end、radius 在屏幕空间上的投影
+    var mvpMat4 = camera.getModelViewProjection(new Matrix4(), worldMat4);
+    var screenStart = mvpMat4.projectPoint(points[0], new Vector3$1());
+    var screenEnd = mvpMat4.projectPoint(points[1], new Vector3$1());
+    var screenRadiusPoint = mvpMat4.projectPoint(radiusPoint, new Vector3$1());
+    var screenRadiusVector = screenRadiusPoint.clone().subtract(screenStart);
+    var screenRadius = screenRadiusVector.length();
+    // 计算屏幕交互点与线条的距离
+    var _a = distanceOfPointAndLine(pointInCanvas, [screenStart.toVector2(), screenEnd.toVector2()]), distance = _a.distance, isInLine = _a.isInLine;
+    if (distance <= screenRadius && isInLine) { // 距离小于阈值且交互点在线条上的投影位于线段内
+        // 计算交互点在线条上的投影并转换为世界坐标
+        var screenPosition = projectionOfPointAndLine(pointInCanvas, [screenStart, screenEnd]);
+        var inverseViewProjection = camera.getInverseViewProjectionMatrix();
+        inverseViewProjection.projectPoint(screenPosition, out);
+        return out;
+    }
+}
+
+effects.math.Vector2; var Vector3 = effects.math.Vector3; effects.math.Matrix4; effects.math.Ray; var Quaternion = effects.math.Quaternion;
+/**
+ * 包围盒类型
+ */
+var BoundingType;
+(function (BoundingType) {
+    BoundingType[BoundingType["box"] = 0] = "box";
+    BoundingType[BoundingType["sphere"] = 1] = "sphere";
+    BoundingType[BoundingType["triangle"] = 2] = "triangle";
+    BoundingType[BoundingType["line"] = 3] = "line";
+})(BoundingType || (BoundingType = {}));
+/**
+ *
+ */
+var GizmoVFXItem = /** @class */ (function (_super) {
+    __extends(GizmoVFXItem, _super);
+    function GizmoVFXItem(engine, props) {
+        var _this = _super.call(this, engine, props) || this;
+        _this.boundingMap = new Map();
+        var gizmoComponent = _this.addComponent(GizmoComponent);
+        if (props) {
+            gizmoComponent.fromData(props);
+        }
+        return _this;
+    }
+    Object.defineProperty(GizmoVFXItem.prototype, "content", {
+        get: function () {
+            return this._content;
+        },
+        set: function (content) {
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * 射线检测算法
      * @returns 包含射线检测算法回调方法的参数
@@ -2787,7 +2898,7 @@ var GizmoVFXItem = /** @class */ (function (_super) {
                  * @returns
                  */
                 collect: function (ray, pointInCanvas) {
-                    var e_3, _a;
+                    var e_1, _a;
                     var hitPositions = [];
                     self_1.hitBounding = undefined;
                     var _loop_1 = function (key) {
@@ -2921,12 +3032,12 @@ var GizmoVFXItem = /** @class */ (function (_super) {
                             _loop_1(key);
                         }
                     }
-                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
                     finally {
                         try {
                             if (boundingKeys_2_1 && !boundingKeys_2_1.done && (_a = boundingKeys_2.return)) _a.call(boundingKeys_2);
                         }
-                        finally { if (e_3) throw e_3.error; }
+                        finally { if (e_1) throw e_1.error; }
                     }
                     if (hitPositions.length === 0) {
                         self_1.hitBounding = undefined;
@@ -3020,68 +3131,57 @@ var EditorGizmoPlugin = /** @class */ (function (_super) {
         composition.loaderData.gizmoTarget = targetMap;
         composition.loaderData.gizmoItems = [];
     };
-    EditorGizmoPlugin.prototype.onCompositionItemLifeBegin = function (composition, item) {
-        var e_2, _a;
-        if (item.type === '7') {
-            return;
-        }
-        var gizmoVFXItemList = composition.loaderData.gizmoTarget[item.id];
-        if (gizmoVFXItemList && gizmoVFXItemList.length > 0) {
-            try {
-                for (var gizmoVFXItemList_1 = __values(gizmoVFXItemList), gizmoVFXItemList_1_1 = gizmoVFXItemList_1.next(); !gizmoVFXItemList_1_1.done; gizmoVFXItemList_1_1 = gizmoVFXItemList_1.next()) {
-                    var gizmoVFXItem = gizmoVFXItemList_1_1.value;
-                    switch (gizmoVFXItem.subType) {
-                        case exports.GizmoSubType.particleEmitter:
-                            gizmoVFXItem.createParticleContent(item, this.meshToAdd);
-                            break;
-                        case exports.GizmoSubType.modelWireframe:
-                            gizmoVFXItem.createModelContent(item, this.meshToAdd);
-                            break;
-                        case exports.GizmoSubType.box:
-                        case exports.GizmoSubType.sphere:
-                        case exports.GizmoSubType.cylinder:
-                        case exports.GizmoSubType.cone:
-                        case exports.GizmoSubType.torus:
-                        case exports.GizmoSubType.sprite:
-                        case exports.GizmoSubType.frustum:
-                        case exports.GizmoSubType.directionLight:
-                        case exports.GizmoSubType.pointLight:
-                        case exports.GizmoSubType.spotLight:
-                        case exports.GizmoSubType.floorGrid:
-                            gizmoVFXItem.createBasicContent(item, this.meshToAdd, gizmoVFXItem.subType);
-                            break;
-                        case exports.GizmoSubType.camera:
-                        case exports.GizmoSubType.light:
-                            gizmoVFXItem.createBasicContent(item, this.meshToAdd, gizmoVFXItem.subType, iconTextures);
-                            break;
-                        case exports.GizmoSubType.rotation:
-                        case exports.GizmoSubType.scale:
-                        case exports.GizmoSubType.translation:
-                            gizmoVFXItem.createCombinationContent(item, this.meshToAdd, gizmoVFXItem.subType);
-                            break;
-                        case exports.GizmoSubType.viewHelper:
-                            gizmoVFXItem.createCombinationContent(item, this.meshToAdd, gizmoVFXItem.subType, iconTextures);
-                            break;
-                        case exports.GizmoSubType.boundingBox:
-                            gizmoVFXItem.createBoundingBoxContent(item, this.meshToAdd);
-                            break;
-                        default:
-                            break;
-                    }
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (gizmoVFXItemList_1_1 && !gizmoVFXItemList_1_1.done && (_a = gizmoVFXItemList_1.return)) _a.call(gizmoVFXItemList_1);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-        }
-        if (item.type === GizmoVFXItemType) {
-            composition.loaderData.gizmoItems.push(item);
-        }
-    };
+    // override onCompositionItemLifeBegin (composition: Composition, item: VFXItem<any>) {
+    //   if (item.type === '7') {
+    //     return;
+    //   }
+    //   const gizmoVFXItemList: GizmoVFXItem[] = composition.loaderData.gizmoTarget[item.id];
+    //   if (gizmoVFXItemList && gizmoVFXItemList.length > 0) {
+    //     for (const gizmoVFXItem of gizmoVFXItemList) {
+    //       switch (gizmoVFXItem.subType) {
+    //         case GizmoSubType.particleEmitter:
+    //           gizmoVFXItem.createParticleContent(item, this.meshToAdd);
+    //           break;
+    //         case GizmoSubType.modelWireframe:
+    //           gizmoVFXItem.createModelContent(item, this.meshToAdd);
+    //           break;
+    //         case GizmoSubType.box:
+    //         case GizmoSubType.sphere:
+    //         case GizmoSubType.cylinder:
+    //         case GizmoSubType.cone:
+    //         case GizmoSubType.torus:
+    //         case GizmoSubType.sprite:
+    //         case GizmoSubType.frustum:
+    //         case GizmoSubType.directionLight:
+    //         case GizmoSubType.pointLight:
+    //         case GizmoSubType.spotLight:
+    //         case GizmoSubType.floorGrid:
+    //           gizmoVFXItem.createBasicContent(item, this.meshToAdd, gizmoVFXItem.subType);
+    //           break;
+    //         case GizmoSubType.camera:
+    //         case GizmoSubType.light:
+    //           gizmoVFXItem.createBasicContent(item, this.meshToAdd, gizmoVFXItem.subType, iconTextures);
+    //           break;
+    //         case GizmoSubType.rotation:
+    //         case GizmoSubType.scale:
+    //         case GizmoSubType.translation:
+    //           gizmoVFXItem.createCombinationContent(item, this.meshToAdd, gizmoVFXItem.subType);
+    //           break;
+    //         case GizmoSubType.viewHelper:
+    //           gizmoVFXItem.createCombinationContent(item, this.meshToAdd, gizmoVFXItem.subType, iconTextures);
+    //           break;
+    //         case GizmoSubType.boundingBox:
+    //           gizmoVFXItem.createBoundingBoxContent(item, this.meshToAdd);
+    //           break;
+    //         default:
+    //           break;
+    //       }
+    //     }
+    //   }
+    //   if (item.type === GizmoVFXItemType) {
+    //     composition.loaderData.gizmoItems.push(item);
+    //   }
+    // }
     EditorGizmoPlugin.prototype.onCompositionItemRemoved = function (composition, item) {
         var _this = this;
         if (item.type === GizmoVFXItemType) {
@@ -3097,7 +3197,7 @@ var EditorGizmoPlugin = /** @class */ (function (_super) {
         }
     };
     EditorGizmoPlugin.prototype.removeGizmoItem = function (composition, gizmoVFXItem) {
-        var e_3, _a;
+        var e_2, _a;
         var _this = this;
         if (gizmoVFXItem.content && !gizmoVFXItem.content.isDestroyed) {
             gizmoVFXItem.content.dispose();
@@ -3123,16 +3223,17 @@ var EditorGizmoPlugin = /** @class */ (function (_super) {
                     }
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_2) throw e_2.error; }
             }
         }
-        if (gizmoVFXItem.wireframeMeshes.length > 0) {
-            gizmoVFXItem.wireframeMeshes.forEach(function (mesh) {
+        var gizmoComponent = gizmoVFXItem.getComponent(GizmoComponent);
+        if (gizmoComponent && gizmoComponent.wireframeMeshes.length > 0) {
+            gizmoComponent.wireframeMeshes.forEach(function (mesh) {
                 if (!mesh.isDestroyed) {
                     destroyWireframeMesh(mesh);
                     _this.getEditorRenderPass(composition.renderFrame).removeMesh(mesh);
@@ -3175,9 +3276,10 @@ var EditorGizmoPlugin = /** @class */ (function (_super) {
             else {
                 _this.getEditorRenderPass(renderFrame).removeMesh(mesh);
             }
+            effects.removeItem(_this.meshToAdd, mesh);
         });
-        this.meshToAdd.length = this.meshToRemove.length = 0;
-        composition.loaderData.gizmoItems.forEach(function (item) { return item.updateRenderData(); });
+        this.meshToRemove.length = 0;
+        // composition.loaderData.gizmoItems.forEach((item: GizmoVFXItem) => item.updateRenderData());
         return false;
     };
     EditorGizmoPlugin.prototype.getBehindRenderPass = function (pipeline) {
@@ -3220,7 +3322,7 @@ var EditorGizmoPlugin = /** @class */ (function (_super) {
 }(effects.AbstractPlugin));
 
 effects.registerPlugin('editor-gizmo', EditorGizmoPlugin, GizmoVFXItem);
-var version = "1.2.3";
+var version = "2.0.0-alpha.1";
 effects.logger.info('plugin editor gizmo version: ' + version);
 
 exports.DirectionLightData = DirectionLightData;