three.js增加文字作为贴图使用

//我们使用canvas增加字体
let canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 256;
let c = canvas.getContext('2d');
// 矩形区域填充背景
c.fillStyle = "#ff00ff";
c.fillRect(0, 0, 1024, 256);
c.beginPath();
// 文字
c.beginPath();
c.translate(512,128);
c.fillStyle = "#000000"; //文本填充颜色
c.font = "bold 48px 宋体"; //字体样式设置
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
c.fillText("喔哈哈哈，我是three.js", 0, 0);

let texture = new THREE.CanvasTexture(canvas);
//矩形平面
let geometry = new THREE.PlaneGeometry(256, 64);

let material = new THREE.MeshPhongMaterial({
    map: texture, // 设置纹理贴图
    side:THREE.DoubleSide,//不设置此项的话，我们只能看到一面字体，当旋转角度后，另外一面不可见
});
// 创建一个矩形平面网模型，Canvas画布作为矩形网格模型的纹理贴图
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(50,150,-50);

var scene = new THREE.Scene();
scene.add(canvasTxet());

最终我们得到效果