@galacean/cli 0.0.1-alpha.5 → 0.0.1-alpha.7

package/dist/assets/templates/web/src/index.ts.ejs

@@ -1,1065 +0,0 @@
-const debugChannel = new BroadcastChannel('Galacean_Editor_Channel');
-
-debugChannel.addEventListener("message", (e) => {
-  if (!(e.data && typeof e.data === 'object')) return;
-  const type = e.data.type;
-});
-
-import "./scripts";
-import {
-  Camera, AssetType, Scene, WebGLEngine, Loader, Logger, WebGLEngineConfiguration, ParserContext, HierarchyParser, Component
-} from "@galacean/engine";
-
-<% if(features.spine) { %>
-import { SpineAnimationRenderer } from "@galacean/engine-spine";
-<% } %>
-<% if(features.lottie) { %>
-import { LottieAnimation } from "@galacean/engine-lottie";
-<% } %>
-<% if(features.physicsLite) { %>
-import { LitePhysics } from "@galacean/engine-physics-lite";
-<% } %>
-<% if(features.physx) { %>
-import { PhysXPhysics } from "@galacean/engine-physics-physx";
-<% } %>
-
-<% if(features.xr) { %>
-import { WebXRDevice } from "@galacean/engine-xr-webxr";
-import { XROrigin, XRAnchorManager, XRImageManager, XRPlaneManager } from "@galacean/engine-toolkit-xr";
-Loader.registerClass("XR Origin", XROrigin);
-Loader.registerClass("XR Anchor Manager", XRAnchorManager);
-Loader.registerClass("XR Image Manager", XRImageManager);
-Loader.registerClass("XR Plane Manager", XRPlaneManager);
-<% } %>
-
-<% if(features.shaderlab) { %>
-import { ShaderLab } from "@galacean/engine-shaderlab";
-import { registerIncludes } from "@galacean/engine-shader";
-<% } %>
-
-<% if(features.gui) { %>
-import { registerGUI } from "@galacean/engine-ui";
-registerGUI();
-<% } %>
-
-<% if(debug.orbitControl) { %>
-import { OrbitControl as ToolkitOrbitControl } from "@galacean/engine-toolkit";
-<% } %>
-
-<% if(debug.stats) { %>
-import { Stats } from "@galacean/engine-toolkit";
-
-Stats.hookRequest();
-
-debugChannel.addEventListener("message", (e) => {
-  if (!(e.data && typeof e.data === 'object')) return;
-
-  const type = e.data.type;
-  if (type === 'toggle-stats-visible') {
-    if (!_statsComponent) {
-      _statsComponent = engine.sceneManager.activeScene._componentsManager._activeCameras.get(0).entity.addComponent(Stats);
-    }
-    const value = e.data.payload;
-    if(value) {
-      _statsComponent.enabled = true;
-    } else {
-      _statsComponent.enabled = false;
-    }
-  }
-});
-<% } %>
-
-<% if(debug.godMode) { %>
-import {
-  Canvas,
-  Entity,
-  InputManager,
-  Keys,
-  PointerButton,
-  Script,
-  Transform,
-  Vector2,
-  Vector3,
-  MathUtil,
-  Matrix
-} from "@galacean/engine";
-<% } %>
-import projectInfo from "../project.json";
-
-
-<% if(debug.eventDebugger) { %>
-function eventDebugger() {
-  const originOnFunc = WebGLEngine.prototype.on;
-  const message = {
-    type: "collect-preview-runtime-event",
-    payload: {},
-  };
-
-  WebGLEngine.prototype.on = function(type, listener) {
-    originOnFunc.call(this, type, listener);
-    message.payload.inputEvents = this.eventNames();
-    debugChannel.postMessage(message);
-  };
-
-  WebGLEngine.prototype._dispatch = WebGLEngine.prototype.dispatch;
-
-  WebGLEngine.prototype.dispatch = function(event, data) {
-    this._dispatch(event, data);
-    // message.payload.outputEvent = event;
-    debugChannel.postMessage(message, "*");
-  };
-
-  debugChannel.addEventListener("message", (e) => {
-    if (!(e.data && typeof e.data === 'object')) return;
-    const type = e.data.type;
-    if (type === 'trigger-preview-runtime-event') {
-      engine.dispatch(e.data.payload.eventName, e.data.payload.data);
-    }
-  });
-}
-
-eventDebugger();
-<% } %>
-
-<% if(debug.hotReload) { %>
-  function engineEnhancement(): void {
-    // @ts-ignore
-    WebGLEngine.prototype._engineObjectMap = new Map<string, string>();
-
-    // @ts-ignore
-    HierarchyParser.prototype._addComponentPlugin = function (
-      componentId: string,
-      component: Component
-    ) {
-      this._engine._engineObjectMap.set(componentId, component);
-    };
-
-    // @ts-ignore
-    HierarchyParser.prototype._addEntityPlugin = function (
-      entityId: string,
-      entity: Entity
-    ) {
-      this._engine._engineObjectMap.set(entityId, entity);
-    };
-  }
-  engineEnhancement();
-
-  debugChannel.addEventListener("message", (e) => {
-    if (!(e.data && typeof e.data === 'object')) return;
-    const type = e.data.type;
-    if (type === 'script-inspector-value-change') {
-      const component = engine._componentsMap.get(e.data.payload.instanceId);
-      if (component) {
-        component[e.data.payload.property] = e.data.payload.value;
-      }
-    }
-
-    if (type === 'scene-inspector-value-change') {
-      const { property, value } = e.data.payload;
-      engine.sceneManager.activeScene[property] = value;
-    }
-
-  })
-<% } %>
-
-export async function init(canvas: HTMLCanvasElement) {
-  const config: WebGLEngineConfiguration = {
-    canvas,
-    physics: undefined,
-    shaderLab: undefined,
-    graphicDeviceOptions: projectInfo.runtimeOptions.webGLRendererOptions
-  };
-
-<% if(features.xr) { %>
-  config.xrDevice = new WebXRDevice();
-<% } %>
-<% if(features.shaderlab) { %>
-  config.shaderLab = new ShaderLab();
-  Logger.enable();
-  registerIncludes();
-<% } %>
-<% if(features.physicsLite) { %>
-  config.physics = new LitePhysics();
-<% } %>
-<% if(features.physx) { %>
-  config.physics = new PhysXPhysics();
-<% } %>
-<% if(debug.stats) { %>
-<% } %>
-
-  const engine = await WebGLEngine.create(config);
-  document.oncontextmenu = (e) => {
-    e.preventDefault();
-  };
-  engine.canvas.resizeByClientSize(projectInfo.runtimeOptions.devicePixelRatioMode === "Fixed" ? projectInfo.runtimeOptions.devicePixelRatio : undefined);
-
-<% if(features.lottie) { %>
-  Loader.registerClass("LottieAnimation", LottieAnimation);
-<% } %>
-<% if(features.spine) { %>
-  Loader.registerClass("SpineAnimationRenderer", SpineAnimationRenderer);
-<% } %>
-
-  await engine.resourceManager
-    .load({
-      url: projectInfo.url,
-      type: AssetType.Project,
-    })
-    .onProgress(
-      (loaded: number, total: number) => {
-        const percentage = Math.round((loaded / total) * 100);
-        console.log(`Overall progress: ${percentage}% (${loaded}/${total} files loaded)`);
-        console.log(`Files loaded: project config + ${loaded - 1} project files`);
-    
-        window.parent.postMessage({ loaded, total }, "*");
-        // Update your loading ui here
-      },
-      // Track detailed progress (individual file loading)
-      (url: string, loaded: number, total: number) => {
-        const percentage = Math.round((loaded / total) * 100);
-        console.log(`Loading ${url}: ${percentage}% (${loaded}/${total} bytes)`);
-    
-        // Update detailed progress display here
-      }
-    )
-    .catch((e) => {
-      throw e;
-    });
-
-<% if(debug.orbitControl) { %>
-  try {
-    const cameras = [];
-    const rootEntities = engine.sceneManager.activeScene.rootEntities;
-    for (let i = 0, n = rootEntities.length; i < n; i++) {
-      cameras.push(...rootEntities[i].getComponentsIncludeChildren(Camera, []));
-    }
-    for (let j = 0, n = cameras.length; j < n; j++) {
-      cameras[0].entity.addComponent(ToolkitOrbitControl);
-    }
-  } catch (e) {
-    console.log(e);
-  }
-<% } %>
-    
-  window.engine = engine;
-
-<% if(features.xr) { %>
-  function addXRButton(content: string): HTMLButtonElement {
-    const button = document.createElement("button");
-    button.textContent = content;
-    const { style } = button;
-    style.position = "absolute";
-    style.bottom = "20px";
-    style.padding = "12px 6px";
-    style.border = "1px solid rgb(255, 255, 255)";
-    style.borderRadius = "4px";
-    style.background = "rgba(0, 0, 0, 0.1)";
-    style.color = "rgb(255, 255, 255)";
-    style.font = "13px sans-serif";
-    style.textAlign = "center";
-    style.opacity = "0.5";
-    style.outline = "none";
-    style.zIndex = "999";
-    style.cursor = "pointer";
-    style.left = "calc(50% - 50px)";
-    style.width = "100px";
-    document.body.appendChild(button);
-    return button;
-  }
-  const xrManager = engine.xrManager;
-  let xrMode = 0;
-  if (xrManager.origin) {
-    const inputManager = xrManager.inputManager;
-    const camera = inputManager.getTrackedDevice(3);
-    const leftCamera = inputManager.getTrackedDevice(4);
-    const rightCamera = inputManager.getTrackedDevice(5);
-    if(leftCamera._camera && rightCamera._camera) { 
-      xrMode = 2;
-    } else if(camera._camera) {
-      xrMode = 1;
-    }
-  }
-  if(xrMode !== 0) {
-    xrManager.sessionManager.isSupportedMode(xrMode).then(
-      () => {
-        addXRButton(xrMode === 1 ? "进入 AR" : "进入 VR").onclick = () => {
-          xrManager.enterXR(xrMode);
-        };
-      },
-      (error) => {
-        addXRButton("not support")
-        console.error(error);
-      }
-    );
-  }
-<% } %>
-
-<% if(debug.autoResize) { %>
-  // auto resize canvas
-  const _canvas = document.getElementById('canvas');
-  const ob = new ResizeObserver(() => {
-    engine.canvas.resizeByClientSize();
-  });
-  ob.observe(_canvas);
-<% } %>
-
-<% if(debug.godMode) { %>
-
-  enum ControlEvent {
-    Default = "control-default",
-    Rotate = "control-rotating",
-    Zoom = "control-zoom",
-    Pan = "control-paning",
-    Around = "control-around",
-    Fly = "control-fly",
-    Enter = "editorControl-enter",
-    Leave = "editorControl-leave",
-    SpeedChange = "flySpeedChange",
-    PanOn = "editorControl-pan"
-  }
-
-  // Prevent gimbal lock.
-  const ESP = MathUtil.zeroTolerance;
-
-  class Spherical {
-    private static _xAxis: Vector3 = new Vector3();
-    private static _yAxis: Vector3 = new Vector3();
-    private static _zAxis: Vector3 = new Vector3();
-    private _matrix: Matrix = new Matrix();
-    private _matrixInv: Matrix = new Matrix();
-    constructor(public radius?: number, public phi?: number, public theta?: number) {
-      this.radius = radius !== undefined ? radius : 1.0;
-      this.phi = phi !== undefined ? phi : 0;
-      this.theta = theta !== undefined ? theta : 0;
-    }
-  
-    makeSafe(): Spherical {
-      const count = Math.floor(this.phi / Math.PI);
-      this.phi = MathUtil.clamp(this.phi, count * Math.PI + ESP, (count + 1) * Math.PI - ESP);
-      return this;
-    }
-  
-    set(radius: number, phi: number, theta: number): Spherical {
-      this.radius = radius;
-      this.phi = phi;
-      this.theta = theta;
-      return this;
-    }
-  
-    setYAxis(up: Vector3): void {
-      const { _xAxis: xAxis, _yAxis: yAxis, _zAxis: zAxis } = Spherical;
-      if (Vector3.equals(xAxis.set(1, 0, 0), yAxis.copyFrom(up).normalize())) {
-        xAxis.set(0, 1, 0);
-      }
-      Vector3.cross(xAxis, yAxis, zAxis);
-      zAxis.normalize();
-      Vector3.cross(yAxis, zAxis, xAxis);
-      const { elements: es } = this._matrix;
-      (es[0] = xAxis.x), (es[1] = xAxis.y), (es[2] = xAxis.z);
-      (es[4] = yAxis.x), (es[5] = yAxis.y), (es[6] = yAxis.z);
-      (es[8] = zAxis.x), (es[9] = zAxis.y), (es[10] = zAxis.z);
-  
-      const { elements: eInv } = this._matrixInv;
-      (eInv[0] = xAxis.x), (eInv[4] = xAxis.y), (eInv[8] = xAxis.z);
-      (eInv[1] = yAxis.x), (eInv[5] = yAxis.y), (eInv[9] = yAxis.z);
-      (eInv[2] = zAxis.x), (eInv[6] = zAxis.y), (eInv[10] = zAxis.z);
-    }
-  
-    setFromVec3(value: Vector3, atTheBack = false): Spherical {
-      value.transformNormal(this._matrixInv);
-      this.radius = value.length();
-      if (this.radius === 0) {
-        this.theta = 0;
-        this.phi = 0;
-      } else {
-        if (atTheBack) {
-          this.phi = 2 * Math.PI - Math.acos(MathUtil.clamp(value.y / this.radius, -1, 1));
-          this.theta = Math.atan2(-value.x, -value.z);
-        } else {
-          this.phi = Math.acos(MathUtil.clamp(value.y / this.radius, -1, 1));
-          this.theta = Math.atan2(value.x, value.z);
-        }
-      }
-      return this;
-    }
-  
-    setToVec3(value: Vector3): boolean {
-      const { radius, phi, theta } = this;
-      const sinPhiRadius = Math.sin(phi) * radius;
-      this.phi -= Math.floor(this.phi / Math.PI / 2) * Math.PI * 2;
-      value.set(sinPhiRadius * Math.sin(theta), radius * Math.cos(phi), sinPhiRadius * Math.cos(theta));
-      value.transformNormal(this._matrix);
-      return this.phi > Math.PI;
-    }
-  }
-
-  class OrbitControl extends Script {
-    canvas: Canvas;
-    input: InputManager;
-    camera: Camera;
-    cameraTransform: Transform;
-
-    /** Whether to automatically rotate the camera, the default is false. */
-    autoRotate = false;
-    /** The radian of automatic rotation per second. */
-    autoRotateSpeed: number = Math.PI;
-    /** Whether to enable camera damping, the default is true. */
-    enableDamping = true;
-    /** Rotation speed, default is 1.0 . */
-    rotateSpeed = 1.0;
-    /** Camera zoom speed, the default is 1.0. */
-    zoomSpeed = 1.0;
-    /** Keyboard translation speed, the default is 7.0 . */
-    keyPanSpeed = 7.0;
-    /** Rotation damping parameter, default is 0.1 . */
-    dampingFactor = 0.1;
-    /** Zoom damping parameter, default is 0.2 . */
-    zoomFactor = 0.2;
-    /**  The minimum distance, the default is 0.1, should be greater than 0. */
-    minDistance = 0.000001;
-    /** The maximum distance, the default is infinite, should be greater than the minimum distance. */
-    maxDistance = Infinity;
-    /** Minimum zoom speed, the default is 0.0. */
-    minZoom = 0.0;
-    /** Maximum zoom speed, the default is positive infinity. */
-    maxZoom = Infinity;
-    /** The minimum radian in the vertical direction, the default is 1 degree. */
-    minPolarAngle = 1;
-    /** The maximum radian in the vertical direction,  the default is 179 degree.  */
-    maxPolarAngle: number = (179 / 180) * Math.PI;
-    /** The minimum radian in the horizontal direction, the default is negative infinity. */
-    minAzimuthAngle = -Infinity;
-    /** The maximum radian in the horizontal direction, the default is positive infinity.  */
-    maxAzimuthAngle = Infinity;
-    /** Movement distance per second, the unit is the unit before MVP conversion. */
-    movementSpeed = 2;
-    /** factor of movement speed */
-    speedFactor = 1.0;
-
-    private _up: Vector3 = new Vector3(0, 1, 0);
-    private _target: Vector3 = new Vector3();
-    private _atTheBack = false;
-    private _spherical: Spherical = new Spherical();
-    private _sphericalDelta: Spherical = new Spherical();
-    private _sphericalDump: Spherical = new Spherical();
-    private _sphericalFree: Spherical = new Spherical();
-    private _zoomFrag = 0;
-    private _scale = 1;
-    private _panOffset: Vector3 = new Vector3();
-    private _tempVec3: Vector3 = new Vector3();
-    private _tempVec2: Vector3 = new Vector3();
-    private _tempVec: Vector3 = new Vector3();
-    private _topVec: Vector3 = new Vector3(0, 1, 0);
-    private _bottomVec: Vector3 = new Vector3(0, -1, 0);
-    private _tempForward: Vector3 = new Vector3();
-    private _tempTarget: Vector3 = new Vector3();
-    private _tempVecDelta: Vector2 = new Vector2();
-
-    private _radius = 0;
-    private _isAltDown = false;
-    private _transformDirty = false;
-    private _inEditing = false;
-    private _lastFlySpeed = 0;
-    private _flyDirection = new Vector3();
-    private _damping = 0.8;
-    private _dampingThreshold = 0.01;
-
-    /*
-    * Return up vector.
-    */
-    get up(): Vector3 {
-      return this._up;
-    }
-
-    set up(value: Vector3) {
-      this._up.copyFrom(value);
-      this._spherical.setYAxis(value);
-      this._atTheBack = false;
-    }
-
-    /**
-    * Return target position.
-    * */
-    get target(): Vector3 {
-      return this._target;
-    }
-
-    set target(value: Vector3) {
-      this._target.copyFrom(value);
-      this._atTheBack = false;
-    }
-
-    set inEditing(value: boolean) {
-      if (this._inEditing !== value) {
-        this._inEditing = value;
-      }
-
-      this.engine.dispatch(value ? ControlEvent.Enter : ControlEvent.Leave);
-    }
-
-    onAwake(): void {
-      const { engine, entity } = this;
-      this.canvas = engine.canvas;
-      this.input = engine.inputManager;
-      this.camera = entity.getComponent(Camera);
-      this.cameraTransform = entity.transform;
-      this._spherical.setYAxis(this._up);
-      this._atTheBack = false;
-
-      /** Init spherical. */
-      Vector3.transformByQuat(this._tempVec3.set(0, 0, -1), this.cameraTransform.rotationQuaternion, this._tempVec3);
-      this._sphericalFree.setFromVec3(this._tempVec3, this._atTheBack);
-
-      // alt key
-      // 需要拿到全局 alt down, 而inputManager为防止与其他面板快捷键冲突需要挂在canvas上
-      document.addEventListener("keydown", (event) => {
-        this._isAltDown = event.altKey;
-      });
-      document.addEventListener("keyup", (event) => {
-        this._isAltDown = event.altKey;
-      });
-
-      // 此处重写了 pointerManager 的事件监听
-      // 在 viewport 编辑态时，需要阻拦触控点所有的默认行为
-      // @ts-ignore
-      const pointerManager = this.engine.inputManager._pointerManager;
-      pointerManager._removeEventListener();
-      const { _nativeEvents: nativeEvents } = pointerManager;
-      // @ts-ignore
-      const { _webCanvas: webCanvas } = engine.canvas;
-      pointerManager._onPointerEvent = (evt: PointerEvent) => {
-        // @ts-ignore
-        if (evt.type === "pointerdown" && evt.target !== webCanvas) return;
-        this._inEditing && evt.preventDefault();
-        nativeEvents.push(evt);
-      };
-      pointerManager._addEventListener();
-    }
-
-    onUpdate(deltaTime: number): void {
-      const inputManager = this.input;
-      // 维护编辑态
-      // 1. 若触控按下，则进入编辑态
-      if (inputManager.isPointerDown() || inputManager.isKeyDown()) {
-        this.inEditing = true;
-      }
-      // 2. 若当前没有触控，则退出编辑态
-      if (!inputManager.isPointerHeldDown() && !inputManager.isKeyHeldDown()) {
-        this.inEditing = false;
-      }
-      const { _inEditing: inEditing } = this;
-      const primaryDown = inputManager.isPointerHeldDown(PointerButton.Primary);
-      const secondaryDown = inputManager.isPointerHeldDown(PointerButton.Secondary);
-      const auxiliaryDown = inputManager.isPointerHeldDown(PointerButton.Auxiliary);
-      // 判断滚轮
-      if (secondaryDown) {
-        this._updateSpeed(inputManager.wheelDelta);
-      } else {
-        this._zoom(inputManager.wheelDelta);
-      }
-
-      // 判断 fly
-      const { movementSpeed } = this;
-      const delta = this._tempVec2.set(0, 0, 0);
-
-      if ((secondaryDown && inputManager.isKeyHeldDown(Keys.KeyA)) || inputManager.isKeyHeldDown(Keys.ArrowLeft)) {
-        delta.x -= movementSpeed;
-      }
-      if ((secondaryDown && inputManager.isKeyHeldDown(Keys.KeyD)) || inputManager.isKeyHeldDown(Keys.ArrowRight)) {
-        delta.x += movementSpeed;
-      }
-      if (secondaryDown && inputManager.isKeyHeldDown(Keys.KeyQ)) {
-        delta.y -= movementSpeed;
-      }
-      if (secondaryDown && inputManager.isKeyHeldDown(Keys.KeyE)) {
-        delta.y += movementSpeed;
-      }
-      if ((secondaryDown && inputManager.isKeyHeldDown(Keys.KeyS)) || inputManager.isKeyHeldDown(Keys.ArrowDown)) {
-        delta.z += movementSpeed;
-      }
-      if ((secondaryDown && inputManager.isKeyHeldDown(Keys.KeyW)) || inputManager.isKeyHeldDown(Keys.ArrowUp)) {
-        delta.z -= movementSpeed;
-      }
-      this._fly(delta, deltaTime);
-
-      let controlType = ControlEvent.Default;
-
-      // 判断 panning, around, zoom 和 rotating
-      if (inEditing) {
-        const onlyPrimaryDown = primaryDown && !secondaryDown;
-        const onlySecondaryDown = !primaryDown && secondaryDown;
-        const bothDown = primaryDown && secondaryDown;
-        const deltaPosition = inputManager.pointers[0]?.deltaPosition || this._tempVecDelta.set(0, 0);
-        const altDown = this._isAltDown;
-        const ctrlDown = inputManager.isKeyHeldDown(Keys.ControlLeft) || inputManager.isKeyHeldDown(Keys.ControlRight);
-        const metaDown = inputManager.isKeyHeldDown(Keys.MetaLeft) || inputManager.isKeyHeldDown(Keys.MetaRight);
-
-        // change cursor for next move implication
-        if (altDown && !metaDown) {
-          controlType = ControlEvent.Rotate;
-        }
-        if (altDown && ctrlDown) {
-          controlType = ControlEvent.Zoom;
-        }
-        if (auxiliaryDown || (altDown && metaDown)) {
-          controlType = ControlEvent.Pan;
-        }
-
-        if (bothDown || (altDown && ctrlDown && onlyPrimaryDown)) {
-          controlType = ControlEvent.Zoom;
-          this._zoom(deltaPosition);
-        } else if (altDown && onlyPrimaryDown && !metaDown) {
-          controlType = ControlEvent.Rotate;
-          this._rotate(deltaPosition);
-        } else if (onlySecondaryDown) {
-          controlType = ControlEvent.Around;
-          this._around(deltaPosition);
-        } else if (onlyPrimaryDown || auxiliaryDown || (altDown && metaDown && onlyPrimaryDown)) {
-          controlType = ControlEvent.Pan;
-          this._pan(deltaPosition);
-        }
-      }
-      this._transformDirty && this._updateTransform();
-    }
-
-    private _rotate(delta: Vector2): void {
-      if (delta.x === 0 && delta.y === 0) {
-        return;
-      }
-      const radianLeft = ((2 * Math.PI * delta.x) / this.canvas.width) * this.rotateSpeed;
-      this._sphericalDelta.theta -= radianLeft;
-      const radianUp = ((2 * Math.PI * delta.y) / this.canvas.height) * this.rotateSpeed;
-      this._sphericalDelta.phi -= radianUp;
-      if (this.enableDamping) {
-        this._sphericalDump.theta = -radianLeft;
-        this._sphericalDump.phi = -radianUp;
-      }
-      this._transformDirty = true;
-    }
-
-    private _zoom(delta: Vector2 | Vector3): void {
-      if (delta.y === 0) {
-        return;
-      }
-      const factor = this._easeOutExpo(this._getDistToTarget());
-      if (delta.y > 0) {
-        this._scale /= Math.pow(0.95, this.zoomSpeed * factor);
-      } else if (delta.y < 0) {
-        this._scale *= Math.pow(0.95, this.zoomSpeed * factor);
-      }
-
-      this._transformDirty = true;
-    }
-
-    private _pan(delta: Vector2): void {
-      if (delta.x === 0 && delta.y === 0) {
-        return;
-      }
-      const { cameraTransform } = this;
-      const { elements } = cameraTransform.worldMatrix;
-      const { height } = this.canvas;
-      const targetDistance =
-        Vector3.distance(cameraTransform.position, this.target) * (this.camera.fieldOfView / 2) * (Math.PI / 180);
-      const distanceLeft = -2 * delta.x * (targetDistance / height);
-      const distanceUp = 2 * delta.y * (targetDistance / height);
-      this._panOffset.x += elements[0] * distanceLeft + elements[4] * distanceUp;
-      this._panOffset.y += elements[1] * distanceLeft + elements[5] * distanceUp;
-      this._panOffset.z += elements[2] * distanceLeft + elements[6] * distanceUp;
-      this._transformDirty = true;
-    }
-
-    private _fly(moveDelta: Vector3, delta: number): void {
-      if (moveDelta.x === 0 && moveDelta.y === 0 && moveDelta.z === 0) {
-        if (this._lastFlySpeed > this._dampingThreshold) {
-          this._lastFlySpeed *= this._damping;
-          const length = delta * this.movementSpeed * this._easeOutExpo(this._lastFlySpeed);
-          this._flyUpdate(length);
-        } else {
-          this._lastFlySpeed = 0;
-        }
-        return;
-      }
-
-      const factor = this._getDistToTarget() * 0.024154589371980676;
-      this._lastFlySpeed += delta;
-      const length = delta * this.movementSpeed * factor * (1 + this._lastFlySpeed * this._lastFlySpeed * 10);
-
-      this._flyDirection.copyFrom(moveDelta);
-      this._flyUpdate(length);
-    }
-
-    private _around(moveDelta: Vector2): void {
-      if (moveDelta.x === 0 && moveDelta.y === 0) {
-        return;
-      }
-      this._tempVec3.copyFrom(this.cameraTransform.worldUp);
-      this._atTheBack = this._tempVec3.y <= 0;
-
-      Vector3.transformByQuat(this._tempVec3.set(0, 0, -1), this.cameraTransform.rotationQuaternion, this._tempVec3);
-      this._sphericalFree.setFromVec3(this._tempVec3, this._atTheBack);
-
-      const canvas = this.engine.canvas;
-      const deltaAlpha = (-moveDelta.x * 180) / canvas.width;
-      const deltaPhi = (moveDelta.y * 180) / canvas.height;
-      this._sphericalFree.theta += MathUtil.degreeToRadian(deltaAlpha);
-      this._sphericalFree.phi += MathUtil.degreeToRadian(deltaPhi);
-      this._sphericalFree.makeSafe();
-      this._atTheBack = this._sphericalFree.setToVec3(this._tempVec2);
-      Vector3.add(this.cameraTransform.position, this._tempVec2, this._tempVec2);
-      this._atTheBack
-        ? this.cameraTransform.lookAt(this._tempVec2, this._bottomVec)
-        : this.cameraTransform.lookAt(this._tempVec2, this._topVec);
-
-      this._updateTarget();
-      this._transformDirty = true;
-    }
-
-    private _updateSpeed(delta: Vector3) {
-      if (delta.y === 0) return;
-      this.speedFactor = MathUtil.clamp(this.speedFactor - delta.y / 500, 0.001, 50);
-      this.engine.dispatch(ControlEvent.SpeedChange, this.speedFactor);
-      this.movementSpeed = 10.0 * this.speedFactor;
-    }
-
-    private _updateTarget() {
-      this._radius = Vector3.distance(this.cameraTransform.worldPosition, this.target);
-      const currentPos = this.cameraTransform.worldPosition;
-      this._tempForward = this.cameraTransform.worldForward.clone();
-      this._tempForward.normalize().scale(this._radius);
-      Vector3.add(currentPos, this._tempForward, this._tempTarget);
-
-      this._tempVec.copyFrom(this._atTheBack ? this._bottomVec : this._topVec);
-
-      this._spherical.setYAxis(this._tempVec);
-      this._target = this._tempTarget;
-      this._up.copyFrom(this._tempVec);
-    }
-
-    private _updateTransform(): void {
-      const { cameraTransform, target, _spherical, _tempVec2: _tempVec31, _sphericalDelta, _panOffset } = this;
-
-      _tempVec31.copyFrom(cameraTransform.worldUp);
-      this._atTheBack = _tempVec31.y <= 0;
-
-      Vector3.subtract(cameraTransform.position, target, _tempVec31);
-      _spherical.setFromVec3(_tempVec31, this._atTheBack);
-      _spherical.theta += _sphericalDelta.theta;
-      _spherical.phi += _sphericalDelta.phi;
-      _spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, _spherical.theta));
-      _spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, _spherical.phi));
-      _spherical.makeSafe();
-      if (this._scale !== 1) {
-        this._zoomFrag = _spherical.radius * (this._scale - 1);
-      }
-      _spherical.radius += this._zoomFrag;
-
-      _spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, _spherical.radius));
-      this._atTheBack = _spherical.setToVec3(_tempVec31);
-
-      // Camera move
-      Vector3.add(target.add(_panOffset), _tempVec31, cameraTransform.worldPosition);
-      cameraTransform.lookAt(target, this._atTheBack ? this._bottomVec : this._topVec);
-
-      // Reset cache value.
-      this._zoomFrag = 0;
-      this._scale = 1;
-      _sphericalDelta.set(0, 0, 0);
-      _panOffset.set(0, 0, 0);
-      this._transformDirty = false;
-    }
-
-    private _flyUpdate(length: number) {
-      const dist = this._flyDirection.normalize().scale(length);
-      this.cameraTransform.translate(dist, true);
-      Vector3.transformByQuat(dist, this.entity.transform.worldRotationQuaternion, this._tempVec3);
-      this._target.add(this._tempVec3);
-    }
-
-    private _easeOutExpo(t: number): number {
-      return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
-    }
-
-    private _getDistToTarget(): number {
-      Vector3.subtract(this.target, this.cameraTransform.worldPosition, this._tempVec3);
-      return this._tempVec3.length();
-    }
-  }
-  
-  class OrthoControl extends Script {
-    canvas: Canvas;
-    input: InputManager;
-    camera: Camera;
-    cameraTransform: Transform;
-  
-    /** Target position. */
-    target: Vector3 = new Vector3();
-    /** Up vector */
-    up: Vector3 = new Vector3(0, 1, 0);
-    /** Camera zoom speed, the default is 1.0. */
-    zoomSpeed = 1.0;
-    /** Minimum zoom speed, the default is 0.0. */
-    minZoom = 0.0;
-    /** Maximum zoom speed, the default is positive infinity. */
-    maxZoom = Infinity;
-    /** Movement distance per second, the unit is the unit before MVP conversion. */
-    movementSpeed = 10.0;
-  
-    private _zoomScaleUnit = 3;
-    private _scale = 1;
-    private _realScale = 1;
-  
-    private _transformDirty = false;
-  
-    private _panOffset: Vector2 = new Vector2();
-    private _tempVec2: Vector2 = new Vector2();
-    private _tempVec3: Vector3 = new Vector3();
-  
-    private _isAltDown = false;
-    private _inEditing = false;
-  
-    set inEditing(value: boolean) {
-      if (this._inEditing !== value) {
-        this._inEditing = value;
-      }
-  
-      this.engine.dispatch(value ? ControlEvent.Enter : ControlEvent.Leave);
-    }
-  
-    constructor(entity: Entity) {
-      super(entity);
-    }
-  
-    checkAltPressed = (event: KeyboardEvent) => {
-      this._isAltDown = event.altKey;
-    }
-  
-    onAwake(): void {
-      const { engine, entity } = this;
-      this.canvas = engine.canvas;
-      this.input = engine.inputManager;
-      this.camera = entity.getComponent(Camera);
-      this.cameraTransform = entity.transform;
-  
-      document.addEventListener("keydown", this.checkAltPressed);
-      document.addEventListener("keyup", this.checkAltPressed);
-  
-      // 此处重写了 pointerManager 的事件监听
-      // 在 viewport 编辑态时，需要阻拦触控点所有的默认行为
-      // @ts-ignore
-      const pointerManager = this.engine.inputManager._pointerManager;
-      pointerManager._removeEventListener();
-      const { _nativeEvents: nativeEvents } = pointerManager;
-      // @ts-ignore
-      const { _webCanvas: webCanvas } = engine.canvas;
-      pointerManager._onPointerEvent = (evt: PointerEvent) => {
-        // @ts-ignore
-        if (evt.type === "pointerdown" && evt.target !== webCanvas) return;
-        this._inEditing && evt.preventDefault();
-        nativeEvents.push(evt);
-      };
-      pointerManager._addEventListener();
-    }
-  
-    onUpdate(): void {
-      const inputManager = this._engine.inputManager; // 维护编辑态
-      // 1. 若触控按下，则进入编辑态
-      //@ts-ignore
-      if (inputManager.isPointerDown() || inputManager.isKeyDown()) {
-        this.inEditing = true;
-      }
-      // 2. 若当前没有触控，则退出编辑态
-      if (!inputManager.isPointerHeldDown() && !inputManager.isKeyHeldDown()) {
-        this.inEditing = false;
-      }
-      const { _inEditing: inEditing } = this;
-      const { _tempVec2: delta } = this;
-      let controlEvent = ControlEvent.Default;
-  
-      // wheel
-      const wheelDelta = inputManager.wheelDelta;
-      if (wheelDelta.x !== 0 || wheelDelta.y !== 0 || wheelDelta.z !== 0) {
-        controlEvent = ControlEvent.Zoom;
-        this._zoom(wheelDelta);
-      }
-  
-      // keyboard event
-      delta.x = delta.y = 0;
-      if (inputManager.isKeyHeldDown(Keys.ArrowLeft)) {
-        delta.x += this.movementSpeed;
-        controlEvent = ControlEvent.Pan;
-        this._pan(delta);
-      } else if (inputManager.isKeyHeldDown(Keys.ArrowRight)) {
-        delta.x -= this.movementSpeed;
-        controlEvent = ControlEvent.Pan;
-        this._pan(delta);
-      }
-  
-      if (inputManager.isKeyHeldDown(Keys.ArrowDown)) {
-        delta.y -= this.movementSpeed;
-        controlEvent = ControlEvent.Pan;
-        this._pan(delta);
-      } else if (inputManager.isKeyHeldDown(Keys.ArrowUp)) {
-        delta.y += this.movementSpeed;
-        controlEvent = ControlEvent.Pan;
-        this._pan(delta);
-      }
-  
-      // pointer event
-      if (inEditing) {
-        const primaryDown = inputManager.isPointerHeldDown(PointerButton.Primary);
-        const secondaryDown = inputManager.isPointerHeldDown(PointerButton.Secondary);
-        const auxiliaryDown = inputManager.isPointerHeldDown(PointerButton.Auxiliary);
-  
-        const altDown = this._isAltDown;
-        const metaDown = inputManager.isKeyHeldDown(Keys.MetaLeft) || inputManager.isKeyHeldDown(Keys.MetaRight);
-        const onlyPrimaryDown = primaryDown && !secondaryDown;
-        const bothDown = primaryDown && secondaryDown;
-  
-        const deltaPosition = inputManager.pointers[0]?.deltaPosition || delta;
-  
-        if ((altDown && metaDown && onlyPrimaryDown) || bothDown) {
-          controlEvent = ControlEvent.Zoom;
-          this._zoom(deltaPosition);
-        } else if (onlyPrimaryDown || (!altDown && metaDown && onlyPrimaryDown) || auxiliaryDown) {
-          controlEvent = ControlEvent.Pan;
-          this._pan(deltaPosition);
-        }
-      }
-  
-      this._transformDirty && this._updateTransform();
-    }
-  
-    private _zoom(delta: Vector2 | Vector3): void {
-      const scaleFactor = Math.pow(0.96, this.zoomSpeed);
-      if (delta.y > 0) {
-        this._scale /= scaleFactor;
-        this._realScale++;
-      } else if (delta.y < 0) {
-        this._scale *= scaleFactor;
-        this._realScale--;
-      }
-      this._updateZoomScaleUnit();
-      this._transformDirty = true;
-    }
-  
-    private _updateZoomScaleUnit(): void {
-      const realScale = Math.abs(this._realScale);
-      if (realScale < 25) {
-        this._zoomScaleUnit = 3;
-      } else if (realScale < 50) {
-        this._zoomScaleUnit = 2.8;
-      } else {
-        this._zoomScaleUnit = 2.6;
-      }
-    }
-  
-    private _pan(moveDelta: Vector2): void {
-      this._panOffset.copyFrom(moveDelta);
-  
-      this._transformDirty = true;
-    }
-  
-    private _updateTransform(): void {
-      const { cameraTransform, camera, _panOffset } = this;
-  
-      // Update Zoom
-      const sizeDiff = this._zoomScaleUnit * Math.log1p(camera.orthographicSize) * (this._scale - 1);
-      const size = camera.orthographicSize + sizeDiff;
-      camera.orthographicSize = Math.max(this.minZoom, Math.min(this.maxZoom, size));
-  
-      // Update X and Y
-      const { width, height } = this.canvas;
-      const { x, y } = _panOffset;
-      const doubleOrthographicSize = camera.orthographicSize * 2;
-      const width3D = doubleOrthographicSize * camera.aspectRatio;
-      const height3D = doubleOrthographicSize;
-      const cameraPosition = cameraTransform.position;
-      const curPosition = this._tempVec3;
-      curPosition.x = cameraPosition.x - (x * width3D) / width;
-      curPosition.y = cameraPosition.y + (y * height3D) / height;
-      curPosition.z = cameraPosition.z;
-  
-      // Update camera transform
-      cameraTransform.position = curPosition;
-      /** Reset cache value. */
-      this._scale = 1;
-      _panOffset.set(0, 0);
-      this._transformDirty = false;
-    }
-  
-    onDestroy() {
-      document.removeEventListener("keydown", this.checkAltPressed);
-      document.removeEventListener("keyup", this.checkAltPressed);
-    }
-  }
-<% } %>
-
-<% if(debug.stats || debug.godMode) { %>
-  // toggle stats display
-  let _statsComponent = null;
-  let _inGodMode = false;
-  const debugChannel = new BroadcastChannel('Galacean_Editor_Channel');
-
-  const __defaultClipPlane__ = {
-    near: 0,
-    far: 0,
-  };
-
-  const __debugClipPlane__ = {
-    near: 0.03,
-    far: 10000,
-  };
-
-  const onGodModeChange = (inGodMode: boolean) => {
-    const _activeCameras = engine.sceneManager.activeScene._componentsManager._activeCameras;
-    if (_activeCameras.length === 0) return;
-    
-    const defaultActiveCamera = _activeCameras.get(0);
-    const defaultActiveCameraEntity = defaultActiveCamera.entity;
-
-    __defaultClipPlane__.near = defaultActiveCamera.nearClipPlane;
-    __defaultClipPlane__.far = defaultActiveCamera.farClipPlane;
-
-    if (!defaultActiveCameraEntity) return;
-    const controlType = defaultActiveCamera.isOrthographic ? OrthoControl : OrbitControl;
-    const control = defaultActiveCameraEntity.getComponent(controlType);
-    if(inGodMode && !control) {
-      defaultActiveCameraEntity.addComponent(controlType);
-      defaultActiveCamera.nearClipPlane = __debugClipPlane__.near;
-      defaultActiveCamera.farClipPlane = __debugClipPlane__.far;
-    } else if(!inGodMode && control) {
-      control.destroy(true);
-      defaultActiveCamera.nearClipPlane = __defaultClipPlane__.near;
-      defaultActiveCamera.farClipPlane = __defaultClipPlane__.far;
-    }
-  }
-
-  onGodModeChange(_inGodMode);
-
-  debugChannel.addEventListener("message", (e) => {
-    if (!(e.data && typeof e.data === 'object')) return;
-
-    const type = e.data.type;
-
-    if (type === 'toggle-stats-visible') {
-      if (!_statsComponent) {
-        _statsComponent = engine.sceneManager.activeScene._componentsManager._activeCameras.get(0).entity.addComponent(Stats);
-      }
-      const value = e.data.payload;
-      if(value) {
-        _statsComponent.enabled = true;
-      } else {
-        _statsComponent.enabled = false;
-      }
-    }
-
-    if(type === 'toggle-god-mode') {
-      onGodModeChange(_inGodMode = e.data.payload);
-    }
-  });
-<% } %>
-
-
-  engine.run();
-  return engine;
-};