Three.js CSS3D、CSS2D及精灵的区别

在Three.js中，这三种API都可以用来制作标签，那么有什么区别呢，本文进行解惑。

首先，CSS3D和CSS2D都是DOM下的元素，而精灵使用Canvas作为纹理显示。

DOM下的元素，意思就是可以通过CSS或JS这些去获取ID控制样式，更新时调整元素的值就可以了，精灵的只能去Canvas画，包括更新时也如此。

主要区别如下：

CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击

CSS2D面向摄像机，场景缩放时，缩小放大都一样大，不被模型遮挡，通过DOM事件点击。

精灵面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。

CSS2D/CSS3D/精灵，这三种各有不同，看需求去做就是了。

这三种API也可以通过一些算法调整去模拟其他两个的功能，所以也不是绝对的，绝对的就是DOM和Canvas的区别了。

原文：Three.js CSS3D、CSS2D及精灵的区别 - 知乎