# CSSRenderer API

`viewer.cssRenderer` 用于在 3D 场景中叠加渲染 HTML 元素。支持三种模式：

| 模式 | 方法 | 返回类型 | 说明 |
| :--- | :--- | :------- | :--- |
| CSS2D | `createCSS2DObject(element)` | `CSS2DObject` | HTML 元素始终面向相机，屏幕尺寸固定不随距离缩放。适合标签、工具提示。 |
| CSS2.5D | `createCSS25DObject(element)` | `CSS3DSprite` | HTML 元素面向相机，但尺寸随距离缩放（近大远小）。 |
| CSS3D | `createCSS3DObject(element)` | `CSS3DObject` | HTML 元素具有完整的 3D 变换，可旋转、缩放，参与透视投影。适合面板、信息板。 |

底层渲染器采用**懒加载**：首次调用对应 `create` 方法时才初始化 `CSS2DRenderer` 或 `CSS3DRenderer`，不使用则无开销。

创建的对象是标准 Three.js `Object3D`，直接添加到场景中即可：

```typescript
// CSS2D 标签
const labelEl = document.createElement('div');
labelEl.textContent = '标签';
labelEl.style.cssText = 'background:rgba(0,0,0,0.7);color:#fff;padding:4px 8px;border-radius:4px;font-size:13px;';
const label = viewer.cssRenderer.createCSS2DObject(labelEl);
label.position.set(0, 2, 0);
viewer.scene.add(label);

// CSS2.5D 精灵（需设置 scale，通常 0.01 左右）
const spriteEl = document.createElement('div');
spriteEl.textContent = '精灵';
const sprite = viewer.cssRenderer.createCSS25DObject(spriteEl);
sprite.position.set(3, 2, 0);
sprite.scale.setScalar(0.01);
viewer.scene.add(sprite);

// CSS3D 面板（需设置 scale，通常 0.01 左右）
const panelEl = document.createElement('div');
panelEl.innerHTML = '<h3>面板</h3><p>3D 空间中的 HTML</p>';
const panel = viewer.cssRenderer.createCSS3DObject(panelEl);
panel.position.set(0, 1.5, -3);
panel.scale.setScalar(0.01);
viewer.scene.add(panel);
```

> `CSSRenderer` 的生命周期（渲染、缩放、销毁）已自动集成到 `Viewer` 中，无需手动调用。

同时从 `u-space` 包中导出了 `CSS2DObject`、`CSS3DObject`、`CSS3DSprite` 类型，供直接使用。