Three.js Sprite 更新

Sprite可以用来做三维场景中的显示框，它是一个2D的东西，在3D场景中始终面向摄像头，就很适合来做一种状态显示之类的东西
感谢大佬的带更新文字的旋转地球的案例教学，我在此基础上，大体流程是这样的，先做一个canvas，并设置style="display:none，因为创建它的目的，是在它上面写信息，然后把它作为点精灵材质（SpriteMaterial）的参数去构造一个点精灵材质，进一步构造一个点精灵Sprite，上面的案例中的提前准备的canvas中只加了一个文本，而我这里还添加了一个矩形、画了一段线，让它看起来更像一个状态框，在W3SCHOOL里运行出来是这样的

可以看到：

1. 我把伸出来的线终点画到了canvas的正中心，因为只有这样，做出来的sprite在3D场景中旋转时，才会以终点处为旋转点，也就是以画布的正中心来旋转
2. 上面案例里也提到过，要重新设置sprite的尺寸，因为默认的（1，1，1）在我这里也小的看不到，我这里设置的（60，60，1）Z轴没用，设置1就好
3. 还要注意的问题是，用animate()去更新sprite(其实是重新绘制canvas的内容)的时候，要注意先从scene里把这个sprite给remove，然后再重新add进去，否则，不更新还好，只是字体越来越粗越黑，更新的话内容会重叠；其次，写文字画矩形画线之前的这一句：*ctx.canvas.width=300;*不能省略，省略了，就算remove了之前的sprite再重新add一样会重叠内容，而且必须加在所有的最前面，比如如果我跳过画边框，加在他后面，那么只能绘制出文字和线段。