CSS3DRenderer不接管CSS样式，需手动设置DOM元素样式；标签不可见主因是未设宽高/颜色或被canvas遮挡；CSS3DObject固定朝向，CSS3DSprite始终面向相机；须用pointerEvents控制事件穿透，字体缩放需动态计算距离。
CSS3DRenderer 本身不接管 CSS 样式逻辑，所有样式必须由你手动写在 DOM 元素上，CSS3DObject 只负责把那个元素“挂”进 3D 空间位置和朝向 —— 这是绝大多数人一开始踩坑的根源。
为什么加了 CSS3DRenderer 标签却看不见？
常见现象：DOM 元素创建了、CSS3DObject 也加进 scene 了，但页面上完全没显示。
-
CSS3DRenderer.domElement默认插入到document.body底部，且position: absolute，但如果没有显式设置top/left或 z-index，可能被 canvas 遮住或溢出视口 - 你创建的
div没设宽高、背景色、字体色等基础样式，浏览器渲染出来是“透明空盒”，不是“没挂上”，是“挂上了但啥都看不到” -
CSS3DRenderer不支持transform: scale()等影响布局的 CSS 属性（它只读取position、rotation、scale的 Three.js 属性），别指望用 CSS 控制缩放
CSS3DObject 和 CSS3DSprite 选哪个？
关键区别不在“能不能动”，而在“面对相机的方式”：
-
CSS3DObject：按世界坐标系定位，旋转/平移完全跟随你设的position和rotation，适合固定朝向（比如贴在模型侧面的说明牌） -
CSS3DSprite：始终面向相机（billboard 行为），适合悬浮标签、标注点、指示箭头这类“不管怎么转视角都要正对你”的场景 - 两者都要求你手动控制 DOM 元素样式；
CSS3DSprite内部会自动加一层transform: rotateY(180deg)来翻转，所以你的文字内容如果用了transform，容易意外倒置
怎么让 HTML 标签不挡住 WebGL 画布？
CSS3DRenderer.domElement 是个独立的 div，默认会捕获鼠标事件，导致 OrbitControls 失效、模型无法拖拽缩放。
- 最简方案：
labelRenderer.domElement.style.pointerEvents = 'none'—— 整个渲染层透传鼠标，不影响交互 - 若需对某个标签响应点击（比如弹窗），不要给整个
domElement开pointerEvents，而是在创建div时单独加：div.style.pointerEvents = 'auto' - 注意层级：如果 canvas 和
CSS3DRenderer.domElement同级，确保canvas的z-index小于标签层（或反过来），否则点击永远触发不到标签
样式适配 3D 缩放的实际难点
很多人以为“用了 CSS3D 就能随模型缩放”，其实不然：CSS 字体大小、padding、border-radius 等单位是绝对像素，不会随 camera 距离变化而自动缩放。
- 想实现“近大远小”的文字效果，不能只靠 CSS，得动态改
div.style.fontSize—— 基于camera.position.distanceTo(object.position)计算缩放系数 - 避免用
em或rem，它们依赖父容器字体设置，而CSS3DRenderer的根容器是自己生成的div，无继承链可言 - 圆角、阴影等视觉修饰在远距离下会糊成一团，建议只在中近距离启用：
if (distance
真正麻烦的从来不是“怎么加标签”，而是“怎么让标签在任意视角、任意距离、任意交互状态下，既看得清又点得准还不出 Bug”。每加一个 CSS3DObject，你就多了一个要手动同步位置、旋转、可见性、事件流和样式的 DOM 节点 —— 它不是组件，是需要你亲手托住的活物。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
