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 类型，供直接使用。

CSSRenderer API ​

CSSRenderer API