ThreeJs sprite canvasTexture加载图片 更新文字

之前为了尽快实现数据交互，使用sprite、canvas和canvasTexture来制作始终面向相机的框框的时候只是简单的在canvas上画了个线段，写了个文字，就这么一段代码：

然后画出来这个canvas之后不显示它，因为画它是为了把它作为贴图贴到场景中的sprite上，数据可以交互之后想回过头来把这个框框美化一下，加一张自己的图片，透明那种，就高级一一些了，这里面最主要的问题，图片是需要加载的，加上threejs里异步那一套，果然是满满的艰难险阻。
主要参考了：这位大佬的文章，为了调试我把这个canvas显示了出来，方便看到问题出在了哪一环，又是经历了各种困难，图片有文字没了、全都不显示了、canvas有sprite没有…各种排列组合的问题。。
最终我静下心来按照大佬的文章来了一遍，
最终代码：

				var sprite; 			
				function showSprite(){
				makeTextPlaneMate2().then(function(m){
					sprite =  new THREE.Sprite(m);
					sprite.position.set(145,220,-135);
					sprite.scale.set(60,60,1);
					scene.add(sprite);
				})
				 			} 			
				 			function makeTextPlaneMate2() {
				//绘制画布做为Sprite的材质
				var canvasText=document.getElementById("canvasText");
				var ctx=canvasText.getContext("2d");
				//添加背景图片，进行异步操作
				return  new Promise((resolve, reject) => {
					let img = new Image();
					img.src="img/aaa.png";
					//图片加载之后的方法
					img.onload = () => {
						//将画布处理为透明
						ctx.clearRect(0, 0, 300, 300);
						//绘画图片
						ctx.drawImage(img,0,0,300,150);

						resolve(makeText(ctx, canvasText))
					};
					//图片加载失败的方法
					img.onerror = (e)=>{
						reject(e)
					}
				}); 			} 			function makeText(ctx,canvas){
				//画边框
				ctx.strokeStyle="#000000";
				ctx.strokeRect(0,0,300,75);
				//画线段
				ctx.beginPath();
				ctx.moveTo(0,75);
				ctx.lineTo(20,95);
				ctx.lineTo(95,95)
				ctx.lineTo(150,150);
				ctx.strokeStyle="blue";
				ctx.stroke();
				//文字
				const x=10;
				const y=50
				ctx.font="40px Arial";
				ctx.fillText(text1,x,y);

				let texture=new THREE.CanvasTexture(canvas);
				return new THREE.SpriteMaterial({map: texture}); 			
				}

然后初始化是没有初始化sprite的，在animate()里：

				showSprite();
				requestAnimationFrame( animate );
				scene.remove(sprite);

最后调试的时候，我发现语句和requestAnimationFrame( animate );竟然是有顺序关系的