three.js的css渲染器不处理样式注入，需手动引入css；class必须全局有效，避免scoped隔离；transform、font-size单位、position等有特定限制；字体缩放需手动监听相机距离实现。
Three.js 本身不解析或注入外部 CSS 文件，CSS2DRenderer 和 CSS3DRenderer 都只负责把 DOM 元素“挂”进 3D 空间——样式必须由你手动写在元素上，或通过 <link> / <style></style> 加载并作用于对应 class 或标签。
为什么直接 import CSS 文件没效果？
常见现象：import './label.css' 后，用 CSS2DObject 创建的 div 依然无样式、文字透明、边框不显示。
- Webpack/Vite 默认不会把 CSS 注入到 document.head（尤其 SSR 或模块化环境），
import仅触发加载，不保证执行 -
CSS2DRenderer和CSS3DRenderer渲染的是真实 DOM 节点，但它们不接管样式作用域——class 名必须全局可查，且不能被 scoped 或 CSS-in-JS 隔离 - Vue SFC 的
<style scoped></style>、React 的 css-modules 会重命名 class，导致你在 JS 里写的div.className = 'label-text'找不到匹配规则
正确引入外部 CSS 的三种方式
按推荐顺序排列，兼顾可维护性与调试便利性：
- 用
<link rel="stylesheet">在 HTML 中预加载：最稳定，不受构建工具影响，class 名原样生效<link rel="stylesheet" href="/css/labels.css"> - 在 JS 中动态插入
<style></style>：适合小量样式或运行时生成const style = document.createElement('style'); style.textContent = '.label { color: white; font-size: 14px; }'; document.head.appendChild(style); - 确保构建工具处理 CSS：Vite 用户需确认
vite.config.ts未禁用css插件；Webpack 用户检查style-loader+css-loader是否启用，且import语句在客户端执行（非 SSR 阶段）
CSS2DObject 和 CSS3DObject 对样式的实际限制
即使 CSS 正确加载，以下写法仍会失效或表现异常：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
transform: scale()、transform: rotateZ()等布局类 transform：CSS3DRenderer 完全忽略，缩放/旋转必须通过object.scale.set()或object.rotation.y控制 -
font-size: clamp(...)或rem单位：不会随 camera 距离变化，文字不会“自动变大变小”，需手动监听 distance 并更新div.style.fontSize -
position: fixed或absolute在元素内部：CSS2DObject 依赖getBoundingClientRect()计算屏幕位置，父级定位会干扰投影坐标，一律用position: relative或默认 static -
z-index不控制 3D 层级：它只影响同层 DOM 叠加顺序；要让标签浮在模型上方，得靠scene.add(css2dObject)顺序 +css2dRenderer.domElement.style.zIndex配合 canvas 的z-index
字体大小随距离缩放的简易实现
这是最容易被忽略的细节：CSS 字体是像素单位，而用户拉远相机时，标签不该变成小点。
核心逻辑是监听相机到标签的距离，并反比调整 fontSize：
function updateLabelScale(labelObject, camera, baseDistance = 10, baseSize = 16) {
const dist = labelObject.position.distanceTo(camera.position);
const scale = Math.max(0.5, baseDistance / dist); // 防止过小
labelObject.element.style.fontSize = `${baseSize * scale}px`;
}
注意：这个函数需在每帧 render() 中调用，且 labelObject 必须是 CSS2DObject 实例（含 .element 引用）；CSS3DObject 不提供 .element 直接访问，需自己保留 div 引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
