Three.js使用补充——Sprite精灵标签

1.本文主要内容

Three.js有关内容也是属于Web三维可视化监控系统搭建的一部分，但是考虑到这里只是专注于Threejs有关内容的介绍，因此把标题改成了Threejs的补充，将常用的模块进行单独介绍。当然，后面还能补充什么内容，我还没想好。
码云示例仓库地址，考虑到国内访问gayhub的速度，我就放在码云上了。运行其中的sprite_test.html即可尝试sprite效果。点击立方体可以显示标签，再次点击相同标签可以关闭标签。

2.Sprite介绍

sprite直接翻译过来就是精灵。它的特性是，永远正对相机平面。不像广告牌，可以绕到后面看看，绕到侧面看看，它永远会正对着你。所以我们可以用它来显示一些标签，比如在可视化监控系统中，就可以显示传感器的数据，下图所示，可以用来显示温度，当改变观看角度，标签也会随之改变角度。

3.Threejs中Sprite的相关函数使用

显示文字主要分为如下几个步骤：用自带的canvas画出边框、填字；将canvas的纹理作为sprite的材质创建sprite；将sprite添加入场景scene中。
下面的代码主要参考了这篇博文，我懒得复制粘贴了，如果需要直接复制代码的，跳到那篇博文直接复制就好了

4.封装好的Sprite相关内容的使用

在码云示例仓库地址中，我已经封装好了一个three_sprite_utils.js，虽然其中的内容以抄来的为主吧。

4.1 管理已创建的sprite对象

我在前人的基础上加入了切换显示的功能，也就是我的应用背景是点击一下某个物体，就出现对应的文字，再点击一下，就隐藏。比方说在可视化场景中，点击温度计，就出现当前温度；再点击温度计，就隐藏当前温度。
要实现这样的功能，就需要用一个数组去管理sprite。

var spriteInfoItem = {