//我们使用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());
最终我们得到效果