mesh渲染到ui_如何在threejs中制作UI元素

我们在很多场景需要使用类似2D UI的效果，比如游戏的小地图啊，瞄准啊，标注啊，地图上的定点啊等等。这篇，我们来讲讲怎么制作一个3D场景的2D UI元素显示效果。

首先，我们来分析分析需求。一般来说，我们的UI元素分为一下几种情况。固定屏幕位置，不随3D物体移动。类似cs中的小地图，武器装备箱等UI元素。

跟随3D物体的UI展示，类似标签，游戏人物头顶的血条，设备监控的报警提示等。

分析完使用情况后，我们来分别聊聊每种情况的具体实现。

固定屏幕位置的2D UI展示

对于固定屏幕位置的2D UI展示，我建议在web上就直接使用html的DOM标签实现。使用决对定位的DIV，重叠在渲染Canvas上。例如下图所示的这种出现在固定位置的UI。其实本质和普通网页的绝对定位absoluteUI没有什么区别，放心大胆的使用html元素实现，是最简单直接的方式，而且对于交互事件等处理，完全和普通html元素一样，并没有额外的学习、开发成本。

跟随3D的UI元素

对于跟随3D的UI元素，首先我们看看下图中的这种提示，一般用来在3D场景中展示尺寸等信息。对于这类信息的展示。我的建议是使用canvas2D的绘图API绘制相关的信息，然后当做贴图CanvasTexture，直接贴在面片Plane的材质贴图上进行展示。这里，其实并没有“跟随”的概念，因为我们只是在三维场景里面加入了一个三维面片，由于共享三维坐标系的原因，所以ui与三维物体的相对位置是保持一致的。我们对场景统一缩放旋转的时候&#