@galacean/effects-threejs 2.0.0-alpha.16 → 2.0.0-alpha.17

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.16
+ * Version: v2.0.0-alpha.17
  */
 
 'use strict';
@@ -474,7 +474,6 @@ function isSimulatorCellPhone() {
 }
 function isAlipayMiniApp() {
     var _my;
-    // @ts-expect-error
     return typeof my !== "undefined" && ((_my = my) == null ? void 0 : _my.renderTarget) === "web";
 }
 
@@ -730,8 +729,8 @@ function noop() {}
  *
  * @static
  * @function isString
- * @param {object} obj - 要判断的对象
- * @return {boolean}
+ * @param obj - 要判断的对象
+ * @return
  */ function isString(obj) {
     return typeof obj === "string";
 }
@@ -740,8 +739,8 @@ function noop() {}
  *
  * @static
  * @function isArray
- * @param {object} obj - 要判断的对象
- * @return {boolean}
+ * @param obj - 要判断的对象
+ * @return
  */ var isArray = Array.isArray || function(obj) {
     return Object.prototype.toString.call(obj) === "[object Array]";
 };
@@ -750,8 +749,8 @@ function noop() {}
  *
  * @static
  * @function isFunction
- * @param {object} obj - 要判断的对象
- * @return {boolean}
+ * @param obj - 要判断的对象
+ * @return
  */ function isFunction(obj) {
     return Object.prototype.toString.call(obj) === "[object Function]";
 }
@@ -760,8 +759,8 @@ function noop() {}
  *
  * @static
  * @function isObject
- * @param {object} obj - 要判断的对象
- * @return {boolean}
+ * @param obj - 要判断的对象
+ * @return
  */ function isObject(obj) {
     return Object.prototype.toString.call(obj) === "[object Object]";
 }
@@ -770,25 +769,12 @@ function isCanvas(canvas) {
     // 小程序 Canvas 无法使用 instanceof HTMLCanvasElement 判断
     return typeof canvas === "object" && canvas !== null && ((_canvas_tagName = canvas.tagName) == null ? void 0 : _canvas_tagName.toUpperCase()) === "CANVAS";
 }
-function deepClone(obj) {
-    if (isArray(obj)) {
-        return obj.map(deepClone);
-    } else if (obj && typeof obj === "object") {
-        if (ArrayBuffer.isView(obj)) {
-            return obj.slice();
-        }
-        var ret = {};
-        var kas = Object.keys(obj);
-        for(var i = 0; i < kas.length; i++){
-            var key = kas[i];
-            ret[key] = deepClone(obj[key]);
-        }
-        return ret;
-    }
-    return obj;
-}
-// TODO: 改名
-function random(min, max) {
+/**
+ * 生成一个位于 min 和 max 之间的随机数
+ * @param min
+ * @param max
+ * @returns
+ */ function randomInRange(min, max) {
     return min + Math.random() * (max - min);
 }
 function throwDestroyedError() {
@@ -4119,7 +4105,7 @@ var CameraClipMode;
      * 蒙版形状切分
      */ ValueType[ValueType["SHAPE_SPLITS"] = 11] = "SHAPE_SPLITS";
     /**
-     *直线路径
+     * 直线路径
      */ ValueType[ValueType["LINEAR_PATH"] = 12] = "LINEAR_PATH";
     /**
      * 多色
@@ -4295,7 +4281,7 @@ var TextAlignment;
 (function(TextAlignment) {
     /**
      * text alignment starts from（x,y) to right direction
-     * 从(x,y)开始第一个字符，向右边延伸
+     * 从 (x,y) 开始第一个字符，向右边延伸
      */ TextAlignment[TextAlignment["left"] = 0] = "left";
     /**
      * (x,y) is middle position of text, where (left + right)/2 =(x,y)
@@ -4303,7 +4289,7 @@ var TextAlignment;
      */ TextAlignment[TextAlignment["middle"] = 1] = "middle";
     /**
      * text alignment ends with（x,y) from left direction
-     * 从(x,y)结束最后一个字符，向左边延伸
+     * 从 (x,y) 结束最后一个字符，向左边延伸
      */ TextAlignment[TextAlignment["right"] = 2] = "right";
 })(TextAlignment || (TextAlignment = {}));
 /**
@@ -4353,6 +4339,7 @@ var DataType;
     DataType["TimelineAsset"] = "TimelineAsset";
     DataType["TransformPlayableAsset"] = "TransformPlayableAsset";
     DataType["SpriteColorPlayableAsset"] = "SpriteColorPlayableAsset";
+    DataType["BinaryAsset"] = "BinaryAsset";
     // FIXME: 先完成ECS的场景转换，后面移到spec中
     DataType["MeshComponent"] = "MeshComponent";
     DataType["SkyboxComponent"] = "SkyboxComponent";
@@ -4361,6 +4348,7 @@ var DataType;
     DataType["ModelPluginComponent"] = "ModelPluginComponent";
     DataType["TreeComponent"] = "TreeComponent";
     DataType["AnimationComponent"] = "AnimationComponent";
+    DataType["SpineComponent"] = "SpineComponent";
     // Non-EffectObject
     DataType["TimelineClip"] = "TimelineClip";
 })(DataType || (DataType = {}));
@@ -4448,11 +4436,11 @@ var VertexBufferSemantic;
     VertexBufferSemantic["TangentBS3"] = "TANGENT_BS3";
 })(VertexBufferSemantic || (VertexBufferSemantic = {}));
 
-var BuiltinObjectGUID = function BuiltinObjectGUID() {
+var BuiltinObjectGUID = {
+    WhiteTexture: "whitetexture00000000000000000000",
+    PBRShader: "pbr00000000000000000000000000000",
+    UnlitShader: "unlit000000000000000000000000000"
 };
-BuiltinObjectGUID.WhiteTexture = "whitetexture00000000000000000000";
-BuiltinObjectGUID.PBRShader = "pbr00000000000000000000000000000";
-BuiltinObjectGUID.UnlitShader = "unlit000000000000000000000000000";
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -4508,15 +4496,20 @@ var index$1 = /*#__PURE__*/Object.freeze({
     BuiltinObjectGUID: BuiltinObjectGUID
 });
 
-var effectsClassStore = {};
 var decoratorInitialStore = {};
 var mergedStore = {};
-function getDirectStore(target) {
-    var classKey = target.constructor.name;
-    if (!decoratorInitialStore[classKey]) {
-        decoratorInitialStore[classKey] = {};
-    }
-    return decoratorInitialStore[classKey];
+var effectsClassStore = {};
+function effectsClass(className) {
+    return function(target, context) {
+        if (effectsClassStore[className]) {
+            console.warn("Class " + className + " 重复注册");
+        }
+        // TODO: three修改json dataType, 这边重复注册直接 return
+        effectsClassStore[className] = target;
+    };
+}
+function serialize(type, sourceName) {
+    return generateSerializableMember(type, sourceName); // value member
 }
 function getMergedStore(target) {
     var classKey = target.constructor.name;
@@ -4541,18 +4534,6 @@ function getMergedStore(target) {
     }
     return store;
 }
-function serialize(type, sourceName) {
-    return generateSerializableMember(type, sourceName); // value member
-}
-function effectsClass(className) {
-    return function(target, context) {
-        if (effectsClassStore[className]) {
-            console.warn("Class " + className + " 重复注册");
-        }
-        //TODO: three修改json dataType, 这边重复注册直接 return
-        effectsClassStore[className] = target;
-    };
-}
 function generateSerializableMember(type, sourceName) {
     return function(target, propertyKey) {
         var classStore = getDirectStore(target);
@@ -4564,6 +4545,13 @@ function generateSerializableMember(type, sourceName) {
         }
     };
 }
+function getDirectStore(target) {
+    var classKey = target.constructor.name;
+    if (!decoratorInitialStore[classKey]) {
+        decoratorInitialStore[classKey] = {};
+    }
+    return decoratorInitialStore[classKey];
+}
 
 /**
  * @since 2.0.0
@@ -4595,6 +4583,9 @@ function generateSerializableMember(type, sourceName) {
         }
     };
     _proto.dispose = function dispose() {};
+    EffectsObject.is = function is(obj) {
+        return _instanceof1(obj, EffectsObject) && "guid" in obj;
+    };
     return EffectsObject;
 }();
 __decorate([
@@ -4747,6 +4738,7 @@ __decorate([
         _this = Component.apply(this, arguments) || this;
         _this.started = false;
         _this.materials = [];
+        _this._priority = 0;
         _this._enabled = true;
         return _this;
     }
@@ -10003,7 +9995,7 @@ var RandomValue = /*#__PURE__*/ function(ValueGetter) {
         this.max = props[1];
     };
     _proto.getValue = function getValue(time) {
-        return random(this.min, this.max);
+        return randomInRange(this.min, this.max);
     };
     _proto.toUniform = function toUniform() {
         return new Float32Array([
@@ -14739,7 +14731,7 @@ var Cone = /*#__PURE__*/ function() {
         // dir + [0,0,1]
         dir.z += 1;
         return {
-            position: position.multiply(random(0, 1)),
+            position: position.multiply(randomInRange(0, 1)),
             direction: dir.normalize()
         };
     };
@@ -14747,7 +14739,7 @@ var Cone = /*#__PURE__*/ function() {
 }();
 function getArcAngle(arc, arcMode, opt) {
     if (arcMode === ShapeArcMode.RANDOM) {
-        arc = random(0, arc);
+        arc = randomInRange(0, arc);
     } else if (arcMode === ShapeArcMode.UNIDIRECTIONAL_CYCLE) {
         var d = opt.index % (opt.total + 1);
         arc = arc / opt.total * d;
@@ -14787,8 +14779,8 @@ var Rectangle = /*#__PURE__*/ function() {
     }
     var _proto = Rectangle.prototype;
     _proto.generate = function generate(opt) {
-        var x = random(-this._d, this._d);
-        var y = random(-this._h, this._h);
+        var x = randomInRange(-this._d, this._d);
+        var y = randomInRange(-this._h, this._h);
         return {
             direction: new Vector3(0, 0, 1),
             position: new Vector3(x, y, 0)
@@ -14838,7 +14830,7 @@ var Edge = /*#__PURE__*/ function() {
     }
     var _proto = Edge.prototype;
     _proto.generate = function generate(options) {
-        var x = this.arcMode === ShapeArcMode.UNIFORM_BURST ? options.burstIndex % options.burstCount / (options.burstCount - 1) : random(0, 1);
+        var x = this.arcMode === ShapeArcMode.UNIFORM_BURST ? options.burstIndex % options.burstCount / (options.burstCount - 1) : randomInRange(0, 1);
         return {
             direction: new Vector3(0, 1, 0),
             position: new Vector3(this._d * (x - 0.5), 0, 0)
@@ -14859,7 +14851,7 @@ var Donut = /*#__PURE__*/ function() {
     _proto.generate = function generate(opt) {
         var dradius = this.donutRadius;
         var center = this.radius - dradius;
-        var angle = random(0, Math.PI * 2);
+        var angle = randomInRange(0, Math.PI * 2);
         var arc = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
         var rot = tempMat4$2.setFromRotationZ(arc);
         var direction = new Vector3(Math.cos(angle), Math.sin(angle), 0);
@@ -14882,7 +14874,7 @@ var Sphere = /*#__PURE__*/ function() {
     }
     var _proto = Sphere.prototype;
     _proto.getHorizontalAngle = function getHorizontalAngle() {
-        return random(-90, 90);
+        return randomInRange(-90, 90);
     };
     _proto.generate = function generate(opt) {
         var rz = getArcAngle(this.arc, this.arcMode, opt) * DEG2RAD;
@@ -14905,7 +14897,7 @@ var Hemisphere = /*#__PURE__*/ function(Sphere) {
     }
     var _proto = Hemisphere.prototype;
     _proto.getHorizontalAngle = function getHorizontalAngle() {
-        return random(0, 90);
+        return randomInRange(0, 90);
     };
     return Hemisphere;
 }(Sphere);
@@ -16943,11 +16935,9 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
         this.props = props;
         this.destroyed = false;
         var cachePrefix = "";
-        var options = props.options;
-        var positionOverLifetime = props.positionOverLifetime;
-        var shape = props.shape;
-        var gravityModifier = positionOverLifetime.gravityOverLifetime;
-        var gravity = ensureVec3(positionOverLifetime.gravity);
+        var options = props.options, _props_positionOverLifetime = props.positionOverLifetime, positionOverLifetime = _props_positionOverLifetime === void 0 ? {} : _props_positionOverLifetime, shape = props.shape;
+        var gravityModifier = positionOverLifetime == null ? void 0 : positionOverLifetime.gravityOverLifetime;
+        var gravity = ensureVec3(positionOverLifetime == null ? void 0 : positionOverLifetime.gravity);
         var _textureSheetAnimation = props.textureSheetAnimation;
         var textureSheetAnimation = _textureSheetAnimation ? {
             animationDelay: createValueGetter(_textureSheetAnimation.animationDelay || 0),
@@ -16958,7 +16948,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
             row: _textureSheetAnimation.row,
             total: _textureSheetAnimation.total || _textureSheetAnimation.col * _textureSheetAnimation.row
         } : undefined;
-        var startTurbulence = !!(shape && shape.turbulenceX || shape.turbulenceY || shape.turbulenceZ);
+        var startTurbulence = !!(shape && shape.turbulenceX || (shape == null ? void 0 : shape.turbulenceY) || (shape == null ? void 0 : shape.turbulenceZ));
         var turbulence;
         if (startTurbulence) {
             var _shape_turbulenceX, _shape_turbulenceY, _shape_turbulenceZ;
@@ -16991,7 +16981,7 @@ exports.ParticleSystem = /*#__PURE__*/ function(Component) {
             }
         }
         var forceTarget;
-        if (positionOverLifetime.forceTarget) {
+        if (positionOverLifetime == null ? void 0 : positionOverLifetime.forceTarget) {
             forceTarget = {
                 target: positionOverLifetime.target || [
                     0,
@@ -18695,6 +18685,29 @@ var AnimationClipPlayable = /*#__PURE__*/ function(Playable) {
     return AnimationClipPlayable;
 }(Playable);
 
+/**
+ * @since 2.0.0
+ * @internal
+ */ var TimelineClip = /*#__PURE__*/ function() {
+    function TimelineClip() {
+        this.start = 0;
+        this.duration = 0;
+    }
+    var _proto = TimelineClip.prototype;
+    _proto.toLocalTime = function toLocalTime(time) {
+        var localTime = time - this.start;
+        var duration = this.duration;
+        if (localTime - duration > 0.001) {
+            if (this.endBehaviour === ItemEndBehavior.loop) {
+                localTime = localTime % duration;
+            } else if (this.endBehaviour === ItemEndBehavior.freeze) {
+                localTime = Math.min(duration, localTime);
+            }
+        }
+        return localTime;
+    };
+    return TimelineClip;
+}();
 exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
     _inherits(TrackAsset, PlayableAsset);
     function TrackAsset() {
@@ -18756,7 +18769,7 @@ exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
         this.children.push(child);
     };
     _proto.createClip = function createClip(classConstructor, name) {
-        var newClip = new exports.TimelineClip();
+        var newClip = new TimelineClip();
         newClip.asset = new classConstructor(this.engine);
         newClip.name = name ? name : "TimelineClip" + newClip.id;
         this.addClip(newClip);
@@ -18783,7 +18796,7 @@ exports.TrackAsset = /*#__PURE__*/ function(PlayableAsset) {
     return TrackAsset;
 }(PlayableAsset);
 __decorate([
-    serialize("TimelineClip")
+    serialize(TimelineClip)
 ], exports.TrackAsset.prototype, "clips", void 0);
 __decorate([
     serialize()
@@ -18796,29 +18809,6 @@ exports.TrackType = void 0;
     TrackType[TrackType["MasterTrack"] = 0] = "MasterTrack";
     TrackType[TrackType["ObjectTrack"] = 1] = "ObjectTrack";
 })(exports.TrackType || (exports.TrackType = {}));
-exports.TimelineClip = /*#__PURE__*/ function() {
-    function TimelineClip() {
-        this.start = 0;
-        this.duration = 0;
-    }
-    var _proto = TimelineClip.prototype;
-    _proto.toLocalTime = function toLocalTime(time) {
-        var localTime = time - this.start;
-        var duration = this.duration;
-        if (localTime - duration > 0.001) {
-            if (this.endBehaviour === ItemEndBehavior.loop) {
-                localTime = localTime % duration;
-            } else if (this.endBehaviour === ItemEndBehavior.freeze) {
-                localTime = Math.min(duration, localTime);
-            }
-        }
-        return localTime;
-    };
-    return TimelineClip;
-}();
-exports.TimelineClip = __decorate([
-    effectsClass("TimelineClip")
-], exports.TimelineClip);
 var RuntimeClip = /*#__PURE__*/ function() {
     function RuntimeClip(clip, clipPlayable, parentMixer, track) {
         this.clip = clip;
@@ -18905,10 +18895,6 @@ exports.ObjectBindingTrack = /*#__PURE__*/ function(TrackAsset1) {
             particleClip.endBehaviour = boundItem.endBehavior;
         }
     };
-    _proto.fromData = function fromData(data) {
-        TrackAsset1.prototype.fromData.call(this, data);
-        this.data = data;
-    };
     return ObjectBindingTrack;
 }(exports.TrackAsset);
 exports.ObjectBindingTrack = __decorate([
@@ -19148,7 +19134,6 @@ function compareTracks(a, b) {
         this.startTime = startTime;
         this.resolveBindings();
         this.timelinePlayable = this.timelineAsset.createPlayable(this.graph);
-        this.timelinePlayable.play();
         // 重播不销毁元素
         if (this.item.endBehavior !== ItemEndBehavior.destroy) {
             this.setReusable(true);
@@ -19567,7 +19552,6 @@ var CanvasPool = /*#__PURE__*/ function() {
             return this.elements.shift();
         }
         if (getConfig(TEMPLATE_USE_OFFSCREEN_CANVAS)) {
-            // @ts-expect-error
             return window._createOffscreenCanvas(10, 10);
         } else {
             // in hongmeng system, create too many canvas will case render error
@@ -20136,6 +20120,7 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         /**
    * 元素动画的速度
    */ _this.speed = 1;
+        _this.listIndex = 0;
         _this.name = "VFXItem";
         _this.transform.name = _this.name;
         _this.transform.engine = engine;
@@ -20406,7 +20391,6 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         this.parentId = parentId;
         this.duration = duration;
         this.endBehavior = endBehavior;
-        this.renderOrder = listIndex;
         //@ts-expect-error
         this.oldId = data.oldId;
         if (!data.content) {
@@ -20417,18 +20401,12 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
         if (duration <= 0) {
             throw Error("Item duration can't be less than 0, see " + HELP_LINK["Item duration can't be less than 0"]);
         }
-        if (data.components) {
-            for(var _iterator = _create_for_of_iterator_helper_loose(data.components), _step; !(_step = _iterator()).done;){
-                var component = _step.value;
-                var newComponent = component;
-                this.components.push(newComponent);
-                if (_instanceof1(newComponent, RendererComponent)) {
-                    this.rendererComponents.push(newComponent);
-                } else if (_instanceof1(newComponent, ItemBehaviour)) {
-                    this.itemBehaviours.push(newComponent);
-                }
-            }
+        for(var _iterator = _create_for_of_iterator_helper_loose(this.components), _step; !(_step = _iterator()).done;){
+            var component = _step.value;
+            component.onAttached();
         }
+        // renderOrder 在 component 初始化后设置。确保能拿到 rendererComponent。
+        this.renderOrder = listIndex;
     };
     _proto.toData = function toData() {
         var _this_parent;
@@ -20559,6 +20537,9 @@ exports.VFXItem = /*#__PURE__*/ function(EffectsObject) {
     ]);
     return VFXItem;
 }(EffectsObject);
+__decorate([
+    serialize()
+], exports.VFXItem.prototype, "components", void 0);
 exports.VFXItem = __decorate([
     effectsClass(DataType.VFXItemData)
 ], exports.VFXItem);
@@ -20788,22 +20769,22 @@ var SerializationHelper = /*#__PURE__*/ function() {
             if (value === undefined) {
                 value = effectsObject[key];
             }
-            if (_instanceof1(value, EffectsObject)) {
-                this.collectSerializableObject(value, res);
-            } else if (_instanceof1(value, Array)) {
+            if (EffectsObject.is(value)) {
+                SerializationHelper.collectSerializableObject(value, res);
+            } else if (isArray(value)) {
                 for(var _iterator1 = _create_for_of_iterator_helper_loose(value), _step1; !(_step1 = _iterator1()).done;){
                     var arrayValue = _step1.value;
-                    if (_instanceof1(arrayValue, EffectsObject)) {
-                        this.collectSerializableObject(arrayValue, res);
+                    if (EffectsObject.is(arrayValue)) {
+                        SerializationHelper.collectSerializableObject(arrayValue, res);
                     }
                 }
-            } else if (_instanceof1(value, Object)) {
+            } else if (isObject(value)) {
                 // 非 EffectsObject 对象只递归一层
                 for(var _iterator2 = _create_for_of_iterator_helper_loose(Object.keys(value)), _step2; !(_step2 = _iterator2()).done;){
                     var objectKey = _step2.value;
                     var objectValue = value[objectKey];
-                    if (_instanceof1(objectValue, EffectsObject)) {
-                        this.collectSerializableObject(objectValue, res);
+                    if (EffectsObject.is(objectValue)) {
+                        SerializationHelper.collectSerializableObject(objectValue, res);
                     }
                 }
             }
@@ -20840,17 +20821,17 @@ var SerializationHelper = /*#__PURE__*/ function() {
             if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(value)) {
                 // TODO json 数据避免传 typedArray
                 serializedData[key] = value;
-            } else if (_instanceof1(value, Array)) {
+            } else if (isArray(value)) {
                 if (!serializedData[key]) {
                     serializedData[key] = [];
                 }
                 SerializationHelper.serializeArrayProperty(value, serializedData[key], 0);
-            } else if (_instanceof1(value, EffectsObject)) {
+            } else if (EffectsObject.is(value)) {
                 // TODO 处理 EffectsObject 递归序列化
                 serializedData[key] = {
                     id: value.getInstanceId()
                 };
-            } else if (_instanceof1(value, Object)) {
+            } else if (isObject(value)) {
                 if (!serializedData[key]) {
                     serializedData[key] = {};
                 }
@@ -20864,17 +20845,17 @@ var SerializationHelper = /*#__PURE__*/ function() {
             if (typeof value1 === "number" || typeof value1 === "string" || typeof value1 === "boolean" || SerializationHelper.checkTypedArray(value1)) {
                 // TODO json 数据避免传 typedArray
                 serializedData[key1] = value1;
-            } else if (_instanceof1(value1, Array)) {
+            } else if (isArray(value1)) {
                 if (!serializedData[key1]) {
                     serializedData[key1] = [];
                 }
                 SerializationHelper.serializeArrayProperty(value1, serializedData[key1], 0);
-            } else if (_instanceof1(value1, EffectsObject)) {
+            } else if (EffectsObject.is(value1)) {
                 // TODO 处理 EffectsObject 递归序列化
                 serializedData[key1] = {
                     id: value1.getInstanceId()
                 };
-            } else if (_instanceof1(value1, Object)) {
+            } else if (isObject(value1)) {
                 if (!serializedData[key1]) {
                     serializedData[key1] = {};
                 }
@@ -20987,13 +20968,13 @@ var SerializationHelper = /*#__PURE__*/ function() {
     SerializationHelper.checkTypedArray = function checkTypedArray(obj) {
         return _instanceof1(obj, Int8Array) || _instanceof1(obj, Uint8Array) || _instanceof1(obj, Uint8ClampedArray) || _instanceof1(obj, Int16Array) || _instanceof1(obj, Uint16Array) || _instanceof1(obj, Int32Array) || _instanceof1(obj, Uint32Array) || _instanceof1(obj, Float32Array) || _instanceof1(obj, Float64Array) || _instanceof1(obj, ArrayBuffer);
     };
+    // check value is { id: 7e69662e964e4892ae8933f24562395b }
     SerializationHelper.checkDataPath = function checkDataPath(value) {
-        // check value is { id: 7e69662e964e4892ae8933f24562395b }
-        return _instanceof1(value, Object) && Object.keys(value).length === 1 && value.id && value.id.length === 32;
+        return !!(isObject(value) && Object.keys(value).length === 1 && "id" in value && isString(value.id) && value.id.length === 32);
     };
     // TODO 测试函数，2.0 上线后移除
     SerializationHelper.checkGLTFNode = function checkGLTFNode(value) {
-        return _instanceof1(value, Object) && value.nodeIndex !== undefined && value.isJoint !== undefined;
+        return isObject(value) && value.nodeIndex !== undefined && value.isJoint !== undefined;
     };
     SerializationHelper.checkImageSource = function checkImageSource(value) {
         return isCanvas(value) || _instanceof1(value, HTMLImageElement);
@@ -21004,7 +20985,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
             return;
         }
         // 加载并链接 DataPath 字段表示的 EffectsObject 引用。Class 对象 copy [key, value] 会丢失对象信息，因此只递归数组对象和普通 js Object 结构对象。
-        if (_instanceof1(property, Array)) {
+        if (isArray(property)) {
             var res = [];
             for(var _iterator = _create_for_of_iterator_helper_loose(property), _step; !(_step = _iterator()).done;){
                 var value = _step.value;
@@ -21014,17 +20995,15 @@ var SerializationHelper = /*#__PURE__*/ function() {
         // TODO json 数据避免传 typedArray
         } else if (SerializationHelper.checkDataPath(property)) {
             return engine.assetLoader.loadGUID(property.id);
-        } else if (_instanceof1(property, Object) && property.constructor === Object) {
+        } else if (isObject(property) && property.constructor === Object) {
             var res1;
             if (type) {
-                var classConstructor = effectsClassStore[type];
-                res1 = new classConstructor();
+                res1 = new type();
             } else {
                 res1 = {};
             }
             for(var _iterator1 = _create_for_of_iterator_helper_loose(Object.keys(property)), _step1; !(_step1 = _iterator1()).done;){
                 var key = _step1.value;
-                // @ts-expect-error
                 res1[key] = SerializationHelper.deserializeProperty(property[key], engine, level + 1);
             }
             return res1;
@@ -21034,7 +21013,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
     };
     SerializationHelper.deserializePropertyAsync = function deserializePropertyAsync(property, engine, level, type) {
         return _async_to_generator(function() {
-            var res, _iterator, _step, value, _, res1, res2, classConstructor, _iterator1, _step1, key;
+            var res, _iterator, _step, value, _, res1, res2, _iterator1, _step1, key;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -21044,7 +21023,7 @@ var SerializationHelper = /*#__PURE__*/ function() {
                                 2
                             ];
                         }
-                        if (!_instanceof1(property, Array)) return [
+                        if (!isArray(property)) return [
                             3,
                             5
                         ];
@@ -21093,16 +21072,14 @@ var SerializationHelper = /*#__PURE__*/ function() {
                             res1
                         ];
                     case 7:
-                        if (_instanceof1(property, Object) && property.constructor === Object) {
+                        if (isObject(property) && property.constructor === Object) {
                             if (type) {
-                                classConstructor = effectsClassStore[type];
-                                res2 = new classConstructor();
+                                res2 = new type();
                             } else {
                                 res2 = {};
                             }
                             for(_iterator1 = _create_for_of_iterator_helper_loose(Object.keys(property)); !(_step1 = _iterator1()).done;){
                                 key = _step1.value;
-                                // @ts-expect-error
                                 res2[key] = SerializationHelper.deserializeProperty(property[key], engine, level + 1);
                             }
                             return [
@@ -21137,17 +21114,17 @@ var SerializationHelper = /*#__PURE__*/ function() {
             if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(objectProperty)) {
                 // TODO json 数据避免传 typedArray
                 serializedData[key] = value;
-            } else if (_instanceof1(value, Array)) {
+            } else if (isArray(value)) {
                 if (!serializedData[key]) {
                     serializedData[key] = [];
                 }
                 SerializationHelper.serializeArrayProperty(value, serializedData[key], level + 1);
-            } else if (_instanceof1(value, EffectsObject)) {
+            } else if (EffectsObject.is(value)) {
                 // TODO 处理 EffectsObject 递归序列化
                 serializedData[key] = {
                     id: value.getInstanceId()
                 };
-            } else if (_instanceof1(value, Object)) {
+            } else if (isObject(value)) {
                 if (!serializedData[key]) {
                     serializedData[key] = {};
                 }
@@ -21168,17 +21145,17 @@ var SerializationHelper = /*#__PURE__*/ function() {
             if (typeof value === "number" || typeof value === "string" || typeof value === "boolean" || SerializationHelper.checkTypedArray(arrayProperty)) {
                 // TODO json 数据避免传 typedArray
                 serializedData[i] = value;
-            } else if (_instanceof1(value, Array)) {
+            } else if (isArray(value)) {
                 if (!serializedData[i]) {
                     serializedData[i] = [];
                 }
-                this.serializeArrayProperty(value, serializedData[i], level + 1);
-            } else if (_instanceof1(value, EffectsObject)) {
+                SerializationHelper.serializeArrayProperty(value, serializedData[i], level + 1);
+            } else if (EffectsObject.is(value)) {
                 // TODO 处理 EffectsObject 递归序列化
                 serializedData[i] = {
                     id: value.getInstanceId()
                 };
-            } else if (_instanceof1(value, Object)) {
+            } else if (isObject(value)) {
                 if (!serializedData[i]) {
                     serializedData[i] = {};
                 }
@@ -22218,8 +22195,6 @@ function getStandardCameraContent(model) {
         // 生成时间轴数据
         convertTimelineAsset(compositionData, guidToItemMap, result);
     };
-    var // 更正 spine 数据中的 images 属性
-    _json_spines;
     var // 兼容老版本数据中不存在textures的情况
     _result;
     var result = _extends({}, json, {
@@ -22229,7 +22204,8 @@ function getStandardCameraContent(model) {
         materials: [],
         shaders: [],
         geometries: [],
-        animations: []
+        animations: [],
+        miscs: []
     });
     // image数据添加 guid
     for(var _iterator = _create_for_of_iterator_helper_loose(result.images), _step; !(_step = _iterator()).done;){
@@ -22259,17 +22235,10 @@ function getStandardCameraContent(model) {
             });
         }
     }
-    (_json_spines = json.spines) == null ? void 0 : _json_spines.forEach(function(spine) {
-        for(var i = 0; i < spine.images.length; i++){
-            var _json_textures_spine_images_i;
-            //@ts-expect-error
-            var textureId = (_json_textures_spine_images_i = json.textures[spine.images[i]]) == null ? void 0 : _json_textures_spine_images_i.id;
-            //@ts-expect-error
-            spine.images[i] = {
-                id: textureId
-            };
-        }
-    });
+    // 处理老版本数据中 bins 没有 id 的情况
+    if (json.bins) {
+        convertBinaryAsset(json.bins, result);
+    }
     var itemOldIdToGuidMap = {};
     var guidToItemMap = {};
     // 更正Composition.endBehavior
@@ -22433,6 +22402,10 @@ function getStandardCameraContent(model) {
             //@ts-expect-error
             item.type = "orientation-transformer";
         }
+        // Spine 元素转为 guid 索引
+        if (item.type === ItemType.spine && json.spines && json.spines.length !== 0) {
+            convertSpineData(json.spines[item.content.options.spine], item.content, result);
+        }
         // item 的 content 转为 component data 加入 JSONScene.components
         if (item.type === ItemType.sprite || item.type === ItemType.particle || item.type === ItemType.mesh || item.type === ItemType.skybox || item.type === ItemType.light || item.type === "camera" || item.type === ItemType.tree || item.type === ItemType.interact || item.type === ItemType.camera || item.type === ItemType.text || item.type === ItemType.spine || item.type === "editor-gizmo" || item.type === "orientation-transformer") {
             item.components = [];
@@ -22680,22 +22653,54 @@ function convertTimelineAsset(composition, guidToItemMap, jsonScene) {
         id: timelineAssetData.id
     };
     composition.sceneBindings = sceneBindings;
-    if (!jsonScene.animations) {
-        jsonScene.animations = [];
-    }
-    // @ts-expect-error
-    jsonScene.animations.push(timelineAssetData);
+    jsonScene.miscs.push(timelineAssetData);
     for(var _iterator2 = _create_for_of_iterator_helper_loose(trackDatas), _step2; !(_step2 = _iterator2()).done;){
         var trackData1 = _step2.value;
         //@ts-expect-error
-        jsonScene.animations.push(trackData1);
+        jsonScene.miscs.push(trackData1);
     }
     for(var _iterator3 = _create_for_of_iterator_helper_loose(playableAssetDatas), _step3; !(_step3 = _iterator3()).done;){
         var playableAsset = _step3.value;
         //@ts-expect-error
-        jsonScene.animations.push(playableAsset);
+        jsonScene.miscs.push(playableAsset);
     }
 }
+function convertBinaryAsset(bins, jsonScene) {
+    //@ts-expect-error
+    jsonScene.bins = bins.map(function(bin) {
+        return {
+            url: bin.url,
+            "dataType": "BinaryAsset",
+            id: generateGUID()
+        };
+    });
+}
+function convertSpineData(resource, content, jsonScene) {
+    //@ts-expect-error
+    content.resource = {
+        "atlas": {
+            "bins": {
+                //@ts-expect-error
+                "id": jsonScene.bins[resource.atlas[1][0]].id
+            },
+            "source": resource.atlas[1].slice(1)
+        },
+        "skeleton": {
+            "bins": {
+                //@ts-expect-error
+                "id": jsonScene.bins[resource.skeleton[1][0]].id
+            },
+            "source": resource.skeleton[1].slice(1)
+        },
+        "skeletonType": resource.skeletonType,
+        "images": resource.images.map(function(i) {
+            return {
+                //@ts-expect-error
+                id: jsonScene.textures[i].id
+            };
+        })
+    };
+}
 
 var v0 = /^(\d+)\.(\d+)\.(\d+)(-(\w+)\.\d+)?$/;
 var standardVersion = /^(\d+)\.(\d+)$/;
@@ -23441,7 +23446,7 @@ var seed$1 = 1;
                         return [
                             4,
                             new Promise(function(resolve) {
-                                shaderLibrary.compileAllShaders(function() {
+                                shaderLibrary == null ? void 0 : shaderLibrary.compileAllShaders(function() {
                                     resolve(null);
                                 });
                             })
@@ -25255,7 +25260,7 @@ var listOrder = 0;
     };
     _proto.addPackageDatas = function addPackageDatas(scene) {
         var jsonScene = scene.jsonScene, _scene_textureOptions = scene.textureOptions, textureOptions = _scene_textureOptions === void 0 ? [] : _scene_textureOptions;
-        var _jsonScene_items = jsonScene.items, items = _jsonScene_items === void 0 ? [] : _jsonScene_items, _jsonScene_materials = jsonScene.materials, materials = _jsonScene_materials === void 0 ? [] : _jsonScene_materials, _jsonScene_shaders = jsonScene.shaders, shaders = _jsonScene_shaders === void 0 ? [] : _jsonScene_shaders, _jsonScene_geometries = jsonScene.geometries, geometries = _jsonScene_geometries === void 0 ? [] : _jsonScene_geometries, _jsonScene_components = jsonScene.components, components = _jsonScene_components === void 0 ? [] : _jsonScene_components, _jsonScene_animations = jsonScene.animations, animations = _jsonScene_animations === void 0 ? [] : _jsonScene_animations, _jsonScene_bins = jsonScene.bins, bins = _jsonScene_bins === void 0 ? [] : _jsonScene_bins;
+        var _jsonScene_items = jsonScene.items, items = _jsonScene_items === void 0 ? [] : _jsonScene_items, _jsonScene_materials = jsonScene.materials, materials = _jsonScene_materials === void 0 ? [] : _jsonScene_materials, _jsonScene_shaders = jsonScene.shaders, shaders = _jsonScene_shaders === void 0 ? [] : _jsonScene_shaders, _jsonScene_geometries = jsonScene.geometries, geometries = _jsonScene_geometries === void 0 ? [] : _jsonScene_geometries, _jsonScene_components = jsonScene.components, components = _jsonScene_components === void 0 ? [] : _jsonScene_components, _jsonScene_animations = jsonScene.animations, animations = _jsonScene_animations === void 0 ? [] : _jsonScene_animations, _jsonScene_bins = jsonScene.bins, bins = _jsonScene_bins === void 0 ? [] : _jsonScene_bins, _jsonScene_miscs = jsonScene.miscs, miscs = _jsonScene_miscs === void 0 ? [] : _jsonScene_miscs;
         for(var _iterator = _create_for_of_iterator_helper_loose(items), _step; !(_step = _iterator()).done;){
             var vfxItemData = _step.value;
             this.addEffectsObjectData(vfxItemData);
@@ -25280,6 +25285,10 @@ var listOrder = 0;
             var animationData = _step5.value;
             this.addEffectsObjectData(animationData);
         }
+        for(var _iterator6 = _create_for_of_iterator_helper_loose(miscs), _step6; !(_step6 = _iterator6()).done;){
+            var miscData = _step6.value;
+            this.addEffectsObjectData(miscData);
+        }
         for(var i = 0; i < bins.length; i++){
             var binaryData = bins[i];
             var binaryBuffer = scene.bins[i];
@@ -25291,8 +25300,8 @@ var listOrder = 0;
                 this.addEffectsObjectData(binaryData);
             }
         }
-        for(var _iterator6 = _create_for_of_iterator_helper_loose(textureOptions), _step6; !(_step6 = _iterator6()).done;){
-            var textureData = _step6.value;
+        for(var _iterator7 = _create_for_of_iterator_helper_loose(textureOptions), _step7; !(_step7 = _iterator7()).done;){
+            var textureData = _step7.value;
             this.addEffectsObjectData(textureData);
         }
     };
@@ -26660,6 +26669,14 @@ var seed = 1;
    */ _proto.dispose = function dispose() {
         this.texture.dispose();
     };
+    /**
+   * 通过图层设置创建贴图
+   * @param data - 图层设置
+   */ _proto.fromData = function fromData(data) {
+        Texture.prototype.fromData.call(this, data);
+        this.texture = this.createTextureByType(data);
+        this.texture.needsUpdate = true;
+    };
     _proto.createTextureByType = function createTextureByType(options) {
         var assembleOptions = this.assembleOptions(options);
         // TODO renderer.getMaxAnisotropy() 查询最大各向异性
@@ -27180,7 +27197,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.0.0-alpha.16";
+var version = "2.0.0-alpha.17";
 logger.info("THREEJS plugin version: " + version);
 
 exports.AbstractPlugin = AbstractPlugin;
@@ -27273,7 +27290,9 @@ exports.SpriteLoader = SpriteLoader;
 exports.StaticValue = StaticValue;
 exports.TEMPLATE_USE_OFFSCREEN_CANVAS = TEMPLATE_USE_OFFSCREEN_CANVAS;
 exports.TEXTURE_UNIFORM_MAP = TEXTURE_UNIFORM_MAP;
+exports.TextLayout = TextLayout;
 exports.TextLoader = TextLoader;
+exports.TextStyle = TextStyle;
 exports.Texture = Texture;
 exports.TextureFactory = TextureFactory;
 exports.ThreeComposition = ThreeComposition;
@@ -27282,6 +27301,7 @@ exports.ThreeEngine = ThreeEngine;
 exports.ThreeMaterial = ThreeMaterial;
 exports.ThreeTexture = ThreeTexture;
 exports.Ticker = Ticker;
+exports.TimelineClip = TimelineClip;
 exports.TimelinePlayable = TimelinePlayable;
 exports.TrackSortWrapper = TrackSortWrapper;
 exports.Transform = Transform;
@@ -27310,7 +27330,6 @@ exports.createShape = createShape;
 exports.createVFXItem = createVFXItem;
 exports.createValueGetter = createValueGetter;
 exports.decimalEqual = decimalEqual;
-exports.deepClone = deepClone;
 exports.defaultGlobalVolume = defaultGlobalVolume;
 exports.defaultPlugins = defaultPlugins;
 exports.deserializeMipmapTexture = deserializeMipmapTexture;
@@ -27397,7 +27416,7 @@ exports.particleUniformTypeMap = particleUniformTypeMap;
 exports.particleVert = particleVert;
 exports.pluginLoaderMap = pluginLoaderMap;
 exports.pointOnLine = pointOnLine;
-exports.random = random;
+exports.randomInRange = randomInRange;
 exports.registerPlugin = registerPlugin;
 exports.removeItem = removeItem;
 exports.rotateVec2 = rotateVec2;