From 346d83409e46af7ecf021ade11c67ac49d1feae2 Mon Sep 17 00:00:00 2001
From: eyworldwide <eyworldwide@foxmail.com>
Date: Fri, 24 Jan 2025 15:26:15 +0800
Subject: [PATCH 1/5] refactor: update engine and canvas doc

---
 docs/en/core/canvas.md |  62 +++++++--------
 docs/en/core/engine.md | 108 +++++++++----------------
 docs/zh/core/canvas.md |  14 +---
 docs/zh/core/engine.md | 174 +++++++++++++++++++++++++++++------------
 4 files changed, 194 insertions(+), 164 deletions(-)

diff --git a/docs/en/core/canvas.md b/docs/en/core/canvas.md
index 55e5e3369d..b8d9dcf669 100644
--- a/docs/en/core/canvas.md
+++ b/docs/en/core/canvas.md
@@ -5,11 +5,7 @@ group: Basics
 label: Core
 ---
 
-Galacean Engine encapsulates canvases for different platforms, such as [WebCanvas](/en/apis/rhi-webgl/#WebCanvas) which supports using [Engine](/en/apis/core/#Engine) to control [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) or [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas).
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ZC9gRY-KCTgAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-> Unless otherwise specified, the canvas in the documentation generally refers to `WebCanvas`.
+The engine encapsulates canvases for different platforms, such as [WebCanvas](/apis/rhi-webgl/#WebCanvas), allowing [Engine](/apis/core/#Engine) to control [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) or [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas). Unless otherwise specified, canvases in the documentation generally refer to `WebCanvas`.
 
 ## Basic Usage
 
@@ -21,9 +17,9 @@ Insert a `<canvas>` tag in HTML and specify an id:
 <canvas id="canvas" style="width: 500px; height: 500px" />
 ```
 
-> Developers should check the height and width of the canvas to avoid rendering issues caused by a height or width value of **0**.
+> Developers should check the height and width of the canvas to avoid rendering issues caused by values of **0**.
 
-When creating an instance of WebGLEngine, a WebCanvas instance is automatically created. The parameter `canvas` is the `id` of the _Canvas_ element.
+When creating a WebGLEngine instance, a WebCanvas instance is automatically created. The `canvas` parameter is the _Canvas_ element's `id`.
 
 ```typescript
 const engine = await WebGLEngine.create({ canvas: "canvas" });
@@ -33,7 +29,7 @@ console.log(engine.canvas); // => WebCanvas instance
 
 ### Basic Adaptation
 
-The canvas size is generally controlled by the **device pixel ratio**, taking [WebCanvas](/en/apis/rhi-webgl/#WebCanvas) as an example:
+Canvas size is generally controlled by the **device pixel ratio**. Taking [WebCanvas](/apis/rhi-webgl/#WebCanvas) as an example:
 
 ```mermaid
 flowchart TD
@@ -41,79 +37,75 @@ flowchart TD
     C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
 ```
 
-If developing by exporting an **NPM package** through the editor, you only need to control the **device pixel ratio** in the [project export](/en/docs/platform/platform) rendering export configuration.
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-Or actively call `resizeByClientSize` in the code to adapt the canvas.
+Call `resizeByClientSize` to adapt the canvas:
 
 ```typescript
-// 使用设备像素比（ window.devicePixelRatio ）调整画布尺寸，
+// Adjust canvas size using the device pixel ratio (window.devicePixelRatio)
 engine.canvas.resizeByClientSize();
-// 自定义像素比调整画布尺寸
+// Adjust canvas size using a custom pixel ratio
 engine.canvas.resizeByClientSize(1.5);
 ```
 
-> When the display size of the canvas changes (such as when the browser window changes), the image may appear stretched or compressed. You can call `resizeByClientSize` to restore it to normal. In most cases, this line of code can meet the adaptation needs. If you have more complex adaptation requirements, please read the "Advanced Usage" section.
+When the display size of the canvas changes (e.g., when the browser window changes), the image may appear stretched or compressed. You can restore it to normal by calling `resizeByClientSize`. In most cases, this line of code can meet the adaptation requirements. If you have more complex adaptation needs, please read the "Advanced Usage" section.
 
 ## Advanced Usage
 
-Regarding adaptation, the core point to note is the **device pixel ratio**. Taking iPhoneX as an example, the device pixel ratio `window.devicePixelRatio` is _3_, the window width `window.innerWidth` is _375_, and the screen physical pixel width is: 375 * 3 = *1125*.
+Regarding adaptation, the key point is the **device pixel ratio**. Taking iPhone X as an example, the device pixel ratio `window.devicePixelRatio` is _3_, the window width `window.innerWidth` is _375_, and the physical screen pixel width is: 375 * 3 = *1125*.
 
-Rendering pressure is proportional to the physical pixel height and width of the screen. The larger the physical pixels, the greater the rendering pressure, and the more power it consumes. It is recommended to set the height and width of the canvas through the API exposed by [WebCanvas](/en/apis/rhi-webgl/WebCanvas), rather than using the native canvas API, such as modifying `canvas.width` or `canvas.style.width`.
+Rendering pressure is proportional to the physical pixel width and height of the screen. The larger the physical pixel, the greater the rendering pressure and the more power it consumes. It is recommended to set the canvas width and height through APIs exposed by [WebCanvas](/apis/rhi-webgl/WebCanvas), rather than using native canvas APIs such as `canvas.width` or `canvas.style.width`.
 
-> ️ **Note**: Some front-end scaffolds insert the following tag to modify the page's zoom ratio:
+> ⚠️ **Note**: Some front-end scaffolds may insert the following tag to modify the page's zoom ratio:
 >
 > `<meta name="viewport" content="width=device-width, initial-scale=0.333333333">`
 >
-> This line of code will change the value of `window.innerWidth` from 375 to 1125.
+> This line of code changes the value of `window.innerWidth` from 375 to 1125.
 
-除了 `resizeByClientSize` 自动适配，推荐使用以下两种模式：
+Apart from `resizeByClientSize`, which automatically adapts, the following two modes are recommended:
 
-### Energy-saving Mode
+### Energy-Saving Mode
 
-Considering that mobile devices, although having high-definition screens (high device pixel ratio), the actual GPU performance may not meet the performance requirements for high-definition real-time rendering (the rendering area ratio of 3x screens to 2x screens is 9:4, and 3x screens can easily cause the phone to overheat), in this mode, the engine achieves adaptation by scaling and stretching the canvas. The code is as follows:
+Considering that mobile devices, despite having high-definition screens (high device pixel ratio), may not have graphics card performance that meets the performance requirements for HD real-time rendering (the rendering area ratio of 3x screen to 2x screen is 9:4, and 3x screens can easily cause phones to overheat), the engine achieves adaptation by scaling the canvas in this mode. The code is as follows:
 
 ```typescript
 const canvas = document.getElementById("canvas");
 const webcanvas = new WebCanvas(canvas);
-const pixelRatio = window.devicePixelRatio; // 如果已经设置 meta scale，请设置为 1
-const scale = 3 / 2; // 3 倍高清屏按 2 倍屏来计算画布尺寸
+const pixelRatio = window.devicePixelRatio; // If meta scale is set, please set to 1
+const scale = 3 / 2; // Calculate canvas size for 3x HD screen as if it were 2x
 
 /**
- * 设置节能模式，默认全屏，也可以自己设置任意高宽
+ * Set energy-saving mode, defaults to full screen, but you can set any width and height
  */
 webcanvas.width = (window.innerWidth * pixelRatio) / scale;
 webcanvas.height = (window.innerHeight * pixelRatio) / scale;
-webcanvas.setScale(scale, scale); // 拉伸画布
+webcanvas.setScale(scale, scale); // Scale canvas
 ```
 
-If the canvas height and width have already been set via CSS (e.g., `width: 100vw; height: 100vh;`), you can achieve canvas scaling by passing parameters to `resizeByClientSize`:
+If the canvas width and height have been set via CSS (e.g., `width: 100vw; height: 100vh;`), you can scale the canvas by passing parameters to `resizeByClientSize`:
 
 ```typescript
 const canvas = document.getElementById("canvas");
 const webcanvas = new WebCanvas(canvas);
-const scale = 2 / 3; // 3 倍高清屏按 2 倍屏来计算画布尺寸
+const scale = 2 / 3; // Calculate canvas size for 3x HD screen as if it were 2x
 
-webcanvas.resizeByClientSize(scale); // 拉伸画布
+webcanvas.resizeByClientSize(scale); // Scale canvas
 ```
 
 ### Fixed Width Mode
 
-In some cases, such as when the design draft has a fixed width of 750, developers might hardcode the canvas width to reduce adaptation costs. The code is as follows:
+In certain situations, such as when a design draft has a fixed width of 750, developers might hard-code the canvas width to reduce adaptation costs. The code is as follows:
 
 ```typescript
 import { WebCanvas } from "@galacean/engine";
 
 const canvas = document.getElementById("canvas");
 const webcanvas = new WebCanvas(canvas);
-const fixedWidth = 750; // 固定 750 宽度
+const fixedWidth = 750; // Fixed width of 750
 
 /**
- * 设置固定宽度模式
+ * Set fixed width mode
  */
 const scale = window.innerWidth / fixedWidth;
 webcanvas.width = fixedWidth;
 webcanvas.height = window.innerHeight / scale;
-webcanvas.setScale(scale, scale); // 拉伸画布
-```
+webcanvas.setScale(scale, scale); // Scale canvas
+```
\ No newline at end of file
diff --git a/docs/en/core/engine.md b/docs/en/core/engine.md
index b34fa140d3..ae831d4d3c 100644
--- a/docs/en/core/engine.md
+++ b/docs/en/core/engine.md
@@ -5,104 +5,72 @@ type: Core
 label: Core
 ---
 
-`Engine` plays the role of the main controller in the Galacean Engine, mainly including functions such as **canvas**, **render control**, and **engine subsystem management**:
-
-- **[Canvas](/en/docs/core/canvas)**: Operations related to the main canvas, such as modifying the canvas width and height.
-- **Render Control**: Controls the execution/pause/resume of rendering, vertical synchronization, and other functions.
-- **Engine Subsystem Management**:
-  - [Scene Management](/en/docs/core/scene)
-  - [Resource Management](/en/docs/assets/overall)
-  - [Physics System](/en/docs/physics/overall)
-  - [Interaction System](/en/docs/input)
-  - [XR System](/en/docs/xr/overall)
-- **Execution Environment Context Management**: Controls the context management of execution environments such as WebGL.
+`Engine` plays the role of the main controller, primarily encompassing functions such as **canvas**, **render control**, and **engine subsystem management**:
 
-## Initialization
-
-To facilitate users to directly create a web engine, Galacean provides [WebGLEngine](/apis/rhi-webgl/WebGLEngine):
-
-```typescript
-const engine = await WebGLEngine.create({ canvas: "canvas" });
-```
-
-`WebGLEngine` supports WebGL1.0 and WebGL2.0. It can control all behaviors of the canvas, as well as resource management, scene management, execution/pause/resume, vertical synchronization, and other functions. `WebGLEngine.create`. Below is the type description of the configuration passed in when creating the engine:
+- **[Canvas](/docs/core/canvas)**: Operations related to the main canvas, such as modifying the canvas width and height.
+- **Render Control**: Functions to control the execution, pause, resume of rendering, vertical synchronization, etc.
+- **Engine Subsystem Management**: [Scene Management](/docs/core/scene), [Resource Management](/docs/assets/overall), [Physics System](/docs/physics/overall), [Interaction System](/docs/input/input/), [XR System](/docs/xr/overall)
+- **Execution Environment Context Management**: Management of context for execution environments like WebGL.
 
-```mermaid
----
-title: WebGLEngineConfiguration Interface
----
-classDiagram
-    EngineConfiguration <|-- WebGLEngineConfiguration
-    class EngineConfiguration {
-       <<interface>>
-       +IPhysics physics
-       +IXRDevice xrDevice
-       +ColorSpace colorSpace
-       +IShaderLab shaderLab
-       +IInputOptions input
-    }
-
-    class WebGLEngineConfiguration{
-        <<interface>>
-        +HTMLCanvasElement | OffscreenCanvas | string canvas
-        +WebGLGraphicDeviceOptions graphicDeviceOptions
-    }
-```
-
-Projects exported by the editor usually automatically set the relevant options configured by the editor. For example, developers can set the rendering configuration of the context in the [export interface](/en/docs/platform/platform):
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*WZHzRYIpUzQAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
-
-Or select the physics backend and XR backend in the project settings interface of the editor:
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*iBDlTbGGuroAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
+## Initialization
 
-You can also modify the code to change the engine configuration. Take **canvas transparency** as an example. By default, the engine enables the transparency channel of the canvas, which means the canvas will blend with the elements behind it. If you need to disable transparency, you can set it like this:
+To facilitate users directly creating a web engine, we provide the [WebGLEngine](/apis/rhi-webgl/#WebGLEngine), which supports WebGL1.0 and WebGL2.0.
 
 ```typescript
 const engine = await WebGLEngine.create({
-  canvas: htmlCanvas,
-  graphicDeviceOptions: { alpha: false }
+  canvas: "canvas-id",
+  colorSpace: {...},
+  graphicDeviceOptions: {...},
+  gltf: {...},
+  ktx2Loader: {...}                                   
 });
 ```
 
-Similarly, you can use `webGLMode` to control WebGL1/2. Properties other than `webGLMode` will be passed to the context. For details, refer to [getContext parameter explanation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters).
+Below is a description of the [configuration](/apis/galacean/#WebGLEngineConfiguration) types passed when creating the engine:
+
+| Configuration                                                  | Description                                                 |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| canvas                                                       | Can be a canvas ID (`string`) or a canvas object (`HTMLCanvasElement | OffscreenCanvas`) |
+| [graphicDeviceOptions](/apis/galacean/#WebGLGraphicDeviceOptions) | Configuration related to the graphics device, e.g., `webGLMode` can control WebGL1/2. Properties other than `webGLMode` will be passed to the context, more details can be found in [getContext parameters explanation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters). |
+| [colorSpace](/apis/galacean/#ColorSpace)                     | Color space, `ColorSpace.Gamma` or `ColorSpace.Linear`.        |
+| gltf                                                         | GLTF Loader configuration, `workerCount` is used to configure the number of workers for meshOpt: `{ meshOpt: { workerCount: number } }`. |
+| ktx2Loader                                                   | KTX2 Loader configuration, `workerCount` is used to configure the number of workers for the ktx2 decoder: `{ priorityFormats: Array<KTX2TargetFormat>; transcoder: KTX2Transcoder; workerCount: number }`. If workerCount is greater than 0, worker threads will be created; if it equals 0, only the main thread will be used. |
 
-For more related configuration information, refer to [Physics System](/en/docs/physics/overall), [Interaction System](/en/docs/input), [XR System](/en/docs/xr/overall).
+For more related configuration information, please refer to [Physics System](/docs/physics/overall), [Interaction System](/docs/input/input/), [XR System](/docs/xr/overall).
 
 ## Properties
 
-| Property Name | Property Description |
+| Property Name | Description |
 | --- | --- |
-| [time](/apis/core/#Engine-time) | Engine time-related information. For details, refer to [Time](/en/docs/core/time/) |
-| [vSyncCount](/apis/core/#Engine-vSyncCount) | Vertical synchronization refresh rate. The engine enables [vertical synchronization](https://baike.baidu.com/item/%E5%9E%82%E7%9B%B4%E5%90%8C%E6%AD%A5/7263524?fromtitle=V-Sync&fromid=691778) by default, and the refresh rate `vSyncCount` is `1` (consistent with the screen refresh rate). If `vSyncCount` is set to `2`, the engine updates once every 2 frames of screen refresh. |
-| [resourceManager](/apis/core/#Engine-resourceManager) | Resource manager, generally used for [loading](/en/docs/assets/load/) and [releasing](/en/docs/assets/gc/) assets |
-| [sceneManager](/apis/core/#Engine-sceneManager) | Scene manager. Galacean supports rendering multiple scenes simultaneously. The scene manager can be used to conveniently manage the addition, deletion, modification, and query of the current scene. For details, refer to [Scene](/en/docs/core/scene/) |
-| [inputManager](/apis/core/#Engine-inputManager) | Interaction manager, generally used to obtain keyboard, touch, and scroll information. For details, refer to [Interaction](/en/docs/input/input/) |
+| [time](/apis/core/#Engine-time) | Engine time-related information, more details can be found in [Time](/docs/core/time/) |
+| [vSyncCount](/apis/core/#Engine-vSyncCount) | Vertical sync refresh rate. The engine defaults to enable [vertical sync](https://baike.baidu.com/item/%E5%9E%82%E7%9B%B4%E5%90%8C%E6%AD%A5/7263524?fromtitle=V-Sync&fromid=691778) with a refresh rate `vSyncCount` of `1` (same as the screen refresh rate). If `vSyncCount` is set to `2`, the engine updates once every 2 screen refresh frames. |
+| [resourceManager](/apis/core/#Engine-resourceManager) | Resource manager, generally used for [loading](/docs/assets/load/) and [releasing](/docs/assets/gc/) assets. |
+| [sceneManager](/apis/core/#Engine-sceneManager) | Scene manager. Galacean supports rendering multiple scenes simultaneously, and the scene manager allows convenient management of scene additions, deletions, modifications, and queries. More details can be found in [Scene](/docs/core/scene/). |
+| [inputManager](/apis/core/#Engine-inputManager) | Interaction manager, generally used to get information about keyboards, touch, and wheel inputs. More details can be found in [Interaction](/docs/input/input/). |
 
 ### Refresh Rate
 
-By default, the engine uses vertical synchronization mode and controls the rendering refresh rate with [vSyncCount](/apis/core/#Engine-vSyncCount). In this mode, the rendered frame will wait for the screen's vertical sync signal. [vSyncCount](/apis/core/#Engine-vSyncCount) represents the desired number of screen sync signals between rendered frames. The default value is 1, and this property must be an integer. For example, if we want to render 30 frames per second on a device with a screen refresh rate of 60 frames, we can set this value to 2.
+By default, the engine uses vertical sync mode and controls the rendering refresh rate with [vSyncCount](/apis/core/#Engine-vSyncCount). In this mode, the rendering frame waits for the screen's vertical sync signal, and [vSyncCount](/apis/core/#Engine-vSyncCount) represents the desired number of screen sync signals between rendering frames. The default value is 1, and this property must be an integer. For example, if we want to render 30 frames per second on a device with a 60Hz screen refresh rate, we can set this value to 2.
 
-Additionally, users can disable vertical synchronization by setting [vSyncCount](/apis/core/#Engine-vSyncCount) to 0 and then setting [targetFrameRate](/apis/core/#Engine-targetFrameRate) to the desired frame rate. In this mode, rendering does not consider the vertical sync signal. For example, 120 means 120 frames, i.e., the expectation is to refresh 120 times per second.
+Users can also disable vertical sync by setting [vSyncCount](/apis/core/#Engine-vSyncCount) to 0 and then setting [targetFrameRate](/apis/core/#Engine-targetFrameRate) to the desired frame rate. In this mode, rendering does not consider vertical sync signals. For instance, a value of 120 means 120 frames, which indicates a desired refresh rate of 120 times per second.
 
 ```typescript
-// 垂直同步
+// Vertical sync
 engine.vSyncCount = 1;
 engine.vSyncCount = 2;
 
-// 非垂直同步
+// No vertical sync
 engine.vSyncCount = 0;
 engine.targetFrameRate = 120;
 ```
 
-> ⚠️ It is not recommended to use non-vertical synchronization
+> ⚠️ Non-vertical sync is not recommended.
 
 ## Methods
 
-| Method Name                           | Description        |
+| Method Name                              | Description          |
 | ------------------------------------- | ------------------ |
-| [run](/apis/core/#Engine-run)      | Execute engine rendering frame loop |
-| [pause](/apis/core/#Engine-pause)  | Pause engine rendering frame loop   |
-| [resume](/apis/core/#Engine-resume)| Resume engine rendering loop        |
-| [destroy](/apis/core/#Engine-destroy)| Destroy the engine               |
+| [run](/apis/core/#Engine-run)         | Executes the engine render frame loop |
+| [pause](/apis/core/#Engine-pause)     | Pauses the engine render frame loop |
+| [resume](/apis/core/#Engine-resume)   | Resumes the engine render loop |
+| [destroy](/apis/core/#Engine-destroy) | Destroys the engine |
\ No newline at end of file
diff --git a/docs/zh/core/canvas.md b/docs/zh/core/canvas.md
index 032f2ed627..c749fdaf04 100644
--- a/docs/zh/core/canvas.md
+++ b/docs/zh/core/canvas.md
@@ -5,11 +5,7 @@ group: 基础
 label: Core
 ---
 
-Galacean Engine 封装了不同平台的画布，如 [WebCanvas](/apis/rhi-webgl/#WebCanvas)  支持用 [Engine](/apis/core/#Engine) 控制 [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) 或者 [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) 。
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ZC9gRY-KCTgAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-> 若无特殊说明，文档中画布一般都为 `WebCanvas` 。
+引擎封装了不同平台的画布，如 [WebCanvas](/apis/rhi-webgl/#WebCanvas) 支持用 [Engine](/apis/core/#Engine) 控制 [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) 或者 [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) 。若无特殊说明，文档中画布一般都为 `WebCanvas` 。
 
 ## 基础使用
 
@@ -41,11 +37,7 @@ flowchart TD
     C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
 ```
 
-若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](/docs/platform/platform)渲染导出配置处控制**设备像素比**即可。
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-或在代码中主动调用 `resizeByClientSize` 适配画布。
+调用 `resizeByClientSize` 适配画布：
 
 ```typescript
 // 使用设备像素比（ window.devicePixelRatio ）调整画布尺寸，
@@ -54,7 +46,7 @@ engine.canvas.resizeByClientSize();
 engine.canvas.resizeByClientSize(1.5);
 ```
 
-> 当画布的显示尺寸发生变化时（比如浏览器窗口发生变化时），画面可能出现拉伸或压缩，可以通过调用 `resizeByClientSize` 来恢复正常。一般情况下这行代码已经可以满足适配的需求，如果你有更复杂的适配需求，请阅读“高级使用”部分。
+当画布的显示尺寸发生变化时（比如浏览器窗口发生变化时），画面可能出现拉伸或压缩，可以通过调用 `resizeByClientSize` 来恢复正常。一般情况下这行代码已经可以满足适配的需求，如果你有更复杂的适配需求，请阅读“高级使用”部分。
 
 ## 高级使用
 
diff --git a/docs/zh/core/engine.md b/docs/zh/core/engine.md
index 266d288079..f167a75450 100644
--- a/docs/zh/core/engine.md
+++ b/docs/zh/core/engine.md
@@ -5,68 +5,38 @@ type: 核心
 label: Core
 ---
 
-`Engine` 在 Galacean Engine 中扮演着总控制器的角色，主要包含了**画布**、**渲染控制**和**引擎子系统管理**等功能：
+`Engine` 在扮演着总控制器的角色，主要包含了**画布**、**渲染控制**和**引擎子系统管理**等功能：
 
 - **[画布](/docs/core/canvas)**：主画布相关的操作，如修改画布宽高等。
 - **渲染控制**： 控制渲染的执行/暂停/继续、垂直同步等功能。
-- **引擎子系统管理**：
-  - [场景管理](/docs/core/scene)
-  - [资源管理](/docs/assets/overall)
-  - [物理系统](/docs/physics/overall)
-  - [交互系统](/docs/input/input/)
-  - [XR 系统](/docs/xr/overall)
+- **引擎子系统管理**： [场景管理](/docs/core/scene)、[资源管理](/docs/assets/overall)、[物理系统](/docs/physics/overall) 、[交互系统](/docs/input/input/)、[XR 系统](/docs/xr/overall)
 - **执行环境的上下文管理**：控制 WebGL 等执行环境的上下文管理。
 
 ## 初始化
 
-为了方便用户直接创建 web 端 engine，Galacean 提供了 [WebGLEngine](/apis/rhi-webgl/#WebGLEngine) ：
+为了方便用户直接创建 web 端 engine，我们提供了 [WebGLEngine](/apis/rhi-webgl/#WebGLEngine)，支持 WebGL1.0 和 WebGL2.0。
 
 ```typescript
-const engine = await WebGLEngine.create({ canvas: "canvas" });
-```
-
-`WebGLEngine` 支持 WebGL1.0 和 WebGL2.0，它能够控制画布的一切行为，此外还有资源管理、场景管理、执行/暂停/继续、垂直同步等功能。`WebGLEngine.create` 。下方是创建引擎时传入配置的类型说明：
-
-```mermaid
----
-title: WebGLEngineConfiguration Interface
----
-classDiagram
-    EngineConfiguration <|-- WebGLEngineConfiguration
-    class EngineConfiguration {
-       <<interface>>
-       +IPhysics physics
-       +IXRDevice xrDevice
-       +ColorSpace colorSpace
-       +IShaderLab shaderLab
-       +IInputOptions input
-    }
-
-    class WebGLEngineConfiguration{
-        <<interface>>
-        +HTMLCanvasElement | OffscreenCanvas | string canvas
-        +WebGLGraphicDeviceOptions graphicDeviceOptions
-    }
+const engine = await WebGLEngine.create({
+  canvas: "canvas-id",
+  colorSpace: {...},
+  graphicDeviceOptions: {...}，
+  gltf: {...},
+  ktx2Loader: {...}                                   
+});
 ```
 
-编辑器导出的项目通常自动设置了编辑器配置的相关选项，比如开发者可以在 [导出界面](/docs/platform/platform) 设置上下文的渲染配置：
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*WZHzRYIpUzQAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
-
-又或者在编辑器的项目设置界面选择物理后端与 XR 后端：
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*iBDlTbGGuroAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
+下方是创建引擎时传入[配置](/apis/galacean/#WebGLEngineConfiguration)的类型说明：
 
-您也可以修改代码变更引擎配置，拿**画布透明**来举例，引擎默认是将画布的透明通道开启的，即画布会和背后的网页元素混合，如果需要关闭透明，可以这样设置：
+| 配置                                                         | 解释                                                         |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| canvas                                                       | 可以是画布 ID（ `string`） 或画布对象（`HTMLCanvasElement |OffscreenCanvas`）。 |
+| [graphicDeviceOptions](/apis/galacean/#WebGLGraphicDeviceOptions) | 图形设备相关配置，比如 `webGLMode` 可以用 控制 WebGL1/2。除 `webGLMode` 外的属性将透传给上下文，详情可参考 [getContext 参数释义](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters)。 |
+| [colorSpace](/apis/galacean/#ColorSpace)                     | 颜色空间, `ColorSpace.Gamma` 或 `ColorSpace.Linear`。        |
+| gltf                                                         | gltf Loader 配置，`workerCount` 用来配置 meshOpt 的 worker 数量：`{ meshOpt: { workerCount: number } }` 。 |
+| ktx2Loader                                                   | KTX2 Loader 配置，`workerCount` 用来配置 ktx2 解码器的worker 数量：`{ priorityFormats: Array<KTX2TargetFormat>; transcoder: KTX2Transcoder; workerCount: number }`。如果 workCount 大于 0，将会创建 worker 线程，等于 0 则只用主线程。 |
 
-```typescript
-const engine = await WebGLEngine.create({
-  canvas: htmlCanvas,
-  graphicDeviceOptions: { alpha: false }
-});
-```
 
-类似的，可以用 `webGLMode` 控制 WebGL1/2，除 `webGLMode` 外的属性将透传给上下文，详情可参考 [getContext 参数释义](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#parameters)。
 
 更多相关配置信息，可参考[物理系统](/docs/physics/overall)、[交互系统](/docs/input/input/)、[XR 系统](/docs/xr/overall)。
 
@@ -106,3 +76,111 @@ engine.targetFrameRate = 120;
 | [pause](/apis/core/#Engine-pause)     | 暂停引擎渲染帧循环 |
 | [resume](/apis/core/#Engine-resume)   | 恢复引擎渲渲染循环 |
 | [destroy](/apis/core/#Engine-destroy) | 销毁引擎           |
+
+
+## 画布
+
+### 创建画布
+
+在 HTML 中插入一个 `<canvas>` 标签，指定一个 id：
+
+```html
+<canvas id="canvas" style="width: 500px; height: 500px" />
+```
+
+> 开发者要注意检查 canvas 的高度和宽度，避免出现高度或宽度的值为 **0** 导致渲染不出来。
+
+创建 WebGLEngine 实例的时候会自动创建一个 WebCanvas 实例。其中，参数 `canvas` 是 _Canvas_ 元素的 `id`。
+
+```typescript
+const engine = await WebGLEngine.create({ canvas: "canvas" });
+
+console.log(engine.canvas); // => WebCanvas 实例
+```
+
+### 基础适配
+
+画布尺寸一般通过**设备像素比**控制，以 [WebCanvas](/apis/rhi-webgl/#WebCanvas) 为例：
+
+```mermaid
+flowchart TD
+    A[HtmlCanvas.clientWidth] -->|pixelRatio| B[WebCanvas.width]
+    C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
+```
+
+若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](/docs/platform/platform)渲染导出配置处控制**设备像素比**即可。
+
+<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+
+或在代码中主动调用 `resizeByClientSize` 适配画布。
+
+```typescript
+// 使用设备像素比（ window.devicePixelRatio ）调整画布尺寸，
+engine.canvas.resizeByClientSize();
+// 自定义像素比调整画布尺寸
+engine.canvas.resizeByClientSize(1.5);
+```
+
+> 当画布的显示尺寸发生变化时（比如浏览器窗口发生变化时），画面可能出现拉伸或压缩，可以通过调用 `resizeByClientSize` 来恢复正常。一般情况下这行代码已经可以满足适配的需求，如果你有更复杂的适配需求，请阅读“高级使用”部分。
+
+## 高级使用
+
+关于适配，核心要注意的点是**设备像素比**，以 iPhoneX 为例，设备像素比 `window.devicePixelRatio` 为 _3_，  窗口宽度 `window.innerWidth` 为 _375_，屏幕物理像素宽度则为：375 * 3 = *1125\*。
+
+渲染压力和屏幕物理像素高宽成正比，物理像素越大，渲染压力越大，也就越耗电。画布的高宽建议通过 [WebCanvas](/apis/rhi-webgl/WebCanvas) 暴露的 API 设置，不建议使用原生 canvas 的 API ，如 `canvas.width` 或 `canvas.style.width` 这些方法修改。
+
+> ️ **注意**：有些前端脚手架会插入以下标签修改页面的缩放比：
+>
+> `<meta name="viewport" content="width=device-width, initial-scale=0.333333333">`
+>
+> 这行代码会把 `window.innerWidth` 的值从 375 修改为 1125。
+
+除了 `resizeByClientSize` 自动适配，推荐使用以下两种模式：
+
+### 节能模式
+
+考虑到移动端设备虽然是高清屏幕（设别像素比高）但实际显卡性能并不能很好地满足高清实时渲染的性能要求的情况（**3 倍屏和 2 倍屏渲染面积比是 9:4，3 倍屏较容易造成手机发烫**），此模式下引擎通过对画布缩放拉伸来达到适配的目的。代码如下：
+
+```typescript
+const canvas = document.getElementById("canvas");
+const webcanvas = new WebCanvas(canvas);
+const pixelRatio = window.devicePixelRatio; // 如果已经设置 meta scale，请设置为 1
+const scale = 3 / 2; // 3 倍高清屏按 2 倍屏来计算画布尺寸
+
+/**
+ * 设置节能模式，默认全屏，也可以自己设置任意高宽
+ */
+webcanvas.width = (window.innerWidth * pixelRatio) / scale;
+webcanvas.height = (window.innerHeight * pixelRatio) / scale;
+webcanvas.setScale(scale, scale); // 拉伸画布
+```
+
+如果已经通过 CSS 设置了画布高宽（比如 `width: 100vw; height: 100vh;`），那么可以通过 `resizeByClientSize` 传参实现画布的缩放：
+
+```typescript
+const canvas = document.getElementById("canvas");
+const webcanvas = new WebCanvas(canvas);
+const scale = 2 / 3; // 3 倍高清屏按 2 倍屏来计算画布尺寸
+
+webcanvas.resizeByClientSize(scale); // 拉伸画布
+```
+
+### 固定宽度模式
+
+某些情况下，比如设计稿固定 750 宽度的情况，开发者有可能会写死画布宽度来降低适配成本。代码如下：
+
+```typescript
+import { WebCanvas } from "@galacean/engine";
+
+const canvas = document.getElementById("canvas");
+const webcanvas = new WebCanvas(canvas);
+const fixedWidth = 750; // 固定 750 宽度
+
+/**
+ * 设置固定宽度模式
+ */
+const scale = window.innerWidth / fixedWidth;
+webcanvas.width = fixedWidth;
+webcanvas.height = window.innerHeight / scale;
+webcanvas.setScale(scale, scale); // 拉伸画布
+```
\ No newline at end of file

From a522803651c3a1499664d4278cb1f922c8a01618 Mon Sep 17 00:00:00 2001
From: eyworldwide <eyworldwide@foxmail.com>
Date: Fri, 24 Jan 2025 15:31:30 +0800
Subject: [PATCH 2/5] refactor: update engine doc

---
 docs/zh/core/engine.md | 108 -----------------------------------------
 1 file changed, 108 deletions(-)

diff --git a/docs/zh/core/engine.md b/docs/zh/core/engine.md
index f167a75450..59e74e59e7 100644
--- a/docs/zh/core/engine.md
+++ b/docs/zh/core/engine.md
@@ -76,111 +76,3 @@ engine.targetFrameRate = 120;
 | [pause](/apis/core/#Engine-pause)     | 暂停引擎渲染帧循环 |
 | [resume](/apis/core/#Engine-resume)   | 恢复引擎渲渲染循环 |
 | [destroy](/apis/core/#Engine-destroy) | 销毁引擎           |
-
-
-## 画布
-
-### 创建画布
-
-在 HTML 中插入一个 `<canvas>` 标签，指定一个 id：
-
-```html
-<canvas id="canvas" style="width: 500px; height: 500px" />
-```
-
-> 开发者要注意检查 canvas 的高度和宽度，避免出现高度或宽度的值为 **0** 导致渲染不出来。
-
-创建 WebGLEngine 实例的时候会自动创建一个 WebCanvas 实例。其中，参数 `canvas` 是 _Canvas_ 元素的 `id`。
-
-```typescript
-const engine = await WebGLEngine.create({ canvas: "canvas" });
-
-console.log(engine.canvas); // => WebCanvas 实例
-```
-
-### 基础适配
-
-画布尺寸一般通过**设备像素比**控制，以 [WebCanvas](/apis/rhi-webgl/#WebCanvas) 为例：
-
-```mermaid
-flowchart TD
-    A[HtmlCanvas.clientWidth] -->|pixelRatio| B[WebCanvas.width]
-    C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
-```
-
-若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](/docs/platform/platform)渲染导出配置处控制**设备像素比**即可。
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-或在代码中主动调用 `resizeByClientSize` 适配画布。
-
-```typescript
-// 使用设备像素比（ window.devicePixelRatio ）调整画布尺寸，
-engine.canvas.resizeByClientSize();
-// 自定义像素比调整画布尺寸
-engine.canvas.resizeByClientSize(1.5);
-```
-
-> 当画布的显示尺寸发生变化时（比如浏览器窗口发生变化时），画面可能出现拉伸或压缩，可以通过调用 `resizeByClientSize` 来恢复正常。一般情况下这行代码已经可以满足适配的需求，如果你有更复杂的适配需求，请阅读“高级使用”部分。
-
-## 高级使用
-
-关于适配，核心要注意的点是**设备像素比**，以 iPhoneX 为例，设备像素比 `window.devicePixelRatio` 为 _3_，  窗口宽度 `window.innerWidth` 为 _375_，屏幕物理像素宽度则为：375 * 3 = *1125\*。
-
-渲染压力和屏幕物理像素高宽成正比，物理像素越大，渲染压力越大，也就越耗电。画布的高宽建议通过 [WebCanvas](/apis/rhi-webgl/WebCanvas) 暴露的 API 设置，不建议使用原生 canvas 的 API ，如 `canvas.width` 或 `canvas.style.width` 这些方法修改。
-
-> ️ **注意**：有些前端脚手架会插入以下标签修改页面的缩放比：
->
-> `<meta name="viewport" content="width=device-width, initial-scale=0.333333333">`
->
-> 这行代码会把 `window.innerWidth` 的值从 375 修改为 1125。
-
-除了 `resizeByClientSize` 自动适配，推荐使用以下两种模式：
-
-### 节能模式
-
-考虑到移动端设备虽然是高清屏幕（设别像素比高）但实际显卡性能并不能很好地满足高清实时渲染的性能要求的情况（**3 倍屏和 2 倍屏渲染面积比是 9:4，3 倍屏较容易造成手机发烫**），此模式下引擎通过对画布缩放拉伸来达到适配的目的。代码如下：
-
-```typescript
-const canvas = document.getElementById("canvas");
-const webcanvas = new WebCanvas(canvas);
-const pixelRatio = window.devicePixelRatio; // 如果已经设置 meta scale，请设置为 1
-const scale = 3 / 2; // 3 倍高清屏按 2 倍屏来计算画布尺寸
-
-/**
- * 设置节能模式，默认全屏，也可以自己设置任意高宽
- */
-webcanvas.width = (window.innerWidth * pixelRatio) / scale;
-webcanvas.height = (window.innerHeight * pixelRatio) / scale;
-webcanvas.setScale(scale, scale); // 拉伸画布
-```
-
-如果已经通过 CSS 设置了画布高宽（比如 `width: 100vw; height: 100vh;`），那么可以通过 `resizeByClientSize` 传参实现画布的缩放：
-
-```typescript
-const canvas = document.getElementById("canvas");
-const webcanvas = new WebCanvas(canvas);
-const scale = 2 / 3; // 3 倍高清屏按 2 倍屏来计算画布尺寸
-
-webcanvas.resizeByClientSize(scale); // 拉伸画布
-```
-
-### 固定宽度模式
-
-某些情况下，比如设计稿固定 750 宽度的情况，开发者有可能会写死画布宽度来降低适配成本。代码如下：
-
-```typescript
-import { WebCanvas } from "@galacean/engine";
-
-const canvas = document.getElementById("canvas");
-const webcanvas = new WebCanvas(canvas);
-const fixedWidth = 750; // 固定 750 宽度
-
-/**
- * 设置固定宽度模式
- */
-const scale = window.innerWidth / fixedWidth;
-webcanvas.width = fixedWidth;
-webcanvas.height = window.innerHeight / scale;
-webcanvas.setScale(scale, scale); // 拉伸画布
-```
\ No newline at end of file

From 39a84e7fffe7680a19d601f7cedd046e1f78bfdf Mon Sep 17 00:00:00 2001
From: eyworldwide <eyworldwide@foxmail.com>
Date: Fri, 24 Jan 2025 15:45:33 +0800
Subject: [PATCH 3/5] refactor: update scene doc

---
 docs/en/core/scene.mdx | 2 +-
 docs/zh/core/scene.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/en/core/scene.mdx b/docs/en/core/scene.mdx
index dc0d9221e3..3e36997fae 100644
--- a/docs/en/core/scene.mdx
+++ b/docs/en/core/scene.mdx
@@ -19,7 +19,7 @@ Right-click in the **[Assets Panel](/en/docs/assets/interface)** (or the + sign
 
 ### Properties Panel
 
-<Image src="https://gw.alipayobjects.com/zos/OasisHub/5770f3d1-6840-438b-adf0-d759048fac6b/image-20250124110620126.png" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/cbcc9725-811d-4203-a65d-b4a430083db3/image-20250124154359477.png" />
 
 ### Ambient Light
 
diff --git a/docs/zh/core/scene.mdx b/docs/zh/core/scene.mdx
index 701259554d..089b8a9650 100644
--- a/docs/zh/core/scene.mdx
+++ b/docs/zh/core/scene.mdx
@@ -19,7 +19,7 @@ Scene 作为场景单元，可以方便的进行实体树管理，尤其是大
 
 ### 属性面板
 
-<Image src="https://gw.alipayobjects.com/zos/OasisHub/5770f3d1-6840-438b-adf0-d759048fac6b/image-20250124110620126.png" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/cbcc9725-811d-4203-a65d-b4a430083db3/image-20250124154359477.png" />
 
 ### 环境光
 

From 78c32424ccf4685dde0903605f219539a334e507 Mon Sep 17 00:00:00 2001
From: eyworldwide <eyworldwide@foxmail.com>
Date: Fri, 24 Jan 2025 16:56:09 +0800
Subject: [PATCH 4/5] refactor: doc md to mdx

---
 docs/en/core/{canvas.md => canvas.mdx}        |   0
 docs/en/core/{clone.md => clone.mdx}          |   0
 docs/en/core/component.md                     |  98 -------------
 docs/en/core/component.mdx                    |  98 +++++++++++++
 docs/en/core/{engine.md => engine.mdx}        |   0
 docs/en/core/{math.md => math.mdx}            |   5 +-
 docs/en/core/prefab.md                        | 102 --------------
 docs/en/core/prefab.mdx                       |  98 +++++++++++++
 docs/en/core/scene.mdx                        |   6 +-
 docs/en/core/space.md                         |  64 ---------
 docs/en/core/space.mdx                        |  63 +++++++++
 docs/en/core/{time.md => time.mdx}            |   0
 docs/en/core/transform.md                     | 131 ------------------
 docs/en/core/transform.mdx                    | 130 +++++++++++++++++
 docs/en/interface/inspector.md                |  70 ----------
 docs/en/interface/inspector.mdx               |  70 ++++++++++
 .../interface/{shortcut.md => shortcut.mdx}   |   2 +-
 .../interface/{template.md => template.mdx}   |   3 +-
 docs/en/interface/viewport.md                 | 102 --------------
 docs/en/interface/viewport.mdx                | 100 +++++++++++++
 docs/zh/core/{canvas.md => canvas.mdx}        |   0
 docs/zh/core/{clone.md => clone.mdx}          |   0
 docs/zh/core/{component.md => component.mdx}  |  12 +-
 docs/zh/core/{engine.md => engine.mdx}        |   0
 docs/zh/core/{math.md => math.mdx}            |   6 +-
 docs/zh/core/{prefab.md => prefab.mdx}        |  26 ++--
 docs/zh/core/scene.mdx                        |   6 +-
 docs/zh/core/{space.md => space.mdx}          |  18 +--
 docs/zh/core/{time.md => time.mdx}            |   0
 docs/zh/core/{transform.md => transform.mdx}  |  10 +-
 .../interface/{inspector.md => inspector.mdx} |  22 +--
 .../interface/{shortcut.md => shortcut.mdx}   |   2 +-
 .../interface/{template.md => template.mdx}   |   2 +-
 .../interface/{viewport.md => viewport.mdx}   |  38 ++---
 34 files changed, 637 insertions(+), 647 deletions(-)
 rename docs/en/core/{canvas.md => canvas.mdx} (100%)
 rename docs/en/core/{clone.md => clone.mdx} (100%)
 delete mode 100644 docs/en/core/component.md
 create mode 100644 docs/en/core/component.mdx
 rename docs/en/core/{engine.md => engine.mdx} (100%)
 rename docs/en/core/{math.md => math.mdx} (98%)
 delete mode 100644 docs/en/core/prefab.md
 create mode 100644 docs/en/core/prefab.mdx
 delete mode 100644 docs/en/core/space.md
 create mode 100644 docs/en/core/space.mdx
 rename docs/en/core/{time.md => time.mdx} (100%)
 delete mode 100644 docs/en/core/transform.md
 create mode 100644 docs/en/core/transform.mdx
 delete mode 100644 docs/en/interface/inspector.md
 create mode 100644 docs/en/interface/inspector.mdx
 rename docs/en/interface/{shortcut.md => shortcut.mdx} (66%)
 rename docs/en/interface/{template.md => template.mdx} (72%)
 delete mode 100644 docs/en/interface/viewport.md
 create mode 100644 docs/en/interface/viewport.mdx
 rename docs/zh/core/{canvas.md => canvas.mdx} (100%)
 rename docs/zh/core/{clone.md => clone.mdx} (100%)
 rename docs/zh/core/{component.md => component.mdx} (72%)
 rename docs/zh/core/{engine.md => engine.mdx} (100%)
 rename docs/zh/core/{math.md => math.mdx} (98%)
 rename docs/zh/core/{prefab.md => prefab.mdx} (68%)
 rename docs/zh/core/{space.md => space.mdx} (68%)
 rename docs/zh/core/{time.md => time.mdx} (100%)
 rename docs/zh/core/{transform.md => transform.mdx} (95%)
 rename docs/zh/interface/{inspector.md => inspector.mdx} (69%)
 rename docs/zh/interface/{shortcut.md => shortcut.mdx} (64%)
 rename docs/zh/interface/{template.md => template.mdx} (68%)
 rename docs/zh/interface/{viewport.md => viewport.mdx} (56%)

diff --git a/docs/en/core/canvas.md b/docs/en/core/canvas.mdx
similarity index 100%
rename from docs/en/core/canvas.md
rename to docs/en/core/canvas.mdx
diff --git a/docs/en/core/clone.md b/docs/en/core/clone.mdx
similarity index 100%
rename from docs/en/core/clone.md
rename to docs/en/core/clone.mdx
diff --git a/docs/en/core/component.md b/docs/en/core/component.md
deleted file mode 100644
index 023384bb61..0000000000
--- a/docs/en/core/component.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-order: 4
-title: Components
-type: Core
-label: Core
----
-
-In the Galacean engine, [Entity](/apis/core/#Entity) does not have actual functionalities such as rendering models. These functionalities are implemented by loading [Component](/apis/core/#Component) component classes. For example, if you want to turn an _Entity_ into a camera, you just need to add the camera component [Camera](/apis/core/#Camera) to that _Entity_. This component-based functionality extension method focuses on encapsulating the program independently according to functionality, and combining and adding as needed during use, which is very beneficial for reducing program coupling and improving code reusability.
-
-Common components:
-
-| Name                                                  | Description    |
-| :---------------------------------------------------- | :------------- |
-| [Camera](/apis/core/#Camera)                       | Camera         |
-| [MeshRenderer](/apis/core/#MeshRenderer)           | Static Model Renderer |
-| [SkinnedMeshRenderer](/apis/core/#SkinnedMeshRenderer) | Skinned Model Renderer |
-| [Animator](/apis/core/#Animator)                   | Animation Control Component |
-| [DirectLight](/apis/core/#DirectLight)             | Directional Light |
-| [PointLight](/apis/core/#PointLight)               | Point Light    |
-| [SpotLight](/apis/core/#SpotLight)                 | Spotlight      |
-| [ParticleRenderer](/apis/core/#ParticleRenderer)   | Particle System |
-| [BoxCollider](/apis/core/#BoxCollider)             | Box Collider   |
-| [SphereCollider](/apis/core/#SphereCollider)       | Sphere Collider |
-| [PlaneCollider](/apis/core/#PlaneCollider)         | Plane Collider |
-| [Script](/apis/core/#Script)                       | Script         |
-
-## Editor Usage
-
-After selecting an entity from the **[Hierarchy Panel](/en/docs/interface/hierarchy)** or the scene, the inspector will display all the components mounted on the currently selected node, with the component names displayed in the upper left corner
-
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style="zoom:50%;" />
-
-You can control whether it is enabled in the inspector
-
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style="zoom:50%;" />
-
-If you don't need it, you can also delete it
-
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style="zoom:50%;" />
-
-Or edit its various properties
-
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style="zoom:50%;" />
-
-If it is an empty node, you can click the `Add Component` button to add new components to the current entity.
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style="zoom:50%;" />
-
-## Script Usage
-
-### Adding Components
-
-We use [addComponent(Component)](/apis/core/#Entity-addComponent) to add components, for example, adding a "Direct Light" component ([DirectLight](/apis/core/#DirectLight)) to an `Entity`:
-
-```typescript
-const lightEntity = rootEntity.createChild("light");
-const directLight = lightEntity.addComponent(DirectLight);
-directLight.color = new Color(0.3, 0.3, 1);
-directLight.intensity = 1;
-```
-
-### Finding Components on an Entity
-
-When we need to get a component on an entity, the [getComponent](/apis/core/#Entity-getComponent) API will help you find the target component.
-
-```typescript
-const component = newEntity.getComponent(Animator);
-```
-
-Sometimes there may be multiple components of the same type, and the above method will only return the first found component. If you need to find all components, you can use [getComponents](/apis/core/#Entity-getComponents):
-
-```typescript
-const components = [];
-newEntity.getComponents(Animator, components);
-```
-
-In assets like glTF, we might not know which entity the target component is on. In this case, you can use [getComponentsIncludeChildren](/apis/core/#Entity-getComponentsIncludeChildren) to search.
-
-```typescript
-const components = [];
-newEntity.getComponentsIncludeChildren(Animator, components);
-```
-
-### Getting the Entity of a Component
-
-Continuing with the example of adding a component at the beginning. You can directly get the entity of the component:
-
-```typescript
-const entity = directLight.entity;
-```
-
-### State
-
-When temporarily not using a component, you can actively call the component's [enabled](/apis/core/#Component-enabled)
-
-```typescript
-directLight.enabled = false;
-```
diff --git a/docs/en/core/component.mdx b/docs/en/core/component.mdx
new file mode 100644
index 0000000000..f82501c514
--- /dev/null
+++ b/docs/en/core/component.mdx
@@ -0,0 +1,98 @@
+---
+order: 4
+title: Components
+type: Core
+label: Core
+---
+
+An [Entity](/apis/core/#Entity) does not have actual functionalities such as rendering models. These functionalities are achieved by loading [Component](/apis/core/#Component) classes. For example, if you want an _Entity_ to become a camera, you simply add a camera component [Camera](/apis/core/#Camera) to the _Entity_. This component-based extension approach focuses on encapsulating functionalities independently and combining them as needed, which is very beneficial for reducing program coupling and enhancing code reusability.
+
+Common Components:
+
+| Name                                               | Description      |
+| :------------------------------------------------- | :--------------- |
+| [Camera](/apis/core/#Camera)                       | Camera           |
+| [MeshRenderer](/apis/core/#MeshRenderer)           | Static model renderer |
+| [SkinnedMeshRenderer](/apis/core/#SkinnedMeshRenderer) | Skinned model renderer |
+| [Animator](/apis/core/#Animator)                   | Animation control component |
+| [DirectLight](/apis/core/#DirectLight)             | Directional light |
+| [PointLight](/apis/core/#PointLight)               | Point light      |
+| [SpotLight](/apis/core/#SpotLight)                 | Spotlight        |
+| [ParticleRenderer](/apis/core/#ParticleRenderer)   | Particle system  |
+| [BoxCollider](/apis/core/#BoxCollider)             | Box collider     |
+| [SphereCollider](/apis/core/#SphereCollider)       | Sphere collider  |
+| [PlaneCollider](/apis/core/#PlaneCollider)         | Plane collider   |
+| [Script](/apis/core/#Script)                       | Script           |
+
+## Using the Editor
+
+After selecting an entity from the **[Hierarchy Panel](/docs/interface/hierarchy)** or the scene, the inspector will display all the components mounted on the currently selected node, with the component name displayed in the top left corner.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style={{zoom: "50%"}} />
+
+You can control whether it is enabled in the inspector.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style={{zoom: "50%"}} />
+
+If you don't need it, you can also delete it.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style={{zoom: "50%"}} />
+
+Or edit its various properties.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style={{zoom: "50%"}} />
+
+If it's an empty node, you can click the `Add Component` button to add new components to the current entity.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style={{zoom: "50%"}} />
+
+## Using Scripts
+
+### Adding a Component
+
+We use [addComponent(Component)](/apis/core/#Entity-addComponent) to add components. For example, to add a "parallel light" component ([DirectLight](/apis/core/#DirectLight)) to an `Entity`:
+
+```typescript
+const lightEntity = rootEntity.createChild("light");
+const directLight = lightEntity.addComponent(DirectLight);
+directLight.color = new Color(0.3, 0.3, 1);
+directLight.intensity = 1;
+```
+
+### Finding Components on an Entity
+
+When we need to get a component on an entity, the [getComponent](/apis/core/#Entity-getComponent) API will help you find the target component.
+
+```typescript
+const component = newEntity.getComponent(Animator);
+```
+
+Sometimes there may be multiple components of the same type, and the above method will only return the first found component. If you need to find all components, you can use [getComponents](/apis/core/#Entity-getComponents):
+
+```typescript
+const components = [];
+newEntity.getComponents(Animator, components);
+```
+
+In entities obtained from assets like glTF, we might not know which entity contains the target component. In this case, you can use [getComponentsIncludeChildren](/apis/core/#Entity-getComponentsIncludeChildren) to search.
+
+```typescript
+const components = [];
+newEntity.getComponentsIncludeChildren(Animator, components);
+```
+
+### Obtaining the Entity of a Component
+
+Continuing from the example of adding a component at the beginning, you can directly obtain the entity of a component:
+
+```typescript
+const entity = directLight.entity;
+```
+
+### State
+
+When you temporarily do not need a component, you can actively call the component's [enabled](/apis/core/#Component-enabled).
+
+```typescript
+directLight.enabled = false;
+```
diff --git a/docs/en/core/engine.md b/docs/en/core/engine.mdx
similarity index 100%
rename from docs/en/core/engine.md
rename to docs/en/core/engine.mdx
diff --git a/docs/en/core/math.md b/docs/en/core/math.mdx
similarity index 98%
rename from docs/en/core/math.md
rename to docs/en/core/math.mdx
index 8382e0951d..5bb183269b 100644
--- a/docs/en/core/math.md
+++ b/docs/en/core/math.mdx
@@ -255,7 +255,7 @@ color2.toLinear(linearColor);
 ## Plane
 We can define a plane using a vector (normal) and a distance. The normal represents the direction of the plane based on the coordinate origin, and the plane is perpendicular to the normal. The distance represents the distance of the plane from the coordinate origin along the normal direction. For example, a plane perpendicular to the Y-axis with a distance of 5 is illustrated as follows:
 
-![plane](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*1HMeRbPQv1kAAAAAAAAAAAAADjCHAQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*1HMeRbPQv1kAAAAAAAAAAAAADjCHAQ/original" style={{zoom: "30%"}} />
 
 The code to create it is as follows:
 ```typescript
@@ -394,7 +394,8 @@ const isIntersect4 = frustum.intersectsSphere(sphere2);
 ```
 ## Ray
 A ray represents a line that starts from a point (origin) and extends infinitely in a specified direction (direct), as shown below:
-![alt text](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*w2XVQL-K4UEAAAAAAAAAAAAADjCHAQ/original)
+
+<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*w2XVQL-K4UEAAAAAAAAAAAAADjCHAQ/original" style={{zoom: "50%"}} />
 
 The types of detection supported by rays are as follows:
 | Type | Description |
diff --git a/docs/en/core/prefab.md b/docs/en/core/prefab.md
deleted file mode 100644
index 2dfb188484..0000000000
--- a/docs/en/core/prefab.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-order: 10
-title: Prefab
-type: Core Concept
-label: Core
----
-
-## Introduction
-
-A prefab is an asset that can be seen as a template storing **[entity](/en/docs/core/entity)** data (including its child entities and components). Prefabs allow developers to create and update this template, then instantiate it into the scene as needed.
-
-If you want to reuse an entity configured in a specific way in multiple locations within a scene or across multiple scenes in a project, such as non-player characters (NPCs), props, or scenery, you should convert this game object into a prefab. This approach is better than simply copying and pasting game objects because prefabs can keep all copies synchronized.
-
-### Main features of prefabs:
-
-#### Reusability:
-The same prefab can be used in multiple scenes, and any modifications to the prefab can be automatically applied to all instances.
-
-#### Easy management:
-Prefabs can package complex entities (including their child entities and components) into a single asset, making them easier to manage and organize.
-
-#### Consistency:
-By using prefabs, you can ensure that objects used in different scenes or parts remain consistent.
-
-#### Increased efficiency:
-Extensive use of prefabs can reduce repetitive work, making the development process more efficient.
-
-## Editor Usage
-
-### Creating a Prefab
-
-There are two ways to create a prefab
-
-1. Right-click the entity to create a prefab using this entity as a template
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*1D-6TpXqDWcAAAAAAAAAAAAADsJ_AQ/original)
-2. Drag the entity from the **[Hierarchy Panel](/en/docs/interface/hierarchy)** to the **[Assets Panel](/en/docs/assets/interface)** to create a prefab using this entity as a template
-![create](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IXI9Q4ljEu8AAAAAAAAAAAAADsJ_AQ/original)
-
-### Updating a Prefab
-
-There are two ways to update a prefab
-
-#### Global Replacement
-
-Drag the entity from the **Hierarchy Panel** to the existing prefab asset in the **Assets Panel**, and the prefab asset will be updated with the new content. All instances generated from this prefab will also be updated with the latest content.
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*o0WAR77vPbIAAAAAAAAAAAAADsJ_AQ/original)
-
-The entity can also be an instance of this prefab
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*A0TpTZs7i3EAAAAAAAAAAAAADsJ_AQ/original)
-
-#### Apply Instance Modifications
-
-Instances of a prefab are generated based on the prefab template, and all instances will change with the template. However, each instance may have its own modifications: adding, deleting, or updating child entities and their components. To make the instance's modifications part of the template, you can do the following:
-
-1. Add child nodes
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mnm8SIA8MXIAAAAAAAAAAAAADsJ_AQ/original)
-
-2. Delete child nodes
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*AN5YQpYSoNsAAAAAAAAAAAAADsJ_AQ/original)
-
-3. Modify child nodes
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*CoZKT4O9mzMAAAAAAAAAAAAADsJ_AQ/original)
-
-4. Add components
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*XFz3TrsJjBoAAAAAAAAAAAAADsJ_AQ/original)
-
-5. Update components
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mM2dS70ZR7cAAAAAAAAAAAAADsJ_AQ/original)
-
-6. Delete components
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*WC8ZTIv5MK4AAAAAAAAAAAAADsJ_AQ/original)
-
-### Unpack Prefab Instance
-
-If you want a prefab instance to disconnect from the prefab so that it does not change with the prefab, you can unpack the prefab instance
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*vtpERpaqb_AAAAAAAAAAAAAADsJ_AQ/original)
-
-### Delete Prefab
-
-A prefab is an asset, and the deletion method is the same as other assets. It is worth noting that after deleting the prefab, there are two ways to handle the prefab instances:
-
-1. All prefab instances are deleted
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*EJEGSZMi7ZAAAAAAAAAAAAAADsJ_AQ/original)
-2. All prefab instances are unpacked
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*54i3QYBUsaQAAAAAAAAAAAAADsJ_AQ/original)
-
-
-## Script Usage
-
-### Load Prefab
-The engine object for the prefab asset is [PrefabResource](/apis/loader/#PrefabResource}).
-After loading (see [Asset Loading](/en/docs/assets/load)), you can instantiate the prefab using the [instantiate](/apis/loader/#PrefabResource-instantiate}) method.
-
-```typescript
-engine.resourceManager
-  .load({ url: "Prefab's URL", type: AssetType.Prefab })
-  .then((prefab: PrefabResource) => {
-    const prefabInstanceEntity = prefab.instantiate();
-    scene.addRootEntity(prefabInstanceEntity);
-  });
-
-```
diff --git a/docs/en/core/prefab.mdx b/docs/en/core/prefab.mdx
new file mode 100644
index 0000000000..d3bb1bec72
--- /dev/null
+++ b/docs/en/core/prefab.mdx
@@ -0,0 +1,98 @@
+---
+order: 10
+title: Prefab
+type: Core Concept
+label: Core
+---
+
+## Introduction
+
+Prefabs are assets that can be considered as templates storing **[entities](/docs/core/entity)** (including their child entities and components) data. Prefabs allow developers to create and update this template, which can then be instantiated into the scene as needed.
+
+If you want to reuse entities configured in a specific way across multiple locations in a scene or multiple scenes in a project, such as non-player characters (NPCs), props, or landscapes, you should convert this game object into a prefab. This approach is better than simply copying and pasting game objects because prefabs can keep all copies synchronized.
+
+### Main Features of Prefabs:
+
+#### Reusability:
+The same prefab can be used in multiple scenes, and any modifications to the prefab can be automatically applied to all instances.
+
+#### Easy Management:
+Prefabs can package complex entities (including their child entities and components) into a single asset, making them easy to manage and organize.
+
+#### Consistency:
+By using prefabs, you can ensure that objects used in different scenes or different parts maintain consistency.
+
+#### Increased Efficiency:
+Extensive use of prefabs can reduce repetitive work, making the development process more efficient.
+
+## Editor Usage
+
+### Creating a Prefab
+
+There are two ways to create a prefab:
+
+1. Right-click an entity to create a prefab using this entity as a template.
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*1D-6TpXqDWcAAAAAAAAAAAAADsJ_AQ/original" />
+2. Drag the entity from the **[Hierarchy Panel](/docs/interface/hierarchy)** to the **[Asset Panel](/docs/assets/interface)** to create a prefab using this entity as a template.
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IXI9Q4ljEu8AAAAAAAAAAAAADsJ_AQ/original" />
+
+### Updating a Prefab
+
+There are two ways to update a prefab:
+
+#### Global Replacement
+
+Drag the entity from the **Hierarchy Panel** onto an existing prefab asset in the **Asset Panel**. The prefab asset will be updated with the new content, and all instances created from this prefab will also be updated with the latest content.
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*o0WAR77vPbIAAAAAAAAAAAAADsJ_AQ/original" />
+
+The entity can also be an instance of this prefab.
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*A0TpTZs7i3EAAAAAAAAAAAAADsJ_AQ/original" />
+
+#### Apply Instance Modifications
+
+Instances of a prefab are generated based on the prefab template. All instances will change as the template changes, but each instance may have its own modifications: addition, deletion, or updates of child entities and components. To make the modifications of an instance part of the template, you can do the following:
+
+1. Add child nodes
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mnm8SIA8MXIAAAAAAAAAAAAADsJ_AQ/original" />
+
+2. Delete child nodes
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*AN5YQpYSoNsAAAAAAAAAAAAADsJ_AQ/original" />
+
+3. Modify child nodes
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*CoZKT4O9mzMAAAAAAAAAAAAADsJ_AQ/original" />
+
+4. Add components
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*XFz3TrsJjBoAAAAAAAAAAAAADsJ_AQ/original" />
+
+5. Update components
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mM2dS70ZR7cAAAAAAAAAAAAADsJ_AQ/original" />
+
+6. Delete components
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*WC8ZTIv5MK4AAAAAAAAAAAAADsJ_AQ/original" />
+
+### Unlink Prefab Instance
+
+If you want a prefab instance to disconnect from the prefab so that it no longer changes with the prefab, you can unlink the prefab instance.
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*vtpERpaqb_AAAAAAAAAAAAAADsJ_AQ/original" />
+
+### Deleting a Prefab
+
+A prefab is an asset, and it can be deleted just like other assets. Note that when a prefab is deleted, there are two ways to handle its instances:
+
+1. Delete all prefab instances
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*EJEGSZMi7ZAAAAAAAAAAAAAADsJ_AQ/original" />
+2. Unlink all prefab instances
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*54i3QYBUsaQAAAAAAAAAAAAADsJ_AQ/original" />
+
+## Script Usage
+
+### Loading a Prefab
+The engine object of a prefab asset is [PrefabResource](/apis/loader/#PrefabResource}). After loading a prefab ([Asset Loading](/docs/assets/load)), you can instantiate it using the [instantiate](/apis/loader/#PrefabResource-instantiate}) method.
+
+```typescript
+engine.resourceManager
+  .load({ url: "Prefab's URL", type: AssetType.Prefab })
+  .then((prefab: PrefabResource) => {
+    const prefabInstanceEntity = prefab.instantiate();
+    scene.addRootEntity(prefabInstanceEntity);
+  });
\ No newline at end of file
diff --git a/docs/en/core/scene.mdx b/docs/en/core/scene.mdx
index 3e36997fae..2ccc326c17 100644
--- a/docs/en/core/scene.mdx
+++ b/docs/en/core/scene.mdx
@@ -5,6 +5,8 @@ type: Core Concept
 label: Core
 ---
 
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/cbcc9725-811d-4203-a65d-b4a430083db3/image-20250124154359477.png" />
+
 Scene, as a scene unit, can facilitate entity tree management, especially for large game scenes. For example: **scene1** and **scene2** as two different scenes can independently manage their own **Entity** trees. Therefore, the lighting components, rendering components, and physical components under the scenes are also isolated from each other and do not affect each other. We can render one or more Scenes simultaneously, or dynamically switch the current Scene according to project logic at specific times.
 
 Structurally, each Engine can contain one or more active scenes (currently the editor does not support multiple). Each Scene can have multiple root entities.
@@ -17,10 +19,6 @@ Right-click in the **[Assets Panel](/en/docs/assets/interface)** (or the + sign
 
 <Image src="https://gw.alipayobjects.com/zos/OasisHub/eef870a7-2630-4f74-8c0e-478696a553b0/2024-03-19%25252018.04.02.gif" />
 
-### Properties Panel
-
-<Image src="https://gw.alipayobjects.com/zos/OasisHub/cbcc9725-811d-4203-a65d-b4a430083db3/image-20250124154359477.png" />
-
 ### Ambient Light
 
 For details, please refer to the [Ambient Light Tutorial](/en/docs/graphics/light/ambient/) and [Baking Tutorial](/en/docs/graphics/light/bake/).
diff --git a/docs/en/core/space.md b/docs/en/core/space.md
deleted file mode 100644
index 793f45d665..0000000000
--- a/docs/en/core/space.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-order: 6
-title: Coordinate System
-type: Core
-label: Core
----
-
-The coordinate system plays a very important role in the rendering engine, ensuring the accuracy of rendering results and interactions. By reading this document, you can understand most of the coordinate systems involved in Galacean. It is important to note that the definitions of various spaces differ among different rendering engines. This article only discusses the space standards in Galacean.
-
-This article will horizontally compare various coordinate spaces according to the `definition of space` and `types of coordinate systems`. The `types of coordinate systems` specifically refer to the `left-handed coordinate system` and the `right-handed coordinate system`, as shown in the figure below:
-
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*YBAmSamxy_0AAAAAAAAAAAAADleLAQ/original" width="50%" height="50%">
-
-Defining as a `left-handed coordinate system` or `right-handed coordinate system` will affect the direction of `forward` and the direction of rotation (clockwise or counterclockwise). For the definition of direction, you can imagine aligning your right hand with `+X` and the top of your head with `+Y`. The direction your face is facing is `forward`. You can simply compare the differences between Galacean and Unity:
-
-- Unity's local coordinates and world coordinate system are both `left-handed coordinate systems`. The pose transformation rotates in a clockwise direction, and the corresponding `forward` direction is `+Z`. Therefore, the camera's direction (viewing direction) is `+Z`.
-
-- Galacean's local coordinates and world coordinate system are both `right-handed coordinate systems`. The pose transformation rotates in a counterclockwise direction, and the corresponding `forward` direction is `-Z`. Therefore, the camera's direction (viewing direction) is `-Z`.
-
-## Local Space
-
-Local space is relative, using the object's own position as the reference coordinate system. Therefore, it is usually described as: "a point in the local space of node A". The local space is a `right-handed coordinate system`. The `Transform` component will automatically calculate the position of each point in the world space according to the following formula.
-
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*4ZLrSLEJPigAAAAAAAAAAAAADleLAQ/original" width="100%" height="100%">
-
-## World Space
-
-World space is absolute. The root node is placed in `world space`, and its child nodes inherit its spatial relationship. Like `local space`, `world space` is also a `right-handed coordinate system`. When two nodes are not in the same `local space`, they can be converted to world space to compare their relative positions.
-
-## Editor Usage
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style="zoom:50%;" />
-
-Determine the posture of the gizmo in the scene
-
-| Icon                                                                                                                              | Option       | Content                                              |
-| :-------------------------------------------------------------------------------------------------------------------------------- | :----------- | :--------------------------------------------------- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*of8ATKP_4u0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `Local Space` | Keep the Gizmo's rotation relative to the selected entity |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*Okm5S64_LqEAAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `Global Space` | Fix the Gizmo to the world space direction, consistent with the grid direction in the scene |
-
-## View Space
-
-`View space` is the local space of the camera. Taking a perspective camera as an example:
-
-<img src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ" width="50%" height="50%">
-
-## Screen Space
-
-The definition of screen space is consistent with front-end specifications. It is a two-dimensional coordinate system with the origin at the top-left corner of the canvas. The value range within this space is consistent with the dimensions of the canvas. It is often used in interactions and screen space transformations.
-
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*qG0eTrkP4MUAAAAAAAAAAAAADleLAQ/original" width="50%" height="50%">
-
-## Viewport Space
-
-The definition of viewport space is consistent with front-end specifications. By setting the camera's viewport, you can control the target area for rendering.
-
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZxwVQYgXLooAAAAAAAAAAAAADleLAQ/original" width="50%" height="50%">
-
-## 2D Sprites
-
-When rendering sprites or other 2D elements such as masks, the default is to place the plane on the XoY plane in the local coordinate system:
-
-<img src="https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_5fjTp0r2KEAAAAAAAAAAAAAARQnAQ" width="50%" height="50%">
-
diff --git a/docs/en/core/space.mdx b/docs/en/core/space.mdx
new file mode 100644
index 0000000000..38295c9786
--- /dev/null
+++ b/docs/en/core/space.mdx
@@ -0,0 +1,63 @@
+---
+order: 6
+title: Coordinate System
+type: Core
+label: Core
+---
+
+The coordinate system plays a crucial role in a rendering engine, ensuring the accuracy of rendering results and interactions. By reading this document, you can understand most of the coordinate systems involved in Galacean. It is important to note that the definitions of various spaces differ between rendering engines; this document discusses only the spatial standards within Galacean.
+
+This document will compare various coordinate spaces in terms of `definition of space` and `coordinate system type`. The `coordinate system type` specifically refers to the `left-handed coordinate system` and `right-handed coordinate system`, as shown in the image below:
+
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*YBAmSamxy_0AAAAAAAAAAAAADleLAQ/original"  />
+
+Defining a system as `left-handed` or `right-handed` affects the direction of `forward` and the direction of rotation (clockwise or counterclockwise). For the definition of direction, you can imagine overlapping your right hand with `+X`, and the top of your head with `+Y`. The direction your face points is `forward`. You can compare the differences between Galacean and Unity:
+
+- Unity's local and world coordinate systems are `left-handed`. Rotation during transformations is done clockwise, and the `forward` direction corresponds to `+Z`. Therefore, the camera's direction (viewing direction) is `+Z`.
+
+- Galacean's local and world coordinate systems are `right-handed`. Rotation during transformations is done counterclockwise, and the `forward` direction corresponds to `-Z`. Therefore, the camera's direction (viewing direction) is `-Z`.
+
+## Local Space
+
+Local space is relative, using the object's own position as the reference coordinate system. It is usually described as "a point in the local space of node A". Local space uses a `right-handed coordinate system`. The `Transform` component automatically calculates the position of each point in world space using the following formula.
+
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*4ZLrSLEJPigAAAAAAAAAAAAADleLAQ/original" width="100%" height="100%" />
+
+## World Space
+
+World space is absolute. The root node is placed in `world space`, and its child nodes inherit its spatial relationships. Like `local space`, `world space` also uses a `right-handed coordinate system`. When two nodes are not in the same `local space`, they can be converted to world space for comparison of relative positional relationships.
+
+## Editor Usage
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style={{zoom: "50%"}} />
+
+Determine the gizmo's orientation in the scene:
+
+| Icon                                                                                                                              | Option      | Description                                               |
+| :-------------------------------------------------------------------------------------------------------------------------------- | :---------- | :-------------------------------------------------------- |
+| <Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*of8ATKP_4u0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `Local Coordinates` | Keep the Gizmo's rotation relative to the selected entity |
+| <Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*Okm5S64_LqEAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `Global Coordinates` | Fix the Gizmo's orientation to align with the world space direction, consistent with the grid direction in the scene |
+
+## View Space
+
+`View space` is the local space of the camera. Taking a perspective camera as an example:
+
+<Image src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ"  />
+
+## Screen Space
+
+The definition of screen space is consistent with front-end specifications; it is a 2D coordinate system with the top-left corner of the canvas as the origin. The value range within the space is consistent with the dimensions of the canvas and is frequently used in interaction and screen space conversion.
+
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*qG0eTrkP4MUAAAAAAAAAAAAADleLAQ/original"  style={{zoom: "50%"}} />
+
+## Viewport Space
+
+The definition of viewport space is consistent with front-end specifications. By setting the camera's viewport, you can control the target area of rendering.
+
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZxwVQYgXLooAAAAAAAAAAAAADleLAQ/original"  style={{zoom: "50%"}} />
+
+## 2D Sprites
+
+When rendering sprites or masks and other 2D elements, they are by default placed on the XoY plane in the local coordinate system:
+
+<Image src="https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_5fjTp0r2KEAAAAAAAAAAAAAARQnAQ" style={{zoom: "50%"}} />
\ No newline at end of file
diff --git a/docs/en/core/time.md b/docs/en/core/time.mdx
similarity index 100%
rename from docs/en/core/time.md
rename to docs/en/core/time.mdx
diff --git a/docs/en/core/transform.md b/docs/en/core/transform.md
deleted file mode 100644
index 7a25aab0c2..0000000000
--- a/docs/en/core/transform.md
+++ /dev/null
@@ -1,131 +0,0 @@
----
-order: 7
-title: Transform
-type: Core
-label: Core
----
-
-## Basic Concepts
-
-`Transform` is a fundamental component that comes with `Entity`. Developers can use it to manage the position, rotation, and scale of `Entity` in both **local space** and **world space**.
-
-> Combining with Galacean's **[coordinate system](/en/docs/core/space)** will provide a deeper understanding.
-
-<playground src="transform-basic.ts"></playground>
-
-## Editor Usage
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style="zoom:50%;" />
-
-Change the visual transform component of the selected entity by directly using the mouse to manipulate the auxiliary icon axis.
-
-<h3 id = '1'> Move </h3>
-
-| Icon                                                                                                                              | Operation               | Shortcut |
-| :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :------- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*s6H2RIawrzgAAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `Switch to Gizmo Move Mode` | W        |
-
-Click the auxiliary axis to drag the selected entity in a single direction. Click the auxiliary plane to drag the selected entity in a single plane.
-
-<h3 id = '2'> Rotate </h3>
-
-| Icon                                                                                                                              | Operation               | Shortcut |
-| :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :------- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*lwdcRK3MAUIAAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `Switch to Gizmo Rotate Mode` | E        |
-
-Click and drag to change the rotation of the selected entity.
-Red represents rotation around the X axis, green represents rotation around the Y axis, and blue represents rotation around the Z axis.
-
-<h3 id = '3'> Scale </h3>
-
-| Icon                                                                                                                              | Operation               | Shortcut |
-| :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :------- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*r7RiRpAiJm0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `Switch to Gizmo Scale Mode` | R        |
-
-点击中心立方体，在所有轴上均匀的缩放选中实体。点击辅助轴，在单个方向缩放选中实体。
-
-通过 **[检查器面板](/en/docs/interface/inspector)** 可以为节点设置更精确的位置、旋转和缩放信息。
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Y0qPTptpIBoAAAAAAAAAAAAADhuCAQ/original" alt="image.png"  />
-
-## 脚本使用
-
-```typescript
-// 创建节点
-const scene = engine.sceneManager.activeScene;
-const root = scene.createRootEntity("root");
-const cubeEntity = root.createChild("cube");
-
-// entity 在创建后会默认自带变换组件
-// 通过变换组件能够对实体进行几何变换
-
-// 修改节点位移，旋转，缩放
-transform.position = new Vector3();
-// 也可以 transform.setPosition(0, 0, 0);
-
-transform.rotation = new Vector3(90, 0, 0);
-// 也可以 transform.setRotation(90, 0, 0);
-
-// 也可以通过实体的属性获取到 transform 组件
-cubeEntity.transform.scale = new Vector3(2, 1, 1);
-// 也可以 cubeEntity.transform.setScale(2, 1, 1);
-
-// 局部位移 cube 实体
-cubeEntity.transform.translate(new Vector3(10, 0, 0), true);
-
-// 局部旋转 cube 实体
-cubeEntity.transform.rotate(new Vector3(45, 0, 0), true);
-```
-
-## 组件属性
-
-| 属性名称                                                                | 属性释义                                                                                                                 |
-| :---------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- |
-| [position](/apis/core/#Transform-position)                               | 局部位移                                                                                                                 |
-| [rotation](/apis/core/#Transform-rotation)                               | 局部旋转 - 欧拉角                                                                                                        |
-| [rotationQuaternion](/apis/core/#Transform-rotationquaternion)           | 局部旋转 - 四元数                                                                                                        |
-| [scale](/apis/core/#Transform-scale)                                     | 局部缩放                                                                                                                 |
-| [worldPosition](/apis/core/#Transform-worldPosition)                     | 世界位移                                                                                                                 |
-| [worldRotation](/apis/core/#Transform-worldRotation)                     | 世界旋转 - 欧拉角                                                                                                        |
-| [worldRotationQuaternion](/apis/core/#Transform-worldRotationQuaternion) | 世界旋转 - 四元数                                                                                                        |
-| [lossyWorldScale](/apis/core/#Transform-lossyWorldScale)                 | 世界有损缩放 - 当父节点有缩放，子节点有旋转时，缩放会倾斜，无法使用 Vector3 正确表示,必须使用 Matrix3x3 矩阵才能正确表示 |
-| [localMatrix](/apis/core/#Transform-localMatrix)                         | 局部矩阵                                                                                                                 |
-| [worldMatrix](/apis/core/#Transform-worldMatrix)                         | 世界矩阵                                                                                                                 |
-| [worldForward](/apis/core/#Transform-worldMatrix)                        | forward 向量（世界空间中的单位矩阵）                                                                                     |
-| [worldRight](/apis/core/#Transform-worldMatrix)                          | right 向量（世界空间中的单位矩阵）                                                                                       |
-| [worldUp](/apis/core/#Transform-worldMatrix)                             | up 向量（世界空间中的单位矩阵）                                                                                          |
-
-## Component Methods
-
-| Method Name                                                              | Method Description                     |
-| ----------------------------------------------------------------------- | -------------------------------------- |
-| [getWorldUp](/apis/core/#Transform-getWorldUp)                        | Get the world matrix up vector         |
-| [getWorldRight](/apis/core/#Transform-getWorldRight)                  | Get the world matrix right vector      |
-| [getWorldForward](/apis/core/#Transform-getWorldForward)              | Get the world matrix forward vector    |
-| [lookAt](/apis/core/#Transform-lookAt)                                | Rotate and ensure the world forward vector points to the target world position |
-| [registerWorldChangeFlag](/apis/core/#Transform-registerWorldChangeFlag) | Register world transformation change flag |
-| [rotate](/apis/core/#Transform-rotate)                                | Rotate according to the specified Euler angles |
-| [rotateByAxis](/apis/core/#Transform-rotateByAxis)                    | Rotate around the specified axis by the specified angle |
-| [translate](/apis/core/#Transform-translate)                          | Translate according to the specified direction and distance |
-
-### The Role of `registerWorldChangeFlag`
-
-The `transform` component internally uses dirty flags for a lot of computational optimizations. Since the `worldMatrix` property of `transform` is also optimized using dirty flags, if external components need to monitor whether the current `transform`'s `worldMatrix` has changed, they need to get the status of its dirty flag. The `transform` component provides the `registerWorldChangeFlag` method: this method returns an update flag that triggers a change when the current `transform`'s `worldMatrix` is modified. For specific usage, refer to the camera component:
-
-```typescript
-class Camera {
-  onAwake() {
-    this._transform = this.entity.transform;
-    // 注册更新标记
-    this._isViewMatrixDirty = this._transform.registerWorldChangeFlag();
-  }
-  get viewMatrix() {
-    // 当标记更新时，根据 worldMatrix 得到viewMatrix～
-    if (this._isViewMatrixDirty.flag) {
-      this._isViewMatrixDirty.flag = false;
-      Matrix.invert(this._transform.worldMatrix, this._viewMatrix);
-    }
-    return this._viewMatrix;
-  }
-}
-```
diff --git a/docs/en/core/transform.mdx b/docs/en/core/transform.mdx
new file mode 100644
index 0000000000..c27dc8d900
--- /dev/null
+++ b/docs/en/core/transform.mdx
@@ -0,0 +1,130 @@
+---
+order: 7
+title: Transform
+type: Core
+label: Core
+---
+
+## Basic Concepts
+
+`Transform` is a basic component that comes with an `Entity`. Developers can use it to manage the position, rotation, and scale of an `Entity` in **local space** and **world space**.
+
+> For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**.
+
+<playground src="transform-basic.ts"></playground>
+
+## Editor Usage
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style={{zoom: "50%"}} />
+
+Change the visualization transform component of the selected entity by directly using the mouse to manipulate the helper gizmo axes.
+
+<h3 id='1'> Move </h3>
+
+| Icon                                                                                                                              | Action               | Shortcut |
+| :-------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :------- |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*s6H2RIawrzgAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `Switch to Move Mode` | W        |
+
+Click the helper axis to drag the selected entity in a single direction. Click the helper plane to drag the selected entity in a single plane.
+
+<h3 id='2'> Rotate </h3>
+
+| Icon                                                                                                                              | Action                | Shortcut |
+| :-------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------- |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*lwdcRK3MAUIAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `Switch to Rotate Mode` | E        |
+
+Click and drag to change the rotation of the selected entity. Red represents rotation around the X-axis, green represents rotation around the Y-axis, and blue represents rotation around the Z-axis.
+
+<h3 id='3'> Scale </h3>
+
+| Icon                                                                                                                              | Action               | Shortcut |
+| :-------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :------- |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*r7RiRpAiJm0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `Switch to Scale Mode` | R        |
+
+Click the center cube to uniformly scale the selected entity on all axes. Click the helper axis to scale the selected entity in a single direction.
+
+Through the **[Inspector Panel](/docs/interface/inspector)**, you can set more precise position, rotation, and scale information for nodes.
+
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Y0qPTptpIBoAAAAAAAAAAAAADhuCAQ/original" alt="image.png"  />
+
+## Script Usage
+
+```typescript
+// Create a node
+const scene = engine.sceneManager.activeScene;
+const root = scene.createRootEntity("root");
+const cubeEntity = root.createChild("cube");
+
+// An entity comes with a transform component by default upon creation
+// The transform component allows for geometric transformations on the entity
+
+// Modify node translation, rotation, and scale
+transform.position = new Vector3();
+// Alternatively, use transform.setPosition(0, 0, 0);
+
+transform.rotation = new Vector3(90, 0, 0);
+// Alternatively, use transform.setRotation(90, 0, 0);
+
+// You can also access the transform component via the entity's properties
+cubeEntity.transform.scale = new Vector3(2, 1, 1);
+// Alternatively, use cubeEntity.transform.setScale(2, 1, 1);
+
+// Translate the cube entity locally
+cubeEntity.transform.translate(new Vector3(10, 0, 0), true);
+
+// Rotate the cube entity locally
+cubeEntity.transform.rotate(new Vector3(45, 0, 0), true);
+```
+
+## Component Properties
+
+| Property Name                                                        | Description                                                                                                            |
+| :------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- |
+| [position](/apis/core/#Transform-position)                           | Local translation                                                                                                      |
+| [rotation](/apis/core/#Transform-rotation)                           | Local rotation - Euler angles                                                                                          |
+| [rotationQuaternion](/apis/core/#Transform-rotationquaternion)       | Local rotation - Quaternion                                                                                            |
+| [scale](/apis/core/#Transform-scale)                                 | Local scale                                                                                                            |
+| [worldPosition](/apis/core/#Transform-worldPosition)                 | World translation                                                                                                      |
+| [worldRotation](/apis/core/#Transform-worldRotation)                 | World rotation - Euler angles                                                                                          |
+| [worldRotationQuaternion](/apis/core/#Transform-worldRotationQuaternion) | World rotation - Quaternion                                                                                       |
+| [lossyWorldScale](/apis/core/#Transform-lossyWorldScale)             | World lossy scale - When the parent node scales and the child node rotates, the scale becomes skewed and cannot be accurately represented by Vector3, requiring a Matrix3x3 for correct representation |
+| [localMatrix](/apis/core/#Transform-localMatrix)                     | Local matrix                                                                                                           |
+| [worldMatrix](/apis/core/#Transform-worldMatrix)                     | World matrix                                                                                                           |
+| [worldForward](/apis/core/#Transform-worldMatrix)                    | Forward vector (unit vector in world space)                                                                            |
+| [worldRight](/apis/core/#Transform-worldMatrix)                      | Right vector (unit vector in world space)                                                                              |
+| [worldUp](/apis/core/#Transform-worldMatrix)                         | Up vector (unit vector in world space)                                                                                 |
+
+## Component Methods
+
+| Method Name                                                          | Description                             |
+| --------------------------------------------------------------------- | --------------------------------------- |
+| [getWorldUp](/apis/core/#Transform-getWorldUp)                       | Get the up vector from the world matrix |
+| [getWorldRight](/apis/core/#Transform-getWorldRight)                 | Get the right vector from the world matrix |
+| [getWorldForward](/apis/core/#Transform-getWorldForward)             | Get the forward vector from the world matrix |
+| [lookAt](/apis/core/#Transform-lookAt)                               | Rotate and ensure the world forward vector points to the target world position |
+| [registerWorldChangeFlag](/apis/core/#Transform-registerWorldChangeFlag) | Register a flag for world transformation changes |
+| [rotate](/apis/core/#Transform-rotate)                               | Rotate by a specified Euler angle       |
+| [rotateByAxis](/apis/core/#Transform-rotateByAxis)                   | Rotate by a specified angle around a specified axis |
+| [translate](/apis/core/#Transform-translate)                         | Translate by a specified direction and distance |
+
+### Purpose of `registerWorldChangeFlag`
+
+The `transform` component internally uses a dirty flag for a lot of computational optimization. Since the `worldMatrix` property of `transform` is also optimized with a dirty flag, if external components need to track whether the current `transform`'s `worldMatrix` has changed, the state of its dirty flag needs to be obtained. The `transform` component provides the `registerWorldChangeFlag` method: this method returns an update flag, which will be triggered when the `worldMatrix` of the current `transform` is modified. For specific usage, refer to the camera component:
+
+```typescript
+class Camera {
+  onAwake() {
+    this._transform = this.entity.transform;
+    // Register the update flag
+    this._isViewMatrixDirty = this._transform.registerWorldChangeFlag();
+  }
+  get viewMatrix() {
+    // When the flag is updated, derive the viewMatrix from the worldMatrix
+    if (this._isViewMatrixDirty.flag) {
+      this._isViewMatrixDirty.flag = false;
+      Matrix.invert(this._transform.worldMatrix, this._viewMatrix);
+    }
+    return this._viewMatrix;
+  }
+}
+```
\ No newline at end of file
diff --git a/docs/en/interface/inspector.md b/docs/en/interface/inspector.md
deleted file mode 100644
index 4baf36fcac..0000000000
--- a/docs/en/interface/inspector.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-order: 4
-title: Inspector Panel
-type: Basics
-group: Interface
-label: Basics/Interface
----
-
-The Inspector panel is located on the right side of the editor and will be the most frequently used panel during your use of the editor. Based on what you currently have selected, the Inspector panel will display the corresponding properties. You can use the Inspector panel to edit almost everything in the scene, such as scenes, entities, assets, etc.
-
-<img src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*NWWWTp5Le1cAAAAAAAAAAAAADqiTAQ/original" />
-
-## Types of Inspectors
-
-### Scene Inspector
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/6429cce7-8fe4-4c12-bd41-1911f53acc5d/image-20240709111320128.png" style="zoom:50%;" />
-
-The scene is at the top of the hierarchy tree. By clicking on the scene, you can see that the Inspector provides adjustments for scene-related effects such as ambient light, background, shadows, fog, etc. For detailed parameters on how to edit these elements, see [Scene](/en/docs/core/scene).
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/cfdc7905-7a4f-47bb-aa77-3f3866486cee/image-20240709141658903.png" style="zoom:50%;" />
-
-### Entity Inspector
-
-The Entity Inspector is the most commonly used inspector. Its properties include the current entity's component list. You can easily modify the properties of a component or conveniently add any built-in engine components and custom script components through the **Add Component** button. The Entity Inspector also includes basic information about the current entity, such as `Transform`, `Layer`, etc. For more details, see [Entity](/en/docs/core/entity).
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/bb8e0881-c716-4fc2-89c0-d7b4b01d668d/image-20240318175043180.png" style="zoom:50%;" />
-
-### Asset Inspector
-
-After selecting an asset in the asset panel, the Inspector will display the various properties of the current asset and provide a previewer to show the editing results in real-time. The following image is a screenshot of the Inspector for a material asset.
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/1ce2c623-bab4-45dd-a0ef-12ab2e00e9a9/image-20240318175341251.png" style="zoom:50%;" />
-
-## Using Inspector Controls
-
-Inspector controls can be divided into two main categories:
-
-- **Basic Value Types**: Number adjustment, color selection, property toggling, etc.
-- **Reference Types**: Usually resources, such as material selection, texture selection, etc.
-
-### Number Adjustment Controls
-
-The Inspector provides many entry points for number adjustments. Depending on the property, the range of adjustable numbers and the size of each adjustment will vary. The most typical example is adjusting the position, rotation, and scale values of the `Transform` component.
-
-You can quickly adjust the number size by dragging the slider on the right side of the input box. While dragging, holding down <Kbd>⌘</Kbd> (on Windows, <Kbd>Ctrl</Kbd>) allows for more precise number adjustments (precision is 1/10 of the original step).
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/b14cd188-22bf-4d78-b327-07a331f3c58b/image-20240318175444343.png" style="zoom:50%;" />
-
-Some adjustable properties appear in the form of sliders. You can drag the slider to quickly adjust the number size, such as the `Intensity` of a light. Similarly, while dragging the slider, holding down `⌘` (on Windows, `ctrl`) allows for more precise number adjustments.
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/440cd2ed-d1eb-474f-be7e-7a35cac8c954/image-20240318175518354.png" style="zoom:50%;" />
-
-Some number adjustment properties appear in the form of input boxes and buttons, such as the `Near Plane` of shadows. These properties often have more precise step sizes (e.g., 0.1, 1, 10). Clicking the buttons can directly increase or decrease the value by the step length.
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/14c8726c-1a91-4206-8e73-93d436109172/image-20240318175638055.png" style="zoom:50%;" />
-
-### Color Picker
-
-Some properties require color adjustments, such as lighting, scene background color, or the emissive color of a material. To adjust the color, you need to click the color button on the left to bring up the color picker. In the color picker, you can use HUE to select the color and adjust the color's transparency; you can also adjust the specific RGBA values in the input box. Click the <img src="https://gw.alipayobjects.com/zos/OasisHub/dc030a4b-8813-4ea2-acb0-549c04363b1d/image-20230926110451443.png" style="zoom:33%;" /> button to switch between HSLA, RGBA, and HEXA modes.
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/d340d0ea-a88a-4b82-b6c4-c69d3f4b8c4e/image-20240318175748734.png" style="zoom:50%;" />
-
-### Asset Picker
-
-Some properties require referencing the necessary assets. In this case, you can click the input box of the asset picker to bring up the asset picker. Different properties require different types of assets, but the asset picker is already configured with the appropriate filters, so you can select directly.
-
-The asset picker also provides a search box, which you can use to find the corresponding assets more precisely.
-
-<img src="https://gw.alipayobjects.com/zos/OasisHub/b8463854-4343-4dea-b1cf-713a7c617288/image-20240318175957149.png" style="zoom:50%;" />
diff --git a/docs/en/interface/inspector.mdx b/docs/en/interface/inspector.mdx
new file mode 100644
index 0000000000..fb856a82e4
--- /dev/null
+++ b/docs/en/interface/inspector.mdx
@@ -0,0 +1,70 @@
+---
+order: 4
+title: Inspector Panel
+type: Basics
+group: Interface
+label: Basics/Interface
+---
+
+The Inspector panel is located on the right side of the editor, and it is likely to be the panel you use most frequently when working with the editor. Depending on what you currently have selected, the Inspector panel will display the corresponding properties. You can use the Inspector panel to edit almost everything in the scene, such as scenes, entities, assets, etc.
+
+<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*NWWWTp5Le1cAAAAAAAAAAAAADqiTAQ/original" />
+
+## Inspector Types
+
+### Scene Inspector
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/6429cce7-8fe4-4c12-bd41-1911f53acc5d/image-20240709111320128.png" style={{zoom:"50%"}} />
+
+The scene is located at the top of the hierarchy tree. By clicking and selecting the scene, you can see that the Inspector provides adjustments for scene-related effects such as ambient light, background, shadows, fog, etc. For detailed parameters on how to edit these elements, please refer to [Scenes](/docs/core/scene).
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/cfdc7905-7a4f-47bb-aa77-3f3866486cee/image-20240709141658903.png" style={{zoom:"50%"}} />
+
+### Entity Inspector
+
+The Entity Inspector is the most commonly used inspector. Its properties include the component list of the current entity. You can easily modify the properties of a component or add any built-in engine component and custom script component via the **Add Component** button. The Entity Inspector also includes the basic information of the current entity, such as `Transform`, `Layer`, etc. See [Entities](/docs/core/entity) for more details.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/bb8e0881-c716-4fc2-89c0-d7b4b01d668d/image-20240318175043180.png" style={{zoom:"50%"}} />
+
+### Asset Inspector
+
+After selecting an asset in the asset panel, the Inspector will display various properties of the current asset and provide a previewer to display the editing results in real time. Below is a screenshot of a material asset's inspector.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/1ce2c623-bab4-45dd-a0ef-12ab2e00e9a9/image-20240318175341251.png" style={{zoom:"50%"}} />
+
+## Using Inspector Controls
+
+Inspector controls can be divided into two main categories:
+
+- **Basic Value Types**: Number adjustment, color selection, attribute switching, etc.
+- **Reference Types**: Usually resources, such as material selection, texture selection, etc.
+
+### Number Adjustment Controls
+
+The Inspector provides many entry points for number adjustment. Depending on different attributes, the adjustable range of numbers and the size of each adjustment can vary. The most typical example is adjusting the position, rotation, and scale property values of the `Transform` component.
+
+You can quickly adjust the size of a number by dragging the slider on the right side of the input box. While dragging, holding down <Kbd>⌘</Kbd> (or <Kbd>Ctrl</Kbd> on Windows) allows for more precise adjustments (precision is 1/10 of the original step).
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/b14cd188-22bf-4d78-b327-07a331f3c58b/image-20240318175444343.png" style={{zoom:"50%"}} />
+
+Some adjustable properties appear as sliders. You can drag the slider to quickly adjust the size of a number, such as the `Intensity` of a light. Similarly, holding `⌘` (or `Ctrl` on Windows) while dragging the slider allows for more precise adjustments.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/440cd2ed-d1eb-474f-be7e-7a35cac8c954/image-20240318175518354.png" style={{zoom:"50%"}} />
+
+Other number adjustment properties appear as input boxes and buttons, such as the `Near Plane` of shadows. These properties often have more precise step sizes (e.g., 0.1, 1, 10). Clicking the button can increase or decrease the value directly by the step length.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/14c8726c-1a91-4206-8e73-93d436109172/image-20240318175638055.png" style={{zoom:"50%"}} />
+
+### Color Selection Controls
+
+Some properties require color adjustments, such as lighting, scene background color, or material emissive color. To adjust the color, you need to click the color button on the left to bring up the color picker. In the color picker, you can use HUE to select a color and adjust the transparency; you can also adjust the specific RGBA values of the color in the input box. Clicking the <img src="https://gw.alipayobjects.com/zos/OasisHub/dc030a4b-8813-4ea2-acb0-549c04363b1d/image-20230926110451443.png" /> button allows you to switch between HSLA, RGBA, and HEXA modes.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/d340d0ea-a88a-4b82-b6c4-c69d3f4b8c4e/image-20240318175748734.png" style={{zoom:"50%"}} />
+
+### Asset Selection Controls
+
+Some properties need to reference required assets. In such cases, you can click the input box of the asset selector to bring up the asset selector. Different attributes require different types of assets, but the asset selector is already pre-configured with appropriate filters, so you can select directly.
+
+The asset selector also provides a search box, which you can use to find the corresponding asset more precisely.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/b8463854-4343-4dea-b1cf-713a7c617288/image-20240318175957149.png" style={{zoom:"50%"}} />
\ No newline at end of file
diff --git a/docs/en/interface/shortcut.md b/docs/en/interface/shortcut.mdx
similarity index 66%
rename from docs/en/interface/shortcut.md
rename to docs/en/interface/shortcut.mdx
index fb7f5ea53a..cf91db0bab 100644
--- a/docs/en/interface/shortcut.md
+++ b/docs/en/interface/shortcut.mdx
@@ -8,5 +8,5 @@ label: Basics/Interface
 
 Shortcuts help improve the efficiency of editing scenes. Users can find the viewport control methods for the mouse (or touchpad) and keyboard, as well as global and panel-specific shortcuts, in the main menu under `Shortcuts`.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*OKsvTZ6s2eoAAAAAAAAAAAAADhuCAQ/original" alt="image-20230925164702582" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*OKsvTZ6s2eoAAAAAAAAAAAAADhuCAQ/original" alt="image-20230925164702582" />
 
diff --git a/docs/en/interface/template.md b/docs/en/interface/template.mdx
similarity index 72%
rename from docs/en/interface/template.md
rename to docs/en/interface/template.mdx
index 3388f33af9..9d04c73b13 100644
--- a/docs/en/interface/template.md
+++ b/docs/en/interface/template.mdx
@@ -8,5 +8,6 @@ label: Basics/Interface
 
 Business templates are currently divided into categories such as animation, special effects, 2D, 3D, XR, and digital humans. By clicking on a template, you can view project details, preview the project, and replicate the project locally.
 
- <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*9XsCSopng4QAAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/e62b94fb-8ac6-4f79-a2f7-9844c6198c7f/image-20250124155639704.png" />
+
 
diff --git a/docs/en/interface/viewport.md b/docs/en/interface/viewport.md
deleted file mode 100644
index 15253091e5..0000000000
--- a/docs/en/interface/viewport.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-order: 6
-title: Viewport
-type: Basics
-group: Interface
-label: Basics/Interface
----
-
-## Introduction
-
-The viewport window is an interactive interface used to select, position, and change various types of entities and components in the current scene.
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*So6vR6JM9U0AAAAAAAAAAAAADtKFAQ/original" alt="drag5" style="zoom:50%;" />
-
-## Browsing the Scene
-
-There are two ways to browse the scene: standard mode and flight mode. Standard mode rotates around the center viewpoint, while flight mode is suitable for browsing large scenes, where the scene camera moves forward, backward, left, right, up, and down in three-dimensional space.
-
-| Mode          | Operation       | Shortcut Key                                                           |
-| :------------ | :-------------- | ---------------------------------------------------------------------- |
-| **Standard Mode** | Orbit         | `alt` + left mouse button                                              |
-|                | Pan            | `alt` + `command` + left mouse button, or press the mouse wheel         |
-|                | Zoom           | `alt` + `control` + left mouse button, or scroll the mouse wheel, or swipe with two fingers on the touchpad |
-| **Flight Mode** | Look around    | `alt` + right mouse button                                             |
-|                | Move forward   | Up arrow key, or right mouse button + `W`                               |
-|                | Move backward  | Down arrow key, or right mouse button + `S`                             |
-|                | Move left      | Left arrow key, or right mouse button + `A`                             |
-|                | Move right     | Right arrow key, or right mouse button + `D`                            |
-|                | Move up        | Right mouse button + `E`                                                |
-|                | Move down      | Right mouse button + `Q`                                                |
-|                | Change flight speed | Right mouse button + mouse wheel                                      |
-
-## Toolbar
-
-The toolbar is located at the top of the viewport window. Hovering the mouse over each item will display its shortcut key or description.
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style="zoom:50%;" />
-
-| Icon | Name | Description | Shortcut Key |
-| --- | --- | --- | --- |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" alt="image-20240131175906508" style="zoom:50%;" /> | Drag | Drag the view |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" alt="image-20240131180117064" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" alt="image-20240131180217044" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" alt="image-20240131180256738" style="zoom:50%;" /> | Move<br />Rotate<br />Scale | Transform the selected entity | `W` <br /> `E` <br />`R` |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" alt="image-20240131180403373" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" alt="image-20240131180513384" style="zoom:50%;" /> | Center Pivot/Hub Pivot | Switch the pivot of the selected entity |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.png" alt="image-20240131180709163" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" alt="image-20240131180731465" style="zoom:50%;" /> | Local Coordinates/World Coordinates | Switch the coordinates of the selected entity |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" alt="image-20240131181105676" style="zoom:50%;" /> | Focus | Focus the scene camera on the selected entity | `F` |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" alt="image-20240131181429677" style="zoom:50%;" /> | Scene Camera | The scene camera menu contains options for configuring the scene camera, mainly used to solve the problem of objects not being visible when the clipping plane is too far or too close while building the scene. These adjustments will not affect the settings of entities with camera components in the scene. |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" alt="image-20240131181144755" style="zoom:50%;" /> | Settings | The settings menu contains options for adjusting auxiliary displays in the view, including grids, auxiliary icons (graphics associated with specific components in the scene, including cameras, directional lights, point lights, spotlights), and auxiliary wireframes |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" alt="image-20240131181242445" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" alt="image-20240131181524219" style="zoom:50%;" /> | Scene Camera Type | Switch between perspective/orthographic camera |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" alt="image-20240131181459432" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" alt="image-20240131181607999" style="zoom:50%;" /> | Mode | Convenient for switching between 2D/3D scene modes with a click. In 2D mode, navigation components, orthographic/perspective switching are disabled, and orbiting in navigation is no longer effective. |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" alt="image-20240131182235406" style="zoom:50%;" /> | Fullscreen/Restore | Maximize the viewport window, minimize the hierarchy, assets, and inspector |  |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" /> | Play | Play all particles and animations in the scene |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" alt="image-20240131182303867" style="zoom:50%;" /> | Screenshot | Take a snapshot of the current scene. Only user-created entities in the scene are displayed; a series of auxiliary display tools such as icons, grids, and gizmos will not be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage. |
-
-### Auxiliary Elements Settings Interface
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*KnrvSLcYSkcAAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" />
-
-| Attribute | Content |
-| --- | --- |
-| Grid | Whether the grid in the view is displayed |
-| 3D Icons | Whether auxiliary icons scale based on the distance between the component and the camera |
-| Navigation Gimzo | Used to display the current direction of the scene camera and can quickly modify the view and projection mode (orthographic/perspective) through mouse operations. When enabled, it will be displayed in the lower right corner of the screen.<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058" style="zoom:50%;" /> |
-| Outline | Whether to display the outline when an entity is selected. The outline color of the selected entity is orange, and the outline of child nodes is blue |
-| Camera | Display the selected camera component as a cone |
-| Light | Display light source components |
-| Static Collider | Display the shape of static colliders |
-| Dynamic Collider | Display the shape of dynamic colliders |
-| Emission Shape | Display the shape of particle emitters |
-
-### Scene Camera Settings Interface
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*TFE1ToVVVawAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131185805023" style="zoom:50%;" />
-
-| Attribute                     | Content                                                         | Default Value         |
-| :---------------------------- | :-------------------------------------------------------------- | :-------------------- |
-| Fov                           | The field of view of the scene camera                           | 60                    |
-| Dynamic Clipping              | Automatically calculate the near and far clipping planes of the scene camera relative to the selected entity and the scene camera position | Off                   |
-| Near Plane                    | Manually adjust the nearest point relative to the scene camera  | Enabled when dynamic clipping is unchecked |
-| Far Plane                     | Manually adjust the farthest point relative to the scene camera | Enabled when dynamic clipping is unchecked |
-| Speed                         | The movement speed of the camera in flight mode                 | 10                    |
-| Opaque Texture                | Enable opaque texture for the scene camera                      | Off                   |
-| HDR                           | Enable HDR for the scene camera                                 | Off                   |
-| Post Process                  | Enable post-processing for the scene camera                     | On                    |
-
-## Preview
-
-When an entity with a camera component is selected, a real-time preview of the camera will be displayed in the lower left corner of the view window. This helps users to adjust the camera and scene position in real-time. The preview window can be dragged, locked, and switched to different device aspect ratios.
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320" style="zoom:50%;" />
-
-
-| Attribute | Content                         |
-| :-------- | :------------------------------ |
-| Drag      | Freely drag the preview window   |
-| Position  | Position the camera in the scene |
-| Switch Ratio | Switch windows of different devices and ratios |
-| Lock      | Lock the camera preview window   |
-
-In the hierarchy tree, objects containing camera components can directly synchronize the relevant properties of the scene camera in the view, making it convenient to adjust the position and perspective.
-
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" />
-
diff --git a/docs/en/interface/viewport.mdx b/docs/en/interface/viewport.mdx
new file mode 100644
index 0000000000..3927d8b974
--- /dev/null
+++ b/docs/en/interface/viewport.mdx
@@ -0,0 +1,100 @@
+---
+order: 6
+title: Viewport
+type: Basics
+group: Interface
+label: Basics/Interface
+---
+
+## Introduction
+
+The view window is an interactive interface used for selecting, positioning, and changing various types of entities and components in the current scene.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/d033b1e2-f597-4bf5-ad82-1db3d8e09cd2/image-20250124161343255.png" />
+
+## Browsing the Scene
+
+There are two ways to browse the scene: standard mode and flying mode. Standard mode revolves around the central viewpoint, while flying mode is suitable for browsing large scenes, allowing the scene camera to move forward, backward, left, right, up, and down in 3D space.
+
+| Mode          | Action                | Shortcut Keys                                                      |
+| :------------ | :-------------------- | ------------------------------------------------------------------ |
+| **Standard**  | Orbit rotation        | `alt` + Left Mouse Button                                          |
+|               | Panning               | `alt` + `command` + Left Mouse Button, or press the mouse wheel    |
+|               | Zooming               | `alt` + `control` + Left Mouse Button, or scroll mouse wheel, or swipe with two fingers on a trackpad |
+| **Flying**    | Look around camera    | `alt` + Right Mouse Button                                         |
+|               | Move forward          | Up Arrow or Right Mouse Button + `W`                               |
+|               | Move backward         | Down Arrow or Right Mouse Button + `S`                             |
+|               | Strafe left           | Left Arrow or Right Mouse Button + `A`                             |
+|               | Strafe right          | Right Arrow or Right Mouse Button + `D`                            |
+|               | Move up               | Right Mouse Button + `E`                                           |
+|               | Move down             | Right Mouse Button + `Q`                                           |
+|               | Change flying speed   | Right Mouse Button + Mouse Wheel                                   |
+
+## Toolbar
+
+The toolbar is located at the top of the view window. Hovering the mouse over each item will show the shortcut keys or description.
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style={{zoom:"50%"}} />
+
+| Icon | Name | Description | Shortcut |
+| --- | --- | --- | --- |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" style={{zoom:"50%"}} /> | Drag | Drag the screen |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" style={{zoom:"50%"}} /> | Move<br />Rotate<br />Scale | Transform the selected entity | `W` <br /> `E` <br />`R` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" style={{zoom:"50%"}} /> | Center Anchor/Hub Anchor | Switch the anchor point of the selected entity |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | Local/World Coordinates | Switch the coordinates of the selected entity |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" style={{zoom:"50%"}} /> | Focus | Focus the scene camera on the selected entity | `F` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" style={{zoom:"50%"}} /> | Scene Camera | The scene camera menu contains options for configuring the scene camera, mainly to solve issues where objects are not visible because the clipping plane is too far or too near. These adjustments do not affect settings of entities with camera components in the scene. |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" style={{zoom:"50%"}} /> | Settings | The settings menu contains options to adjust view auxiliary displays, including grids, auxiliary icons (graphics associated with specific components in the scene, including camera, direct light, point light, spotlight), and auxiliary wireframes. |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" style={{zoom:"50%"}} /> | Scene Camera Type | Switch between perspective/orthographic camera |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" style={{zoom:"50%"}} /> | Mode | Conveniently switch between 2D/3D scene modes. In 2D mode, navigation components, and perspective/orthographic toggle are disabled, and orbit rotation in navigation is no longer effective. |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" style={{zoom:"50%"}} /> | Fullscreen/Restore | Maximize the view window, minimize hierarchy, assets, inspector |  |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> | Play | Play all particles and animations in the scene |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" style={{zoom:"50%"}} /> | Screenshot | Take a snapshot of the current scene. Only user-created entities in the scene are shown, and a series of auxiliary tools like icons, grids, gizmo won't be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage. |
+
+### Auxiliary Element Settings Interface
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*KnrvSLcYSkcAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+
+| Property | Description |
+| --- | --- |
+| Grid | Whether the grid is displayed in the view |
+| 3D Icons | Whether auxiliary icons scale based on their distance from the camera |
+| Navigation Gizmo | Used to display the current direction of the scene camera and can be quickly modified by mouse operation to adjust the view and projection mode (orthographic/perspective). It will appear at the bottom right corner of the screen when open.<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058"/> |
+| Outline | Whether outlines are displayed when an entity is selected. The outline of the selected entity is orange, and child nodes are blue. |
+| Camera | Display the selected camera component as a cone |
+| Light | Display light source components |
+| Static Collider | Show static collider shapes |
+| Dynamic Collider | Show dynamic collider shapes |
+| Emission Shape | Show particle emitter shapes |
+
+### Scene Camera Settings Interface
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*TFE1ToVVVawAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+
+| Property                       | Description                                            | Default Value        |
+| :----------------------------- | :----------------------------------------------------- | :------------------- |
+| Fov                            | Field of view of the scene camera                      | 60                   |
+| Dynamic Clipping               | Automatically calculates near and far clipping planes relative to the selected entity and scene camera position | Off                  |
+| Near Plane                     | Manually adjust the nearest point relative to the scene camera | Enabled when dynamic clipping is unchecked |
+| Far Plane                      | Manually adjust the farthest point relative to the scene camera | Enabled when dynamic clipping is unchecked |
+| Speed                          | Movement speed of the camera in flying mode            | 10                   |
+| Opaque Texture                 | Enable opaque texture for the scene camera             | Off                  |
+| HDR                            | Enable HDR for the scene camera                        | Off                  |
+| Post Process                   | Enable post-processing for the scene camera            | On                   |
+
+## Preview
+
+When an entity with a camera component is selected, the real-time preview of that camera will be displayed at the bottom left of the view window. This helps users adjust the camera and scene position in real-time. The preview window can be dragged, locked, and switched between different device proportions.
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320"/>
+
+| Property     | Description                       |
+| :----------- | :-------------------------------- |
+| Drag         | Freely drag the preview window    |
+| Position     | Locate this camera in the scene   |
+| Switch Ratio | Switch between different device and ratio windows |
+| Lock         | Lock the camera preview window    |
+
+Objects containing camera components in the hierarchy tree can directly sync the scene camera's attributes, making position and view adjustments convenient.
+
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
\ No newline at end of file
diff --git a/docs/zh/core/canvas.md b/docs/zh/core/canvas.mdx
similarity index 100%
rename from docs/zh/core/canvas.md
rename to docs/zh/core/canvas.mdx
diff --git a/docs/zh/core/clone.md b/docs/zh/core/clone.mdx
similarity index 100%
rename from docs/zh/core/clone.md
rename to docs/zh/core/clone.mdx
diff --git a/docs/zh/core/component.md b/docs/zh/core/component.mdx
similarity index 72%
rename from docs/zh/core/component.md
rename to docs/zh/core/component.mdx
index 730e91dfd9..705564bebc 100644
--- a/docs/zh/core/component.md
+++ b/docs/zh/core/component.mdx
@@ -5,7 +5,7 @@ type: 核心
 label: Core
 ---
 
-在 Galacean 引擎中，[Entity](/apis/core/#Entity) 不具备渲染模型等实际的功能，这些功能是通过加载 [Component](/apis/core/#Component) 组件类来实现的。例如，如果想让一个 _Entity_ 变成一个相机，只需要在该 _Entity_ 上添加相机组件 [Camera](/apis/core/#Camera)。这种基于组件的功能扩展方式注重将程序按照功能独立封装，在使用的时候按照需要组合添加，非常有利于降低程序耦合度并提升代码复用率。
+[Entity](/apis/core/#Entity) 不具备渲染模型等实际的功能，这些功能是通过加载 [Component](/apis/core/#Component) 组件类来实现的。例如，如果想让一个 _Entity_ 变成一个相机，只需要在该 _Entity_ 上添加相机组件 [Camera](/apis/core/#Camera)。这种基于组件的功能扩展方式注重将程序按照功能独立封装，在使用的时候按照需要组合添加，非常有利于降低程序耦合度并提升代码复用率。
 
 常用组件：
 
@@ -28,23 +28,23 @@ label: Core
 
 从 **[层级面板](/docs/interface/hierarchy)** 或场景中选择一个实体后，检查器将显示出当前选中节点挂载的所有组件，组件名显示在左上角
 
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style={{zoom: "50%"}} />
 
 你可以在检查器中控制它是否 enabled
 
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style={{zoom: "50%"}} />
 
 如果不需要它也可以将它删除
 
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style={{zoom: "50%"}} />
 
 或者编辑它的各种属性
 
-<img src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style={{zoom: "50%"}} />
 
 如果是个空节点，你可以点击 `Add Component` 按钮来为当前实体添加新的组件。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style={{zoom: "50%"}} />
 
 ## 脚本使用
 
diff --git a/docs/zh/core/engine.md b/docs/zh/core/engine.mdx
similarity index 100%
rename from docs/zh/core/engine.md
rename to docs/zh/core/engine.mdx
diff --git a/docs/zh/core/math.md b/docs/zh/core/math.mdx
similarity index 98%
rename from docs/zh/core/math.md
rename to docs/zh/core/math.mdx
index 855418c8a4..1e588dc39d 100644
--- a/docs/zh/core/math.md
+++ b/docs/zh/core/math.mdx
@@ -256,8 +256,7 @@ color2.toLinear(linearColor);
 ## 平面
 我们可以通过一个向量(normal)和距离(distance)来确定一个平面，normal 表示平面基于坐标原点的方向，平面和 normal 垂直，distance 表示平面沿着 normal 方向距离坐标原点的距离。我们以垂直 Y 轴的平面，并且距离为 5 为例，图示如下：
 
-![plane](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*1HMeRbPQv1kAAAAAAAAAAAAADjCHAQ/original)
-
+<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*1HMeRbPQv1kAAAAAAAAAAAAADjCHAQ/original" style={{zoom: "30%"}} />
 
 代码创建方式如下：
 ```typescript
@@ -396,7 +395,8 @@ const isIntersect4 = frustum.intersectsSphere(sphere2);
 ```
 ## 射线
 射线表示从一个点（origin）出发，往指定方向（direct）发射的一个可以无限延伸的线，如下：
-![alt text](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*w2XVQL-K4UEAAAAAAAAAAAAADjCHAQ/original)
+
+<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*w2XVQL-K4UEAAAAAAAAAAAAADjCHAQ/original" style={{zoom: "50%"}} />
 
 射线支持的检测类型如下：
 | 类型 | 解释 |
diff --git a/docs/zh/core/prefab.md b/docs/zh/core/prefab.mdx
similarity index 68%
rename from docs/zh/core/prefab.md
rename to docs/zh/core/prefab.mdx
index 7a72397e43..0a4e436932 100644
--- a/docs/zh/core/prefab.md
+++ b/docs/zh/core/prefab.mdx
@@ -32,9 +32,9 @@ label: Core
 有两种方式可以创建预制体
 
 1. 右键实体即可创建以此实体作为模版的预制体
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*1D-6TpXqDWcAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*1D-6TpXqDWcAAAAAAAAAAAAADsJ_AQ/original" />
 2. 将实体从 **[层级面板](/docs/interface/hierarchy)** 拖到 **[资产面板](/docs/assets/interface)** 中即可创建以此实体作为模版的预制体
-![create](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IXI9Q4ljEu8AAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IXI9Q4ljEu8AAAAAAAAAAAAADsJ_AQ/original" />
 
 ### 更新预制体
 
@@ -43,46 +43,46 @@ label: Core
 #### 全局替换
 
 将实体从 **层级面板** 拖到 **资产面板** 中已有的预制体资产上，预制体资产将会更新为新内容，同时所有由此预制体产生的实例也会更新为最新内容。
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*o0WAR77vPbIAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*o0WAR77vPbIAAAAAAAAAAAAADsJ_AQ/original" />
 
 实体也可以是此预制体的实例
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*A0TpTZs7i3EAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*A0TpTZs7i3EAAAAAAAAAAAAADsJ_AQ/original" />
 
 #### 应用实例的修改
 
 预制体的实例是基于预制体模版生成的，所有的实例都会随着模版的更改而更改，但是每个实例可能会有自身的修改：子实体及其组件的添加，删除，更新。想要将实例自身的修改内容变为模版内容可以通过如下方式:
 
 1. 添加子节点
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mnm8SIA8MXIAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mnm8SIA8MXIAAAAAAAAAAAAADsJ_AQ/original" />
 
 2. 删除子节点
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*AN5YQpYSoNsAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*AN5YQpYSoNsAAAAAAAAAAAAADsJ_AQ/original" />
 
 3. 修改子节点
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*CoZKT4O9mzMAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*CoZKT4O9mzMAAAAAAAAAAAAADsJ_AQ/original" />
 
 4. 添加组件
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*XFz3TrsJjBoAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*XFz3TrsJjBoAAAAAAAAAAAAADsJ_AQ/original" />
 
 5. 更新组件
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mM2dS70ZR7cAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*mM2dS70ZR7cAAAAAAAAAAAAADsJ_AQ/original" />
 
 6. 删除组件
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*WC8ZTIv5MK4AAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*WC8ZTIv5MK4AAAAAAAAAAAAADsJ_AQ/original" />
 
 ### 解开预制体实例
 
 如果想让一个预制体实例与预制体断开联系，使其不随着预制体更改而更改，可以将预制体实例解开
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*vtpERpaqb_AAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*vtpERpaqb_AAAAAAAAAAAAAADsJ_AQ/original" />
 
 ### 删除预制体
 
 预制体是一个资产，删除的方式同其他资产一样。值得注意的是，删除预制体后预制体实例的处理方式有两种
 
 1. 预制体实例全部删除
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*EJEGSZMi7ZAAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*EJEGSZMi7ZAAAAAAAAAAAAAADsJ_AQ/original" />
 2. 预制体实例全部解开
-![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*54i3QYBUsaQAAAAAAAAAAAAADsJ_AQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*54i3QYBUsaQAAAAAAAAAAAAADsJ_AQ/original" />
 
 
 ## 脚本使用
diff --git a/docs/zh/core/scene.mdx b/docs/zh/core/scene.mdx
index 089b8a9650..6e901f9599 100644
--- a/docs/zh/core/scene.mdx
+++ b/docs/zh/core/scene.mdx
@@ -5,6 +5,8 @@ type: 核心概念
 label: Core
 ---
 
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/cbcc9725-811d-4203-a65d-b4a430083db3/image-20250124154359477.png" />
+
 Scene 作为场景单元，可以方便的进行实体树管理，尤其是大型游戏场景。如: **scene1** 和 **scene2** 作为两个不同的场景，可以各自独立管理其拥有的 **Entity** 树，因此场景下的光照组件、渲染组件和物理组件之间也互相隔离，互不影响。我们可以同时渲染一个或多个 Scene，也可以在特定时机下根据项目逻辑动态切换当前 Scene。
 
 从结构上每个 Engine 下可以包含一个和多个激活的场景（目前编辑器还不支持多个）。每个 Scene 可以有多个根实体。
@@ -17,10 +19,6 @@ Scene 作为场景单元，可以方便的进行实体树管理，尤其是大
 
 <Image src="https://gw.alipayobjects.com/zos/OasisHub/eef870a7-2630-4f74-8c0e-478696a553b0/2024-03-19%25252018.04.02.gif" />
 
-### 属性面板
-
-<Image src="https://gw.alipayobjects.com/zos/OasisHub/cbcc9725-811d-4203-a65d-b4a430083db3/image-20250124154359477.png" />
-
 ### 环境光
 
 详情请参照[环境光教程](/docs/graphics/light/ambient/) 和 [烘焙教程](/docs/graphics/light/bake/)。
diff --git a/docs/zh/core/space.md b/docs/zh/core/space.mdx
similarity index 68%
rename from docs/zh/core/space.md
rename to docs/zh/core/space.mdx
index 70d0cb5437..025dfc0f9f 100644
--- a/docs/zh/core/space.md
+++ b/docs/zh/core/space.mdx
@@ -9,7 +9,7 @@ label: Core
 
 本文会按照`空间的定义`，`坐标系类型`等方面来横向比较各个坐标空间，其中`坐标系类型`具体指`左手坐标系`与`右手坐标系`，如下图所示：
 
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*YBAmSamxy_0AAAAAAAAAAAAADleLAQ/original" width="50%" height="50%">
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*YBAmSamxy_0AAAAAAAAAAAAADleLAQ/original"  />
 
 定义为`左手坐标系`或`右手坐标系`会影响 `forward` 的朝向与旋转的方向（逆时针或顺时针），对于朝向的定义可以想象着将右手与 `+X` 重合，头顶方向与 `+Y` 重合，此时面部朝向的方向就是 `forward` ，可以简单对比 Galacean 与 Unity 的差异：
 
@@ -21,7 +21,7 @@ label: Core
 
 局部空间是相对的，它以物体的自身位置为参考坐标系的，因此描述的时候通常表示为：“ A 节点局部空间中的某个点”，局部空间是`右手坐标系`， `Transform` 组件会按照以下公式自动计算各个点在世界空间中的位置。
 
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*4ZLrSLEJPigAAAAAAAAAAAAADleLAQ/original" width="100%" height="100%">
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*4ZLrSLEJPigAAAAAAAAAAAAADleLAQ/original" width="100%" height="100%" />
 
 ## 世界空间
 
@@ -29,36 +29,36 @@ label: Core
 
 ## 编辑器使用
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style={{zoom: "50%"}} />
 
 确定 gizmo 在场景中姿态
 
 | 图标                                                                                                                              | 选项       | 内容                                              |
 | :-------------------------------------------------------------------------------------------------------------------------------- | :--------- | :------------------------------------------------ |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*of8ATKP_4u0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `本地坐标` | 保持 Gizmo 相对于选中实体的旋转                   |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*Okm5S64_LqEAAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `全局坐标` | 固定 Gizmo 与世界空间方向。即与场景中网格方向一致 |
+| <Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*of8ATKP_4u0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `本地坐标` | 保持 Gizmo 相对于选中实体的旋转                   |
+| <Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*Okm5S64_LqEAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `全局坐标` | 固定 Gizmo 与世界空间方向。即与场景中网格方向一致 |
 
 
 ## 观察空间
 
 `观察空间`就是相机的局部空间，以透视相机为例：
 
-<img src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ" width="50%" height="50%">
+<Image src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*isMHSpe21ZMAAAAAAAAAAAAAARQnAQ"  />
 
 ## 屏幕空间
 
 屏幕空间的定义与前端规范保持一致，是以画布的左上角为坐标原点的二维空间坐标系，空间内的取值范围与画布的尺寸保持一致，在交互，屏幕空间转换时经常使用。
 
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*qG0eTrkP4MUAAAAAAAAAAAAADleLAQ/original" width="50%" height="50%">
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*qG0eTrkP4MUAAAAAAAAAAAAADleLAQ/original"  style={{zoom: "50%"}} />
 
 ## 视口空间
 
 视口空间的定义与前端规范保持一致，通过设置相机的 viewport 可以控制渲染的目标区域，
 
-<img src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZxwVQYgXLooAAAAAAAAAAAAADleLAQ/original" width="50%" height="50%">
+<Image src="https://mdn.alipayobjects.com/huamei_jvf0dp/afts/img/A*ZxwVQYgXLooAAAAAAAAAAAAADleLAQ/original"  style={{zoom: "50%"}} />
 
 ## 2D 精灵
 
 渲染精灵或遮罩等 2D 元素时，默认在局部坐标系中的 XoY 平面上放置这个面片：
 
-<img src="https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_5fjTp0r2KEAAAAAAAAAAAAAARQnAQ" width="50%" height="50%">
+<Image src="https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_5fjTp0r2KEAAAAAAAAAAAAAARQnAQ" style={{zoom: "50%"}} />
diff --git a/docs/zh/core/time.md b/docs/zh/core/time.mdx
similarity index 100%
rename from docs/zh/core/time.md
rename to docs/zh/core/time.mdx
diff --git a/docs/zh/core/transform.md b/docs/zh/core/transform.mdx
similarity index 95%
rename from docs/zh/core/transform.md
rename to docs/zh/core/transform.mdx
index ac7c4e9186..0b0f605096 100644
--- a/docs/zh/core/transform.md
+++ b/docs/zh/core/transform.mdx
@@ -15,7 +15,7 @@ label: Core
 
 ## 编辑器使用
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style={{zoom: "50%"}} />
 
 更改选中实体的可视化变换组件，直接使用鼠标操纵辅助图标轴。
 
@@ -23,7 +23,7 @@ label: Core
 
 | 图标                                                                                                                              | 操作                    | 快捷键 |
 | :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :----- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*s6H2RIawrzgAAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `切换到 Gizmo 移动模式` | W      |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*s6H2RIawrzgAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `切换到 Gizmo 移动模式` | W      |
 
 点击辅助轴，可在单个方向内拖动选中实体。点击辅助平面，可在单个平面内拖动选中实体。
 
@@ -31,7 +31,7 @@ label: Core
 
 | 图标                                                                                                                              | 操作                    | 快捷键 |
 | :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :----- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*lwdcRK3MAUIAAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `切换到 Gizmo 选择模式` | E      |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*lwdcRK3MAUIAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `切换到 Gizmo 选择模式` | E      |
 
 点击并拖动以更改选中实体的旋转。
 红色代表绕 X 轴进行旋转，绿色代表绕 y 轴进行旋转，蓝色代表绕 z 轴进行旋转。
@@ -40,13 +40,13 @@ label: Core
 
 | 图标                                                                                                                              | 操作                    | 快捷键 |
 | :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :----- |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*r7RiRpAiJm0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24"> | `切换到 Gizmo 缩放模式` | R      |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*r7RiRpAiJm0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `切换到 Gizmo 缩放模式` | R      |
 
 点击中心立方体，在所有轴上均匀的缩放选中实体。点击辅助轴，在单个方向缩放选中实体。
 
 通过 **[检查器面板](/docs/interface/inspector)** 可以为节点设置更精确的位置、旋转和缩放信息。
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Y0qPTptpIBoAAAAAAAAAAAAADhuCAQ/original" alt="image.png"  />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Y0qPTptpIBoAAAAAAAAAAAAADhuCAQ/original" alt="image.png"  />
 
 ## 脚本使用
 
diff --git a/docs/zh/interface/inspector.md b/docs/zh/interface/inspector.mdx
similarity index 69%
rename from docs/zh/interface/inspector.md
rename to docs/zh/interface/inspector.mdx
index 7201f584fd..f1085e59e2 100644
--- a/docs/zh/interface/inspector.md
+++ b/docs/zh/interface/inspector.mdx
@@ -8,29 +8,29 @@ label: Basics/Interface
 
 检查器面板位于编辑器右侧，它会是你在使用编辑器的过程中最常用的面板。基于你当前选择所选择的东西，检查器面板会显示出相对应的属性。你可以使用检查器面板来编辑场景中几乎所有的事物，如场景、实体、资产等。
 
-<img src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*NWWWTp5Le1cAAAAAAAAAAAAADqiTAQ/original" />
+<Image src="https://mdn.alipayobjects.com/huamei_fvsq9p/afts/img/A*NWWWTp5Le1cAAAAAAAAAAAAADqiTAQ/original" />
 
 ## 检查器类型
 
 ### 场景检查器
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/6429cce7-8fe4-4c12-bd41-1911f53acc5d/image-20240709111320128.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/6429cce7-8fe4-4c12-bd41-1911f53acc5d/image-20240709111320128.png" style={{zoom:"50%"}} />
 
 场景位于层级树的最顶层，点击选中场景，可以看到检查器中提供了包含环境光、背景、阴影、雾等场景相关的效果调整。这些元素的详细参数如何编辑请看[场景](/docs/core/scene)。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/cfdc7905-7a4f-47bb-aa77-3f3866486cee/image-20240709141658903.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/cfdc7905-7a4f-47bb-aa77-3f3866486cee/image-20240709141658903.png" style={{zoom:"50%"}} />
 
 ### 实体检查器
 
 实体检查器是最常用的检查器，它的属性包含了当前实体的组件列表。你可以很方便地修改某个组件的属性，也可以通过 **Add Component** 按钮方便地添加任何引擎内置的组件和自定义的脚本组件。实体检查器也包含当前实体的基本信息，比如 `Transform`、`Layer` 等。详见[实体](/docs/core/entity)。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/bb8e0881-c716-4fc2-89c0-d7b4b01d668d/image-20240318175043180.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/bb8e0881-c716-4fc2-89c0-d7b4b01d668d/image-20240318175043180.png" style={{zoom:"50%"}} />
 
 ### 资产检查器
 
 在资产面板中选中某个资产后，检查器就会显示当前资产的各个属性，并且提供了一个预览器实时展示编辑的结果。下图是一个材质资产的检查器截图。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/1ce2c623-bab4-45dd-a0ef-12ab2e00e9a9/image-20240318175341251.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/1ce2c623-bab4-45dd-a0ef-12ab2e00e9a9/image-20240318175341251.png" style={{zoom:"50%"}} />
 
 ## 检查器控件的使用
 
@@ -45,21 +45,21 @@ label: Basics/Interface
 
 你可以通过拖拽输入框右侧的滑块来快速调整数字的大小。在拖拽时，按住 <Kbd>⌘</Kbd>（window 上为 <Kbd>Ctrl</Kbd>）可以更精确地调整数字的大小（精度为原 step 的 1/10）。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/b14cd188-22bf-4d78-b327-07a331f3c58b/image-20240318175444343.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/b14cd188-22bf-4d78-b327-07a331f3c58b/image-20240318175444343.png" style={{zoom:"50%"}} />
 
 一些可以调节的属性是以滑动条的形式出现的。你可以拖动滑块来快速调整数字的大小，如灯光的 `Intensity`。同样的，在拖动滑块时，按住 `⌘`（window 上为 `ctrl`）可以更精确的调整数字的大小。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/440cd2ed-d1eb-474f-be7e-7a35cac8c954/image-20240318175518354.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/440cd2ed-d1eb-474f-be7e-7a35cac8c954/image-20240318175518354.png" style={{zoom:"50%"}} />
 
 还有一些数字调节的属性是以输入框和按钮的形式出现的，如阴影的 `Near Plane`。这些属性往往拥有更精确的步进大小（如 0.1, 1, 10）。点击按钮可以直接以步进长度来增加或减小数值。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/14c8726c-1a91-4206-8e73-93d436109172/image-20240318175638055.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/14c8726c-1a91-4206-8e73-93d436109172/image-20240318175638055.png" style={{zoom:"50%"}} />
 
 ### 颜色选择控件
 
-一些属性需要调整颜色，如光照、场景的背景色，亦或者材质的自发光颜色等。想要调整颜色，你需要点击左侧的颜色按钮来唤起颜色选择器。在颜色选择器中，你可以使用 HUE 来选择颜色，调整颜色的透明度；也可以在输入框来调整颜色具体的 RGBA 数值。点击 <img src="https://gw.alipayobjects.com/zos/OasisHub/dc030a4b-8813-4ea2-acb0-549c04363b1d/image-20230926110451443.png" style="zoom:33%;" />按钮可以在 HSLA，RGBA 和 HEXA 三种模式下进行切换。
+一些属性需要调整颜色，如光照、场景的背景色，亦或者材质的自发光颜色等。想要调整颜色，你需要点击左侧的颜色按钮来唤起颜色选择器。在颜色选择器中，你可以使用 HUE 来选择颜色，调整颜色的透明度；也可以在输入框来调整颜色具体的 RGBA 数值。点击 <img src="https://gw.alipayobjects.com/zos/OasisHub/dc030a4b-8813-4ea2-acb0-549c04363b1d/image-20230926110451443.png" />按钮可以在 HSLA，RGBA 和 HEXA 三种模式下进行切换。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/d340d0ea-a88a-4b82-b6c4-c69d3f4b8c4e/image-20240318175748734.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/d340d0ea-a88a-4b82-b6c4-c69d3f4b8c4e/image-20240318175748734.png" style={{zoom:"50%"}} />
 
 ### 资产选择控件
 
@@ -67,4 +67,4 @@ label: Basics/Interface
 
 资产选择器中还提供了一个搜索框，你可以使用它来更精确的找到对应的资产。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/b8463854-4343-4dea-b1cf-713a7c617288/image-20240318175957149.png" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/b8463854-4343-4dea-b1cf-713a7c617288/image-20240318175957149.png" style={{zoom:"50%"}} />
diff --git a/docs/zh/interface/shortcut.md b/docs/zh/interface/shortcut.mdx
similarity index 64%
rename from docs/zh/interface/shortcut.md
rename to docs/zh/interface/shortcut.mdx
index c8b217b4fb..666be045c6 100644
--- a/docs/zh/interface/shortcut.md
+++ b/docs/zh/interface/shortcut.mdx
@@ -8,4 +8,4 @@ label: Basics/Interface
 
 快捷键有助于提升编辑场景的效率，用户可以在主菜单里 `Shortcuts` 中找到鼠标（或触控板）、键盘的视口控制方式，以及全局和各个面板的快捷键。
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*OKsvTZ6s2eoAAAAAAAAAAAAADhuCAQ/original" alt="image-20230925164702582" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*OKsvTZ6s2eoAAAAAAAAAAAAADhuCAQ/original" alt="image-20230925164702582" />
diff --git a/docs/zh/interface/template.md b/docs/zh/interface/template.mdx
similarity index 68%
rename from docs/zh/interface/template.md
rename to docs/zh/interface/template.mdx
index 5393402445..e6c1a5951e 100644
--- a/docs/zh/interface/template.md
+++ b/docs/zh/interface/template.mdx
@@ -8,4 +8,4 @@ label: Basics/Interface
 
 业务模版按照类型当前分为动画、特效、2D、3D、XR、数字人等大类。点击模版，可以进行项目详情查看、项目预览、复刻项目到本地。
 
- <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*9XsCSopng4QAAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/e62b94fb-8ac6-4f79-a2f7-9844c6198c7f/image-20250124155639704.png" />
diff --git a/docs/zh/interface/viewport.md b/docs/zh/interface/viewport.mdx
similarity index 56%
rename from docs/zh/interface/viewport.md
rename to docs/zh/interface/viewport.mdx
index 15845aea39..3e2a21a2ad 100644
--- a/docs/zh/interface/viewport.md
+++ b/docs/zh/interface/viewport.mdx
@@ -10,7 +10,7 @@ label: Basics/Interface
 
 视图窗口是用于选择、定位、更改当前场景中各种类型实体及组件的交互式界面。
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*So6vR6JM9U0AAAAAAAAAAAAADtKFAQ/original" alt="drag5" style="zoom:50%;" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/d033b1e2-f597-4bf5-ad82-1db3d8e09cd2/image-20250124161343255.png" />
 
 ## 浏览场景
 
@@ -34,32 +34,32 @@ label: Basics/Interface
 
 工具栏位于视图窗口中上，鼠标停留会出现每一项的快捷键，或者内容说明。
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style={{zoom:"50%"}} />
 
 | 图标 | 名称 | 解释 | 快捷键 |
 | --- | --- | --- | --- |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" alt="image-20240131175906508" style="zoom:50%;" /> | 拖动 | 拖动画面 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" alt="image-20240131180117064" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" alt="image-20240131180217044" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" alt="image-20240131180256738" style="zoom:50%;" /> | 移动<br />旋转<br />缩放 | 对选中实体进行变换操作 | `W` <br /> `E` <br />`R` |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" alt="image-20240131180403373" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" alt="image-20240131180513384" style="zoom:50%;" /> | 中心锚点/枢纽锚点 | 切换选中实体的锚点 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.png" alt="image-20240131180709163" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" alt="image-20240131180731465" style="zoom:50%;" /> | 本地坐标/世界坐标 | 切换选中实体的坐标 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" alt="image-20240131181105676" style="zoom:50%;" /> | 聚焦 | 场景相机聚焦到的选中实体 | `F` |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" alt="image-20240131181429677" style="zoom:50%;" /> | 场景相机 | 场景相机菜单包含用于配置场景相机的选项，主要用来解决搭建场景时，裁剪面太远或者太近导致看不到物体的问题。这些调整不会影响场景中带有相机组件的实体的设置。 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" alt="image-20240131181144755" style="zoom:50%;" /> | 设置 | 设置菜单包含用于调整视图辅助显示的选项，包括网格、辅助图标（与场景中特定组件相关联的图形，包括相机、直射光、点光源、聚光灯）、 辅助线框 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" alt="image-20240131181242445" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" alt="image-20240131181524219" style="zoom:50%;" /> | 场景相机类型 | 切换透视/正交相机 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" alt="image-20240131181459432" style="zoom:50%;" /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" alt="image-20240131181607999" style="zoom:50%;" /> | 模式 | 方便在 2D/3D 场景模式间进行点击切换。2D 模式下，导航部件、正交/透视切换关闭，导航中的环绕轨道不再生效。 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" alt="image-20240131182235406" style="zoom:50%;" /> | 全屏/复原 | 最大化视图窗口，最小化层级、资产、检查器 |  |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" /> | 播放 | 播放场景中所有粒子、动画 |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" alt="image-20240131182303867" style="zoom:50%;" /> | 截屏 | 对当前场景进行快照。仅显示场景内用户创建实体，辅助显示的一系列工具，如图标、网格、gizmo 不会被计入其中。进行截屏后，该快照会在首页作为该项目缩略图。 |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" style={{zoom:"50%"}} /> | 拖动 | 拖动画面 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" style={{zoom:"50%"}} /> | 移动<br />旋转<br />缩放 | 对选中实体进行变换操作 | `W` <br /> `E` <br />`R` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" style={{zoom:"50%"}} /> | 中心锚点/枢纽锚点 | 切换选中实体的锚点 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | 本地坐标/世界坐标 | 切换选中实体的坐标 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" style={{zoom:"50%"}} /> | 聚焦 | 场景相机聚焦到的选中实体 | `F` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" style={{zoom:"50%"}} /> | 场景相机 | 场景相机菜单包含用于配置场景相机的选项，主要用来解决搭建场景时，裁剪面太远或者太近导致看不到物体的问题。这些调整不会影响场景中带有相机组件的实体的设置。 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" style={{zoom:"50%"}} /> | 设置 | 设置菜单包含用于调整视图辅助显示的选项，包括网格、辅助图标（与场景中特定组件相关联的图形，包括相机、直射光、点光源、聚光灯）、 辅助线框 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" style={{zoom:"50%"}} /> | 场景相机类型 | 切换透视/正交相机 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" style={{zoom:"50%"}} /> | 模式 | 方便在 2D/3D 场景模式间进行点击切换。2D 模式下，导航部件、正交/透视切换关闭，导航中的环绕轨道不再生效。 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" style={{zoom:"50%"}} /> | 全屏/复原 | 最大化视图窗口，最小化层级、资产、检查器 |  |
+| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> | 播放 | 播放场景中所有粒子、动画 |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" style={{zoom:"50%"}} /> | 截屏 | 对当前场景进行快照。仅显示场景内用户创建实体，辅助显示的一系列工具，如图标、网格、gizmo 不会被计入其中。进行截屏后，该快照会在首页作为该项目缩略图。 |
 
 ### 辅助元素设置界面
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*KnrvSLcYSkcAAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*KnrvSLcYSkcAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
 
 | 属性 | 内容 |
 | --- | --- |
 | 网格（Grid） | 视图中的网格是否显示 |
 | 3D 图标（3D Icons） | 辅助图标是否根据组件与摄像机的距离进行缩放 |
-| 导航 Gimzo | 用于显示场景相机的当前方向，并且可以通过鼠标操作快速修改视角和投影模式（正交/透视）。打开后会在画面右下角显示。<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058" style="zoom:50%;" /> |
+| 导航 Gimzo | 用于显示场景相机的当前方向，并且可以通过鼠标操作快速修改视角和投影模式（正交/透视）。打开后会在画面右下角显示。<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058"/> |
 | 轮廓显示（Outline） | 选中某个实体时是否显示轮廓，选中的实体轮廓颜色为橙色，子节点轮廓为蓝色 |
 | 相机（Camera） | 以锥体显示选中相机组件 |
 | 光源（Light） | 显示光源组件 |
@@ -69,7 +69,7 @@ label: Basics/Interface
 
 ### 场景相机设置界面
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*TFE1ToVVVawAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131185805023" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*TFE1ToVVVawAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
 
 | 属性                         | 内容                                                         | 默认值               |
 | :--------------------------- | :----------------------------------------------------------- | :------------------- |
@@ -86,7 +86,7 @@ label: Basics/Interface
 
 选中带有相机组件的实体时，会在视图窗口左下角显示该相机的实时预览。帮助用户实时调整相机、场景位置。预览窗口可以拖动、锁定，并且切换不同设备比例的窗口。
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320"/>
 
 | 属性     | 内容                         |
 | :------- | :--------------------------- |
@@ -97,4 +97,4 @@ label: Basics/Interface
 
 在层级树中包含相机组件的物体，可以直接同步视图的场景相机的相关属性，方便进行位置和视角的调整。
 
-<img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />

From c6eb4128081ce1baf56aa53e37522c1a7c3000ac Mon Sep 17 00:00:00 2001
From: eyworldwide <eyworldwide@foxmail.com>
Date: Fri, 24 Jan 2025 18:08:45 +0800
Subject: [PATCH 5/5] refactor: viewport doc

---
 docs/en/interface/viewport.mdx | 33 +++++++++++++++++----------------
 docs/zh/interface/viewport.mdx | 31 ++++++++++++++++---------------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/docs/en/interface/viewport.mdx b/docs/en/interface/viewport.mdx
index 3927d8b974..b3d104308b 100644
--- a/docs/en/interface/viewport.mdx
+++ b/docs/en/interface/viewport.mdx
@@ -10,7 +10,7 @@ label: Basics/Interface
 
 The view window is an interactive interface used for selecting, positioning, and changing various types of entities and components in the current scene.
 
-<Image src="https://gw.alipayobjects.com/zos/OasisHub/d033b1e2-f597-4bf5-ad82-1db3d8e09cd2/image-20250124161343255.png" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/561da75f-74e2-4fb3-842c-fb7e43819cfe/image-20250124173601599.png" />
 
 ## Browsing the Scene
 
@@ -21,7 +21,7 @@ There are two ways to browse the scene: standard mode and flying mode. Standard
 | **Standard**  | Orbit rotation        | `alt` + Left Mouse Button                                          |
 |               | Panning               | `alt` + `command` + Left Mouse Button, or press the mouse wheel    |
 |               | Zooming               | `alt` + `control` + Left Mouse Button, or scroll mouse wheel, or swipe with two fingers on a trackpad |
-| **Flying**    | Look around camera    | `alt` + Right Mouse Button                                         |
+| **Flying**    | Look around camera    | alt + Right Mouse Button                                           |
 |               | Move forward          | Up Arrow or Right Mouse Button + `W`                               |
 |               | Move backward         | Down Arrow or Right Mouse Button + `S`                             |
 |               | Strafe left           | Left Arrow or Right Mouse Button + `A`                             |
@@ -34,32 +34,33 @@ There are two ways to browse the scene: standard mode and flying mode. Standard
 
 The toolbar is located at the top of the view window. Hovering the mouse over each item will show the shortcut keys or description.
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/ddaa0d5e-25e4-40ba-ba20-92a0205d538e/image-20250124173818912.png" alt="image-20240131181207870" style={{zoom:"50%"}} />
 
 | Icon | Name | Description | Shortcut |
 | --- | --- | --- | --- |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" style={{zoom:"50%"}} /> | Drag | Drag the screen |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" style={{zoom:"50%"}} /> | Move<br />Rotate<br />Scale | Transform the selected entity | `W` <br /> `E` <br />`R` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/305d83a5-5ed8-4651-81cc-4cf4688a5dd3/image-20250124173959148.png" style={{zoom:"50%"}} /> | Drag | Drag the screen |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/e394dc30-4c43-47b7-8f86-583b4d084be6/image-20250124174121219.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/96e3c7d0-f60f-42e8-b8f4-f7abaf220bd6/image-20250124174235448.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/aa7f328b-6947-4216-92c8-7c869ff3e340/image-20250124174327332.png" style={{zoom:"50%"}} /> | Move<br />Rotate<br />Scale | Transform the selected entity | `W` <br /> `E` <br />`R` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/37eec76d-a1f5-4687-862b-656bc59b781b/image-20250124174459582.png" style={{zoom:"50%"}} /> | Rect Edit Tool | Drag and scale sprites, GUI elements |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" style={{zoom:"50%"}} /> | Center Anchor/Hub Anchor | Switch the anchor point of the selected entity |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | Local/World Coordinates | Switch the coordinates of the selected entity |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" style={{zoom:"50%"}} /> | Focus | Focus the scene camera on the selected entity | `F` |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" style={{zoom:"50%"}} /> | Scene Camera | The scene camera menu contains options for configuring the scene camera, mainly to solve issues where objects are not visible because the clipping plane is too far or too near. These adjustments do not affect settings of entities with camera components in the scene. |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/acc22d85-df2a-4cf7-bd59-f66430bbfef8/image-20250124175035351.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | Local/World Coordinates | Switch the coordinates of the selected entity |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/1b57725d-900e-4911-9524-449df488cfe0/image-20250124175401106.png" style={{zoom:"50%"}} /> | Focus | Focus the scene camera on the selected entity | `F` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/2170327b-38b6-408c-81fd-cacb6b2f9f6d/image-20250124175517475.png" style={{zoom:"50%"}} /> | Scene Camera | The scene camera menu contains options for configuring the scene camera, mainly to solve issues where objects are not visible because the clipping plane is too far or too near. These adjustments do not affect settings of entities with camera components in the scene. |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" style={{zoom:"50%"}} /> | Settings | The settings menu contains options to adjust view auxiliary displays, including grids, auxiliary icons (graphics associated with specific components in the scene, including camera, direct light, point light, spotlight), and auxiliary wireframes. |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" style={{zoom:"50%"}} /> | Scene Camera Type | Switch between perspective/orthographic camera |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" style={{zoom:"50%"}} /> | Mode | Conveniently switch between 2D/3D scene modes. In 2D mode, navigation components, and perspective/orthographic toggle are disabled, and orbit rotation in navigation is no longer effective. |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" style={{zoom:"50%"}} /> | Fullscreen/Restore | Maximize the view window, minimize hierarchy, assets, inspector |  |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> | Play | Play all particles and animations in the scene |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" style={{zoom:"50%"}} /> | Screenshot | Take a snapshot of the current scene. Only user-created entities in the scene are shown, and a series of auxiliary tools like icons, grids, gizmo won't be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage. |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/1d338399-5da9-4589-a6fa-07e6d2d28f9c/image-20250124175716190.png" style={{zoom:"50%"}} /> | Fullscreen/Restore | Maximize the view window, minimize hierarchy, assets, inspector |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/eabb81ce-57f1-4761-bd32-cb5ae22c952e/image-20250124175804174.png" style={{zoom:"50%"}} /> | Play | Play all particles and animations in the scene ||
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/18aa192b-0a68-4f18-9b8f-771e01ad429a/image-20250124175846556.png" style={{zoom:"50%"}} /> | Screenshot | Take a snapshot of the current scene. Only user-created entities in the scene are shown, and a series of auxiliary tools like icons, grids, gizmo won't be included. After taking a screenshot, the snapshot will be used as the project thumbnail on the homepage. ||
 
 ### Auxiliary Element Settings Interface
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*KnrvSLcYSkcAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/c3a62155-693d-4f8d-9fb1-79c3da94a4c6/image-20250124180009153.png" style={{zoom:"50%"}} />
 
 | Property | Description |
 | --- | --- |
 | Grid | Whether the grid is displayed in the view |
 | 3D Icons | Whether auxiliary icons scale based on their distance from the camera |
-| Navigation Gizmo | Used to display the current direction of the scene camera and can be quickly modified by mouse operation to adjust the view and projection mode (orthographic/perspective). It will appear at the bottom right corner of the screen when open.<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058"/> |
+| Navigation Gizmo | Used to display the current direction of the scene camera and can be quickly modified by mouse operation to adjust the view and projection mode (orthographic/perspective). It will appear at the bottom right corner of the screen when open.<br /><Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> |
 | Outline | Whether outlines are displayed when an entity is selected. The outline of the selected entity is orange, and child nodes are blue. |
 | Camera | Display the selected camera component as a cone |
 | Light | Display light source components |
@@ -69,7 +70,7 @@ The toolbar is located at the top of the view window. Hovering the mouse over ea
 
 ### Scene Camera Settings Interface
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*TFE1ToVVVawAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/5d0577f7-8402-4a8c-b219-8ec36578bd05/image-20250124180220754.png" style={{zoom:"50%"}} />
 
 | Property                       | Description                                            | Default Value        |
 | :----------------------------- | :----------------------------------------------------- | :------------------- |
@@ -86,7 +87,7 @@ The toolbar is located at the top of the view window. Hovering the mouse over ea
 
 When an entity with a camera component is selected, the real-time preview of that camera will be displayed at the bottom left of the view window. This helps users adjust the camera and scene position in real-time. The preview window can be dragged, locked, and switched between different device proportions.
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320"/>
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/1fe28869-7719-4387-b2fb-7299cfa87b69/image-20250124180405339.png" style={{zoom:"50%"}} />
 
 | Property     | Description                       |
 | :----------- | :-------------------------------- |
@@ -97,4 +98,4 @@ When an entity with a camera component is selected, the real-time preview of tha
 
 Objects containing camera components in the hierarchy tree can directly sync the scene camera's attributes, making position and view adjustments convenient.
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
\ No newline at end of file
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/8a066115-69e2-4010-92cd-dbcdf663011c/image-20250124180616875.png" style={{zoom:"50%"}} />
\ No newline at end of file
diff --git a/docs/zh/interface/viewport.mdx b/docs/zh/interface/viewport.mdx
index 3e2a21a2ad..0f2da50f58 100644
--- a/docs/zh/interface/viewport.mdx
+++ b/docs/zh/interface/viewport.mdx
@@ -10,7 +10,7 @@ label: Basics/Interface
 
 视图窗口是用于选择、定位、更改当前场景中各种类型实体及组件的交互式界面。
 
-<Image src="https://gw.alipayobjects.com/zos/OasisHub/d033b1e2-f597-4bf5-ad82-1db3d8e09cd2/image-20250124161343255.png" />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/561da75f-74e2-4fb3-842c-fb7e43819cfe/image-20250124173601599.png" />
 
 ## 浏览场景
 
@@ -34,32 +34,33 @@ label: Basics/Interface
 
 工具栏位于视图窗口中上，鼠标停留会出现每一项的快捷键，或者内容说明。
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*XJN-T5q2L_AAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131181207870" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/ddaa0d5e-25e4-40ba-ba20-92a0205d538e/image-20250124173818912.png" alt="image-20240131181207870" style={{zoom:"50%"}} />
 
 | 图标 | 名称 | 解释 | 快捷键 |
 | --- | --- | --- | --- |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/1bfc4f69-a88e-4efb-a001-cc1d145d9639/image-20240131175906508.png" style={{zoom:"50%"}} /> | 拖动 | 拖动画面 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/538ee5d8-a97c-4d88-98c7-f207873d74ab/image-20240131180117064.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/72016aba-4f42-4683-9d26-b2525cd207be/image-20240131180217044.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/56cdaed5-fddf-4aa7-813d-8c00056c2802/image-20240131180256738.png" style={{zoom:"50%"}} /> | 移动<br />旋转<br />缩放 | 对选中实体进行变换操作 | `W` <br /> `E` <br />`R` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/305d83a5-5ed8-4651-81cc-4cf4688a5dd3/image-20250124173959148.png" style={{zoom:"50%"}} /> | 拖动 | 拖动画面 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/e394dc30-4c43-47b7-8f86-583b4d084be6/image-20250124174121219.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/96e3c7d0-f60f-42e8-b8f4-f7abaf220bd6/image-20250124174235448.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/aa7f328b-6947-4216-92c8-7c869ff3e340/image-20250124174327332.png" style={{zoom:"50%"}} /> | 移动<br />旋转<br />缩放 | 对选中实体进行变换操作 | `W` <br /> `E` <br />`R` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/37eec76d-a1f5-4687-862b-656bc59b781b/image-20250124174459582.png" style={{zoom:"50%"}} /> | 矩形编辑工具 | 拖拽和缩放精灵、GUI 元素 |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/33b47020-ab3d-4acd-baa9-b7d111e1c5d0/image-20240131180403373.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/40faa545-0352-47c6-a704-880821e542ca/image-20240131180513384.png" style={{zoom:"50%"}} /> | 中心锚点/枢纽锚点 | 切换选中实体的锚点 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/41fa937d-f4e8-4475-a0a5-9278c3ce69da/image-20240131180709163.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | 本地坐标/世界坐标 | 切换选中实体的坐标 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/57a9b6be-14ff-4eb3-994f-2175bd7c4d75/image-20240131181105676.png" style={{zoom:"50%"}} /> | 聚焦 | 场景相机聚焦到的选中实体 | `F` |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/dd1abc49-d43b-4a4b-8941-e3fc5e3575ec/image-20240131181429677.png" style={{zoom:"50%"}} /> | 场景相机 | 场景相机菜单包含用于配置场景相机的选项，主要用来解决搭建场景时，裁剪面太远或者太近导致看不到物体的问题。这些调整不会影响场景中带有相机组件的实体的设置。 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/acc22d85-df2a-4cf7-bd59-f66430bbfef8/image-20250124175035351.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/664c3454-9c2c-4932-a6e1-841e20cef76d/image-20240131180731465.png" style={{zoom:"50%"}} /> | 本地坐标/世界坐标 | 切换选中实体的坐标 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/1b57725d-900e-4911-9524-449df488cfe0/image-20250124175401106.png" style={{zoom:"50%"}} /> | 聚焦 | 场景相机聚焦到的选中实体 | `F` |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/2170327b-38b6-408c-81fd-cacb6b2f9f6d/image-20250124175517475.png" style={{zoom:"50%"}} /> | 场景相机 | 场景相机菜单包含用于配置场景相机的选项，主要用来解决搭建场景时，裁剪面太远或者太近导致看不到物体的问题。这些调整不会影响场景中带有相机组件的实体的设置。 |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/cf528af5-d928-4eb5-94b3-849d7c561524/image-20240131181144755.png" style={{zoom:"50%"}} /> | 设置 | 设置菜单包含用于调整视图辅助显示的选项，包括网格、辅助图标（与场景中特定组件相关联的图形，包括相机、直射光、点光源、聚光灯）、 辅助线框 |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/f05e1699-9495-49fd-b123-6e501af0e023/image-20240131181242445.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/739fb9f1-309b-497a-86b6-f3d4ef89d7ee/image-20240131181524219.png" style={{zoom:"50%"}} /> | 场景相机类型 | 切换透视/正交相机 |  |
 | <img src="https://gw.alipayobjects.com/zos/OasisHub/8a596654-17f6-4c97-b18e-b0188b05220d/image-20240131181459432.png" style={{zoom:"50%"}} /><br /><img src="https://gw.alipayobjects.com/zos/OasisHub/7f101795-7966-40b8-a61a-1504a3224e7a/image-20240131181607999.png" style={{zoom:"50%"}} /> | 模式 | 方便在 2D/3D 场景模式间进行点击切换。2D 模式下，导航部件、正交/透视切换关闭，导航中的环绕轨道不再生效。 |  |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/408bf2c2-8238-4c23-98f4-ee02787fd69f/image-20240131182235406.png" style={{zoom:"50%"}} /> | 全屏/复原 | 最大化视图窗口，最小化层级、资产、检查器 |  |
-| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*zsduSKvepO0AAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> | 播放 | 播放场景中所有粒子、动画 |
-| <img src="https://gw.alipayobjects.com/zos/OasisHub/c37591e0-6eb0-48ae-9faa-2d5b1a0e7941/image-20240131182303867.png" style={{zoom:"50%"}} /> | 截屏 | 对当前场景进行快照。仅显示场景内用户创建实体，辅助显示的一系列工具，如图标、网格、gizmo 不会被计入其中。进行截屏后，该快照会在首页作为该项目缩略图。 |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/1d338399-5da9-4589-a6fa-07e6d2d28f9c/image-20250124175716190.png" style={{zoom:"50%"}} /> | 全屏/复原 | 最大化视图窗口，最小化层级、资产、检查器 |  |
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/eabb81ce-57f1-4761-bd32-cb5ae22c952e/image-20250124175804174.png" style={{zoom:"50%"}} /> | 播放 | 播放场景中所有粒子、动画 ||
+| <img src="https://gw.alipayobjects.com/zos/OasisHub/18aa192b-0a68-4f18-9b8f-771e01ad429a/image-20250124175846556.png" style={{zoom:"50%"}} /> | 截屏 | 对当前场景进行快照。仅显示场景内用户创建实体，辅助显示的一系列工具，如图标、网格、gizmo 不会被计入其中。进行截屏后，该快照会在首页作为该项目缩略图。 ||
 
 ### 辅助元素设置界面
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*KnrvSLcYSkcAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/c3a62155-693d-4f8d-9fb1-79c3da94a4c6/image-20250124180009153.png" style={{zoom:"50%"}} />
 
 | 属性 | 内容 |
 | --- | --- |
 | 网格（Grid） | 视图中的网格是否显示 |
 | 3D 图标（3D Icons） | 辅助图标是否根据组件与摄像机的距离进行缩放 |
-| 导航 Gimzo | 用于显示场景相机的当前方向，并且可以通过鼠标操作快速修改视角和投影模式（正交/透视）。打开后会在画面右下角显示。<br /><img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131184405058"/> |
+| 导航 Gimzo | 用于显示场景相机的当前方向，并且可以通过鼠标操作快速修改视角和投影模式（正交/透视）。打开后会在画面右下角显示。<br /><Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*tooGS4MTpTUAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} /> |
 | 轮廓显示（Outline） | 选中某个实体时是否显示轮廓，选中的实体轮廓颜色为橙色，子节点轮廓为蓝色 |
 | 相机（Camera） | 以锥体显示选中相机组件 |
 | 光源（Light） | 显示光源组件 |
@@ -69,7 +70,7 @@ label: Basics/Interface
 
 ### 场景相机设置界面
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*TFE1ToVVVawAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/5d0577f7-8402-4a8c-b219-8ec36578bd05/image-20250124180220754.png" style={{zoom:"50%"}} />
 
 | 属性                         | 内容                                                         | 默认值               |
 | :--------------------------- | :----------------------------------------------------------- | :------------------- |
@@ -86,7 +87,7 @@ label: Basics/Interface
 
 选中带有相机组件的实体时，会在视图窗口左下角显示该相机的实时预览。帮助用户实时调整相机、场景位置。预览窗口可以拖动、锁定，并且切换不同设备比例的窗口。
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*6IztTr2AERQAAAAAAAAAAAAADtKFAQ/original" alt="image-20240131190013320"/>
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/1fe28869-7719-4387-b2fb-7299cfa87b69/image-20250124180405339.png" style={{zoom:"50%"}} />
 
 | 属性     | 内容                         |
 | :------- | :--------------------------- |
@@ -97,4 +98,4 @@ label: Basics/Interface
 
 在层级树中包含相机组件的物体，可以直接同步视图的场景相机的相关属性，方便进行位置和视角的调整。
 
-<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*IEaMQYLe1HgAAAAAAAAAAAAADtKFAQ/original" style={{zoom:"50%"}} />
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/8a066115-69e2-4010-92cd-dbcdf663011c/image-20250124180616875.png" style={{zoom:"50%"}} />