@realsee/five 6.8.0-alpha.1 → 6.8.0-alpha.11

package/ai_guides/features/request-proxy.md

@@ -0,0 +1,112 @@
+# Request Proxy (请求代理)
+
+- **Summary**: `requestProxy` 是 Five 初始化时的关键参数，用于在发起网络请求前对 URL 进行拦截和修改，常用于鉴权、资源重定向或 CDN 域名替换。
+- **Schema**: `(url: string) => string | Promise<string>`
+- **Concepts**: 请求拦截、资源重定向、鉴权签名。
+- **Configuration**: `FiveInitArgs.requestProxy`。
+- **Examples**: CDN 替换、私有化部署鉴权、调试模式。
+
+## Schema
+
+> **Definition**: [FiveInitArgs](../../five/application/fiveInitArgs.d.ts)
+
+```typescript
+interface FiveInitArgs {
+  /**
+   * 请求代理函数
+   * @description 在 Five 内部发起任何网络请求（如加载图片、模型、配置）之前调用。
+   * @param url - 原始请求 URL
+   * @returns 修改后的 URL (string) 或异步返回修改后的 URL (Promise<string>)
+   */
+  requestProxy?: (url: string) => string | Promise<string>;
+}
+```
+
+## Concepts
+
+### 拦截时机
+Five 内部加载资源（全景图瓦片、3D 模型、纹理贴图等）时，会通过统一的 Fetcher 层发起请求。`requestProxy` 钩子函数会在每次请求发起**前**被触发。
+
+### 核心用途
+1.  **域名替换 (CDN Domain Sharding)**: 将资源请求分散到多个 CDN 域名以突破浏览器并发限制。
+2.  **鉴权签名 (Authentication)**: 针对私有化部署或受保护资源，在 URL 后追加鉴权 Token (如 SAS Token)。
+3.  **资源重定向 (Redirection)**: 在开发环境下将线上资源重定向到本地或测试环境。
+4.  **协议适配**: 强制将 `http` 协议升级为 `https`。
+
+## Configuration
+
+`requestProxy` 是 `Five` 构造函数的配置项之一。
+
+| 参数 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `requestProxy` | `(url: string) => string \| Promise<string>` | `undefined` | 代理函数，返回修改后的 URL。支持同步或异步返回。 |
+
+## Examples
+
+### 1. 基础用法：CDN 域名替换
+
+将图片资源请求分散到不同的 CDN 节点，加速加载。
+
+```typescript
+const five = new Five({
+  requestProxy: (url) => {
+    // 简单的字符串替换示例
+    return url.replace('//vrlab-public.ljcdn.com/', '//vr-public.realsee-cdn.cn/');
+  }
+});
+```
+
+### 2. 进阶用法：异步鉴权 (Async Auth)
+
+对于需要动态获取 Token 的场景，可以使用 `Promise` 异步返回 URL。
+
+```typescript
+const five = new Five({
+  requestProxy: async (url) => {
+    // 仅对私有桶资源进行签名
+    if (url.includes('private-bucket')) {
+      const token = await fetchToken(); // 假设 fetchToken 是一个获取鉴权的异步函数
+      const separator = url.includes('?') ? '&' : '?';
+      return `${url}${separator}token=${token}`;
+    }
+    return url;
+  }
+});
+```
+
+### 3. 开发调试：本地资源代理
+
+在开发阶段，将特定资源重定向到本地文件。
+
+```typescript
+const proxyMap: Record<string, string> = {};
+
+const five = new Five({
+  requestProxy: (url) => {
+    // 如果该 URL 在映射表中存在（例如通过 <input type="file"> 加载的本地 Blob URL），则使用映射值
+    if (proxyMap[url]) {
+      console.log(`[Proxy] Redirecting ${url} -> ${proxyMap[url]}`);
+      return proxyMap[url];
+    }
+    return url;
+  }
+});
+```
+
+## Common Pitfalls
+
+1.  **死循环风险**: 不要在 `requestProxy` 内部再次发起会导致 `requestProxy` 触发的 Five 资源请求，否则可能导致递归调用。
+2.  **性能损耗**: `requestProxy` 会在**所有**资源请求前触发（包括成百上千个瓦片请求）。请确保该函数执行效率极高，避免进行耗时的同步操作。如果是异步操作，应做好缓存。
+3.  **URL 格式**: 确保返回的 URL 格式正确。如果原 URL 包含 Query 参数，拼接 Token 时要注意判断是使用 `?` 还是 `&`。
+4.  **缓存一致性**: 如果修改了 URL（例如加了 Token），可能会影响浏览器的缓存命中策略。
+
+## Related
+
+*   [Parameter](./parameter.md): Five 初始化参数总览。
+*   [Load External Model](./load-external-model.md): 加载外部模型时也会触发 requestProxy。
+
+---
+
+```yaml
+tags: [configuration, network, proxy, authentication]
+```

package/ai_guides/features/screen-project.md

@@ -0,0 +1,165 @@
+# Screen & Space Projection (屏幕与空间坐标转换)
+
+- **Summary**: 详解屏幕二维坐标与三维空间坐标/射线之间的相互转换关系，以及如何在 DOM 层与 3D 场景进行联动（如显示标签）。
+- **Schema**: `five.project2d` 接口定义。
+- **Concepts**: World Space, Screen Space, NDC, Raycasting.
+- **Examples**: 空间点位转屏幕坐标 (标签功能)、屏幕坐标转空间射线。
+
+## Schema
+
+> **Definition**: [Five](../../five/application/five.d.ts)
+
+```typescript
+// defined in Five class
+interface Five {
+  /**
+   * 计算三维坐标对应到屏幕的二维坐标
+   * @param vector - 三维空间坐标 (World Space)
+   * @param testModel - 是否进行模型遮挡检测 (默认 false)。如果为 true，且该点被模型遮挡，则返回 null。
+   * @returns 二维屏幕坐标 (相对于 Canvas 左上角) 或 null (如果点在视野外或被遮挡)
+   */
+  project2d(vector: THREE.Vector3, testModel?: boolean): THREE.Vector2 | null;
+}
+```
+
+## Concepts
+
+### 1. 坐标系转换流程
+
+在 Five (Three.js) 中，坐标转换通常遵循以下流程：
+
+*   **World Space (世界坐标)**: 三维场景中的绝对坐标 (x, y, z)，单位通常为米。
+*   **Camera Space (相机坐标)**: 相对于相机的坐标。
+*   **NDC (Normalized Device Coordinates)**: 归一化设备坐标，x, y, z 范围均为 [-1, 1]。
+*   **Screen Space (屏幕坐标)**: 对应 Canvas 画布的像素坐标。原点 (0, 0) 在左上角，x 向右增加，y 向下增加。
+
+### 2. 转换关系
+
+| 方向 | 方法 | 核心逻辑 | 用途 |
+| :--- | :--- | :--- | :--- |
+| **3D ➔ 2D** | `five.project2d(vector)` | World ➔ NDC ➔ Screen | 标签 (Tag)、HUD、跟随 3D 物体的 UI |
+| **2D ➔ 3D** | `Raycaster` | Screen ➔ NDC ➔ Ray | 点击拾取 (Picking)、地面检测、放置物体 |
+
+### 3. five.project2d
+
+`five.project2d` 是 Five 提供的便捷方法，它封装了以下逻辑：
+1.  将世界坐标投影 (Project) 到相机的 NDC 空间。
+2.  判断点是否在视锥体 (Frustum) 内（即是否在视野范围内）。
+3.  (可选) 发射射线检测该点与相机之间是否有模型遮挡。
+4.  将 NDC 坐标转换为相对于 Canvas 左上角的像素坐标 (px)。
+
+## Examples
+
+### 1. 空间标签 (3D Point to DOM Label)
+
+最典型的应用场景是在 3D 场景中的某个物体上方显示一个 HTML 标签。
+
+```typescript
+import { Five, Mode } from "@realsee/five";
+import * as THREE from "three";
+
+const five = new Five();
+// ... 初始化 five ...
+
+// 1. 创建标签 DOM 元素
+const label = document.createElement("div");
+label.textContent = "Living Room";
+label.style.position = "absolute";
+label.style.padding = "4px 8px";
+label.style.background = "rgba(0, 0, 0, 0.6)";
+label.style.color = "white";
+label.style.borderRadius = "4px";
+label.style.pointerEvents = "none"; // 避免阻挡鼠标事件
+label.style.transform = "translate(-50%, -100%)"; // 居中并显示在点上方
+label.style.display = "none"; // 默认隐藏
+document.body.appendChild(label); // 添加到 container (注意 container 的定位 context)
+
+// 2. 定义目标空间坐标 (例如客厅中心)
+const targetPosition = new THREE.Vector3(1.5, 2.0, -3.0);
+
+// 3. 在每一帧渲染时更新标签位置
+five.on("render.prepare", () => {
+  // 计算屏幕坐标
+  // 参数2: false 表示不检测遮挡 (性能更好)；true 表示如果被墙挡住则隐藏
+  const screenPos = five.project2d(targetPosition, true);
+
+  if (screenPos === null) {
+    // 如果返回 null，说明点在相机背面，或者被遮挡（如果开启了 testModel）
+    label.style.display = "none";
+  } else {
+    label.style.display = "block";
+    // 更新 DOM 位置
+    // 注意：screenPos 是相对于 Canvas 的坐标。
+    // 如果 Canvas 占满全屏，直接使用即可。
+    // 如果 Canvas 有偏移，需加上 Canvas 的 offset。
+    label.style.left = `${screenPos.x}px`;
+    label.style.top = `${screenPos.y}px`;
+  }
+});
+```
+
+### 2. 屏幕点击转射线 (Screen to Ray)
+
+将鼠标点击的屏幕坐标转换为 3D 射线，用于检测物体。
+
+> **注意**: 更多射线检测细节请参考 [Raycast](./raycast.md)。
+
+```typescript
+import * as THREE from "three";
+
+// 假设 container 是 five 的容器元素
+const container = five.getElement()!.parentElement!;
+
+container.addEventListener("click", (event) => {
+  const raycaster = new THREE.Raycaster();
+  const mouse = new THREE.Vector2();
+
+  // 1. 计算 NDC 坐标 (x, y 范围 [-1, 1])
+  // event.clientX/Y 是相对于视口的坐标
+  // getBoundingClientRect 用于获取容器的位置
+  const rect = container.getBoundingClientRect();
+
+  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; // 注意 Y 轴翻转
+
+  // 2. 从相机发射射线
+  raycaster.setFromCamera(mouse, five.camera);
+
+  // 3. 进行相交检测
+  const intersects = five.model.intersectRaycaster(raycaster);
+
+  if (intersects.length > 0) {
+    console.log("Hit point:", intersects[0].point);
+  }
+});
+```
+
+## Common Pitfalls
+
+1.  **坐标系原点**:
+    *   DOM/CSS 坐标系原点在左上角，Y 轴向下。
+    *   NDC/WebGL 坐标系原点在中心，Y 轴向上。
+    *   `project2d` 返回的是 **DOM 风格** 的坐标 (左上角原点)，可以直接赋给 CSS `left`/`top`。
+    *   但在进行 Raycaster 转换时，需要手动将 DOM 坐标转换为 NDC (Y 轴翻转)。
+
+2.  **性能开销**:
+    *   `project2d(pos, true)` 开启 `testModel` 会进行射线检测，性能开销较大。如果在 `render.prepare` 中对大量点进行检测，可能会导致掉帧。
+    *   建议：对于大量标签，默认使用 `false`；或者仅对可视范围内的关键标签进行遮挡检测；或者限制检测频率（如每 10 帧检测一次）。
+
+3.  **Canvas 尺寸**:
+    *   `project2d` 内部使用 `five.renderer.getSize()` 和 `five.viewport` 计算。确保 Canvas 尺寸与 DOM 显示尺寸一致 (通常 Five 会自动处理，但如果使用了 CSS 缩放需注意)。
+
+4.  **Null 返回值**:
+    *   务必检查 `project2d` 的返回值是否为 `null`。点在相机背面、超出视锥体裁剪范围、或被遮挡（开启 testModel 时）都会返回 `null`。
+
+## Related
+
+*   [Raycast](./raycast.md): 详细的射线检测文档。
+*   [Five](./five.md): Five 核心类说明。
+*   [State](./state.md): 了解相机位姿 (Pose)。
+
+---
+
+```yaml
+tags: [coordinate, screen, project, label, ui]
+```

package/ai_guides/features/state.md

@@ -0,0 +1,101 @@
+# State (状态)
+
+- **Summary**: State 是 Five 的核心状态对象，描述了当前的显示模式、观察点位以及相机的空间姿态。
+- **Schema**: 包含 Pose (相机姿态) 和 Mode (模式) 等属性的接口。
+- **Concepts**: Camera Pose, Coordinate System, Mode Specifics。
+- **Examples**: 状态获取与更新。
+
+## Schema
+
+> **Definition**: [State](../../five/types/state.d.ts)
+
+**State** 类型定义如下（继承自 `Pose`）：
+
+```ts
+import * as THREE from "three";
+import { Mode } from "@realsee/five";
+
+interface Pose {
+  /** 相机偏航角 (水平方向)，单位：弧度 */
+  longitude: number;
+  /** 相机俯仰角 (垂直方向)，单位：弧度 */
+  latitude: number;
+  /** 相机垂直视场角，单位：度 */
+  fov: number;
+  /** 相机看向的目标中心点坐标 */
+  offset: THREE.Vector3;
+  /** 相机距离目标中心点的距离 */
+  distance: number;
+}
+
+interface State extends Pose {
+  /** 显示模式 */
+  mode: Mode;
+  /** 当前点位的唯一标识 (workCode) */
+  workCode: string;
+  /** 当前点位在列表中的索引 */
+  panoIndex: number;
+}
+```
+
+## Concepts
+
+*   **Camera Pose (相机姿态)**: Five 使用球坐标系 (Spherical) + 笛卡尔偏移 (Cartesian Offset) 来描述相机位置。
+    *   相机始终位于以 `offset` 为中心、`distance` 为半径的球面上。
+    *   **longitude**: 球面上的经度（水平旋转）。
+    *   **latitude**: 球面上的纬度（垂直旋转）。
+    *   **offset**: 相机“看向”的点，也是球心。
+    *   **distance**: 相机到 `offset` 的距离。
+*   **Coordinate System (坐标系)**:
+    *   采用 Y-Up 右手坐标系（与 Three.js 默认一致）。
+    *   单位长度为米。
+*   **Mode Specifics (模式特性)**:
+    *   **Panorama**: `distance` 通常为 0，即相机位置与 `offset` 重合（第一人称视角）。
+    *   **Floorplan/Mapview**: `offset` 通常位于模型中心，`distance` 大于模型包围盒半径（第三人称上帝视角）。
+*   **State vs CurrentState**:
+    *   **five.state**: **目标状态**。表示相机最终应该到达的状态。当调用 `setState` 或用户交互结束时，此值即为最终结果。通常用于 UI 同步（如高亮当前模式按钮）。
+    *   **five.getCurrentState()**: **瞬时状态**。表示当前渲染帧相机的实际状态。在动画过渡过程中，`currentState` 会不断变化直至追赶上 `state`。通常用于需要实时反馈的场景（如罗盘旋转）。
+
+## Examples
+
+### 快速上手 (Quick Example)
+
+使用 `setState` 更新状态：
+
+```ts
+// 切换到户型图模式，并旋转相机到 45 度
+five.setState({
+  mode: 'Floorplan',
+  longitude: Math.PI / 4
+});
+```
+
+### 详细示例 (Detailed Example)
+
+获取当前状态并基于此修改：
+
+```ts
+const state = five.state;
+
+// 在当前状态基础上，向右旋转 90 度，并略微拉远距离
+five.setState({
+  longitude: tate.longitude + Math.PI / 2,
+  distance: tate.distance + 2.0
+});
+```
+
+## Common Pitfalls
+
+1.  **单位混淆**: `longitude` 和 `latitude` 使用**弧度**，而 `fov` 使用**角度**（度）。
+2.  **Offset 类型**: `offset` 必须是 `THREE.Vector3` 实例。如果在 React 等框架中使用纯对象（Plain Object），Five 内部会自动转换，但在 TypeScript 中需注意类型匹配。
+3.  **异步更新**: `setState` 触发的相机运动是异步动画过程。如果需要立即无动画跳转，可传递第二个参数 `immediately: true`。
+
+## Related
+
+*   [Mode - 模式](./mode.md): 详细了解各种 Mode 的区别。
+
+---
+
+```yaml
+tags: [camera, state, pose, interaction]
+```

package/ai_guides/features/view-layer.md

@@ -0,0 +1,187 @@
+# ViewLayer (视图层)
+
+- **Summary**: ViewLayer 是 Model 的组成部分，负责管理具体的 3D 资源（如 Mesh 或 PointCloud），支持独立的渲染配置和可见性控制。
+- **Schema**: 继承自 `Tile3D`，由 `Model` 统一管理。
+- **Concepts**: Layer Fallback, 3DTile Integration, Parameter Inheritance.
+- **Examples**: 可见性控制、参数配置、事件监听。
+
+## Schema
+
+> **Definition**: [ViewLayer](../../five/model/view-layer.d.ts), [ViewLayerInit](../../five/model/view-layer.d.ts)
+
+ViewLayer 是一个具体的渲染图层，它对应一个具体的 3D 数据源（通常是一个 `.gltf` / `.b3dm` / `.pnts` 等 Tileset 入口）。
+
+```typescript
+// 简化定义
+interface ViewLayer extends Tile3D {
+  /** 图层名称 (如 'mesh', 'point_cloud') */
+  name: string;
+  /** 图层类型 */
+  type: "point_cloud" | "mesh" | "gaussian_splatting";
+  /** 独立的参数配置对象 */
+  parameter: Parameter;
+  /** 是否可见 */
+  visible: boolean;
+  /** 对应的 Tileset URL */
+  tilesetUrl: string;
+}
+```
+
+## Concepts
+
+### 1. ViewLayer vs Work.Model
+
+`ViewLayer` 的生成逻辑严格依赖于 `Work` 数据中的定义，但也包含了向后兼容的 Fallback 机制。
+
+#### 数据来源 (Data Source)
+
+1.  **优先使用 `work.model.layers`**:
+    这是标准的定义方式。`work.model.layers` 是一个数组，每个元素显式定义了一个 Layer 的 `name`, `type`, `tileset` (URL) 等信息。
+    Five 会遍历这个数组，为每一项创建一个 `ViewLayer` 实例。
+
+2.  **Fallback to `work.model.file`**:
+    如果 `work.model.layers` 中没有定义 `mesh` 类型的层，且 `work.model.file` 存在（旧版数据字段），Five 会自动创建一个 **虚拟的 Mesh Layer**。
+    *   **Name**: 默认为 `model` (或其他内部标识)。
+    *   **Type**: `mesh`。
+    *   **URL**: 指向 `work.model.file`。
+    *   **UpAxis**: 根据文件后缀自动推断 (如 `.obj` 可能需要特殊处理)。
+
+> **总结**: `ViewLayer` 是 `work.model` 数据的运行时表现。`layers` 字段提供了精细的控制，而 `file` 字段提供了旧数据的兼容支持。
+
+### 2. ViewLayer vs 3DTile
+
+`ViewLayer` 本质上是一个 **3DTile** 加载器实例（继承自 `Tile3D`）。
+
+*   **加载机制**: 每个 ViewLayer 独立维护一个 3DTiles 的遍历器 (Traverser) 和调度器 (Scheduler)。这意味着 Mesh 层、PointCloud 层和 GaussianSplatting 层是独立加载、独立计算 LOD (Level of Detail) 的。
+*   **空间变换**: ViewLayer 负责处理数据的坐标系转换 (如 ECEF 转 ENU，Y-Up 转 Z-Up)，确保不同格式的数据在 Five 场景中正确对齐。
+
+### 3. ViewLayer, Model, ModelScene & Parameter
+
+这是 Five 渲染架构的核心层级关系，`Parameter` 在其中起到了“胶水”的作用。
+
+#### 层级关系 (Hierarchy)
+
+```mermaid
+graph TD
+  Scene[ModelScene] -->|包含| Model[Model]
+  Model -->|包含| LayerA[ViewLayer (Mesh)]
+  Model -->|包含| LayerB[ViewLayer (PointCloud)]
+```
+
+#### Parameter 的作用 (Inheritance)
+
+`Parameter` 系统贯穿了上述三层，实现了**“配置继承与覆盖”**。
+
+1.  **ModelScene (全局配置)**:
+    *   持有 `five.modelScene.parameter`。
+    *   定义了场景级的默认值（如：默认显存上限 `512MB`）。
+2.  **Model (模型级配置)**:
+    *   持有 `model.parameter`。
+    *   可以覆盖全局配置（如：特定模型需要 `1024MB` 显存）。
+3.  **ViewLayer (图层级配置)**:
+    *   持有 `viewLayer.parameter`。
+    *   **最具体的控制点**。它在计算最终值时，会依次继承 `Model` 和 `ModelScene` 的配置。
+
+**示例场景**:
+*   如果你想让**整个场景**变暗，设置 `modelScene.parameter.set('opacity', 0.5)`。
+*   如果你只想让**点云层**变暗，保留模型层亮度，设置 `pointCloudLayer.parameter.set('opacity', 0.5)`。
+
+### 4. Visibility Control (可见性控制)
+
+默认情况下，Five **不会**加载所有图层，而是根据优先级**仅加载一个**图层，以节省资源。
+优先级顺序：`mesh` > `point_cloud` > 其他类型。
+
+**可见性与内存管理 (Visibility & Memory)**:
+*   **显示 (Show)**: 当图层设置为可见 (`visible = true`) 时，Five 会开始加载该图层的资源。
+*   **隐藏 (Hide)**: 当图层设置为隐藏 (`visible = false`) 时，Five 会**释放该图层占用的所有内存资源** (Geometry, Texture 等)。这意味着“隐藏”等同于“卸载”。
+
+Five 提供了两种层级的可见性控制方式：
+
+1.  **初始化配置 (Load Options)**:
+    在 `five.load` 时，通过 `model["3d-tiles"].showLayers` 参数指定初始显示的图层。
+    *   `true` (默认): 使用上述的默认优先级策略（仅加载一个最佳图层）。
+    *   `string[]`: 仅显示名称在数组中的图层（例如 `['mesh', 'point_cloud']` 可以强制同时显示模型和点云）。
+
+2.  **运行时控制 (Runtime Control)**:
+    加载完成后，可以直接修改 `viewLayer.visible` 属性来切换可见性。
+
+## Configuration
+
+ViewLayer 的配置主要通过其 `parameter` 属性进行。
+
+### Common Configuration
+
+| Parameter | Type | Description |
+| :--- | :--- | :--- |
+| `visible` | `boolean` | 控制图层的可见性 (也可直接修改 `viewLayer.visible`)。 |
+| `opacity` | `number` | 图层透明度 (0.0 - 1.0)。 |
+| `pointSize` | `number` | (仅点云) 点的大小。 |
+
+> 更多配置项请参考 [Parameter](./parameter.md) 和 [3DTile Params](./3dtile.md)。
+
+## Examples
+
+### 1. 访问 ViewLayer
+
+```typescript
+// 获取当前模型
+const model = five.model;
+
+// 遍历所有图层
+model.viewLayers.forEach(layer => {
+  console.log(`Layer Name: ${layer.name}, Type: ${layer.type}`);
+});
+
+// 查找特定的图层 (例如点云层)
+const pointCloudLayer = model.viewLayers.find(layer => layer.type === 'point_cloud');
+```
+
+### 2. 独立控制图层可见性
+
+```typescript
+// 方式 A: 运行时控制
+const meshLayer = five.model.viewLayers.find(layer => layer.type === 'mesh');
+
+if (meshLayer) {
+  // 隐藏模型层，只看点云
+  meshLayer.visible = false;
+  // 或者通过 parameter 设置
+  // meshLayer.parameter.set('visible', false);
+}
+
+// 方式 B: 加载时控制 (初始化时仅显示 mesh)
+five.load(work, {
+  model: {
+    "3d-tiles": {
+      showLayers: ['mesh'] // 仅显示 mesh 层，隐藏 point_cloud 等其他层
+    }
+  }
+});
+```
+
+### 3. 修改特定图层的渲染参数
+
+```typescript
+const pointCloudLayer = five.model.viewLayers.find(layer => layer.type === 'point_cloud');
+
+if (pointCloudLayer) {
+  // 仅修改点云层的点大小，不影响其他模型
+  pointCloudLayer.parameter.set('pointSize', 2.0);
+
+  // 仅修改点云层的最大显存占用
+  pointCloudLayer.parameter.set('maxMemoryUsage', 128);
+}
+```
+
+## Related
+
+*   [Model](./model.md): ViewLayer 的父级容器。
+*   [Work](./work.md): 定义 ViewLayer 数据结构的数据源。
+*   [Parameter](./parameter.md): 控制 ViewLayer 渲染表现的配置系统。
+*   [3DTile](./3dtile.md): ViewLayer 的底层技术实现。
+
+---
+
+```yaml
+tags: [viewlayer, model, 3dtile, parameter, layer]
+```