前言

上节我们写了利用了图片给几何体进行了贴图，除了图片canvas与video也可以当做贴图，本节我们就来介绍一下canvas、video当做贴图的用法。

Canvas画布

three中通过CanvasTexture创建纹理贴图，该构造函数与Textrue用法基本一样，不用的是第一个参数为canvas元素：

   CanvasTexture( canvas, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy)

相比于图片贴图，canvas贴图首先需要我们自定义一个canvas元素，canvas与svg一般用于渲染2d图形，我们平时用的echarts本质就是通过canvas画出来的，大家有对2d感兴趣的话也可以去学习canvas。这里我们简单知道如何创建即可。

         //创建canvas元素
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 100;
      const c = canvas.getContext('2d');
      //开启新的路径
      c.beginPath();
      c.translate(100, 50);
      //设置文字相关属性
      c.fillStyle = 'green';
      c.textBaseline = 'middle';
      c.textAlign = 'center';
      c.fillText('Canvas', 0, 0);
      document.body.appendChild(canvas);

接下来我们利用CanvasTexture进行贴图：

const canvas = document.createElement('canvas');
canvas.width = 40;
canvas.height = 20;
const c = canvas.getContext('2d');
c.beginPath();
c.translate(20, 10);
//设置文字相关属性
c.fillStyle = 'green';
c.textBaseline = 'middle';
c.textAlign = 'center';
c.fillText('Canvas', 0, 0);
const texture = new THREE.CanvasTexture(canvas);
const geometry = new THREE.PlaneGeometry(40, 40);
const material = new THREE.MeshBasicMaterial({
  color:0x5124,
  map: texture
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

如果我们想在canvas上加载图片再用于贴图，需要更下纹理。

   texture.needsUpdate = true;

Video视频

视频贴图通过VideoTexture创建，构造函数也是一样的，只不过将video视频源当做第一个参数。为什么视频也能用于贴图呢，这跟上面needUpdate还有关联。视频本质是一帧帧图片构成，当我们把视频当做贴图时就相当于把一帧帧图片抽取出来去贴图，VideoTexture有专门的的update函数能将needsUpdate设为true去更新纹理，达到了视频贴图的目的。

const video = document.createElement('video');
video.src = '1.mp4'; // 地址 相对路径
video.autoplay = 'autoplay'; //自动播放
// video对象作为VideoTexture参数创建纹理对象
const texture = new THREE.VideoTexture(video);

总结

以上就是画布及视频纹理贴图的用法，注意当使用canvas加载图片时需要更新纹理。