HTML 标注

一个带经纬网的地球，十六个城市标注用 div 渲染，字号、圆点、描边全部来自 CSS。 旋转时标注跟着球面走，背面的会自然被遮挡。

两个渲染器叠在一起

CSS2DRenderer 生成一层绝对定位的容器，里面每个标注都是一个 div，位置由三维坐标投影到屏幕后算出。 Canvas 在下、DOM 层在上，两层的尺寸与相机必须完全一致， 否则标注会整体偏移。

DOM 层设成 pointer-events: none，鼠标事件直接穿透给画布， 地球的拖拽旋转才不会被标注挡住。需要点击标注时，单独给标注开 pointer-events: auto。

什么时候用 DOM 标注

需要抗锯齿的文字、复杂排版、可点击的按钮、甚至输入框时，DOM 标注几乎不可替代。 代价是每个标注一次 DOM 操作，几百个还能接受，上万个就会拖慢主线程。

纯展示、数量巨大的标签应该做成贴图走 Sprite 或实例化面片； DOM 标注适合数量受控、样式要求高的关键要素。