---
outline: [2, 3]
---

# CSS3DRendererManager

- 源文件：`packages/sdk/src/manager/CSS3DRendererManager.ts`
- 文档位置：`packages/docs/api/manager/CSS3DRendererManager.md`

## 类：`CSS3DRendererManager`

- 作用：CSS3D 渲染管理类 负责管理 CSS3D 渲染器和 CSS3D 对象

### 构造函数

#### `new CSS3DRendererManager(viewer: Viewer)`

- 作用：构造函数

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `viewer` | `Viewer` | 是 | - 视图实例 |

- 出参：`CSS3DRendererManager`
- 返回说明：返回当前类实例。

### 属性

| 属性名 | 可见性 | 类型 | 作用 |
| --- | --- | --- | --- |
| `renderer` | `public` | `CSS3DRenderer` | CSS3D 渲染器 |
| `viewer` | `public` | `Viewer` | 视图实例 |
| `objects` | `public` | `Map<string, CSS3DObject \| CSS3DSprite>` | CSS3D 对象集合 |

### 方法

#### `init(): void`

- 作用：初始化 CSS3D 渲染器

- 入参：无

- 出参：`void`
- 返回说明：无返回值。

#### `handleResize(): void`

- 作用：处理窗口大小变化

- 入参：无

- 出参：`void`
- 返回说明：无返回值。

#### `createObject(element: HTMLElement, position: THREE.Vector3): CSS3DObject`

- 作用：创建 CSS3D 对象

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `element` | `HTMLElement` | 是 | - DOM 元素 |
| `position` | `THREE.Vector3` | 是 | - 位置 |

- 出参：`CSS3DObject`
- 返回说明：CSS3D 对象

#### `createSprite(element: HTMLElement, position: THREE.Vector3): CSS3DSprite`

- 作用：创建 CSS3D 精灵

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `element` | `HTMLElement` | 是 | - DOM 元素 |
| `position` | `THREE.Vector3` | 是 | - 位置 |

- 出参：`CSS3DSprite`
- 返回说明：CSS3D 精灵

#### `addObject(object: CSS3DObject | CSS3DSprite, parent: THREE.Object3D = this.viewer.scene): void`

- 作用：添加 CSS3D 对象到场景

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `object` | `CSS3DObject \| CSS3DSprite` | 是 | - CSS3D 对象或精灵 |
| `parent` | `THREE.Object3D` | 否 | - 父对象，默认为场景 |

- 出参：`void`
- 返回说明：无返回值。

#### `removeObject(object: CSS3DObject | CSS3DSprite): void`

- 作用：从场景中移除 CSS3D 对象

- 入参：

| 参数名 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| `object` | `CSS3DObject \| CSS3DSprite` | 是 | - CSS3D 对象或精灵 |

- 出参：`void`
- 返回说明：无返回值。

#### `render(): void`

- 作用：渲染 CSS3D 场景

- 入参：无

- 出参：`void`
- 返回说明：无返回值。

#### `dispose(): void`

- 作用：清理资源

- 入参：无

- 出参：`void`
- 返回说明：无返回值。

#### `getRenderer(): CSS3DRenderer`

- 作用：获取 CSS3D 渲染器实例

- 入参：无

- 出参：`CSS3DRenderer`
- 返回说明：CSS3D 渲染器

#### `getObjects(): (CSS3DObject | CSS3DSprite)[]`

- 作用：获取所有 CSS3D 对象

- 入参：无

- 出参：`(CSS3DObject \| CSS3DSprite)[]`
- 返回说明：CSS3D 对象数组

## 构造示例

- 当前 Demo 中没有直接展示 `CSS3DRendererManager` 的构造调用。

## 函数示例

- 当前 Demo 中没有直接展示 `CSS3DRendererManager` 的公开方法调用。