ThreeJs Sprite 加载图片 更新文字（续）

昨天实现了加载图片、写文字到canvas，然后作为texture给Sprite，然后刷新每一帧时重新绘制canvas，移除已有的sprite，用新的材质（带有同样的图片和新的文字）再创建一个新的sprite，以实现更新悬浮框的效果，今天再次打开，想美化一下，用了一张不是全部堵上的图片，得，这一用不要紧，原来昨天实现的效果里，图片下面是还有一层文字的，而且文字的内容不是新更新的，是旧的，也就是：最开始加载的一个sprite没有被移除，每次移除的都是另一个，所以在scene是有两个甚至更多的sprite的，这怎么能忍，然后一直到现在，我才终于算是实现了，下一步的问题是每次不重新加载图片，只更新text。
说一下今天干的，主要的原因在于，canvas加载图片是需要时间的，而animate()里的scene.remove(sprite)确实执行了很多次，可是根本没有移除，因为sprite根本还没有加载进去，我开始尝试通过chrome的调试工具查找原因，不太好用，然后又自己在代码里添加console.log去查看语句的执行顺序，像这样

顺序、同步异步问题是很大的问题，是避不开的必须解决的。
我之前的想法是，服务器每隔5秒给浏览器发送一次数据，这样的话，页面刚刷新好的最开始5秒内就是没有数据的，为了一加载出来就有数据又能每隔5秒刷新，我是在websocket连接成功后立马执行了一次send，然后在html的init里先不创建sprite，直接在animate()里，数据来了再加载，还是一和之前一样，最开始的那个没法remove，所以之后的更新里总会在下面多一层，而且如果加载了一张透明的图片，两张叠加在一起可能就不透明了，最终我还是妥协了，就不实现页面一刷新出来就提供数据吧，更改有：
init()里进行showSprite()，不过加载的文字是”还未接收到数据“
animate()中，如果接受到了服务器的数据，OK，是时候制作一个新的sprite加载到场景里了，当然此时旧的还没有移除，可是如果在这个时候移除，场景里就没有sprite了，因为制作新的sprite要慢于remove，而且尽量不要做无用的移除，昨天我是说requestAnimationFrame( animate );的位置很关键，我错了，其实是它上面的renderer.render( scene, camera );才关键【つ﹏⊂】，为了不要太快移除，我把remove放到了render.render的后面，这样确实是可以的，而且是要在（接收到数据并且场景内有我想移除的这个sprite的情况下）

这样一来，刚刷新页面是没有数据的，但是框框加载出来了，text为”N/A“（我编的）

然后继续运行就会更新出数据，而且场景中一直是只有一个sprite的