问题：需要为3d中的物体加入dom标签。用于展示状态属性。
思路一：
使用canvas作为贴图。使用sprite。使之面向屏幕。后来发现在3d中canvas的大小和文字大小不易控制，导致显示字体模糊。（放弃 ）
思路二：
后来使用通过正在3d种标记点。然后调用调用点的世界坐标投影计算屏幕的位置
var vector = object3d.getWorldPosition().project(camera)
var x= Math.round(vector.x * Root.W/2 + Root.W/2)
var y= Math.round(-vector.y * Root.H/2 + Root.H/2)
后记：关于getWorldPosition是为了解决，camera和object3d在旋转的场景中，不变化。
因为我的写法是外层group绕y旋转。相机和group内部的object不做处理。这样的话必须获取对应对象的世界坐标。
问题2：dom标签层级问题。
由于标签是一直浮动在canvas上面的，根据其dom生成的顺序，导致dom的层级是固定的，这个样的话会导致标签显示的层级不正确。
在右上方明显有层级错误
为解决这个问题,通过计算点到相机的距离，根据距离排序，重设dom的层级关系。
示例代码
最终效果：
GIFaa.gif
网友评论