canvas画布、视频作为纹理贴图

通过Three.js两个类CanvasTexture和VideoTexture可以分别实现把Canvas画布、视频作为纹理贴图使用。

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

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元素作为构造函数CanvasTexture的参数创建一个canvas纹理贴图。

/**
 * 创建一个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;
}

视频作为Three.js纹理贴图(VideoTexture)

视频本质上就是一帧帧图片流构成，把视频作为Threejs模型的纹理贴图使用，就是从视频中提取一帧一帧的图片作为模型的纹理贴图，然后不停的更新的纹理贴图就可以产生视频播放的效果。

下面是一段视频作为纹理贴图的代码。

// 创建video对象
let video = document.createElement('video');
video.src = "1086x716.mp4"; // 设置视频地址
video.autoplay = "autoplay"; //要设置播放
// video对象作为VideoTexture参数创建纹理对象
var texture = new THREE.VideoTexture(video)
var geometry = new THREE.PlaneGeometry(108, 71); //矩形平面
var material = new THREE.MeshPhongMaterial({
  map: texture, // 设置纹理贴图
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

VideoTexture.js封装了一个update函数，Threejs每次执行渲染方法进行渲染场景中的时候，都会执行VideoTexture封装的update函数，执行update函数中代码this.needsUpdate = true;读取视频流最新一帧图片来更新Threejs模型纹理贴图。