feat: update doc

2026-05-22 17:00:49 +08:00 · 2025-02-06 14:10:36 +08:00
parent efed56f2e8
commit 11bc5dbac1
9 changed files with 175 additions and 287 deletions
--- a/docs/en/basics/overview.md
+++ b/docs/en/basics/overview.md
@@ -35,7 +35,7 @@ Includes the following sub-packages:
 | [@galacean/engine](https://www.npmjs.com/package/@galacean/engine) | Core architecture logic and core functionalities | [API](/apis/galacean) |
 | [@galacean/engine-physics-lite](https://www.npmjs.com/package/@galacean/engine-physics-lite) | Lightweight physics engine | [Doc](/en/docs/physics/overall) |
 | [@galacean/engine-physics-physx](https://www.npmjs.com/package/@galacean/engine-physics-physx) | Full-featured physics engine | [Doc](/en/docs/physics/overall) |
-| [@galacean/engine-shader-lab](https://www.npmjs.com/package/@galacean/engine-shader-lab) | Galacean Shader compiler | [Doc](/en/docs/graphics/shader/lab) |
+| [@galacean/engine-shaderlab](https://www.npmjs.com/package/@galacean/engine-shaderlab) | Galacean Shader compiler | [Doc](/en/docs/graphics/shader/lab) |
 | [@galacean/engine-xr](https://www.npmjs.com/package/@galacean/engine-xr) | XR logic package | [Doc](/en/docs/xr/overall) |
 | [@galacean/engine-xr-webxr](https://www.npmjs.com/package/@galacean/engine-xr-webxr) | WebXR backend | [Doc](/en/docs/xr/overall) |

--- a/docs/en/graphics/2D/lottie.md
+++ b/docs/en/graphics/2D/lottie.md
@@ -145,7 +145,8 @@ Thanks to the unified architecture of the Galacean Engine 2D/3D engine, 3D trans
 | Engine Version |  Lottie Version |
 | :--- | :--- |
 | 1.2.x | 1.1.0-beta.0 |
-| 1.3.x | 1.1.0-beta.0 |
+| 1.3.x | engine-1.3 |
+| 1.4.x | engine-1.4 |

 ## Performance Recommendations

--- a/docs/zh/basics/overview.md
+++ b/docs/zh/basics/overview.md
@@ -35,7 +35,7 @@ flowchart LR
 | [@galacean/engine](https://www.npmjs.com/package/@galacean/engine) | 核心架构逻辑和核心功能 | [API](/apis/galacean) |
 | [@galacean/engine-physics-lite](https://www.npmjs.com/package/@galacean/engine-physics-lite) | 轻量级物理引擎 | [Doc](/docs/physics/overall) |
 | [@galacean/engine-physics-physx](https://www.npmjs.com/package/@galacean/engine-physics-physx) | 全功能物理引擎 | [Doc](/docs/physics/overall) |
-| [@galacean/engine-shader-lab](https://www.npmjs.com/package/@galacean/engine-shader-lab) | Galacean Shader 编译器 | [Doc](/docs/graphics/shader/shaderLab/intro/) |
+| [@galacean/engine-shaderlab](https://www.npmjs.com/package/@galacean/engine-shaderlab) | Galacean Shader 编译器 | [Doc](/docs/graphics/shader/shaderLab/intro/) |
 | [@galacean/engine-xr](https://www.npmjs.com/package/@galacean/engine-xr) | XR 逻辑包 | [Doc](/docs/xr/overall) |
 | [@galacean/engine-xr-webxr](https://www.npmjs.com/package/@galacean/engine-xr-webxr) | WebXR 后端 | [Doc](/docs/xr/overall) |

--- a/docs/zh/graphics/2D/lottie.md
+++ b/docs/zh/graphics/2D/lottie.md
@@ -148,7 +148,8 @@ engine.resourceManager.load({
 | 引擎版本 |  Lottie 版本 |
 | :--- | :--- |
 | 1.2.x | 1.1.0-beta.0 |
-| 1.3.x | 1.1.0-beta.0 |
+| 1.3.x | engine-1.3 |
+| 1.4.x | engine-1.4 |

 ## 性能方面的建议

--- a/e2e/.dev/vite.config.js
+++ b/e2e/.dev/vite.config.js
@@ -56,6 +56,7 @@ module.exports = {
      "@galacean/engine-draco",
      "@galacean/engine-lottie",
      "@galacean/engine-spine",
+      "@galacean/engine-shaderlab",
      "@galacean/tools-baker",
      "@galacean/engine-toolkit",
      "@galacean/engine-toolkit-auxiliary-lines",
--- a/examples/draw-lines.ts
+++ b/examples/draw-lines.ts
@@ -131,7 +131,7 @@ class DrawScript extends Script {
    }
  }

-  onPointerDown(): void {
+  onPointerBeginDrag(): void {
    // Screen pointer to world pointer.
    this._preDrawTime = this.engine.time.elapsedTime;
    const { x: screenX, y: screenY } =
--- a/examples/input-log.ts
+++ b/examples/input-log.ts
@@ -21,7 +21,7 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
    Pointer: true,
    Keyboard: true,
    Size: 1,
-    Color: [255, 255, 255],
+    Color: [255, 0, 0],
    OffsetX: 0,
    OffsetY: 0,
  };
@@ -53,5 +53,6 @@ WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
    inputLogger.color.set(v[0] / 255, v[1] / 255, v[2] / 255, 1);
  });

+  inputLogger.color.set(1, 0, 0, 1);
  textFolder.open();
 });
--- a/examples/input-pointer.ts
+++ b/examples/input-pointer.ts
@@ -17,149 +17,112 @@ import {
  Entity,
  Vector3,
  WebGLEngine,
+  PointerEventData
 } from "@galacean/engine";
 import { LitePhysics } from "@galacean/engine-physics-lite";

 // Create engine
-WebGLEngine.create({ canvas: "canvas", physics: new LitePhysics() }).then(
-  (engine) => {
-    engine.canvas.resizeByClientSize();
-    const invCanvasWidth = 1 / engine.canvas.width;
-    const invCanvasHeight = 1 / engine.canvas.height;
-    // @ts-ignore
-    const inputManager = engine.inputManager;
-    const scene = engine.sceneManager.activeScene;
-    const rootEntity = scene.createRootEntity("root");
+WebGLEngine.create({ canvas: "canvas", physics: new LitePhysics() }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+  const invCanvasWidth = 1 / engine.canvas.width;
+  const invCanvasHeight = 1 / engine.canvas.height;
+  // @ts-ignore
+  const inputManager = engine.inputManager;
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity("root");

-    scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1);
-    scene.ambientLight.diffuseIntensity = 1.2;
+  scene.ambientLight.diffuseSolidColor.set(1, 1, 1, 1);
+  scene.ambientLight.diffuseIntensity = 1.2;

-    // init camera
-    const cameraEntity = rootEntity.createChild("camera");
-    const camera = cameraEntity.addComponent(Camera);
-    cameraEntity.transform.setPosition(10, 10, 10);
-    cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
+  // init camera
+  const cameraEntity = rootEntity.createChild("camera");
+  const camera = cameraEntity.addComponent(Camera);
+  cameraEntity.transform.setPosition(10, 10, 10);
+  cameraEntity.transform.lookAt(new Vector3(0, 0, 0));

-    // init point light
-    let light = rootEntity.createChild("light1");
-    light.transform.setPosition(-8, -2, 8);
-    light.addComponent(PointLight).intensity = 0.12;
+  // init point light
+  let light = rootEntity.createChild("light1");
+  light.transform.setPosition(-8, -2, 8);
+  light.addComponent(PointLight).intensity = 0.12;

-    light = rootEntity.createChild("light2");
-    light.transform.setPosition(8, -2, 0);
-    light.addComponent(PointLight).intensity = 0.12;
+  light = rootEntity.createChild("light2");
+  light.transform.setPosition(8, -2, 0);
+  light.addComponent(PointLight).intensity = 0.12;

-    class PanScript extends Script {
-      private startPointerPos = new Vector3();
-      private tempVec2: Vector2 = new Vector2();
-      private tempVec3: Vector3 = new Vector3();
-      private zValue: number = 0;
+  class PanScript extends Script {
+    private startPointerPos = new Vector3();
+    private tempVec2: Vector2 = new Vector2();
+    private tempVec3: Vector3 = new Vector3();
+    private zValue: number = 0;

-      onPointerDown(pointer: Pointer) {
-        this.zValue = camera.worldToViewportPoint(
-          this.entity.transform.worldPosition,
-          this.tempVec3
-        ).z;
-        const { tempVec2, tempVec3 } = this;
-        tempVec2.copyFrom(pointer.position);
-        tempVec3.set(
-          tempVec2.x * invCanvasWidth,
-          tempVec2.y * invCanvasHeight,
-          this.zValue
-        );
-        camera.viewportToWorldPoint(tempVec3, this.startPointerPos);
-      }
-
-      onPointerDrag(pointer: Pointer) {
-        const { tempVec2, tempVec3, startPointerPos } = this;
-        const { transform } = this.entity;
-        tempVec2.copyFrom(pointer.position);
-        tempVec3.set(
-          tempVec2.x * invCanvasWidth,
-          tempVec2.y * invCanvasHeight,
-          this.zValue
-        );
-        camera.viewportToWorldPoint(tempVec3, tempVec3);
-        Vector3.subtract(tempVec3, startPointerPos, startPointerPos);
-        transform.worldPosition.add(startPointerPos);
-        startPointerPos.copyFrom(tempVec3);
-      }
+    onPointerBeginDrag(eventData: PointerEventData) {
+      this.zValue = camera.worldToViewportPoint(this.entity.transform.worldPosition, this.tempVec3).z;
+      const { tempVec2, tempVec3 } = this;
+      tempVec2.copyFrom(eventData.pointer.position);
+      tempVec3.set(tempVec2.x * invCanvasWidth, tempVec2.y * invCanvasHeight, this.zValue);
+      camera.viewportToWorldPoint(tempVec3, this.startPointerPos);
    }

-    class ClickScript extends Script {
-      private material: BlinnPhongMaterial;
-      onStart() {
-        this.material = <BlinnPhongMaterial>(
-          this.entity.getComponent(MeshRenderer).getInstanceMaterial()
-        );
-      }
-
-      onPointerClick() {
-        this.material.baseColor.set(
-          Math.random(),
-          Math.random(),
-          Math.random(),
-          1.0
-        );
-      }
+    onPointerDrag(eventData: PointerEventData) {
+      const { tempVec2, tempVec3, startPointerPos } = this;
+      const { transform } = this.entity;
+      tempVec2.copyFrom(eventData.pointer.position);
+      tempVec3.set(tempVec2.x * invCanvasWidth, tempVec2.y * invCanvasHeight, this.zValue);
+      camera.viewportToWorldPoint(tempVec3, tempVec3);
+      Vector3.subtract(tempVec3, startPointerPos, startPointerPos);
+      transform.worldPosition.add(startPointerPos);
+      startPointerPos.copyFrom(tempVec3);
    }
-
-    class EnterExitScript extends Script {
-      private material: BlinnPhongMaterial;
-      onStart() {
-        this.material = <BlinnPhongMaterial>(
-          this.entity.getComponent(MeshRenderer).getInstanceMaterial()
-        );
-      }
-
-      onPointerEnter() {
-        this.material.baseColor.set(
-          Math.random(),
-          Math.random(),
-          Math.random(),
-          1.0
-        );
-      }
-
-      onPointerExit() {
-        this.material.baseColor.set(
-          Math.random(),
-          Math.random(),
-          Math.random(),
-          1.0
-        );
-      }
-    }
-
-    function createBox(x: number, y: number, z: number): Entity {
-      // create box test entity
-      const cubeSize = 2.0;
-      const boxEntity = rootEntity.createChild("BoxEntity");
-      boxEntity.transform.setPosition(x, y, z);
-
-      const boxMtl = new BlinnPhongMaterial(engine);
-      const boxRenderer = boxEntity.addComponent(MeshRenderer);
-      boxMtl.baseColor.set(0.6, 0.3, 0.3, 1.0);
-      boxRenderer.mesh = PrimitiveMesh.createCuboid(
-        engine,
-        cubeSize,
-        cubeSize,
-        cubeSize
-      );
-      boxRenderer.setMaterial(boxMtl);
-
-      const boxCollider: StaticCollider =
-        boxEntity.addComponent(StaticCollider);
-      const boxColliderShape = new BoxColliderShape();
-      boxColliderShape.size.set(cubeSize, cubeSize, cubeSize);
-      boxCollider.addShape(boxColliderShape);
-      return boxEntity;
-    }
-    createBox(0, 0, 0).addComponent(PanScript);
-    createBox(3, 0, -3).addComponent(ClickScript);
-    createBox(-3, 0, 3).addComponent(EnterExitScript);
-
-    // Run engine
-    engine.run();
  }
-);
+
+  class ClickScript extends Script {
+    private material: BlinnPhongMaterial;
+    onStart() {
+      this.material = <BlinnPhongMaterial>this.entity.getComponent(MeshRenderer).getInstanceMaterial();
+    }
+
+    onPointerClick() {
+      this.material.baseColor.set(Math.random(), Math.random(), Math.random(), 1.0);
+    }
+  }
+
+  class EnterExitScript extends Script {
+    private material: BlinnPhongMaterial;
+    onStart() {
+      this.material = <BlinnPhongMaterial>this.entity.getComponent(MeshRenderer).getInstanceMaterial();
+    }
+
+    onPointerEnter() {
+      this.material.baseColor.set(Math.random(), Math.random(), Math.random(), 1.0);
+    }
+
+    onPointerExit() {
+      this.material.baseColor.set(Math.random(), Math.random(), Math.random(), 1.0);
+    }
+  }
+
+  function createBox(x: number, y: number, z: number): Entity {
+    // create box test entity
+    const cubeSize = 2.0;
+    const boxEntity = rootEntity.createChild("BoxEntity");
+    boxEntity.transform.setPosition(x, y, z);
+
+    const boxMtl = new BlinnPhongMaterial(engine);
+    const boxRenderer = boxEntity.addComponent(MeshRenderer);
+    boxMtl.baseColor.set(0.6, 0.3, 0.3, 1.0);
+    boxRenderer.mesh = PrimitiveMesh.createCuboid(engine, cubeSize, cubeSize, cubeSize);
+    boxRenderer.setMaterial(boxMtl);
+
+    const boxCollider: StaticCollider = boxEntity.addComponent(StaticCollider);
+    const boxColliderShape = new BoxColliderShape();
+    boxColliderShape.size.set(cubeSize, cubeSize, cubeSize);
+    boxCollider.addShape(boxColliderShape);
+    return boxEntity;
+  }
+  createBox(0, 0, 0).addComponent(PanScript);
+  createBox(3, 0, -3).addComponent(ClickScript);
+  createBox(-3, 0, 3).addComponent(EnterExitScript);
+
+  // Run engine
+  engine.run();
+});
--- a/examples/physx-select.ts
+++ b/examples/physx-select.ts
@@ -20,6 +20,7 @@ import {
  PBRMaterial,
  PlaneColliderShape,
  Pointer,
+  PointerEventData,
  PrimitiveMesh,
  Quaternion,
  Script,
@@ -29,7 +30,7 @@ import {
  Texture2D,
  Vector2,
  Vector3,
-  WebGLEngine,
+  WebGLEngine
 } from "@galacean/engine";
 import { PhysXPhysics } from "@galacean/engine-physics-physx";

@@ -47,35 +48,23 @@ class PanScript extends Script {
    this.collider = this.entity.getComponent(DynamicCollider);
  }

-  onPointerDown(pointer: Pointer) {
+  onPointerDown(eventData: PointerEventData) {
    // get depth
-    this.camera.worldToViewportPoint(
-      this.entity.transform.worldPosition,
-      this.tempVec3
-    );
-    this.zValue = this.camera.worldToViewportPoint(
-      this.entity.transform.worldPosition,
-      this.tempVec3
-    ).z;
+    this.camera.worldToViewportPoint(this.entity.transform.worldPosition, this.tempVec3);
+    this.zValue = this.camera.worldToViewportPoint(this.entity.transform.worldPosition, this.tempVec3).z;
    const { tempVec3 } = this;
-    tempVec3.set(
-      pointer.position.x * this.invCanvasWidth,
-      pointer.position.y * this.invCanvasHeight,
-      this.zValue
-    );
+    const { position } = eventData.pointer;
+    tempVec3.set(position.x * this.invCanvasWidth, position.y * this.invCanvasHeight, this.zValue);
    this.camera.viewportToWorldPoint(tempVec3, this.startPointerPos);
    this.collider.linearVelocity = new Vector3();
    this.collider.angularVelocity = new Vector3();
  }

-  onPointerDrag(pointer: Pointer) {
+  onPointerDrag(eventData: PointerEventData) {
    const { tempVec3, startPointerPos } = this;
    const { transform } = this.entity;
-    this.tempVec3.set(
-      pointer.position.x * this.invCanvasWidth,
-      pointer.position.y * this.invCanvasHeight,
-      this.zValue
-    );
+    const { position } = eventData.pointer;
+    this.tempVec3.set(position.x * this.invCanvasWidth, position.y * this.invCanvasHeight, this.zValue);
    this.camera.viewportToWorldPoint(tempVec3, tempVec3);
    Vector3.subtract(tempVec3, startPointerPos, startPointerPos);
    transform.worldPosition = transform.worldPosition.add(startPointerPos);
@@ -83,19 +72,9 @@ class PanScript extends Script {
  }
 }

-function addPlane(
-  rootEntity: Entity,
-  size: Vector2,
-  position: Vector3,
-  rotation: Quaternion
-): Entity {
+function addPlane(rootEntity: Entity, size: Vector2, position: Vector3, rotation: Quaternion): Entity {
  const mtl = new PBRMaterial(rootEntity.engine);
-  mtl.baseColor.set(
-    0.2179807202597362,
-    0.2939682161541871,
-    0.31177952549087604,
-    1
-  );
+  mtl.baseColor.set(0.2179807202597362, 0.2939682161541871, 0.31177952549087604, 1);
  mtl.roughness = 0.0;
  mtl.metallic = 0.0;

@@ -135,13 +114,7 @@ function addVerticalBox(
  const boxRenderer = entity.addComponent(MeshRenderer);
  boxMtl.baseTexture = texture;
  boxMtl.baseTexture.anisoLevel = 12;
-  boxRenderer.mesh = PrimitiveMesh.createCuboid(
-    rootEntity.engine,
-    0.5,
-    0.33,
-    2,
-    false
-  );
+  boxRenderer.mesh = PrimitiveMesh.createCuboid(rootEntity.engine, 0.5, 0.33, 2, false);
  boxRenderer.setMaterial(boxMtl);

  const physicsBox = new BoxColliderShape();
@@ -153,8 +126,7 @@ function addVerticalBox(
  const boxCollider = entity.addComponent(DynamicCollider);
  boxCollider.addShape(physicsBox);
  boxCollider.mass = 1;
-  boxCollider.collisionDetectionMode =
-    CollisionDetectionMode.ContinuousSpeculative;
+  boxCollider.collisionDetectionMode = CollisionDetectionMode.ContinuousSpeculative;

  const pan = entity.addComponent(PanScript);
  pan.camera = camera;
@@ -181,12 +153,7 @@ function addHorizontalBox(
  const boxRenderer = entity.addComponent(MeshRenderer);
  boxMtl.baseTexture = texture;
  boxMtl.baseTexture.anisoLevel = 12;
-  boxRenderer.mesh = PrimitiveMesh.createCuboid(
-    rootEntity.engine,
-    2,
-    0.33,
-    0.5
-  );
+  boxRenderer.mesh = PrimitiveMesh.createCuboid(rootEntity.engine, 2, 0.33, 0.5);
  boxRenderer.setMaterial(boxMtl);

  const physicsBox = new BoxColliderShape();
@@ -198,8 +165,7 @@ function addHorizontalBox(
  const boxCollider = entity.addComponent(DynamicCollider);
  boxCollider.addShape(physicsBox);
  boxCollider.mass = 0.5;
-  boxCollider.collisionDetectionMode =
-    CollisionDetectionMode.ContinuousSpeculative;
+  boxCollider.collisionDetectionMode = CollisionDetectionMode.ContinuousSpeculative;

  const pan = entity.addComponent(PanScript);
  pan.camera = camera;
@@ -216,36 +182,9 @@ function addBox(
  invCanvasHeight: number
 ): void {
  for (let i: number = 0; i < 8; i++) {
-    addVerticalBox(
-      rootEntity,
-      texture1,
-      -0.65,
-      0.165 + i * 0.33 * 2,
-      0,
-      camera,
-      invCanvasWidth,
-      invCanvasHeight
-    );
-    addVerticalBox(
-      rootEntity,
-      texture1,
-      0,
-      0.165 + i * 0.33 * 2,
-      0,
-      camera,
-      invCanvasWidth,
-      invCanvasHeight
-    );
-    addVerticalBox(
-      rootEntity,
-      texture1,
-      0.65,
-      0.165 + i * 0.33 * 2,
-      0,
-      camera,
-      invCanvasWidth,
-      invCanvasHeight
-    );
+    addVerticalBox(rootEntity, texture1, -0.65, 0.165 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight);
+    addVerticalBox(rootEntity, texture1, 0, 0.165 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight);
+    addVerticalBox(rootEntity, texture1, 0.65, 0.165 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight);

    addHorizontalBox(
      rootEntity,
@@ -257,16 +196,7 @@ function addBox(
      invCanvasWidth,
      invCanvasHeight
    );
-    addHorizontalBox(
-      rootEntity,
-      texture2,
-      0,
-      0.165 + 0.33 + i * 0.33 * 2,
-      0,
-      camera,
-      invCanvasWidth,
-      invCanvasHeight
-    );
+    addHorizontalBox(rootEntity, texture2, 0, 0.165 + 0.33 + i * 0.33 * 2, 0, camera, invCanvasWidth, invCanvasHeight);
    addHorizontalBox(
      rootEntity,
      texture2,
@@ -281,69 +211,60 @@ function addBox(
 }

 //--------------------------------------------------------------------------------------------------------------------
-WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then(
-  (engine) => {
-    engine.canvas.resizeByClientSize();
-    const invCanvasWidth = 1 / engine.canvas.width;
-    const invCanvasHeight = 1 / engine.canvas.height;
-    const scene = engine.sceneManager.activeScene;
-    scene.shadowDistance = 20;
-    const rootEntity = scene.createRootEntity("root");
+WebGLEngine.create({ canvas: "canvas", physics: new PhysXPhysics() }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+  const invCanvasWidth = 1 / engine.canvas.width;
+  const invCanvasHeight = 1 / engine.canvas.height;
+  const scene = engine.sceneManager.activeScene;
+  scene.shadowDistance = 20;
+  const rootEntity = scene.createRootEntity("root");

-    scene.ambientLight.diffuseSolidColor.set(0.5, 0.5, 0.5, 1);
-    scene.ambientLight.diffuseIntensity = 1.2;
+  scene.ambientLight.diffuseSolidColor.set(0.5, 0.5, 0.5, 1);
+  scene.ambientLight.diffuseIntensity = 1.2;

-    // init camera
-    const cameraEntity = rootEntity.createChild("camera");
-    const camera = cameraEntity.addComponent(Camera);
-    cameraEntity.transform.setPosition(7, 7, 7);
-    cameraEntity.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0));
+  // init camera
+  const cameraEntity = rootEntity.createChild("camera");
+  const camera = cameraEntity.addComponent(Camera);
+  cameraEntity.transform.setPosition(7, 7, 7);
+  cameraEntity.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0));

-    const entity = cameraEntity.createChild("text");
-    entity.transform.position = new Vector3(0, 3.5, -10);
-    const renderer = entity.addComponent(TextRenderer);
-    renderer.color = new Color();
-    renderer.text = "Use mouse to move the bricks";
-    renderer.font = Font.createFromOS(entity.engine, "Arial");
-    renderer.fontSize = 40;
+  const entity = cameraEntity.createChild("text");
+  entity.transform.position = new Vector3(0, 3.5, -10);
+  const renderer = entity.addComponent(TextRenderer);
+  renderer.color = new Color();
+  renderer.text = "Use mouse to move the bricks";
+  renderer.font = Font.createFromOS(entity.engine, "Arial");
+  renderer.fontSize = 40;

-    // init point light
-    const light = rootEntity.createChild("light");
-    light.transform.setPosition(0, 5, 8);
-    light.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0));
-    const directLight = light.addComponent(DirectLight);
-    directLight.shadowType = ShadowType.SoftLow;
+  // init point light
+  const light = rootEntity.createChild("light");
+  light.transform.setPosition(0, 5, 8);
+  light.transform.lookAt(new Vector3(0, 2, 0), new Vector3(0, 1, 0));
+  const directLight = light.addComponent(DirectLight);
+  directLight.shadowType = ShadowType.SoftLow;

-    addPlane(rootEntity, new Vector2(30, 30), new Vector3(), new Quaternion());
+  addPlane(rootEntity, new Vector2(30, 30), new Vector3(), new Quaternion());

-    Promise.all([
-      engine.resourceManager.load<Texture2D>({
-        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*Wkn5QY0tpbcAAAAAAAAAAAAAARQnAQ",
-        type: AssetType.Texture2D,
-      }),
-      engine.resourceManager.load<Texture2D>({
-        url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*W5azT5DjDAEAAAAAAAAAAAAAARQnAQ",
-        type: AssetType.Texture2D,
-      }),
-    ]).then((asset: Texture2D[]) => {
-      addBox(
-        rootEntity,
-        asset[0],
-        asset[1],
-        camera,
-        invCanvasWidth,
-        invCanvasHeight
-      );
+  Promise.all([
+    engine.resourceManager.load<Texture2D>({
+      url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*Wkn5QY0tpbcAAAAAAAAAAAAAARQnAQ",
+      type: AssetType.Texture2D
+    }),
+    engine.resourceManager.load<Texture2D>({
+      url: "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*W5azT5DjDAEAAAAAAAAAAAAAARQnAQ",
+      type: AssetType.Texture2D
+    })
+  ]).then((asset: Texture2D[]) => {
+    addBox(rootEntity, asset[0], asset[1], camera, invCanvasWidth, invCanvasHeight);

-      engine.resourceManager
-        .load<AmbientLight>({
-          type: AssetType.Env,
-          url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin",
-        })
-        .then((ambientLight) => {
-          scene.ambientLight = ambientLight;
-          engine.run();
-        });
-    });
-  }
-);
+    engine.resourceManager
+      .load<AmbientLight>({
+        type: AssetType.Env,
+        url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin"
+      })
+      .then((ambientLight) => {
+        scene.ambientLight = ambientLight;
+        engine.run();
+      });
+  });
+});