ThreeJS支持显示文字动态更新演示源码

本源码演示了使用Threejs库 开发的2D中英文文字信息在3D场景中显示的功能，支持更新文字，文字嵌入到场景中，非常值得学习。
基本原理是采用通过Canvas绘制贴图赋给2D精灵元素控件实现动态文字信息。
场景中包括3D地球元素【默认在不断旋转】、云层、标注文字信息等，可以鼠标拖拽、非常值得学习参考。
部分源码

//threejs canvas绘制文字
	var text = "first text";
	function showText(){
	  const canvas = document.getElementById("canvas");
	  const ctx = canvas.getContext("2d");
	  ctx.canvas.width =256;
	  const x =0;
	  const y=32;
	  ctx.fillStyle = "yellow";
	  ctx.font = "30px arial";
	  ctx.textAlign = "left";
	  ctx.textBaseline = "middle";
	  ctx.fillText(text,x,y)
	}

//贴图绑定到精灵元素
function showSprite(){
	  showText()
	  const canvasTexture = new THREE.CanvasTexture(
	    document.querySelector("#canvas")
	  )
	  //canvasTexture.needsUpdate = true; //注意这句不能少
	  const spritMaterial = new THREE.SpriteMaterial({
	    map:canvasTexture
	  })
	  sprite = new THREE.Sprite(spritMaterial)
	  sprite.position.set(-280,0,0);
	  //精灵的默认大小很小估计是[1,1,1]
	  sprite.scale.set(0.64*256,0.64*64,1);
	  scene.add(sprite)
	
	}

注：threejs/WebGL开发，非常值得学习，感谢作者分享。本地预览建议部署WEB服务器，配置运行服务器等网络访问地址运行，建议用火狐浏览器，谷歌浏览器等。