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

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

1. Canvas画布作为three.ts纹理贴图(CanvasTexture)

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

    const canvas = document.createElement("canvas");
    canvas.width = 512;
    canvas.height = 128;
    const 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)

• 把绘制了几何图案的canvas元素作为构造函数CanvasTexture的参数创建一个canvas纹理贴图。

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

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

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

2. 视频作为three.ts纹理贴图(VideoTexture)

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

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

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