@galacean/effects-threejs 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.0.0-alpha.1
+ * Version: v2.0.0-alpha.3
  */
 
 'use strict';
@@ -7364,275 +7364,6 @@ function generateSerializableMember(type, sourceName) {
     };
 }
 
-/**
- * @since 2.0.0
- * @internal
- */
-var EffectsObject = /** @class */ (function () {
-    function EffectsObject(engine) {
-        this.engine = engine;
-        this.guid = generateGUID();
-        this.taggedProperties = {};
-        this.engine.addInstance(this);
-    }
-    EffectsObject.prototype.getInstanceId = function () {
-        return this.guid;
-    };
-    EffectsObject.prototype.setInstanceId = function (guid) {
-        this.engine.removeInstance(this.guid);
-        this.guid = guid;
-        this.engine.addInstance(this);
-    };
-    EffectsObject.prototype.toData = function () { };
-    /**
-     * 反序列化函数
-     *
-     * @param data - 对象的序列化的数据
-     */
-    EffectsObject.prototype.fromData = function (data) {
-        if (data.id) {
-            this.setInstanceId(data.id);
-        }
-    };
-    EffectsObject.prototype.dispose = function () { };
-    __decorate([
-        serialize()
-    ], EffectsObject.prototype, "guid", void 0);
-    return EffectsObject;
-}());
-
-/**
- * @since 2.0.0
- * @internal
- */
-var Component = /** @class */ (function (_super) {
-    __extends(Component, _super);
-    function Component() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(Component.prototype, "transform", {
-        /**
-         * 附加到的 VFXItem 对象 Transform 组件
-         */
-        get: function () {
-            return this.item.transform;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Component.prototype.onAttached = function () { };
-    Component.prototype.onDestroy = function () { };
-    Component.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-        if (data.item) {
-            this.item = data.item;
-        }
-    };
-    Component.prototype.dispose = function () {
-        this.onDestroy();
-        if (this.item) {
-            removeItem(this.item.components, this);
-        }
-    };
-    return Component;
-}(EffectsObject));
-/**
- * @since 2.0.0
- * @internal
- */
-var Behaviour = /** @class */ (function (_super) {
-    __extends(Behaviour, _super);
-    function Behaviour() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._enabled = true;
-        return _this;
-    }
-    Object.defineProperty(Behaviour.prototype, "isActiveAndEnabled", {
-        /**
-         * 组件是否可以更新，true 更新，false 不更新
-         */
-        get: function () {
-            return this.item.getVisible() && this.enabled;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Behaviour.prototype, "enabled", {
-        get: function () {
-            return this._enabled;
-        },
-        set: function (value) {
-            this._enabled = value;
-            if (value) {
-                this.onBehaviourEnable();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Behaviour.prototype.onBehaviourEnable = function () { };
-    Behaviour.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-    };
-    Behaviour.prototype.toData = function () {
-        _super.prototype.toData.call(this);
-    };
-    __decorate([
-        serialize()
-    ], Behaviour.prototype, "_enabled", void 0);
-    return Behaviour;
-}(Component));
-/**
- * @since 2.0.0
- * @internal
- */
-var ItemBehaviour = /** @class */ (function (_super) {
-    __extends(ItemBehaviour, _super);
-    function ItemBehaviour() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.started = false;
-        return _this;
-    }
-    // /**
-    //  * 生命周期函数，初始化后调用，生命周期内只调用一次
-    //  */
-    // awake () {
-    //   // OVERRIDE
-    // }
-    /**
-     * 在每次设置 enabled 为 true 时触发
-     */
-    ItemBehaviour.prototype.onEnable = function () { };
-    /**
-     * 生命周期函数，在第一次 update 前调用，生命周期内只调用一次
-     */
-    ItemBehaviour.prototype.start = function () {
-        // OVERRIDE
-    };
-    /**
-     * 生命周期函数，每帧调用一次
-     */
-    ItemBehaviour.prototype.update = function (dt) {
-        // OVERRIDE
-    };
-    /**
-     * 生命周期函数，每帧调用一次，在 update 之后调用
-     */
-    ItemBehaviour.prototype.lateUpdate = function (dt) {
-        // OVERRIDE
-    };
-    ItemBehaviour.prototype.onAttached = function () {
-        this.item.itemBehaviours.push(this);
-    };
-    ItemBehaviour.prototype.dispose = function () {
-        if (this.item) {
-            removeItem(this.item.itemBehaviours, this);
-        }
-        _super.prototype.dispose.call(this);
-    };
-    ItemBehaviour.prototype.onBehaviourEnable = function () {
-        this.onEnable();
-        if (!this.started) {
-            this.start();
-            this.started = true;
-        }
-    };
-    return ItemBehaviour;
-}(Behaviour));
-
-/**
- * 所有渲染组件的基类
- * @since 2.0.0
- */
-var RendererComponent = /** @class */ (function (_super) {
-    __extends(RendererComponent, _super);
-    function RendererComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.started = false;
-        _this.materials = [];
-        _this._enabled = true;
-        return _this;
-    }
-    Object.defineProperty(RendererComponent.prototype, "priority", {
-        get: function () {
-            return this._priority;
-        },
-        set: function (value) {
-            this._priority = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RendererComponent.prototype, "enabled", {
-        get: function () {
-            return this._enabled;
-        },
-        set: function (value) {
-            this._enabled = value;
-            if (value) {
-                this.onEnable();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RendererComponent.prototype, "isActiveAndEnabled", {
-        /**
-         * 组件是否可以更新，true 更新，false 不更新
-         */
-        get: function () {
-            return this.item.getVisible() && this.enabled;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(RendererComponent.prototype, "material", {
-        get: function () {
-            return this.materials[0];
-        },
-        set: function (material) {
-            if (this.materials.length === 0) {
-                this.materials.push(material);
-            }
-            else {
-                this.materials[0] = material;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    RendererComponent.prototype.onEnable = function () { };
-    RendererComponent.prototype.start = function () { };
-    RendererComponent.prototype.update = function (dt) { };
-    RendererComponent.prototype.lateUpdate = function (dt) { };
-    RendererComponent.prototype.render = function (renderer) { };
-    RendererComponent.prototype.onAttached = function () {
-        this.item.rendererComponents.push(this);
-    };
-    RendererComponent.prototype.fromData = function (data) {
-        _super.prototype.fromData.call(this, data);
-    };
-    RendererComponent.prototype.toData = function () {
-        _super.prototype.toData.call(this);
-    };
-    RendererComponent.prototype.dispose = function () {
-        if (this.item) {
-            removeItem(this.item.rendererComponents, this);
-        }
-        _super.prototype.dispose.call(this);
-    };
-    __decorate([
-        serialize()
-    ], RendererComponent.prototype, "materials", void 0);
-    __decorate([
-        serialize()
-    ], RendererComponent.prototype, "_priority", void 0);
-    __decorate([
-        serialize()
-    ], RendererComponent.prototype, "_enabled", void 0);
-    return RendererComponent;
-}(Component));
-
 exports.ShaderType = void 0;
 (function (ShaderType) {
     ShaderType[ShaderType["vertex"] = 0] = "vertex";
@@ -8219,6 +7950,43 @@ function loadMipmapImage(pointer, bins) {
     });
 }
 
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var EffectsObject = /** @class */ (function () {
+    function EffectsObject(engine) {
+        this.engine = engine;
+        this.guid = generateGUID();
+        this.taggedProperties = {};
+        this.engine.addInstance(this);
+    }
+    EffectsObject.prototype.getInstanceId = function () {
+        return this.guid;
+    };
+    EffectsObject.prototype.setInstanceId = function (guid) {
+        this.engine.removeInstance(this.guid);
+        this.guid = guid;
+        this.engine.addInstance(this);
+    };
+    EffectsObject.prototype.toData = function () { };
+    /**
+     * 反序列化函数
+     *
+     * @param data - 对象的序列化的数据
+     */
+    EffectsObject.prototype.fromData = function (data) {
+        if (data.id) {
+            this.setInstanceId(data.id);
+        }
+    };
+    EffectsObject.prototype.dispose = function () { };
+    __decorate([
+        serialize()
+    ], EffectsObject.prototype, "guid", void 0);
+    return EffectsObject;
+}());
+
 var seed$a = 1;
 /**
  * Texture 抽象类
@@ -9029,54 +8797,286 @@ var SemanticMap = /** @class */ (function () {
     SemanticMap.prototype.hasSemanticValue = function (name) {
         return name in this.semantics;
     };
-    SemanticMap.prototype.dispose = function () {
-        var _this = this;
-        Object.keys(this.semantics).forEach(function (name) {
-            delete _this.semantics[name];
-        });
+    SemanticMap.prototype.dispose = function () {
+        var _this = this;
+        Object.keys(this.semantics).forEach(function (name) {
+            delete _this.semantics[name];
+        });
+    };
+    return SemanticMap;
+}());
+
+var _a$5;
+var BYTES_TYPE_MAP = (_a$5 = {},
+    _a$5[glContext.FLOAT] = Float32Array.BYTES_PER_ELEMENT,
+    _a$5[glContext.INT] = Int32Array.BYTES_PER_ELEMENT,
+    _a$5[glContext.SHORT] = Int16Array.BYTES_PER_ELEMENT,
+    _a$5[glContext.BYTE] = Int8Array.BYTES_PER_ELEMENT,
+    _a$5);
+/**
+ * Geometry 抽象类
+ */
+var Geometry = /** @class */ (function (_super) {
+    __extends(Geometry, _super);
+    function Geometry() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * 初始化 GPU 资源
+     * @override
+     */
+    Geometry.prototype.initialize = function () {
+        // OVERRIDE
+    };
+    /**
+     * 几何数据刷新
+     */
+    Geometry.prototype.flush = function () {
+        // OVERRIDE
+    };
+    return Geometry;
+}(EffectsObject));
+function generateEmptyTypedArray(type) {
+    if (type === glContext.INT) {
+        return new Int32Array(0);
+    }
+    if (type === glContext.SHORT) {
+        return new Int16Array(0);
+    }
+    return new Float32Array(0);
+}
+
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var Component = /** @class */ (function (_super) {
+    __extends(Component, _super);
+    function Component() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(Component.prototype, "transform", {
+        /**
+         * 附加到的 VFXItem 对象 Transform 组件
+         */
+        get: function () {
+            return this.item.transform;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Component.prototype.onAttached = function () { };
+    Component.prototype.onDestroy = function () { };
+    Component.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+        if (data.item) {
+            this.item = data.item;
+        }
+    };
+    Component.prototype.dispose = function () {
+        this.onDestroy();
+        if (this.item) {
+            removeItem(this.item.components, this);
+        }
+    };
+    return Component;
+}(EffectsObject));
+/**
+ * @since 2.0.0
+ * @internal
+ */
+var Behaviour = /** @class */ (function (_super) {
+    __extends(Behaviour, _super);
+    function Behaviour() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._enabled = true;
+        return _this;
+    }
+    Object.defineProperty(Behaviour.prototype, "isActiveAndEnabled", {
+        /**
+         * 组件是否可以更新，true 更新，false 不更新
+         */
+        get: function () {
+            return this.item.getVisible() && this.enabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Behaviour.prototype, "enabled", {
+        get: function () {
+            return this._enabled;
+        },
+        set: function (value) {
+            this._enabled = value;
+            if (value) {
+                this.onBehaviourEnable();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Behaviour.prototype.onBehaviourEnable = function () { };
+    Behaviour.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+    };
+    Behaviour.prototype.toData = function () {
+        _super.prototype.toData.call(this);
     };
-    return SemanticMap;
-}());
-
-var _a$5;
-var BYTES_TYPE_MAP = (_a$5 = {},
-    _a$5[glContext.FLOAT] = Float32Array.BYTES_PER_ELEMENT,
-    _a$5[glContext.INT] = Int32Array.BYTES_PER_ELEMENT,
-    _a$5[glContext.SHORT] = Int16Array.BYTES_PER_ELEMENT,
-    _a$5[glContext.BYTE] = Int8Array.BYTES_PER_ELEMENT,
-    _a$5);
+    __decorate([
+        serialize()
+    ], Behaviour.prototype, "_enabled", void 0);
+    return Behaviour;
+}(Component));
 /**
- * Geometry 抽象类
+ * @since 2.0.0
+ * @internal
  */
-var Geometry = /** @class */ (function (_super) {
-    __extends(Geometry, _super);
-    function Geometry() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var ItemBehaviour = /** @class */ (function (_super) {
+    __extends(ItemBehaviour, _super);
+    function ItemBehaviour() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.started = false;
+        return _this;
     }
+    // /**
+    //  * 生命周期函数，初始化后调用，生命周期内只调用一次
+    //  */
+    // awake () {
+    //   // OVERRIDE
+    // }
     /**
-     * 初始化 GPU 资源
-     * @override
+     * 在每次设置 enabled 为 true 时触发
      */
-    Geometry.prototype.initialize = function () {
+    ItemBehaviour.prototype.onEnable = function () { };
+    /**
+     * 生命周期函数，在第一次 update 前调用，生命周期内只调用一次
+     */
+    ItemBehaviour.prototype.start = function () {
         // OVERRIDE
     };
     /**
-     * 几何数据刷新
+     * 生命周期函数，每帧调用一次
      */
-    Geometry.prototype.flush = function () {
+    ItemBehaviour.prototype.update = function (dt) {
         // OVERRIDE
     };
-    return Geometry;
-}(EffectsObject));
-function generateEmptyTypedArray(type) {
-    if (type === glContext.INT) {
-        return new Int32Array(0);
-    }
-    if (type === glContext.SHORT) {
-        return new Int16Array(0);
+    /**
+     * 生命周期函数，每帧调用一次，在 update 之后调用
+     */
+    ItemBehaviour.prototype.lateUpdate = function (dt) {
+        // OVERRIDE
+    };
+    ItemBehaviour.prototype.onAttached = function () {
+        this.item.itemBehaviours.push(this);
+    };
+    ItemBehaviour.prototype.dispose = function () {
+        if (this.item) {
+            removeItem(this.item.itemBehaviours, this);
+        }
+        _super.prototype.dispose.call(this);
+    };
+    ItemBehaviour.prototype.onBehaviourEnable = function () {
+        this.onEnable();
+        if (!this.started) {
+            this.start();
+            this.started = true;
+        }
+    };
+    return ItemBehaviour;
+}(Behaviour));
+
+/**
+ * 所有渲染组件的基类
+ * @since 2.0.0
+ */
+var RendererComponent = /** @class */ (function (_super) {
+    __extends(RendererComponent, _super);
+    function RendererComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.started = false;
+        _this.materials = [];
+        _this._enabled = true;
+        return _this;
     }
-    return new Float32Array(0);
-}
+    Object.defineProperty(RendererComponent.prototype, "priority", {
+        get: function () {
+            return this._priority;
+        },
+        set: function (value) {
+            this._priority = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererComponent.prototype, "enabled", {
+        get: function () {
+            return this._enabled;
+        },
+        set: function (value) {
+            this._enabled = value;
+            if (value) {
+                this.onEnable();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererComponent.prototype, "isActiveAndEnabled", {
+        /**
+         * 组件是否可以更新，true 更新，false 不更新
+         */
+        get: function () {
+            return this.item.getVisible() && this.enabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RendererComponent.prototype, "material", {
+        get: function () {
+            return this.materials[0];
+        },
+        set: function (material) {
+            if (this.materials.length === 0) {
+                this.materials.push(material);
+            }
+            else {
+                this.materials[0] = material;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    RendererComponent.prototype.onEnable = function () { };
+    RendererComponent.prototype.start = function () { };
+    RendererComponent.prototype.update = function (dt) { };
+    RendererComponent.prototype.lateUpdate = function (dt) { };
+    RendererComponent.prototype.render = function (renderer) { };
+    RendererComponent.prototype.onAttached = function () {
+        this.item.rendererComponents.push(this);
+    };
+    RendererComponent.prototype.fromData = function (data) {
+        _super.prototype.fromData.call(this, data);
+    };
+    RendererComponent.prototype.toData = function () {
+        _super.prototype.toData.call(this);
+    };
+    RendererComponent.prototype.dispose = function () {
+        if (this.item) {
+            removeItem(this.item.rendererComponents, this);
+        }
+        _super.prototype.dispose.call(this);
+    };
+    __decorate([
+        serialize()
+    ], RendererComponent.prototype, "materials", void 0);
+    __decorate([
+        serialize()
+    ], RendererComponent.prototype, "_priority", void 0);
+    __decorate([
+        serialize()
+    ], RendererComponent.prototype, "_enabled", void 0);
+    return RendererComponent;
+}(Component));
 
 var seed$8 = 1;
 /**
@@ -11313,7 +11313,7 @@ var SerializationHelper = /** @class */ (function () {
     };
     SerializationHelper.deserializeProperty = function (property, engine, level) {
         var e_11, _a, e_12, _b;
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11374,7 +11374,7 @@ var SerializationHelper = /** @class */ (function () {
             return __generator(this, function (_j) {
                 switch (_j.label) {
                     case 0:
-                        if (level > 10) {
+                        if (level > 14) {
                             console.error('序列化数据的内嵌对象层数大于上限');
                             return [2 /*return*/];
                         }
@@ -11465,7 +11465,7 @@ var SerializationHelper = /** @class */ (function () {
     };
     SerializationHelper.serializeObjectProperty = function (objectProperty, serializedData, level) {
         var e_15, _a;
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11510,7 +11510,7 @@ var SerializationHelper = /** @class */ (function () {
         }
     };
     SerializationHelper.serializeArrayProperty = function (arrayProperty, serializedData, level) {
-        if (level > 10) {
+        if (level > 14) {
             console.error('序列化数据的内嵌对象层数大于上限');
             return;
         }
@@ -11676,24 +11676,24 @@ var Database = /** @class */ (function () {
 }());
 exports.DataType = void 0;
 (function (DataType) {
-    DataType[DataType["VFXItemData"] = 0] = "VFXItemData";
-    DataType[DataType["EffectComponent"] = 1] = "EffectComponent";
-    DataType[DataType["Material"] = 2] = "Material";
-    DataType[DataType["Shader"] = 3] = "Shader";
-    DataType[DataType["SpriteComponent"] = 4] = "SpriteComponent";
-    DataType[DataType["ParticleSystem"] = 5] = "ParticleSystem";
-    DataType[DataType["InteractComponent"] = 6] = "InteractComponent";
-    DataType[DataType["CameraController"] = 7] = "CameraController";
-    DataType[DataType["Geometry"] = 8] = "Geometry";
-    DataType[DataType["Texture"] = 9] = "Texture";
-    DataType[DataType["TextComponent"] = 10] = "TextComponent";
+    DataType["VFXItemData"] = "VFXItemData";
+    DataType["EffectComponent"] = "EffectComponent";
+    DataType["Material"] = "Material";
+    DataType["Shader"] = "Shader";
+    DataType["SpriteComponent"] = "SpriteComponent";
+    DataType["ParticleSystem"] = "ParticleSystem";
+    DataType["InteractComponent"] = "InteractComponent";
+    DataType["CameraController"] = "CameraController";
+    DataType["Geometry"] = "Geometry";
+    DataType["Texture"] = "Texture";
+    DataType["TextComponent"] = "TextComponent";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
-    DataType[DataType["MeshComponent"] = 10000] = "MeshComponent";
-    DataType[DataType["SkyboxComponent"] = 10001] = "SkyboxComponent";
-    DataType[DataType["LightComponent"] = 10002] = "LightComponent";
-    DataType[DataType["CameraComponent"] = 10003] = "CameraComponent";
-    DataType[DataType["ModelPluginComponent"] = 10004] = "ModelPluginComponent";
-    DataType[DataType["TreeComponent"] = 10005] = "TreeComponent";
+    DataType["MeshComponent"] = "MeshComponent";
+    DataType["SkyboxComponent"] = "SkyboxComponent";
+    DataType["LightComponent"] = "LightComponent";
+    DataType["CameraComponent"] = "CameraComponent";
+    DataType["ModelPluginComponent"] = "ModelPluginComponent";
+    DataType["TreeComponent"] = "TreeComponent";
 })(exports.DataType || (exports.DataType = {}));
 
 /**
@@ -13960,15 +13960,25 @@ var PlayableOutput = /** @class */ (function () {
     };
     return PlayableOutput;
 }());
+var PlayableAsset = /** @class */ (function () {
+    function PlayableAsset() {
+    }
+    PlayableAsset.prototype.fromData = function (data) {
+    };
+    return PlayableAsset;
+}());
 
 /**
  * @since 2.0.0
  * @internal
  */
-var Track = /** @class */ (function () {
+var Track = /** @class */ (function (_super) {
+    __extends(Track, _super);
     function Track() {
-        this.clips = [];
-        this.clipSeed = 0;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.clips = [];
+        _this.clipSeed = 0;
+        return _this;
     }
     Track.prototype.createOutput = function () {
         var output = new PlayableOutput();
@@ -13980,7 +13990,7 @@ var Track = /** @class */ (function () {
     Track.prototype.createMixerPlayable = function () {
         return new Playable();
     };
-    Track.prototype.createPlayebleTree = function () {
+    Track.prototype.createPlayable = function () {
         var e_1, _a;
         var defaultMixPlayable = this.createMixerPlayable();
         try {
@@ -14032,7 +14042,7 @@ var Track = /** @class */ (function () {
         this.clips.push(clip);
     };
     return Track;
-}());
+}(PlayableAsset));
 /**
  * @since 2.0.0
  * @internal
@@ -14088,12 +14098,12 @@ var tempPos = new Vector3();
  * @since 2.0.0
  * @internal
  */
-var AnimationClipPlayable = /** @class */ (function (_super) {
-    __extends(AnimationClipPlayable, _super);
-    function AnimationClipPlayable() {
+var TransformAnimationPlayable = /** @class */ (function (_super) {
+    __extends(TransformAnimationPlayable, _super);
+    function TransformAnimationPlayable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    AnimationClipPlayable.prototype.processFrame = function (dt) {
+    TransformAnimationPlayable.prototype.processFrame = function (dt) {
         if (this.bindingItem.composition) {
             this.sampleAnimation();
         }
@@ -14101,7 +14111,7 @@ var AnimationClipPlayable = /** @class */ (function (_super) {
     /**
      * 应用时间轴K帧数据到对象
      */
-    AnimationClipPlayable.prototype.sampleAnimation = function () {
+    TransformAnimationPlayable.prototype.sampleAnimation = function () {
         var _this = this;
         var duration = this.bindingItem.duration;
         var life = this.time / duration;
@@ -14146,7 +14156,7 @@ var AnimationClipPlayable = /** @class */ (function (_super) {
             // this.animationStream.setCurveValue('transform', 'position.z', pos.z);
         }
     };
-    AnimationClipPlayable.prototype.fromData = function (data) {
+    TransformAnimationPlayable.prototype.fromData = function (data) {
         var _a;
         var scale = this.bindingItem.transform.scale;
         this.originalTransform = {
@@ -14217,30 +14227,45 @@ var AnimationClipPlayable = /** @class */ (function (_super) {
         this.velocity = this.direction.clone();
         this.velocity.multiply(this.startSpeed);
     };
-    return AnimationClipPlayable;
+    return TransformAnimationPlayable;
 }(AnimationPlayable));
+var TransformAnimationPlayableAsset = /** @class */ (function (_super) {
+    __extends(TransformAnimationPlayableAsset, _super);
+    function TransformAnimationPlayableAsset() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TransformAnimationPlayableAsset.prototype.createPlayable = function () {
+        var transformAnimationPlayable = new TransformAnimationPlayable();
+        transformAnimationPlayable.fromData(this.transformAnimationData);
+        return transformAnimationPlayable;
+    };
+    TransformAnimationPlayableAsset.prototype.fromData = function (data) {
+        this.transformAnimationData = data;
+    };
+    return TransformAnimationPlayableAsset;
+}(PlayableAsset));
 /**
  * @since 2.0.0
  * @internal
  */
-var ActivationClipPlayable = /** @class */ (function (_super) {
-    __extends(ActivationClipPlayable, _super);
-    function ActivationClipPlayable() {
+var ActivationPlayable = /** @class */ (function (_super) {
+    __extends(ActivationPlayable, _super);
+    function ActivationPlayable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    ActivationClipPlayable.prototype.onGraphStart = function () {
+    ActivationPlayable.prototype.onGraphStart = function () {
         this.bindingItem.transform.setValid(false);
         this.hideRendererComponents();
     };
-    ActivationClipPlayable.prototype.onPlayablePlay = function () {
+    ActivationPlayable.prototype.onPlayablePlay = function () {
         this.bindingItem.transform.setValid(true);
         this.showRendererComponents();
     };
-    ActivationClipPlayable.prototype.onPlayableDestroy = function () {
+    ActivationPlayable.prototype.onPlayableDestroy = function () {
         this.bindingItem.transform.setValid(false);
         this.hideRendererComponents();
     };
-    ActivationClipPlayable.prototype.hideRendererComponents = function () {
+    ActivationPlayable.prototype.hideRendererComponents = function () {
         var e_1, _a;
         try {
             for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -14258,7 +14283,7 @@ var ActivationClipPlayable = /** @class */ (function (_super) {
             finally { if (e_1) throw e_1.error; }
         }
     };
-    ActivationClipPlayable.prototype.showRendererComponents = function () {
+    ActivationPlayable.prototype.showRendererComponents = function () {
         var e_2, _a;
         try {
             for (var _b = __values$1(this.bindingItem.rendererComponents), _c = _b.next(); !_c.done; _c = _b.next()) {
@@ -14276,7 +14301,7 @@ var ActivationClipPlayable = /** @class */ (function (_super) {
             finally { if (e_2) throw e_2.error; }
         }
     };
-    return ActivationClipPlayable;
+    return ActivationPlayable;
 }(Playable));
 
 /**
@@ -14531,7 +14556,7 @@ var TimelineComponent = /** @class */ (function (_super) {
         try {
             for (var _b = __values$1(this.tracks), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var track = _c.value;
-                var trackMixPlayable = track.createPlayebleTree();
+                var trackMixPlayable = track.createPlayable();
                 var trackOutput = track.createOutput();
                 graph.addOutput(trackOutput);
                 trackOutput.setSourcePlayeble(trackMixPlayable);
@@ -14546,6 +14571,7 @@ var TimelineComponent = /** @class */ (function (_super) {
         }
     };
     TimelineComponent.prototype.fromData = function (data) {
+        var e_13, _a, e_14, _b;
         _super.prototype.fromData.call(this, data);
         this.options = {
             start: this.item.start,
@@ -14556,7 +14582,47 @@ var TimelineComponent = /** @class */ (function (_super) {
         this.id = this.item.id;
         this.name = this.item.name;
         var activationTrack = this.createTrack(Track, 'ActivationTrack');
-        activationTrack.createClip(ActivationClipPlayable, 'ActivationTimelineClip');
+        activationTrack.createClip(ActivationPlayable, 'ActivationTimelineClip');
+        //@ts-expect-error
+        if (data.tracks) {
+            //@ts-expect-error
+            var tracks = data.tracks;
+            try {
+                for (var tracks_1 = __values$1(tracks), tracks_1_1 = tracks_1.next(); !tracks_1_1.done; tracks_1_1 = tracks_1.next()) {
+                    var track = tracks_1_1.value;
+                    var newTrack = this.createTrack(Track);
+                    try {
+                        for (var _c = (e_14 = void 0, __values$1(track.clips)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var clipAsset = _d.value;
+                            switch (clipAsset.dataType) {
+                                case 'TransformAnimationPlayableAsset':
+                                    newTrack.name = 'AnimationTrack';
+                                    newTrack.createClip(TransformAnimationPlayable, 'AnimationTimelineClip').playable.fromData(clipAsset.animationClip);
+                                    break;
+                                case 'SpriteColorAnimationPlayableAsset':
+                                    newTrack.name = 'SpriteColorTrack';
+                                    newTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData(clipAsset.animationClip);
+                                    break;
+                            }
+                        }
+                    }
+                    catch (e_14_1) { e_14 = { error: e_14_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        }
+                        finally { if (e_14) throw e_14.error; }
+                    }
+                }
+            }
+            catch (e_13_1) { e_13 = { error: e_13_1 }; }
+            finally {
+                try {
+                    if (tracks_1_1 && !tracks_1_1.done && (_a = tracks_1.return)) _a.call(tracks_1);
+                }
+                finally { if (e_13) throw e_13.error; }
+            }
+        }
     };
     TimelineComponent.prototype.toData = function () {
         _super.prototype.toData.call(this);
@@ -14970,9 +15036,6 @@ var SpriteComponent = /** @class */ (function (_super) {
         this.material.setVector4('_Color', new Vector4().setFromArray(startColor));
         this.material.setVector4('_TexOffset', new Vector4().setFromArray([0, 0, 1, 1]));
         this.setItem();
-        // 添加K帧动画
-        var colorTrack = this.item.getComponent(TimelineComponent).createTrack(Track, 'SpriteColorTrack');
-        colorTrack.createClip(SpriteColorPlayable, 'SpriteColorClip').playable.fromData({ colorOverLifetime: data.colorOverLifetime, startColor: data.options.startColor });
     };
     SpriteComponent.prototype.toData = function () {
         _super.prototype.toData.call(this);
@@ -20629,10 +20692,6 @@ var VFXItem = /** @class */ (function (_super) {
         }
         var timelineComponent = this.getComponent(TimelineComponent);
         timelineComponent.fromData(data.content);
-        if (this.type !== ItemType$1.particle) {
-            var track = timelineComponent.createTrack(Track, 'AnimationTrack');
-            track.createClip(AnimationClipPlayable, 'AnimationTimelineClip').playable.fromData(data.content);
-        }
         if (duration <= 0) {
             throw Error("Item duration can't be less than 0, see ".concat(HELP_LINK['Item duration can\'t be less than 0']));
         }
@@ -22844,6 +22903,49 @@ function version3Migration(scene) {
             if (item.endBehavior === END_BEHAVIOR_PAUSE_AND_DESTROY$1 || item.endBehavior === END_BEHAVIOR_PAUSE$1) {
                 item.endBehavior = END_BEHAVIOR_FREEZE$1;
             }
+            // 动画数据转化 TODO: 动画数据移到 TimelineComponentData
+            //@ts-expect-error
+            item.content.tracks = [];
+            //@ts-expect-error
+            var tracks = item.content.tracks;
+            if (item.type !== ItemType$1.particle) {
+                tracks.push({
+                    clips: [
+                        {
+                            dataType: 'TransformAnimationPlayableAsset',
+                            animationClip: {
+                                //@ts-expect-error
+                                sizeOverLifetime: item.content.sizeOverLifetime,
+                                //@ts-expect-error
+                                rotationOverLifetime: item.content.rotationOverLifetime,
+                                //@ts-expect-error
+                                positionOverLifetime: item.content.positionOverLifetime,
+                            },
+                        },
+                    ],
+                });
+            }
+            if (item.type === ItemType$1.sprite) {
+                tracks.push({
+                    clips: [
+                        {
+                            dataType: 'SpriteColorAnimationPlayableAsset',
+                            animationClip: {
+                                //@ts-expect-error
+                                colorOverLifetime: item.content.colorOverLifetime,
+                                //@ts-expect-error
+                                startColor: item.content.options.startColor,
+                            },
+                        },
+                    ],
+                });
+            }
+            // gizmo 的 target id 转换为新的 item guid
+            //@ts-expect-error
+            if (item.content.options.target) {
+                //@ts-expect-error
+                item.content.options.target = itemGuidMap[item.content.options.target];
+            }
             // item 的 content 转为 component data 加入 JSONScene.components
             var uuid = v4().replace(/-/g, '');
             if (item.type === ItemType$1.sprite) {
@@ -27542,12 +27644,11 @@ Geometry.create = function (engine, options) {
 Mesh.create = function (engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.1";
+var version = "2.0.0-alpha.3";
 logger.info('THREEJS plugin version: ' + version);
 
 exports.AbstractPlugin = AbstractPlugin;
-exports.ActivationClipPlayable = ActivationClipPlayable;
-exports.AnimationClipPlayable = AnimationClipPlayable;
+exports.ActivationPlayable = ActivationPlayable;
 exports.AssetLoader = AssetLoader;
 exports.AssetManager = AssetManager;
 exports.BYTES_TYPE_MAP = BYTES_TYPE_MAP;
@@ -27657,6 +27758,8 @@ exports.TimelineClip = TimelineClip;
 exports.TimelineComponent = TimelineComponent;
 exports.Track = Track;
 exports.Transform = Transform;
+exports.TransformAnimationPlayable = TransformAnimationPlayable;
+exports.TransformAnimationPlayableAsset = TransformAnimationPlayableAsset;
 exports.VFXItem = VFXItem;
 exports.ValueGetter = ValueGetter;
 exports.addByOrder = addByOrder;