@galacean/effects-plugin-model 2.10.3 → 2.11.0-alpha.0

package/dist/loader.mjs

@@ -3,11 +3,10 @@
  * Description: Galacean Effects player model plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 飂兮
- * Version: v2.10.3
+ * Version: v2.11.0-alpha.0
  */
 
-import * as EFFECTS from '@galacean/effects';
-import { math, Transform, spec, PLAYER_OPTIONS_ENV_EDITOR, VertexBuffer, glContext, Material, Mesh, Geometry, ShaderFactory, GLSLVersion, VFXItem, Plugin, effectsClass, Behaviour, registerPlugin, logger, RendererComponent, HitTestType, AnimationClip, TextureSourceType, Texture, DestroyOptions, RenderPassDestroyAttachmentType, getDefaultTextureFactory, Player, loadImage, generateGUID, addItem, removeItem, glType2VertexFormatType, Downloader, getStandardJSON, isObject } from '@galacean/effects';
+import { math, Transform, spec, PLAYER_OPTIONS_ENV_EDITOR, VertexElementType, glContext, Material, Mesh, Geometry, ShaderFactory, GLSLVersion, VFXItem, Plugin, effectsClass, Behaviour, RendererComponent, HitTestType, AnimationClip, TextureSourceType, Texture, DestroyOptions, RenderPassDestroyAttachmentType, getDefaultTextureFactory, Player, loadImage, generateGUID, addItem, removeItem, glType2VertexFormatType, Downloader, getStandardJSON, isObject } from '@galacean/effects';
 
 var Vector2 = math.Vector2, Vector3 = math.Vector3, Vector4 = math.Vector4, Matrix3 = math.Matrix3, Matrix4 = math.Matrix4, Color = math.Color, Euler = math.Euler, EulerOrder = math.EulerOrder, Quaternion = math.Quaternion, Box3 = math.Box3; math.Sphere; math.Ray; var DEG2RAD = math.DEG2RAD;
 
@@ -938,78 +937,6 @@ var objectIndex = 1;
     return PEntity;
 }(PObject);
 
-/**
- * Model 插件元素类型
- */ var VFX_ITEM_TYPE_3D = "PluginModel";
-
-function _is_native_reflect_construct() {
-    // Since Reflect.construct can't be properly polyfilled, some
-    // implementations (e.g. core-js@2) don't set the correct internal slots.
-    // Those polyfills don't allow us to subclass built-ins, so we need to
-    // use our fallback implementation.
-    try {
-        // If the internal slots aren't set, this throws an error similar to
-        //   TypeError: this is not a Boolean object.
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function _is_native_reflect_construct() {
-        return !!result;
-    })();
-}
-
-function _construct(Parent, args, Class) {
-    if (_is_native_reflect_construct()) _construct = Reflect.construct;
-    else {
-        _construct = function construct(Parent, args, Class) {
-            var a = [
-                null
-            ];
-            a.push.apply(a, args);
-            var Constructor = Function.bind.apply(Parent, a);
-            var instance = new Constructor();
-            if (Class) _set_prototype_of(instance, Class.prototype);
-            return instance;
-        };
-    }
-    return _construct.apply(null, arguments);
-}
-
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-
-function _is_native_function(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-function _wrap_native_super(Class) {
-    var _cache = typeof Map === "function" ? new Map() : undefined;
-    _wrap_native_super = function _wrap_native_super(Class) {
-        if (Class === null || !_is_native_function(Class)) return Class;
-        if (typeof Class !== "function") throw new TypeError("Super expression must either be null or a function");
-        if (typeof _cache !== "undefined") {
-            if (_cache.has(Class)) return _cache.get(Class);
-            _cache.set(Class, Wrapper);
-        }
-        function Wrapper() {
-            return _construct(Class, arguments, _get_prototype_of(this).constructor);
-        }
-        Wrapper.prototype = Object.create(Class.prototype, {
-            constructor: {
-                value: Wrapper,
-                enumerable: false,
-                writable: true,
-                configurable: true
-            }
-        });
-        return _set_prototype_of(Wrapper, Class);
-    };
-    return _wrap_native_super(Class);
-}
-
 /**
  * 包围盒 Mesh 类，负责 3D Mesh 测试包围盒的显示
  */ var BoxMesh = /*#__PURE__*/ function() {
@@ -1112,7 +1039,7 @@ function _wrap_native_super(Class) {
                 ]);
                 var _obj;
                 return {
-                    attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+                    attributes: (_obj = {}, _obj[VertexElementType.Position] = {
                         type: glContext.FLOAT,
                         size: 1,
                         data: data,
@@ -1415,9 +1342,77 @@ function getQuadFilterVS() {
     return TwoStatesSet;
 }();
 
+function _is_native_reflect_construct() {
+    // Since Reflect.construct can't be properly polyfilled, some
+    // implementations (e.g. core-js@2) don't set the correct internal slots.
+    // Those polyfills don't allow us to subclass built-ins, so we need to
+    // use our fallback implementation.
+    try {
+        // If the internal slots aren't set, this throws an error similar to
+        //   TypeError: this is not a Boolean object.
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function _is_native_reflect_construct() {
+        return !!result;
+    })();
+}
+
+function _construct(Parent, args, Class) {
+    if (_is_native_reflect_construct()) _construct = Reflect.construct;
+    else {
+        _construct = function construct(Parent, args, Class) {
+            var a = [
+                null
+            ];
+            a.push.apply(a, args);
+            var Constructor = Function.bind.apply(Parent, a);
+            var instance = new Constructor();
+            if (Class) _set_prototype_of(instance, Class.prototype);
+            return instance;
+        };
+    }
+    return _construct.apply(null, arguments);
+}
+
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+
+function _is_native_function(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+
+function _wrap_native_super(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+    _wrap_native_super = function _wrap_native_super(Class) {
+        if (Class === null || !_is_native_function(Class)) return Class;
+        if (typeof Class !== "function") throw new TypeError("Super expression must either be null or a function");
+        if (typeof _cache !== "undefined") {
+            if (_cache.has(Class)) return _cache.get(Class);
+            _cache.set(Class, Wrapper);
+        }
+        function Wrapper() {
+            return _construct(Class, arguments, _get_prototype_of(this).constructor);
+        }
+        Wrapper.prototype = Object.create(Class.prototype, {
+            constructor: {
+                value: Wrapper,
+                enumerable: false,
+                writable: true,
+                configurable: true
+            }
+        });
+        return _set_prototype_of(Wrapper, Class);
+    };
+    return _wrap_native_super(Class);
+}
+
 /**
  * Model 插件类，负责支持播放器中的 3D 功能
- */ var ModelPlugin = /*#__PURE__*/ function(Plugin) {
+ */ /*#__PURE__*/ (function(Plugin) {
     _inherits(ModelPlugin, Plugin);
     function ModelPlugin() {
         var _this;
@@ -1476,7 +1471,7 @@ function getQuadFilterVS() {
         //
         PluginHelper.preprocessScene(scene, runtimeEnv, compatibleMode);
         // Add PBR and Unlit shader data
-        var isWebGL2 = engine.gpuCapability.level === 2;
+        var isWebGL2 = engine.displayServer.renderingDevice.gpuCapability.level === 2;
         var pbrShaderCode = fetchPBRShaderCode();
         var unlitShaderCode = fetchUnlitShaderCode();
         var pbrShaderData = {
@@ -1497,8 +1492,8 @@ function getQuadFilterVS() {
             // @ts-expect-error
             glslVersion: isWebGL2 ? GLSLVersion.GLSL3 : GLSLVersion.GLSL1
         };
-        engine.addEffectsObjectData(pbrShaderData);
-        engine.addEffectsObjectData(unlitShaderData);
+        engine.assetServer.addEffectsObjectData(pbrShaderData);
+        engine.assetServer.addEffectsObjectData(unlitShaderData);
     };
     /**
    * 创建 3D 场景管理器和缓存器
@@ -1518,7 +1513,7 @@ function getQuadFilterVS() {
         modelPluginComponent.sceneParams = (_scene_storage = scene == null ? void 0 : scene.storage) != null ? _scene_storage : {};
     };
     return ModelPlugin;
-}(_wrap_native_super(Plugin));
+})(_wrap_native_super(Plugin));
 var ModelPluginComponent = /*#__PURE__*/ function(Behaviour) {
     _inherits(ModelPluginComponent, Behaviour);
     function ModelPluginComponent(engine) {
@@ -1581,18 +1576,16 @@ var ModelPluginComponent = /*#__PURE__*/ function(Behaviour) {
             // 更新相机的位置，主要是composition的camera数据，以及camera item数据
             composition.camera.position = position;
             (_composition_items = composition.items) == null ? void 0 : _composition_items.forEach(function(item) {
-                if (item.type === VFX_ITEM_TYPE_3D) {
-                    var component = item.getComponent(ModelCameraComponent);
-                    if (component == null ? void 0 : component.content) {
-                        var _item_transform_parentTransform;
-                        var worldMatrix = ((_item_transform_parentTransform = item.transform.parentTransform) == null ? void 0 : _item_transform_parentTransform.getWorldMatrix()) || Matrix4.IDENTITY.clone();
-                        var invWorldMatrix = worldMatrix.invert();
-                        var newPosition = invWorldMatrix.transformPoint(position);
-                        component.setTransform(newPosition);
-                        // 正式版本不会走到这个流程，只在测试时使用
-                        console.info("Scene AABB [" + sceneAABB.min.toArray() + "], [" + sceneAABB.max.toArray() + "].");
-                        console.info("Update camera position [" + newPosition.toArray() + "].");
-                    }
+                var component = item.getComponent(ModelCameraComponent);
+                if (component == null ? void 0 : component.content) {
+                    var _item_transform_parentTransform;
+                    var worldMatrix = ((_item_transform_parentTransform = item.transform.parentTransform) == null ? void 0 : _item_transform_parentTransform.getWorldMatrix()) || Matrix4.IDENTITY.clone();
+                    var invWorldMatrix = worldMatrix.invert();
+                    var newPosition = invWorldMatrix.transformPoint(position);
+                    component.setTransform(newPosition);
+                    // 正式版本不会走到这个流程，只在测试时使用
+                    console.info("Scene AABB [" + sceneAABB.min.toArray() + "], [" + sceneAABB.max.toArray() + "].");
+                    console.info("Update camera position [" + newPosition.toArray() + "].");
                 }
             });
         }
@@ -1705,593 +1698,329 @@ ModelPluginComponent = __decorate([
     return pluginComp == null ? void 0 : pluginComp.scene;
 }
 
-var ModelTreeComponent = /*#__PURE__*/ function(Behaviour) {
-    _inherits(ModelTreeComponent, Behaviour);
-    function ModelTreeComponent(engine, options) {
+var ModelMeshComponent = /*#__PURE__*/ function(RendererComponent) {
+    _inherits(ModelMeshComponent, RendererComponent);
+    function ModelMeshComponent(engine, data) {
         var _this;
-        _this = Behaviour.call(this, engine) || this;
-        if (options) {
-            _this.fromData(options);
+        _this = RendererComponent.call(this, engine) || this;
+        /**
+   * morph 动画权重
+   */ _this.morphWeights = [];
+        _this.firstUpdate = true;
+        /**
+   * 获取点击测试参数，根据元素包围盒进行相交测试，Mesh 对象会进行更加精确的点击测试
+   * @param force - 是否强制进行点击测试
+   * @returns 点击测试参数
+   */ _this.getHitTestParams = function(force) {
+            _this.computeBoundingBox();
+            var bounding = _this.bounding;
+            if (bounding && (force || Number.isInteger(bounding.behavior))) {
+                var type = bounding.type;
+                if (type === spec.ModelBoundingType.box) {
+                    if (_instanceof1(_this.content, PMesh)) {
+                        var mesh = _this.content;
+                        var customHitTest = {
+                            behavior: bounding.behavior,
+                            type: HitTestType.custom,
+                            clipMasks: _this.frameClipMasks,
+                            collect: function collect(ray, pointInCanvas) {
+                                var result = mesh.hitTesting(ray.origin, ray.direction);
+                                return result;
+                            }
+                        };
+                        return customHitTest;
+                    } else {
+                        var worldMatrixData = _this.transform.getWorldMatrix();
+                        var customHitTest1 = {
+                            behavior: bounding.behavior,
+                            type: HitTestType.custom,
+                            clipMasks: _this.frameClipMasks,
+                            collect: function collect(ray, pointInCanvas) {
+                                var result = RayIntersectsBoxWithRotation(ray, worldMatrixData, bounding);
+                                return result;
+                            }
+                        };
+                        return customHitTest1;
+                    }
+                } else if (type === spec.ModelBoundingType.sphere) {
+                    var pos = new Vector3();
+                    _this.transform.assignWorldTRS(pos);
+                    var center = new Vector3();
+                    if (bounding.center) {
+                        center.setFromArray(bounding.center);
+                    }
+                    center.add(pos);
+                    return {
+                        type: type,
+                        behavior: bounding.behavior,
+                        radius: bounding.radius || 0,
+                        center: center,
+                        clipMasks: _this.frameClipMasks
+                    };
+                }
+            }
+        };
+        if (data) {
+            _this.fromData(data);
         }
         return _this;
     }
-    var _proto = ModelTreeComponent.prototype;
+    var _proto = ModelMeshComponent.prototype;
     /**
-   * 反序列化，保存入参和创建节点树元素
-   * @param options
-   */ _proto.fromData = function fromData(options) {
-        Behaviour.prototype.fromData.call(this, options);
-        this.options = options;
-    };
-    return ModelTreeComponent;
-}(Behaviour);
-ModelTreeComponent = __decorate([
-    effectsClass(spec.DataType.TreeComponent)
-], ModelTreeComponent);
-
-var CameraGestureType;
-(function(CameraGestureType) {
-    CameraGestureType[CameraGestureType["none"] = 0] = "none";
-    CameraGestureType[CameraGestureType["translate"] = 1] = "translate";
-    CameraGestureType[CameraGestureType["rotate_focus"] = 2] = "rotate_focus";
-    CameraGestureType[CameraGestureType["rotate_self"] = 3] = "rotate_self";
-    CameraGestureType[CameraGestureType["scale"] = 4] = "scale";
-})(CameraGestureType || (CameraGestureType = {}));
-
-var CameraGestureHandlerImp = /*#__PURE__*/ function() {
-    function CameraGestureHandlerImp(composition) {
-        this.composition = composition;
-        this.cameraTransform = new PTransform();
-        this.cameraCoordiante = new PCoordinate();
-        this.startParams = {
-            type: CameraGestureType.none,
-            mouseEvent: false,
-            clientX: 0,
-            clientY: 0,
-            clientWidth: 512,
-            clientHeight: 512,
-            target: ""
-        };
-    }
-    var _proto = CameraGestureHandlerImp.prototype;
-    _proto.updateComposition = function updateComposition(composition) {
-        this.composition = composition;
-    };
-    _proto.getItem = function getItem() {
-        var _this = this;
-        var _this_composition_items;
-        return (_this_composition_items = this.composition.items) == null ? void 0 : _this_composition_items.find(function(item) {
-            return item.name === _this.getCurrentTarget();
-        });
-    };
-    _proto.getCurrentTarget = function getCurrentTarget() {
-        return this.startParams.target;
+   * 组件开始，需要创建内部对象，更新父元素信息和添加到场景管理器中
+   */ _proto.onStart = function onStart() {
+        var _this_sceneManager;
+        this.sceneManager = getSceneManager(this);
+        this.createContent();
+        this.priority = this.item.renderOrder;
+        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.addItem(this.content);
+        if (this.item.parentId && this.item.parent) {
+            this.content.updateParentInfo(this.item.parentId, this.item.parent);
+        }
+        this.setVisible(true);
+        this.item.getHitTestParams = this.getHitTestParams;
     };
-    _proto.getCurrentType = function getCurrentType() {
-        return this.startParams.type;
-    };
-    _proto.onKeyEvent = function onKeyEvent(event) {
-        // check event camera ID at first
-        if (this.startParams.target !== event.cameraID) {
-            this.startParams.target = event.cameraID;
-            this.startParams.type = CameraGestureType.translate;
-        }
-        // can't find camera item, throw error message
-        var item = this.getItem();
-        if (item === undefined) {
-            console.warn("[CameraGestureHandlerImp] Unable to locate camera item with ID: " + this.startParams.target + ".");
-            return this.composition.camera.getOptions();
-        }
-        var camera = this.composition.camera;
-        var effectsTransfrom = new Transform(_extends({}, camera.getOptions(), {
-            valid: true
-        }));
-        var cameraTransform = new PTransform().fromEffectsTransform(effectsTransfrom);
-        var cameraCoordiante = new PCoordinate().fromPTransform(cameraTransform);
-        var _event_xAxis;
-        // compute move direction
-        var xAxis = (_event_xAxis = event.xAxis) != null ? _event_xAxis : 0;
-        var _event_yAxis;
-        var yAxis = (_event_yAxis = event.yAxis) != null ? _event_yAxis : 0;
-        var _event_zAxis;
-        var zAxis = (_event_zAxis = event.zAxis) != null ? _event_zAxis : 0;
-        var dir = cameraCoordiante.xAxis.clone().multiply(xAxis);
-        dir.add(cameraCoordiante.yAxis.clone().multiply(yAxis));
-        dir.add(cameraCoordiante.zAxis.clone().multiply(zAxis));
-        if (dir.lengthSquared() < 0.00001) {
-            return camera.getOptions();
-        }
-        dir.normalize();
-        var _event_speed;
-        // update camera position
-        var speed = (_event_speed = event.speed) != null ? _event_speed : 0.1;
-        var pos = cameraTransform.getPosition();
-        pos.add(dir.clone().multiply(speed));
-        this.setTransform(item, pos);
-        // update camera transform and coordinates
-        if (this.startParams.type === CameraGestureType.rotate_self) {
-            this.cameraTransform.setPosition(pos);
-            this.cameraCoordiante.origin = pos;
+    /**
+   * 组件更新，更新内部对象状态
+   * @param dt - 更新间隔
+   */ _proto.onUpdate = function onUpdate(dt) {
+        if (this.sceneManager) {
+            this.content.build(this.sceneManager);
+            if (this.firstUpdate) {
+                this.materials = this.content.subMeshes.map(function(subMesh) {
+                    return subMesh.getEffectsMaterial();
+                });
+                this.firstUpdate = false;
+            }
         }
-        return camera.getOptions();
+        this.content.update();
     };
-    _proto.onXYMoveBegin = function onXYMoveBegin(x, y, width, height, cameraID) {
-        var args = {
-            type: CameraGestureType.translate,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: width,
-            clientHeight: height,
-            target: cameraID
-        };
-        return this.startGesture(args);
+    /**
+   * 组件晚更新，晚更新内部对象状态
+   * @param dt - 更新间隔
+   */ _proto.onLateUpdate = function onLateUpdate(dt) {
+        this.content.lateUpdate();
     };
-    _proto.onXYMoving = function onXYMoving(x, y, speed) {
-        if (!this.startParams.mouseEvent) {
-            return this.composition.camera.getOptions();
+    /**
+   * 组件渲染，需要检查可见性
+   * @param renderer - 渲染器
+   * @returns
+   */ _proto.render = function render(renderer) {
+        if (!this.getVisible() || !this.sceneManager) {
+            return;
         }
-        var arg0 = this.startParams;
-        var arg = {
-            type: CameraGestureType.translate,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: arg0.clientWidth,
-            clientHeight: arg0.clientHeight,
-            target: arg0.target,
-            speed: speed != null ? speed : 0.015
-        };
-        return this.moveGesture(arg);
-    };
-    _proto.onXYMoveEnd = function onXYMoveEnd() {
-        this.endGesture();
+        this.maskManager.drawStencilMask(renderer, this);
+        this.content.render(this.sceneManager, renderer);
     };
-    _proto.onZMoveBegin = function onZMoveBegin(x, y, width, height, cameraID) {
-        var arg = {
-            type: CameraGestureType.scale,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: width,
-            clientHeight: height,
-            target: cameraID
-        };
-        return this.startGesture(arg);
+    /**
+   * 组件销毁，需要重场景管理器中删除
+   */ _proto.onDestroy = function onDestroy() {
+        var _this_sceneManager;
+        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.removeItem(this.content);
+        this.sceneManager = undefined;
+        this.content.dispose();
     };
-    _proto.onZMoving = function onZMoving(x, y, speed) {
-        if (speed === void 0) speed = 0.015;
-        if (!this.startParams.mouseEvent) {
-            return this.composition.camera.getOptions();
+    /**
+   * 反序列化，记录传入参数
+   * @param data - 组件参数
+   */ _proto.fromData = function fromData(data) {
+        RendererComponent.prototype.fromData.call(this, data);
+        this.data = _extends({}, data, {
+            materials: []
+        });
+        this.data.rootBone = data.rootBone ? this.findObject(data.rootBone) : undefined;
+        this.data.geometry = this.findObject(data.geometry);
+        if (data.materials) {
+            for(var i = 0; i < data.materials.length; i++){
+                this.data.materials[i] = this.findObject(data.materials[i]);
+            }
         }
-        var arg0 = this.startParams;
-        var arg = {
-            type: CameraGestureType.scale,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: arg0.clientWidth,
-            clientHeight: arg0.clientHeight,
-            target: arg0.target,
-            speed: speed
-        };
-        return this.moveGesture(arg);
-    };
-    _proto.onZMoveEnd = function onZMoveEnd() {
-        this.endGesture();
-    };
-    _proto.onRotateBegin = function onRotateBegin(x, y, width, height, cameraID) {
-        var arg = {
-            type: CameraGestureType.rotate_self,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: width,
-            clientHeight: height,
-            target: cameraID
-        };
-        return this.startGesture(arg);
     };
-    _proto.onRotating = function onRotating(x, y, speed) {
-        if (!this.startParams.mouseEvent) {
-            return this.composition.camera.getOptions();
+    /**
+   * 创建内部对象
+   */ _proto.createContent = function createContent() {
+        if (this.data) {
+            var bounding = this.data.interaction;
+            this.bounding = bounding && JSON.parse(JSON.stringify(bounding));
+            this.content = new PMesh(this.engine, this.item.name, this.data, this, this.item.parentId);
         }
-        var arg0 = this.startParams;
-        var arg = {
-            type: CameraGestureType.rotate_self,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: arg0.clientWidth,
-            clientHeight: arg0.clientHeight,
-            target: arg0.target,
-            speed: speed != null ? speed : 1.5
-        };
-        return this.moveGesture(arg);
     };
-    _proto.onRotateEnd = function onRotateEnd() {
-        this.endGesture();
+    /**
+   * 设置当前 Mesh 的可见性。
+   * @param visible - true：可见，false：不可见
+   */ _proto.setVisible = function setVisible(visible) {
+        var _this_content;
+        (_this_content = this.content) == null ? void 0 : _this_content.onVisibleChanged(visible);
     };
-    _proto.onRotatePointBegin = function onRotatePointBegin(x, y, width, height, point, cameraID) {
-        var arg = {
-            type: CameraGestureType.rotate_focus,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: width,
-            clientHeight: height,
-            focusPoint: point,
-            target: cameraID
-        };
-        return this.startGesture(arg);
+    /**
+   * 获取当前 Mesh 的可见性。
+   */ _proto.getVisible = function getVisible() {
+        var _this_content;
+        var _this_content_visible;
+        return (_this_content_visible = (_this_content = this.content) == null ? void 0 : _this_content.visible) != null ? _this_content_visible : false;
     };
-    _proto.onRotatingPoint = function onRotatingPoint(x, y, speed) {
-        if (!this.startParams.mouseEvent) {
-            return this.composition.camera.getOptions();
+    /**
+   * 计算元素包围盒，只针对 Mesh 对象
+   * @returns 包围盒
+   */ _proto.computeBoundingBox = function computeBoundingBox() {
+        if (this.content && _instanceof1(this.content, PMesh)) {
+            var _this_bounding;
+            var worldMatrix = this.transform.getWorldMatrix();
+            var bbox = this.content.computeBoundingBox(worldMatrix);
+            var center = bbox.getCenter(new Vector3());
+            var size = bbox.getSize(new Vector3());
+            this.bounding = {
+                behavior: (_this_bounding = this.bounding) == null ? void 0 : _this_bounding.behavior,
+                type: spec.ModelBoundingType.box,
+                center: [
+                    center.x,
+                    center.y,
+                    center.z
+                ],
+                size: [
+                    size.x,
+                    size.y,
+                    size.z
+                ]
+            };
+            return this.bounding;
+        } else {
+            return;
         }
-        var arg0 = this.startParams;
-        var arg = {
-            type: CameraGestureType.rotate_focus,
-            mouseEvent: true,
-            clientX: x,
-            clientY: y,
-            clientWidth: arg0.clientWidth,
-            clientHeight: arg0.clientHeight,
-            focusPoint: arg0.focusPoint,
-            target: arg0.target,
-            speed: speed != null ? speed : 8.0
-        };
-        return this.moveGesture(arg);
-    };
-    _proto.onRotatePointEnd = function onRotatePointEnd() {
-        this.endGesture();
     };
-    _proto.moveTo = function moveTo(cameraID, position) {
-        this.startParams.target = cameraID;
-        this.startParams.type = CameraGestureType.none;
-        var item = this.getItem();
-        if (item === undefined) {
-            console.warn("[CameraGestureHandlerImp] Can't find camera item.");
-            return;
+    return ModelMeshComponent;
+}(RendererComponent);
+ModelMeshComponent = __decorate([
+    effectsClass(spec.DataType.MeshComponent)
+], ModelMeshComponent);
+var ModelSkyboxComponent = /*#__PURE__*/ function(RendererComponent) {
+    _inherits(ModelSkyboxComponent, RendererComponent);
+    function ModelSkyboxComponent(engine, data) {
+        var _this;
+        _this = RendererComponent.call(this, engine) || this;
+        if (data) {
+            _this.fromData(data);
         }
-        this.setPosition(item, position);
-    };
-    _proto.rotateTo = function rotateTo(cameraID, quat) {
-        this.startParams.target = cameraID;
-        this.startParams.type = CameraGestureType.none;
-        var item = this.getItem();
-        if (item === undefined) {
-            console.warn("[CameraGestureHandlerImp] Can't find camera item.");
-            return;
+        return _this;
+    }
+    var _proto = ModelSkyboxComponent.prototype;
+    /**
+   * 组件开始，需要创建内部对象和添加到场景管理器中
+   */ _proto.onStart = function onStart() {
+        var _this_sceneManager;
+        this.createContent();
+        this.priority = this.item.renderOrder;
+        this.sceneManager = getSceneManager(this);
+        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.addItem(this.content);
+        this.setVisible(true);
+        if (this.content.skyboxMesh) {
+            this.materials = [
+                this.content.skyboxMesh.material
+            ];
         }
-        this.setQuaternion(item, quat);
     };
-    _proto.onFocusPoint = function onFocusPoint(cameraID, point, distance) {
-        this.startParams.target = cameraID;
-        this.startParams.type = CameraGestureType.none;
-        var item = this.getItem();
-        if (item === undefined) {
-            console.warn("[CameraGestureHandlerImp] Can't find camera item.");
+    /**
+   * 组件渲染，需要检查可见性
+   * @param renderer - 渲染器
+   * @returns
+   */ _proto.render = function render(renderer) {
+        if (!this.getVisible() || !this.sceneManager) {
             return;
         }
-        var newDistance = distance != null ? distance : 5;
-        var targetPoint = Vector3.fromArray(point);
-        //
-        var transform = new PTransform().fromEffectsTransform(item.transform);
-        var coordinate = new PCoordinate().fromPTransform(transform);
-        // FIXME: MATH
-        var lookatDir = Vector3.fromArray(coordinate.zAxis.toArray()).multiply(1.0);
-        //
-        var newOffset = lookatDir.clone().multiply(newDistance);
-        var newPosition = targetPoint.clone().add(newOffset);
-        //
-        this.setTransform(item, newPosition);
-        //
-        // z+方向优先
-        // const cameraPos = Vector3.fromArray(item.transform.position);
-        // const newLookatDir = targetPoint.clone().subVector(cameraPos).normalize();
-        // const newOffset = newLookatDir.clone().multiplyScalar(newDistance);
-        // const newPosition = targetPoint.clone().subVector(newOffset);
-        // const newUpVector = Vector3.tryZUpVector(newLookatDir, new Vector3);
-        // const viewMatrix = Matrix4.computeLookAt(newPosition, targetPoint, newUpVector, new Matrix4);
-        // const tranform = new PTransform().fromMatrix4(viewMatrix);
-        // const newRotation = tranform.rotation;
-        // item.transform.setQuat(-newRotation.x, -newRotation.y, -newRotation.z, newRotation.w);
-        // item.transform.setPosition(newPosition.x, newPosition.y, newPosition.z);
-        //
-        // 旋转优先
-        // const cameraPos = Vector3.fromArray(item.transform.position);
-        // const newLookatDir = targetPoint.clone().subVector(cameraPos).normalize();
-        // const newOffset = newLookatDir.clone().multiplyScalar(newDistance);
-        // const newPosition = targetPoint.clone().subVector(newOffset);
-        // const oldTransform = new PTransform().fromEffectsTransform(item.transform);
-        // const oldCoordinate = new PCoordinate().fromPTransform(oldTransform)
-        // const oldLookatDir = oldCoordinate.zAxis.clone().multiplyScalar(-1.0);
-        // const rotateAxis = oldLookatDir.cross(newLookatDir);
-        // const sinTheta = rotateAxis.length();
-        // const theta = Math.asin(sinTheta);
-        // const deltaRotation = Quaternion.fromAxisAngle(rotateAxis, theta, new Quaternion);
-        // const newRotation = Quaternion.multiply(deltaRotation, oldTransform.rotation, new Quaternion);
-        // item.transform.setQuat(newRotation.x, newRotation.y, newRotation.z, newRotation.w);
-        // item.transform.setPosition(newPosition.x, newPosition.y, newPosition.z);
-        //
-        //
-        this.startParams.target = "";
+        this.maskManager.drawStencilMask(renderer, this);
+        this.content.render(this.sceneManager, renderer);
     };
-    _proto.getCameraTransform = function getCameraTransform() {
-        var camera = this.composition.camera;
-        var transform = new Transform(camera.getOptions());
-        transform.setValid(true);
-        return transform;
+    /**
+   * 组件销毁，需要重场景管理器中删除
+   */ _proto.onDestroy = function onDestroy() {
+        var _this_sceneManager;
+        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.removeItem(this.content);
+        this.sceneManager = undefined;
+        this.content.dispose();
     };
-    _proto.startGesture = function startGesture(args) {
-        this.startParams = args;
-        this.updateCameraTransform(this.composition.camera.getOptions());
-        if (!this.getItem()) {
-            console.warn("[CameraGestureHandlerImp] Invalid target specified in startGesture.");
-        }
-        return this.composition.camera.getOptions();
+    /**
+   * 反序列化，记录传入参数
+   * @param data - 组件参数
+   */ _proto.fromData = function fromData(data) {
+        RendererComponent.prototype.fromData.call(this, data);
+        data.diffuseImage = data.diffuseImage ? this.findObject(data.diffuseImage) : undefined;
+        data.specularImage = this.findObject(data.specularImage);
+        this.data = data;
     };
-    _proto.moveGesture = function moveGesture(arg) {
-        if (this.getCurrentType() === arg.type) {
-            var item = this.getItem();
-            if (item === undefined) {
-                console.warn("[CameraGestureHandlerImp] Can't find camera item.");
-                return this.composition.camera.getOptions();
-            }
-            var _arg_speed;
-            var speed = (_arg_speed = arg.speed) != null ? _arg_speed : 1.015;
-            var xAxis = this.cameraCoordiante.xAxis;
-            var yAxis = this.cameraCoordiante.yAxis;
-            var zAxis = this.cameraCoordiante.zAxis;
-            var dx = arg.clientX - this.startParams.clientX;
-            var dy = arg.clientY - this.startParams.clientY;
-            if (arg.type === CameraGestureType.translate) {
-                var pos = this.cameraTransform.getPosition();
-                var newPos = pos.clone();
-                newPos.add(xAxis.clone().multiply(-dx * speed));
-                newPos.add(yAxis.clone().multiply(dy * speed));
-                item.transform.setPosition(newPos.x, newPos.y, newPos.z);
-                this.setTransform(item, item.transform.position, item.transform.rotation);
-            } else if (arg.type === CameraGestureType.scale) {
-                var pos1 = this.cameraTransform.getPosition();
-                var newPos1 = pos1.clone();
-                newPos1.add(zAxis.clone().multiply(dy * speed));
-                item.transform.setPosition(newPos1.x, newPos1.y, newPos1.z);
-                this.setTransform(item, item.transform.position, item.transform.rotation);
-            } else if (arg.type === CameraGestureType.rotate_self) {
-                var ndx = dx / arg.clientWidth;
-                var ndy = dy / arg.clientHeight;
-                var dxAngle = ndx * Math.PI * speed * 0.5;
-                var dyAngle = ndy * Math.PI * speed * 0.5;
-                var newRotation = Quaternion.fromAxisAngle(Vector3.Y, -dxAngle);
-                // FIXME: MATH
-                var tempRotation = Quaternion.fromAxisAngle(xAxis, -dyAngle);
-                newRotation.multiply(tempRotation);
-                // FIXME: MATH
-                newRotation.multiply(this.cameraTransform.getRotation());
-                item.transform.setQuaternion(newRotation.x, newRotation.y, newRotation.z, newRotation.w);
-                this.setTransform(item, item.transform.position, item.transform.rotation);
-            } else if (arg.type === CameraGestureType.rotate_focus) {
-                var ndx1 = dx / arg.clientWidth;
-                var ndy1 = dy / arg.clientHeight;
-                var dxAngle1 = ndx1 * Math.PI * speed;
-                var dyAngle1 = ndy1 * Math.PI * speed;
-                var newRotation1 = Quaternion.fromAxisAngle(Vector3.Y, -dxAngle1);
-                var tempRotation1 = Quaternion.fromAxisAngle(xAxis, -dyAngle1);
-                newRotation1.multiply(tempRotation1);
-                var rotateMatrix = newRotation1.toMatrix4(new Matrix4());
-                var targetPoint = Vector3.fromArray(arg.focusPoint);
-                var deltaPosition = this.cameraCoordiante.origin.clone().subtract(targetPoint);
-                rotateMatrix.transformPoint(deltaPosition);
-                var newPosition = deltaPosition.add(targetPoint);
-                newRotation1.multiply(this.cameraTransform.getRotation());
-                item.transform.setPosition(newPosition.x, newPosition.y, newPosition.z);
-                item.transform.setQuaternion(newRotation1.x, newRotation1.y, newRotation1.z, newRotation1.w);
-                this.setTransform(item, newPosition, item.transform.rotation);
-            } else {
-                console.warn("[CameraGestureHandlerImp] Movement type not implemented.");
-            }
-        } else {
-            console.warn("[CameraGestureHandlerImp] Invalid move type specified: " + arg.type);
+    /**
+   * 创建内部对象
+   */ _proto.createContent = function createContent() {
+        if (this.data) {
+            var skyboxData = this.data;
+            this.content = new PSkybox(this.item.name, skyboxData, this);
         }
-        return this.composition.camera.getOptions();
     };
-    _proto.setTransform = function setTransform(item, position, rotation) {
-        var camera = item.getComponent(ModelCameraComponent);
-        if (camera !== undefined) {
-            camera.setTransform(position, rotation);
-        }
+    /**
+   * 设置当前可见性。
+   * @param visible - true：可见，false：不可见
+   */ _proto.setVisible = function setVisible(visible) {
+        var _this_content;
+        (_this_content = this.content) == null ? void 0 : _this_content.onVisibleChanged(visible);
     };
-    _proto.setPosition = function setPosition(item, position) {
-        var _item_transform;
-        (_item_transform = item.transform).setPosition.apply(_item_transform, [].concat(position));
-        var camera = item.getComponent(ModelCameraComponent);
-        if (camera !== undefined) {
-            camera.updateMainCamera();
-        }
+    /**
+   * 获取当前可见性。
+   */ _proto.getVisible = function getVisible() {
+        var _this_content;
+        var _this_content_visible;
+        return (_this_content_visible = (_this_content = this.content) == null ? void 0 : _this_content.visible) != null ? _this_content_visible : false;
     };
-    _proto.setQuaternion = function setQuaternion(item, quat) {
-        var _item_transform;
-        (_item_transform = item.transform).setQuaternion.apply(_item_transform, [].concat(quat));
-        var camera = item.getComponent(ModelCameraComponent);
-        if (camera !== undefined) {
-            camera.updateMainCamera();
+    return ModelSkyboxComponent;
+}(RendererComponent);
+ModelSkyboxComponent = __decorate([
+    effectsClass(spec.DataType.SkyboxComponent)
+], ModelSkyboxComponent);
+var ModelLightComponent = /*#__PURE__*/ function(Behaviour) {
+    _inherits(ModelLightComponent, Behaviour);
+    function ModelLightComponent(engine, data) {
+        var _this;
+        _this = Behaviour.call(this, engine) || this;
+        if (data) {
+            _this.fromData(data);
         }
-    };
-    _proto.endGesture = function endGesture() {
-        this.startParams.type = CameraGestureType.none;
-        this.startParams.mouseEvent = false;
-        this.startParams.target = "";
-    };
-    _proto.updateCameraTransform = function updateCameraTransform(cameraOptions) {
-        var effectsTransfrom = new Transform(cameraOptions);
-        effectsTransfrom.setValid(true);
-        this.cameraTransform.fromEffectsTransform(effectsTransfrom);
-        this.cameraCoordiante.fromPTransform(this.cameraTransform);
-    };
-    return CameraGestureHandlerImp;
-}();
-
-registerPlugin("model", ModelPlugin);
-/**
- * 插件版本号
- */ var version = "2.10.3";
-logger.info("Plugin model version: " + version + ".");
-if (version !== EFFECTS.version) {
-    console.error("注意：请统一 Model 插件与 Player 版本，不统一的版本混用会有不可预知的后果！", "\nAttention: Please ensure the Model plugin is synchronized with the Player version. Mixing and matching incompatible versions may result in unpredictable consequences!");
-}
-
-var ModelMeshComponent = /*#__PURE__*/ function(RendererComponent) {
-    _inherits(ModelMeshComponent, RendererComponent);
-    function ModelMeshComponent(engine, data) {
-        var _this;
-        _this = RendererComponent.call(this, engine) || this;
-        /**
-   * morph 动画权重
-   */ _this.morphWeights = [];
-        _this.firstUpdate = true;
-        /**
-   * 获取点击测试参数，根据元素包围盒进行相交测试，Mesh 对象会进行更加精确的点击测试
-   * @param force - 是否强制进行点击测试
-   * @returns 点击测试参数
-   */ _this.getHitTestParams = function(force) {
-            _this.computeBoundingBox();
-            var bounding = _this.bounding;
-            if (bounding && (force || Number.isInteger(bounding.behavior))) {
-                var type = bounding.type;
-                if (type === spec.ModelBoundingType.box) {
-                    if (_instanceof1(_this.content, PMesh)) {
-                        var mesh = _this.content;
-                        var customHitTest = {
-                            behavior: bounding.behavior,
-                            type: HitTestType.custom,
-                            clipMasks: _this.frameClipMasks,
-                            collect: function collect(ray, pointInCanvas) {
-                                var result = mesh.hitTesting(ray.origin, ray.direction);
-                                return result;
-                            }
-                        };
-                        return customHitTest;
-                    } else {
-                        var worldMatrixData = _this.transform.getWorldMatrix();
-                        var customHitTest1 = {
-                            behavior: bounding.behavior,
-                            type: HitTestType.custom,
-                            clipMasks: _this.frameClipMasks,
-                            collect: function collect(ray, pointInCanvas) {
-                                var result = RayIntersectsBoxWithRotation(ray, worldMatrixData, bounding);
-                                return result;
-                            }
-                        };
-                        return customHitTest1;
-                    }
-                } else if (type === spec.ModelBoundingType.sphere) {
-                    var pos = new Vector3();
-                    _this.transform.assignWorldTRS(pos);
-                    var center = new Vector3();
-                    if (bounding.center) {
-                        center.setFromArray(bounding.center);
-                    }
-                    center.add(pos);
-                    return {
-                        type: type,
-                        behavior: bounding.behavior,
-                        radius: bounding.radius || 0,
-                        center: center,
-                        clipMasks: _this.frameClipMasks
-                    };
-                }
-            }
-        };
-        if (data) {
-            _this.fromData(data);
-        }
-        return _this;
-    }
-    var _proto = ModelMeshComponent.prototype;
-    /**
-   * 组件开始，需要创建内部对象，更新父元素信息和添加到场景管理器中
-   */ _proto.onStart = function onStart() {
-        var _this_sceneManager;
-        this.sceneManager = getSceneManager(this);
-        this.createContent();
-        this.item.type = VFX_ITEM_TYPE_3D;
-        this.priority = this.item.renderOrder;
-        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.addItem(this.content);
-        if (this.item.parentId && this.item.parent) {
-            this.content.updateParentInfo(this.item.parentId, this.item.parent);
-        }
-        this.setVisible(true);
-        this.item.getHitTestParams = this.getHitTestParams;
+        return _this;
+    }
+    var _proto = ModelLightComponent.prototype;
+    /**
+   * 组件开始，需要创建内部对象和添加到场景管理器中
+   */ _proto.onStart = function onStart() {
+        this.createContent();
+        var scene = getSceneManager(this);
+        scene == null ? void 0 : scene.addItem(this.content);
+        this.setVisible(true);
     };
     /**
    * 组件更新，更新内部对象状态
    * @param dt - 更新间隔
    */ _proto.onUpdate = function onUpdate(dt) {
-        if (this.sceneManager) {
-            this.content.build(this.sceneManager);
-            if (this.firstUpdate) {
-                this.materials = this.content.subMeshes.map(function(subMesh) {
-                    return subMesh.getEffectsMaterial();
-                });
-                this.firstUpdate = false;
-            }
-        }
         this.content.update();
     };
     /**
-   * 组件晚更新，晚更新内部对象状态
-   * @param dt - 更新间隔
-   */ _proto.onLateUpdate = function onLateUpdate(dt) {
-        this.content.lateUpdate();
-    };
-    /**
-   * 组件渲染，需要检查可见性
-   * @param renderer - 渲染器
-   * @returns
-   */ _proto.render = function render(renderer) {
-        if (!this.getVisible() || !this.sceneManager) {
-            return;
-        }
-        this.maskManager.drawStencilMask(renderer, this);
-        this.content.render(this.sceneManager, renderer);
-    };
-    /**
-   * 组件销毁，需要重场景管理器中删除
+   * 组件销毁
    */ _proto.onDestroy = function onDestroy() {
-        var _this_sceneManager;
-        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.removeItem(this.content);
-        this.sceneManager = undefined;
         this.content.dispose();
     };
     /**
    * 反序列化，记录传入参数
    * @param data - 组件参数
    */ _proto.fromData = function fromData(data) {
-        RendererComponent.prototype.fromData.call(this, data);
-        this.data = _extends({}, data, {
-            materials: []
-        });
-        this.data.rootBone = data.rootBone ? this.engine.findObject(data.rootBone) : undefined;
-        this.data.geometry = this.engine.findObject(data.geometry);
-        if (data.materials) {
-            for(var i = 0; i < data.materials.length; i++){
-                this.data.materials[i] = this.engine.findObject(data.materials[i]);
-            }
-        }
+        Behaviour.prototype.fromData.call(this, data);
+        this.data = data;
     };
     /**
    * 创建内部对象
    */ _proto.createContent = function createContent() {
         if (this.data) {
-            var bounding = this.data.interaction;
-            this.bounding = bounding && JSON.parse(JSON.stringify(bounding));
-            this.content = new PMesh(this.engine, this.item.name, this.data, this, this.item.parentId);
+            var lightData = this.data;
+            this.content = new PLight(this.item.name, lightData, this);
         }
     };
     /**
-   * 设置当前 Mesh 的可见性。
+   * 设置当前可见性。
    * @param visible - true：可见，false：不可见
    */ _proto.setVisible = function setVisible(visible) {
         var _this_content;
@@ -2304,248 +2033,71 @@ var ModelMeshComponent = /*#__PURE__*/ function(RendererComponent) {
         var _this_content_visible;
         return (_this_content_visible = (_this_content = this.content) == null ? void 0 : _this_content.visible) != null ? _this_content_visible : false;
     };
-    /**
-   * 计算元素包围盒，只针对 Mesh 对象
-   * @returns 包围盒
-   */ _proto.computeBoundingBox = function computeBoundingBox() {
-        if (this.content && _instanceof1(this.content, PMesh)) {
-            var _this_bounding;
-            var worldMatrix = this.transform.getWorldMatrix();
-            var bbox = this.content.computeBoundingBox(worldMatrix);
-            var center = bbox.getCenter(new Vector3());
-            var size = bbox.getSize(new Vector3());
-            this.bounding = {
-                behavior: (_this_bounding = this.bounding) == null ? void 0 : _this_bounding.behavior,
-                type: spec.ModelBoundingType.box,
-                center: [
-                    center.x,
-                    center.y,
-                    center.z
-                ],
-                size: [
-                    size.x,
-                    size.y,
-                    size.z
-                ]
-            };
-            return this.bounding;
-        } else {
-            return;
-        }
-    };
-    return ModelMeshComponent;
-}(RendererComponent);
-ModelMeshComponent = __decorate([
-    effectsClass(spec.DataType.MeshComponent)
-], ModelMeshComponent);
-var ModelSkyboxComponent = /*#__PURE__*/ function(RendererComponent) {
-    _inherits(ModelSkyboxComponent, RendererComponent);
-    function ModelSkyboxComponent(engine, data) {
+    return ModelLightComponent;
+}(Behaviour);
+ModelLightComponent = __decorate([
+    effectsClass(spec.DataType.LightComponent)
+], ModelLightComponent);
+var ModelCameraComponent = /*#__PURE__*/ function(Behaviour) {
+    _inherits(ModelCameraComponent, Behaviour);
+    function ModelCameraComponent(engine, data) {
         var _this;
-        _this = RendererComponent.call(this, engine) || this;
+        _this = Behaviour.call(this, engine) || this;
         if (data) {
             _this.fromData(data);
         }
         return _this;
     }
-    var _proto = ModelSkyboxComponent.prototype;
+    var _proto = ModelCameraComponent.prototype;
     /**
    * 组件开始，需要创建内部对象和添加到场景管理器中
    */ _proto.onStart = function onStart() {
-        var _this_sceneManager;
         this.createContent();
-        this.item.type = VFX_ITEM_TYPE_3D;
-        this.priority = this.item.renderOrder;
-        this.sceneManager = getSceneManager(this);
-        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.addItem(this.content);
-        this.setVisible(true);
-        if (this.content.skyboxMesh) {
-            this.materials = [
-                this.content.skyboxMesh.material
-            ];
-        }
+        var scene = getSceneManager(this);
+        scene == null ? void 0 : scene.addItem(this.content);
+        this.updateMainCamera();
     };
     /**
-   * 组件渲染，需要检查可见性
-   * @param renderer - 渲染器
-   * @returns
-   */ _proto.render = function render(renderer) {
-        if (!this.getVisible() || !this.sceneManager) {
-            return;
-        }
-        this.maskManager.drawStencilMask(renderer, this);
-        this.content.render(this.sceneManager, renderer);
+   * 组件更新，更新内部对象状态
+   * @param dt - 更新间隔
+   */ _proto.onUpdate = function onUpdate(dt) {
+        this.content.update();
+        this.updateMainCamera();
     };
     /**
-   * 组件销毁，需要重场景管理器中删除
+   * 组件销毁
    */ _proto.onDestroy = function onDestroy() {
-        var _this_sceneManager;
-        (_this_sceneManager = this.sceneManager) == null ? void 0 : _this_sceneManager.removeItem(this.content);
-        this.sceneManager = undefined;
-        this.content.dispose();
+        var _this_content;
+        (_this_content = this.content) == null ? void 0 : _this_content.dispose();
     };
     /**
    * 反序列化，记录传入参数
    * @param data - 组件参数
    */ _proto.fromData = function fromData(data) {
-        RendererComponent.prototype.fromData.call(this, data);
-        data.diffuseImage = data.diffuseImage ? this.engine.findObject(data.diffuseImage) : undefined;
-        data.specularImage = this.engine.findObject(data.specularImage);
+        Behaviour.prototype.fromData.call(this, data);
         this.data = data;
     };
     /**
    * 创建内部对象
    */ _proto.createContent = function createContent() {
         if (this.data) {
-            var skyboxData = this.data;
-            this.content = new PSkybox(this.item.name, skyboxData, this);
+            var cameraData = this.data;
+            var width = this.engine.renderer.getWidth();
+            var height = this.engine.renderer.getHeight();
+            this.content = new PCamera(this.item.name, width, height, cameraData, this);
         }
     };
     /**
-   * 设置当前可见性。
-   * @param visible - true：可见，false：不可见
-   */ _proto.setVisible = function setVisible(visible) {
-        var _this_content;
-        (_this_content = this.content) == null ? void 0 : _this_content.onVisibleChanged(visible);
-    };
-    /**
-   * 获取当前可见性。
-   */ _proto.getVisible = function getVisible() {
-        var _this_content;
-        var _this_content_visible;
-        return (_this_content_visible = (_this_content = this.content) == null ? void 0 : _this_content.visible) != null ? _this_content_visible : false;
-    };
-    return ModelSkyboxComponent;
-}(RendererComponent);
-ModelSkyboxComponent = __decorate([
-    effectsClass(spec.DataType.SkyboxComponent)
-], ModelSkyboxComponent);
-var ModelLightComponent = /*#__PURE__*/ function(Behaviour) {
-    _inherits(ModelLightComponent, Behaviour);
-    function ModelLightComponent(engine, data) {
-        var _this;
-        _this = Behaviour.call(this, engine) || this;
-        if (data) {
-            _this.fromData(data);
-        }
-        return _this;
-    }
-    var _proto = ModelLightComponent.prototype;
-    /**
-   * 组件开始，需要创建内部对象和添加到场景管理器中
-   */ _proto.onStart = function onStart() {
-        this.createContent();
-        this.item.type = VFX_ITEM_TYPE_3D;
-        var scene = getSceneManager(this);
-        scene == null ? void 0 : scene.addItem(this.content);
-        this.setVisible(true);
-    };
-    /**
-   * 组件更新，更新内部对象状态
-   * @param dt - 更新间隔
-   */ _proto.onUpdate = function onUpdate(dt) {
-        this.content.update();
-    };
-    /**
-   * 组件销毁
-   */ _proto.onDestroy = function onDestroy() {
-        this.content.dispose();
-    };
-    /**
-   * 反序列化，记录传入参数
-   * @param data - 组件参数
-   */ _proto.fromData = function fromData(data) {
-        Behaviour.prototype.fromData.call(this, data);
-        this.data = data;
-    };
-    /**
-   * 创建内部对象
-   */ _proto.createContent = function createContent() {
-        if (this.data) {
-            var lightData = this.data;
-            this.content = new PLight(this.item.name, lightData, this);
-        }
-    };
-    /**
-   * 设置当前可见性。
-   * @param visible - true：可见，false：不可见
-   */ _proto.setVisible = function setVisible(visible) {
-        var _this_content;
-        (_this_content = this.content) == null ? void 0 : _this_content.onVisibleChanged(visible);
-    };
-    /**
-   * 获取当前 Mesh 的可见性。
-   */ _proto.getVisible = function getVisible() {
-        var _this_content;
-        var _this_content_visible;
-        return (_this_content_visible = (_this_content = this.content) == null ? void 0 : _this_content.visible) != null ? _this_content_visible : false;
-    };
-    return ModelLightComponent;
-}(Behaviour);
-ModelLightComponent = __decorate([
-    effectsClass(spec.DataType.LightComponent)
-], ModelLightComponent);
-var ModelCameraComponent = /*#__PURE__*/ function(Behaviour) {
-    _inherits(ModelCameraComponent, Behaviour);
-    function ModelCameraComponent(engine, data) {
-        var _this;
-        _this = Behaviour.call(this, engine) || this;
-        if (data) {
-            _this.fromData(data);
-        }
-        return _this;
-    }
-    var _proto = ModelCameraComponent.prototype;
-    /**
-   * 组件开始，需要创建内部对象和添加到场景管理器中
-   */ _proto.onStart = function onStart() {
-        this.createContent();
-        this.item.type = VFX_ITEM_TYPE_3D;
-        var scene = getSceneManager(this);
-        scene == null ? void 0 : scene.addItem(this.content);
-        this.updateMainCamera();
-    };
-    /**
-   * 组件更新，更新内部对象状态
-   * @param dt - 更新间隔
-   */ _proto.onUpdate = function onUpdate(dt) {
-        this.content.update();
-        this.updateMainCamera();
-    };
-    /**
-   * 组件销毁
-   */ _proto.onDestroy = function onDestroy() {
-        var _this_content;
-        (_this_content = this.content) == null ? void 0 : _this_content.dispose();
-    };
-    /**
-   * 反序列化，记录传入参数
-   * @param data - 组件参数
-   */ _proto.fromData = function fromData(data) {
-        Behaviour.prototype.fromData.call(this, data);
-        this.data = data;
-    };
-    /**
-   * 创建内部对象
-   */ _proto.createContent = function createContent() {
-        if (this.data) {
-            var cameraData = this.data;
-            var width = this.engine.renderer.getWidth();
-            var height = this.engine.renderer.getHeight();
-            this.content = new PCamera(this.item.name, width, height, cameraData, this);
-        }
-    };
-    /**
-   * 更新合成主相机，更加当前相机元素状态
-   */ _proto.updateMainCamera = function updateMainCamera() {
-        this.content.matrix = this.transform.getWorldMatrix();
-        var composition = this.item.composition;
-        if (composition) {
-            composition.camera.near = this.content.nearPlane;
-            composition.camera.far = this.content.farPlane;
-            composition.camera.fov = this.content.fov;
-            composition.camera.setTransform(this.transform);
-        }
+   * 更新合成主相机，更加当前相机元素状态
+   */ _proto.updateMainCamera = function updateMainCamera() {
+        this.content.matrix = this.transform.getWorldMatrix();
+        var composition = this.item.composition;
+        if (composition) {
+            composition.camera.near = this.content.nearPlane;
+            composition.camera.far = this.content.farPlane;
+            composition.camera.fov = this.content.fov;
+            composition.camera.setTransform(this.transform);
+        }
     };
     /**
    * 设置变换
@@ -2580,7 +2132,6 @@ var AnimationComponent = /*#__PURE__*/ function(Behaviour) {
    * 组件开始，需要创建内部对象和添加到场景管理器中
    */ _proto.onStart = function onStart() {
         this.elapsedTime = 0;
-        this.item.type = VFX_ITEM_TYPE_3D;
     };
     /**
    * 组件更新，更新内部对象状态
@@ -2609,7 +2160,7 @@ var AnimationComponent = /*#__PURE__*/ function(Behaviour) {
         this.clips = [];
         data.animationClips.forEach(function(clipData) {
             var clipObj = new ModelAnimationClip(_this.engine);
-            var animationClip = _this.engine.findObject(clipData);
+            var animationClip = _this.findObject(clipData);
             clipObj.setFromAnimationClip(animationClip);
             _this.clips.push(clipObj);
         });
@@ -3311,9 +2862,6 @@ var normal = new Vector3();
    * @param pass - 渲染 Pass
    */ WebGLHelper.deleteRenderPass = function deleteRenderPass(pass) {
         pass.dispose({
-            meshes: {
-                geometries: DestroyOptions.destroy
-            },
             depthStencilAttachment: RenderPassDestroyAttachmentType.force,
             colorAttachment: RenderPassDestroyAttachmentType.force
         });
@@ -3330,14 +2878,14 @@ var normal = new Vector3();
    * @param engine - 引擎对象
    * @returns
    */ WebGLHelper.isSupportFloatTexture = function isSupportFloatTexture(engine) {
-        var capability = engine.gpuCapability;
+        var capability = engine.displayServer.renderingDevice.gpuCapability;
         return capability.detail.floatTexture !== 0;
     };
     /**
    * renderer 是否支持 HalfFloat 纹理
    * @returns
    */ WebGLHelper.isSupportHalfFloatTexture = function isSupportHalfFloatTexture(engine) {
-        var capability = engine.gpuCapability;
+        var capability = engine.displayServer.renderingDevice.gpuCapability;
         return capability.detail.halfFloatTexture !== 0;
     };
     /**
@@ -3381,7 +2929,7 @@ var normal = new Vector3();
         var vertexShader = material.vertexShaderCode;
         var fragmentShader = material.fragmentShaderCode;
         var geometry = Geometry.create(engine, MeshHelper.getPlaneGeometry());
-        var isWebGL2 = engine.gpuCapability.level === 2;
+        var isWebGL2 = engine.displayServer.renderingDevice.gpuCapability.level === 2;
         var effectsMaterial = Material.create(engine, {
             shader: {
                 vertex: vertexShader,
@@ -3405,24 +2953,24 @@ var normal = new Vector3();
         var data = MeshHelper.getPlaneVertexArray();
         var _obj;
         return {
-            attributes: (_obj = {}, _obj[VertexBuffer.PositionKind] = {
+            attributes: (_obj = {}, _obj[VertexElementType.Position] = {
                 type: glContext.FLOAT,
                 size: 3,
                 data: data,
                 stride: Float32Array.BYTES_PER_ELEMENT * 8,
                 offset: 0
-            }, _obj[VertexBuffer.UVKind] = {
+            }, _obj[VertexElementType.TexCoord0] = {
                 type: glContext.FLOAT,
                 size: 2,
                 stride: Float32Array.BYTES_PER_ELEMENT * 8,
                 offset: Float32Array.BYTES_PER_ELEMENT * 3,
-                dataSource: VertexBuffer.PositionKind
-            }, _obj[VertexBuffer.NormalKind] = {
+                dataSource: VertexElementType.Position
+            }, _obj[VertexElementType.Normal] = {
                 type: glContext.FLOAT,
                 size: 3,
                 stride: Float32Array.BYTES_PER_ELEMENT * 8,
                 offset: Float32Array.BYTES_PER_ELEMENT * 5,
-                dataSource: VertexBuffer.PositionKind
+                dataSource: VertexElementType.Position
             }, _obj),
             drawStart: 0,
             drawCount: data.length / 8
@@ -3850,19 +3398,19 @@ var normal = new Vector3();
    */ PluginHelper.getAttributeName = function getAttributeName(name) {
         switch(name){
             case "POSITION":
-                return VertexBuffer.PositionKind;
+                return VertexElementType.Position;
             case "NORMAL":
-                return VertexBuffer.NormalKind;
+                return VertexElementType.Normal;
             case "TANGENT":
-                return VertexBuffer.TangentKind;
+                return VertexElementType.Tangent;
             case "TEXCOORD_0":
-                return VertexBuffer.UVKind;
+                return VertexElementType.TexCoord0;
             case "TEXCOORD_1":
-                return VertexBuffer.UV2Kind;
+                return VertexElementType.TexCoord1;
             case "JOINTS_0":
-                return VertexBuffer.JointsKind;
+                return VertexElementType.BlendIndices;
             case "WEIGHTS_0":
-                return VertexBuffer.WeightsKind;
+                return VertexElementType.BlendWeights;
         }
         if (!name.startsWith("a")) {
             // aPos, aNormal, aTangent,
@@ -4215,16 +3763,16 @@ var AttributeArray = /*#__PURE__*/ function() {
         this.drawCount = Math.abs(geometry.getDrawCount());
         //
         this.index = geometry.getIndexData();
-        var positionAttrib = getAttributeLayout(geometry.getVertexBuffer(VertexBuffer.PositionKind));
-        var positionArray = geometry.getAttributeData(VertexBuffer.PositionKind);
+        var positionAttrib = getAttributeLayout(geometry, VertexElementType.Position);
+        var positionArray = geometry.getAttributeData(VertexElementType.Position);
         this.position = new AttributeArray();
         this.position.create(positionAttrib, positionArray);
         //
-        var jointAttrib = getAttributeLayout(geometry.getVertexBuffer(VertexBuffer.JointsKind));
-        var weightAttrib = getAttributeLayout(geometry.getVertexBuffer(VertexBuffer.WeightsKind));
+        var jointAttrib = getAttributeLayout(geometry, VertexElementType.BlendIndices);
+        var weightAttrib = getAttributeLayout(geometry, VertexElementType.BlendWeights);
         if (jointAttrib !== undefined && weightAttrib !== undefined) {
-            var jointArray = geometry.getAttributeData(VertexBuffer.JointsKind);
-            var weightArray = geometry.getAttributeData(VertexBuffer.WeightsKind);
+            var jointArray = geometry.getAttributeData(VertexElementType.BlendIndices);
+            var weightArray = geometry.getAttributeData(VertexElementType.BlendWeights);
             this.joint = new AttributeArray();
             this.joint.create(jointAttrib, jointArray);
             this.weight = new AttributeArray();
@@ -4326,16 +3874,16 @@ var AttributeArray = /*#__PURE__*/ function() {
         this.drawCount = Math.abs(geometry.getDrawCount());
         //
         this.index = geometry.getIndexData();
-        var positionAttrib = getAttributeLayout(geometry.getVertexBuffer(VertexBuffer.PositionKind));
-        var positionArray = geometry.getAttributeData(VertexBuffer.PositionKind);
+        var positionAttrib = getAttributeLayout(geometry, VertexElementType.Position);
+        var positionArray = geometry.getAttributeData(VertexElementType.Position);
         this.position = new AttributeArray();
         this.position.create(positionAttrib, positionArray);
         //
-        var jointAttrib = getAttributeLayout(geometry.getVertexBuffer(VertexBuffer.JointsKind));
-        var weightAttrib = getAttributeLayout(geometry.getVertexBuffer(VertexBuffer.WeightsKind));
+        var jointAttrib = getAttributeLayout(geometry, VertexElementType.BlendIndices);
+        var weightAttrib = getAttributeLayout(geometry, VertexElementType.BlendWeights);
         if (jointAttrib !== undefined && weightAttrib !== undefined) {
-            var jointArray = geometry.getAttributeData(VertexBuffer.JointsKind);
-            var weightArray = geometry.getAttributeData(VertexBuffer.WeightsKind);
+            var jointArray = geometry.getAttributeData(VertexElementType.BlendIndices);
+            var weightArray = geometry.getAttributeData(VertexElementType.BlendWeights);
             this.joint = new AttributeArray();
             this.joint.create(jointAttrib, jointArray);
             this.weight = new AttributeArray();
@@ -4417,15 +3965,16 @@ var AttributeArray = /*#__PURE__*/ function() {
     };
     return HitTestingProxy;
 }();
-function getAttributeLayout(vertexBuffer) {
+function getAttributeLayout(geometry, name) {
+    var vertexBuffer = geometry.getVertexElement(name);
     if (!vertexBuffer) {
         return;
     }
     return {
         type: vertexBuffer.type,
-        size: vertexBuffer.getSize(),
+        size: vertexBuffer.size,
         offset: vertexBuffer.byteOffset,
-        stride: vertexBuffer.byteStride,
+        stride: geometry.getAttributeStride(name),
         normalize: vertexBuffer.normalized
     };
 }
@@ -4630,7 +4179,7 @@ var TextureDataMode;
     };
     _proto.getTextureDataMode = function getTextureDataMode(jointCount, engine) {
         var uniformsRequiredForMostFeatures = 25;
-        var detail = engine.gpuCapability.detail;
+        var detail = engine.displayServer.renderingDevice.gpuCapability.detail;
         var availableJointUniforms = detail.maxVertexUniforms - uniformsRequiredForMostFeatures;
         var uniformsRequiredPerJoint = 8;
         if (jointCount > Math.floor(availableJointUniforms / uniformsRequiredPerJoint)) {
@@ -7236,12 +6785,12 @@ function _assert_this_initialized(self) {
 }
 
 var uvKinds = [
-    VertexBuffer.UVKind,
-    VertexBuffer.UV2Kind,
-    VertexBuffer.UV3Kind,
-    VertexBuffer.UV4Kind,
-    VertexBuffer.UV5Kind,
-    VertexBuffer.UV6Kind
+    VertexElementType.TexCoord0,
+    VertexElementType.TexCoord1,
+    VertexElementType.TexCoord2,
+    VertexElementType.TexCoord3,
+    VertexElementType.TexCoord4,
+    VertexElementType.TexCoord5
 ];
 /**
  * Mesh 类，负责 Mesh 相关的骨骼动画和 PBR 渲染
@@ -8152,7 +7701,7 @@ var uvKinds = [
    * 是否压缩格式
    * @returns
    */ _proto.isCompressed = function isCompressed() {
-        var positionAttrib = this.geometry.getAttributeData(VertexBuffer.PositionKind);
+        var positionAttrib = this.geometry.getAttributeData(VertexElementType.Position);
         if (positionAttrib === undefined) {
             return false;
         }
@@ -8164,19 +7713,19 @@ var uvKinds = [
    * 是否有位置属性
    * @returns
    */ _proto.hasPositions = function hasPositions() {
-        return this.hasAttribute(VertexBuffer.PositionKind);
+        return this.hasAttribute(VertexElementType.Position);
     };
     /**
    * 是否有法线属性
    * @returns
    */ _proto.hasNormals = function hasNormals() {
-        return this.hasAttribute(VertexBuffer.NormalKind);
+        return this.hasAttribute(VertexElementType.Normal);
     };
     /**
    * 是否有切线属性
    * @returns
    */ _proto.hasTangents = function hasTangents() {
-        return this.hasAttribute(VertexBuffer.TangentKind);
+        return this.hasAttribute(VertexElementType.Tangent);
     };
     /**
    * 是否有纹理坐标属性
@@ -8190,19 +7739,19 @@ var uvKinds = [
    * 是否有颜色属性
    * @returns
    */ _proto.hasColors = function hasColors() {
-        return this.hasAttribute(VertexBuffer.ColorKind);
+        return this.hasAttribute(VertexElementType.Color);
     };
     /**
    * 是否有关节点属性
    * @returns
    */ _proto.hasJoints = function hasJoints() {
-        return this.hasAttribute(VertexBuffer.JointsKind);
+        return this.hasAttribute(VertexElementType.BlendIndices);
     };
     /**
    * 是否有权重属性
    * @returns
    */ _proto.hasWeights = function hasWeights() {
-        return this.hasAttribute(VertexBuffer.WeightsKind);
+        return this.hasAttribute(VertexElementType.BlendWeights);
     };
     return PGeometry;
 }();
@@ -8325,7 +7874,7 @@ var EffectsMeshProxy = /*#__PURE__*/ function() {
         }
     };
     _proto.initGlobalState = function initGlobalState(opts) {
-        var capbility = this.engine.gpuCapability;
+        var capbility = this.engine.displayServer.renderingDevice.gpuCapability;
         var globalState = PGlobalState.getInstance();
         globalState.reset();
         globalState.isWebGL2 = capbility.level === 2;
@@ -8894,11 +8443,6 @@ var JSONConverter = /*#__PURE__*/ function() {
         (_newScene_items = newScene.items).push.apply(_newScene_items, [].concat(this.treeInfo.getAllTreeNodeList()));
         newScene.compositionId = oldScene.compositionId;
         newScene.compositions = oldScene.compositions;
-        newScene.items.forEach(function(item) {
-            if (item.type === "root") {
-                item.type = "ECS";
-            }
-        });
         //@ts-expect-error
         newScene.compositions[0].items = newScene.items.map(function(item) {
             return {
@@ -9077,8 +8621,7 @@ var JSONConverter = /*#__PURE__*/ function() {
                 parentId: treeItem.id,
                 name: (_node_name = node.name) != null ? _node_name : "node" + index,
                 duration: treeItem.duration,
-                // @ts-expect-error
-                type: "ECS",
+                type: spec.ItemType.tree,
                 dataType: spec.DataType.VFXItemData,
                 visible: treeItem.visible,
                 endBehavior: treeItem.endBehavior,
@@ -9658,7 +9201,7 @@ function getGeometryDataFromOptions(geomOptions) {
             verticesNormalize = (_attribData_normalize = attribData.normalize) != null ? _attribData_normalize : false;
             var _attribData_type;
             verticesType = glType2VertexFormatType((_attribData_type = attribData.type) != null ? _attribData_type : glContext.FLOAT);
-        } else if (attrib === VertexBuffer.NormalKind) {
+        } else if (attrib === VertexElementType.Normal) {
             // @ts-expect-error
             modelData.normals = attribData.data;
             var _attribData_normalize1;
@@ -9974,7 +9517,7 @@ function mergeTypedArray(array1, array2, offset) {
     }
 }
 var _obj;
-var vertexBufferSemanticMap = (_obj = {}, _obj[VertexBuffer.PositionKind] = "POSITION", _obj[VertexBuffer.UVKind] = "TEXCOORD0", _obj[VertexBuffer.UV2Kind] = "TEXCOORD1", _obj[VertexBuffer.NormalKind] = "NORMAL", _obj[VertexBuffer.TangentKind] = "TANGENT", _obj[VertexBuffer.ColorKind] = "COLOR", _obj[VertexBuffer.JointsKind] = "JOINTS", _obj[VertexBuffer.WeightsKind] = "WEIGHTS", //
+var vertexBufferSemanticMap = (_obj = {}, _obj[VertexElementType.Position] = "POSITION", _obj[VertexElementType.TexCoord0] = "TEXCOORD0", _obj[VertexElementType.TexCoord1] = "TEXCOORD1", _obj[VertexElementType.Normal] = "NORMAL", _obj[VertexElementType.Tangent] = "TANGENT", _obj[VertexElementType.Color] = "COLOR", _obj[VertexElementType.BlendIndices] = "JOINTS", _obj[VertexElementType.BlendWeights] = "WEIGHTS", //
 _obj.a_Position = "POSITION", _obj.a_UV = "TEXCOORD0", _obj.a_UV1 = "TEXCOORD0", _obj.a_UV2 = "TEXCOORD1", _obj.a_Normal = "NORMAL", _obj.a_Tangent = "TANGENT", _obj.a_Color = "COLOR", _obj.a_Joints = "JOINTS", _obj.a_Joint1 = "JOINTS", _obj.a_Weights = "WEIGHTS", _obj.a_Weight1 = "WEIGHTS", //
 _obj.a_Target_Position0 = "POSITION_BS0", _obj.a_Target_Position1 = "POSITION_BS1", _obj.a_Target_Position2 = "POSITION_BS2", _obj.a_Target_Position3 = "POSITION_BS3", _obj.a_Target_Position4 = "POSITION_BS4", _obj.a_Target_Position5 = "POSITION_BS5", _obj.a_Target_Position6 = "POSITION_BS6", _obj.a_Target_Position7 = "POSITION_BS7", _obj.a_Target_Normal0 = "NORMAL_BS0", _obj.a_Target_Normal1 = "NORMAL_BS1", _obj.a_Target_Normal2 = "NORMAL_BS2", _obj.a_Target_Normal3 = "NORMAL_BS3", _obj.a_Target_Tangent0 = "TANGENT_BS0", _obj.a_Target_Tangent1 = "TANGENT_BS1", _obj.a_Target_Tangent2 = "TANGENT_BS2", _obj.a_Target_Tangent3 = "TANGENT_BS3", _obj);
 
@@ -10144,11 +9687,6 @@ var LoaderImpl = /*#__PURE__*/ function() {
                     case 2:
                         _state.sent();
                         (_this_items = _this.items).push.apply(_this_items, [].concat(gltfResource.scenes[0].vfxItemData));
-                        _this.items.forEach(function(item) {
-                            if (item.type === "root") {
-                                item.type = "ECS";
-                            }
-                        });
                         return [
                             2,
                             _this.getLoadResult()
@@ -11700,5 +11238,409 @@ var GLTFHelper = /*#__PURE__*/ function() {
     return GLTFHelper;
 }();
 
+var CameraGestureType;
+(function(CameraGestureType) {
+    CameraGestureType[CameraGestureType["none"] = 0] = "none";
+    CameraGestureType[CameraGestureType["translate"] = 1] = "translate";
+    CameraGestureType[CameraGestureType["rotate_focus"] = 2] = "rotate_focus";
+    CameraGestureType[CameraGestureType["rotate_self"] = 3] = "rotate_self";
+    CameraGestureType[CameraGestureType["scale"] = 4] = "scale";
+})(CameraGestureType || (CameraGestureType = {}));
+
+var CameraGestureHandlerImp = /*#__PURE__*/ function() {
+    function CameraGestureHandlerImp(composition) {
+        this.composition = composition;
+        this.cameraTransform = new PTransform();
+        this.cameraCoordiante = new PCoordinate();
+        this.startParams = {
+            type: CameraGestureType.none,
+            mouseEvent: false,
+            clientX: 0,
+            clientY: 0,
+            clientWidth: 512,
+            clientHeight: 512,
+            target: ""
+        };
+    }
+    var _proto = CameraGestureHandlerImp.prototype;
+    _proto.updateComposition = function updateComposition(composition) {
+        this.composition = composition;
+    };
+    _proto.getItem = function getItem() {
+        var _this = this;
+        var _this_composition_items;
+        return (_this_composition_items = this.composition.items) == null ? void 0 : _this_composition_items.find(function(item) {
+            return item.name === _this.getCurrentTarget();
+        });
+    };
+    _proto.getCurrentTarget = function getCurrentTarget() {
+        return this.startParams.target;
+    };
+    _proto.getCurrentType = function getCurrentType() {
+        return this.startParams.type;
+    };
+    _proto.onKeyEvent = function onKeyEvent(event) {
+        // check event camera ID at first
+        if (this.startParams.target !== event.cameraID) {
+            this.startParams.target = event.cameraID;
+            this.startParams.type = CameraGestureType.translate;
+        }
+        // can't find camera item, throw error message
+        var item = this.getItem();
+        if (item === undefined) {
+            console.warn("[CameraGestureHandlerImp] Unable to locate camera item with ID: " + this.startParams.target + ".");
+            return this.composition.camera.getOptions();
+        }
+        var camera = this.composition.camera;
+        var effectsTransfrom = new Transform(_extends({}, camera.getOptions(), {
+            valid: true
+        }));
+        var cameraTransform = new PTransform().fromEffectsTransform(effectsTransfrom);
+        var cameraCoordiante = new PCoordinate().fromPTransform(cameraTransform);
+        var _event_xAxis;
+        // compute move direction
+        var xAxis = (_event_xAxis = event.xAxis) != null ? _event_xAxis : 0;
+        var _event_yAxis;
+        var yAxis = (_event_yAxis = event.yAxis) != null ? _event_yAxis : 0;
+        var _event_zAxis;
+        var zAxis = (_event_zAxis = event.zAxis) != null ? _event_zAxis : 0;
+        var dir = cameraCoordiante.xAxis.clone().multiply(xAxis);
+        dir.add(cameraCoordiante.yAxis.clone().multiply(yAxis));
+        dir.add(cameraCoordiante.zAxis.clone().multiply(zAxis));
+        if (dir.lengthSquared() < 0.00001) {
+            return camera.getOptions();
+        }
+        dir.normalize();
+        var _event_speed;
+        // update camera position
+        var speed = (_event_speed = event.speed) != null ? _event_speed : 0.1;
+        var pos = cameraTransform.getPosition();
+        pos.add(dir.clone().multiply(speed));
+        this.setTransform(item, pos);
+        // update camera transform and coordinates
+        if (this.startParams.type === CameraGestureType.rotate_self) {
+            this.cameraTransform.setPosition(pos);
+            this.cameraCoordiante.origin = pos;
+        }
+        return camera.getOptions();
+    };
+    _proto.onXYMoveBegin = function onXYMoveBegin(x, y, width, height, cameraID) {
+        var args = {
+            type: CameraGestureType.translate,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: width,
+            clientHeight: height,
+            target: cameraID
+        };
+        return this.startGesture(args);
+    };
+    _proto.onXYMoving = function onXYMoving(x, y, speed) {
+        if (!this.startParams.mouseEvent) {
+            return this.composition.camera.getOptions();
+        }
+        var arg0 = this.startParams;
+        var arg = {
+            type: CameraGestureType.translate,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: arg0.clientWidth,
+            clientHeight: arg0.clientHeight,
+            target: arg0.target,
+            speed: speed != null ? speed : 0.015
+        };
+        return this.moveGesture(arg);
+    };
+    _proto.onXYMoveEnd = function onXYMoveEnd() {
+        this.endGesture();
+    };
+    _proto.onZMoveBegin = function onZMoveBegin(x, y, width, height, cameraID) {
+        var arg = {
+            type: CameraGestureType.scale,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: width,
+            clientHeight: height,
+            target: cameraID
+        };
+        return this.startGesture(arg);
+    };
+    _proto.onZMoving = function onZMoving(x, y, speed) {
+        if (speed === void 0) speed = 0.015;
+        if (!this.startParams.mouseEvent) {
+            return this.composition.camera.getOptions();
+        }
+        var arg0 = this.startParams;
+        var arg = {
+            type: CameraGestureType.scale,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: arg0.clientWidth,
+            clientHeight: arg0.clientHeight,
+            target: arg0.target,
+            speed: speed
+        };
+        return this.moveGesture(arg);
+    };
+    _proto.onZMoveEnd = function onZMoveEnd() {
+        this.endGesture();
+    };
+    _proto.onRotateBegin = function onRotateBegin(x, y, width, height, cameraID) {
+        var arg = {
+            type: CameraGestureType.rotate_self,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: width,
+            clientHeight: height,
+            target: cameraID
+        };
+        return this.startGesture(arg);
+    };
+    _proto.onRotating = function onRotating(x, y, speed) {
+        if (!this.startParams.mouseEvent) {
+            return this.composition.camera.getOptions();
+        }
+        var arg0 = this.startParams;
+        var arg = {
+            type: CameraGestureType.rotate_self,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: arg0.clientWidth,
+            clientHeight: arg0.clientHeight,
+            target: arg0.target,
+            speed: speed != null ? speed : 1.5
+        };
+        return this.moveGesture(arg);
+    };
+    _proto.onRotateEnd = function onRotateEnd() {
+        this.endGesture();
+    };
+    _proto.onRotatePointBegin = function onRotatePointBegin(x, y, width, height, point, cameraID) {
+        var arg = {
+            type: CameraGestureType.rotate_focus,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: width,
+            clientHeight: height,
+            focusPoint: point,
+            target: cameraID
+        };
+        return this.startGesture(arg);
+    };
+    _proto.onRotatingPoint = function onRotatingPoint(x, y, speed) {
+        if (!this.startParams.mouseEvent) {
+            return this.composition.camera.getOptions();
+        }
+        var arg0 = this.startParams;
+        var arg = {
+            type: CameraGestureType.rotate_focus,
+            mouseEvent: true,
+            clientX: x,
+            clientY: y,
+            clientWidth: arg0.clientWidth,
+            clientHeight: arg0.clientHeight,
+            focusPoint: arg0.focusPoint,
+            target: arg0.target,
+            speed: speed != null ? speed : 8.0
+        };
+        return this.moveGesture(arg);
+    };
+    _proto.onRotatePointEnd = function onRotatePointEnd() {
+        this.endGesture();
+    };
+    _proto.moveTo = function moveTo(cameraID, position) {
+        this.startParams.target = cameraID;
+        this.startParams.type = CameraGestureType.none;
+        var item = this.getItem();
+        if (item === undefined) {
+            console.warn("[CameraGestureHandlerImp] Can't find camera item.");
+            return;
+        }
+        this.setPosition(item, position);
+    };
+    _proto.rotateTo = function rotateTo(cameraID, quat) {
+        this.startParams.target = cameraID;
+        this.startParams.type = CameraGestureType.none;
+        var item = this.getItem();
+        if (item === undefined) {
+            console.warn("[CameraGestureHandlerImp] Can't find camera item.");
+            return;
+        }
+        this.setQuaternion(item, quat);
+    };
+    _proto.onFocusPoint = function onFocusPoint(cameraID, point, distance) {
+        this.startParams.target = cameraID;
+        this.startParams.type = CameraGestureType.none;
+        var item = this.getItem();
+        if (item === undefined) {
+            console.warn("[CameraGestureHandlerImp] Can't find camera item.");
+            return;
+        }
+        var newDistance = distance != null ? distance : 5;
+        var targetPoint = Vector3.fromArray(point);
+        //
+        var transform = new PTransform().fromEffectsTransform(item.transform);
+        var coordinate = new PCoordinate().fromPTransform(transform);
+        // FIXME: MATH
+        var lookatDir = Vector3.fromArray(coordinate.zAxis.toArray()).multiply(1.0);
+        //
+        var newOffset = lookatDir.clone().multiply(newDistance);
+        var newPosition = targetPoint.clone().add(newOffset);
+        //
+        this.setTransform(item, newPosition);
+        //
+        // z+方向优先
+        // const cameraPos = Vector3.fromArray(item.transform.position);
+        // const newLookatDir = targetPoint.clone().subVector(cameraPos).normalize();
+        // const newOffset = newLookatDir.clone().multiplyScalar(newDistance);
+        // const newPosition = targetPoint.clone().subVector(newOffset);
+        // const newUpVector = Vector3.tryZUpVector(newLookatDir, new Vector3);
+        // const viewMatrix = Matrix4.computeLookAt(newPosition, targetPoint, newUpVector, new Matrix4);
+        // const tranform = new PTransform().fromMatrix4(viewMatrix);
+        // const newRotation = tranform.rotation;
+        // item.transform.setQuat(-newRotation.x, -newRotation.y, -newRotation.z, newRotation.w);
+        // item.transform.setPosition(newPosition.x, newPosition.y, newPosition.z);
+        //
+        // 旋转优先
+        // const cameraPos = Vector3.fromArray(item.transform.position);
+        // const newLookatDir = targetPoint.clone().subVector(cameraPos).normalize();
+        // const newOffset = newLookatDir.clone().multiplyScalar(newDistance);
+        // const newPosition = targetPoint.clone().subVector(newOffset);
+        // const oldTransform = new PTransform().fromEffectsTransform(item.transform);
+        // const oldCoordinate = new PCoordinate().fromPTransform(oldTransform)
+        // const oldLookatDir = oldCoordinate.zAxis.clone().multiplyScalar(-1.0);
+        // const rotateAxis = oldLookatDir.cross(newLookatDir);
+        // const sinTheta = rotateAxis.length();
+        // const theta = Math.asin(sinTheta);
+        // const deltaRotation = Quaternion.fromAxisAngle(rotateAxis, theta, new Quaternion);
+        // const newRotation = Quaternion.multiply(deltaRotation, oldTransform.rotation, new Quaternion);
+        // item.transform.setQuat(newRotation.x, newRotation.y, newRotation.z, newRotation.w);
+        // item.transform.setPosition(newPosition.x, newPosition.y, newPosition.z);
+        //
+        //
+        this.startParams.target = "";
+    };
+    _proto.getCameraTransform = function getCameraTransform() {
+        var camera = this.composition.camera;
+        var transform = new Transform(camera.getOptions());
+        transform.setValid(true);
+        return transform;
+    };
+    _proto.startGesture = function startGesture(args) {
+        this.startParams = args;
+        this.updateCameraTransform(this.composition.camera.getOptions());
+        if (!this.getItem()) {
+            console.warn("[CameraGestureHandlerImp] Invalid target specified in startGesture.");
+        }
+        return this.composition.camera.getOptions();
+    };
+    _proto.moveGesture = function moveGesture(arg) {
+        if (this.getCurrentType() === arg.type) {
+            var item = this.getItem();
+            if (item === undefined) {
+                console.warn("[CameraGestureHandlerImp] Can't find camera item.");
+                return this.composition.camera.getOptions();
+            }
+            var _arg_speed;
+            var speed = (_arg_speed = arg.speed) != null ? _arg_speed : 1.015;
+            var xAxis = this.cameraCoordiante.xAxis;
+            var yAxis = this.cameraCoordiante.yAxis;
+            var zAxis = this.cameraCoordiante.zAxis;
+            var dx = arg.clientX - this.startParams.clientX;
+            var dy = arg.clientY - this.startParams.clientY;
+            if (arg.type === CameraGestureType.translate) {
+                var pos = this.cameraTransform.getPosition();
+                var newPos = pos.clone();
+                newPos.add(xAxis.clone().multiply(-dx * speed));
+                newPos.add(yAxis.clone().multiply(dy * speed));
+                item.transform.setPosition(newPos.x, newPos.y, newPos.z);
+                this.setTransform(item, item.transform.position, item.transform.rotation);
+            } else if (arg.type === CameraGestureType.scale) {
+                var pos1 = this.cameraTransform.getPosition();
+                var newPos1 = pos1.clone();
+                newPos1.add(zAxis.clone().multiply(dy * speed));
+                item.transform.setPosition(newPos1.x, newPos1.y, newPos1.z);
+                this.setTransform(item, item.transform.position, item.transform.rotation);
+            } else if (arg.type === CameraGestureType.rotate_self) {
+                var ndx = dx / arg.clientWidth;
+                var ndy = dy / arg.clientHeight;
+                var dxAngle = ndx * Math.PI * speed * 0.5;
+                var dyAngle = ndy * Math.PI * speed * 0.5;
+                var newRotation = Quaternion.fromAxisAngle(Vector3.Y, -dxAngle);
+                // FIXME: MATH
+                var tempRotation = Quaternion.fromAxisAngle(xAxis, -dyAngle);
+                newRotation.multiply(tempRotation);
+                // FIXME: MATH
+                newRotation.multiply(this.cameraTransform.getRotation());
+                item.transform.setQuaternion(newRotation.x, newRotation.y, newRotation.z, newRotation.w);
+                this.setTransform(item, item.transform.position, item.transform.rotation);
+            } else if (arg.type === CameraGestureType.rotate_focus) {
+                var ndx1 = dx / arg.clientWidth;
+                var ndy1 = dy / arg.clientHeight;
+                var dxAngle1 = ndx1 * Math.PI * speed;
+                var dyAngle1 = ndy1 * Math.PI * speed;
+                var newRotation1 = Quaternion.fromAxisAngle(Vector3.Y, -dxAngle1);
+                var tempRotation1 = Quaternion.fromAxisAngle(xAxis, -dyAngle1);
+                newRotation1.multiply(tempRotation1);
+                var rotateMatrix = newRotation1.toMatrix4(new Matrix4());
+                var targetPoint = Vector3.fromArray(arg.focusPoint);
+                var deltaPosition = this.cameraCoordiante.origin.clone().subtract(targetPoint);
+                rotateMatrix.transformPoint(deltaPosition);
+                var newPosition = deltaPosition.add(targetPoint);
+                newRotation1.multiply(this.cameraTransform.getRotation());
+                item.transform.setPosition(newPosition.x, newPosition.y, newPosition.z);
+                item.transform.setQuaternion(newRotation1.x, newRotation1.y, newRotation1.z, newRotation1.w);
+                this.setTransform(item, newPosition, item.transform.rotation);
+            } else {
+                console.warn("[CameraGestureHandlerImp] Movement type not implemented.");
+            }
+        } else {
+            console.warn("[CameraGestureHandlerImp] Invalid move type specified: " + arg.type);
+        }
+        return this.composition.camera.getOptions();
+    };
+    _proto.setTransform = function setTransform(item, position, rotation) {
+        var camera = item.getComponent(ModelCameraComponent);
+        if (camera !== undefined) {
+            camera.setTransform(position, rotation);
+        }
+    };
+    _proto.setPosition = function setPosition(item, position) {
+        var _item_transform;
+        (_item_transform = item.transform).setPosition.apply(_item_transform, [].concat(position));
+        var camera = item.getComponent(ModelCameraComponent);
+        if (camera !== undefined) {
+            camera.updateMainCamera();
+        }
+    };
+    _proto.setQuaternion = function setQuaternion(item, quat) {
+        var _item_transform;
+        (_item_transform = item.transform).setQuaternion.apply(_item_transform, [].concat(quat));
+        var camera = item.getComponent(ModelCameraComponent);
+        if (camera !== undefined) {
+            camera.updateMainCamera();
+        }
+    };
+    _proto.endGesture = function endGesture() {
+        this.startParams.type = CameraGestureType.none;
+        this.startParams.mouseEvent = false;
+        this.startParams.target = "";
+    };
+    _proto.updateCameraTransform = function updateCameraTransform(cameraOptions) {
+        var effectsTransfrom = new Transform(cameraOptions);
+        effectsTransfrom.setValid(true);
+        this.cameraTransform.fromEffectsTransform(effectsTransfrom);
+        this.cameraCoordiante.fromPTransform(this.cameraTransform);
+    };
+    return CameraGestureHandlerImp;
+}();
+
 export { CameraGestureHandlerImp, CameraGestureType, JSONConverter, LoaderHelper, LoaderImpl, getDefaultEffectsGLTFLoader, getDefaultPBRMaterialData, getDefaultUnlitMaterialData, getGeometryDataFromOptions, getGeometryDataFromPropsList, getPBRShaderProperties, getUnlitShaderProperties, setDefaultEffectsGLTFLoader };
 //# sourceMappingURL=loader.mjs.map