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及精灵的区别 - 知乎

你可能感兴趣的:(前端,three,CSS2D,CSS3D,three.js)