Canvas 画布作为 Three.js 纹理贴图 CanvasTexture

Question

Canvas 画布可以通过 2D API 绘制各种各样的几何形状，可以通过 Canvas 绘制一个轮廓后然后作为 Three.js 网格模型、精灵模型等模型对象的纹理贴图。

一段 Canvas 代码

下面是一段与 WebGL 或者说 Threejs 无关的 Canvas 代码，你可以在 .html 文件中打开查看一下，通过下面代码绘制的 Cnavas 画布可以作为 Three.js 模型对象的纹理贴图。

<script type="text/javascript">
var canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 128;
var c = canvas.getContext('2d');
// 矩形区域填充背景
c.fillStyle = "#ff00ff";
c.fillRect(0, 0, 512, 128);
  c.beginPath();
// 文字
c.beginPath();
c.translate(256,64);
c.fillStyle = "#000000"; //文本填充颜色
c.font = "bold 48px 宋体"; //字体样式设置
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
c.fillText("郭隆邦_技术博客", 0, 0);
document.body.appendChild(canvas)
</script>

/**
 * 创建一个canvas对象，并绘制一些轮廓
 */
var canvas = document.createElement("canvas");
// 上面canvas代码省略
...
c.fillText("郭隆邦_技术博客", 0, 0);
// canvas画布对象作为CanvasTexture的参数重建一个纹理对象
// canvas画布可以理解为一张图片
var texture = new THREE.CanvasTexture(canvas);
//打印纹理对象的image属性
// console.log(texture.image);
//矩形平面
var geometry = new THREE.PlaneGeometry(128, 32);
var material = new THREE.MeshPhongMaterial({
  map: texture, // 设置纹理贴图
});
// 创建一个矩形平面网模型，Canvas画布作为矩形网格模型的纹理贴图
var mesh = new THREE.Mesh(geometry, material);

Canvas 画布加载图片

如果作为纹理贴图使用的 Canvas 画布加载了图片，注意在图片加载完成的时候更新 Threejs 相关模型的纹理贴图。如果不更新纹理，你会发现 canvas 画布上的图片无法现在是 Threejs 模型的纹理上。

var canvas = document.createElement("canvas");
...
var ctx = canvas.getContext('2d');
var Image = new Image();
Image.src = "./贴图.jpg";
Image.onload = function() {
  var bg = ctx.createPattern(Image, "no-repeat");
...
// 注意图片加载完成执行canvas相关方法后，要更新一下纹理
  texture.needsUpdate = true;
}