使用 Three.js 创建视频平面

这段代码实现了一个 VideoPlane 类，该类用于创建包含视频纹理的平面。具体来说，该类构造函数需要传入三个参数：视频资源路径、平面大小、平面位置。

在构造函数中，首先创建一个 video 元素，并设置其 src 属性为传入的视频资源路径。然后设置视频元素为静音、循环播放，并播放视频。

接下来，使用 THREE.VideoTexture 将视频元素作为纹理创建一个纹理对象 texture。

然后，创建一个平面几何体 planeGeometry，使用 THREE.MeshBasicMaterial 创建平面材质 planeMaterial，并将视频纹理设置为材质的 map 属性和 alphaMap 属性，这样可以让视频内容显示在平面上。

最后，使用平面几何体和平面材质创建一个 Mesh 对象，赋值给 VideoPlane 实例的 mesh 属性，并将传入的平面位置赋值给该 Mesh 对象的 position 属性。

总之，这段代码实现了一个简单的视频平面，可以方便地在 Three.js 场景中使用。

import * as THREE from 'three';
import gsap from 'gsap';

export default class VideoPlane {
  constructor(
    videoSrc,
    size = new THREE.Vector2(1, 1),
    position = new THREE.Vector3(0, 0, 0)
  ) {
    // 添加视频纹理
    this.video = document.createElement('video');
    this.video.src = videoSrc;
    // 如果想要视频能够自动播放，那么就设置为静音
    this.video.muted = true;
    this.video.loop = true;
    this.video.play();
    const texture = new THREE.VideoTexture(this.video);

    // 创建一个平面
    const planeGeometry = new THREE.PlaneGeometry(size.x, size.y, 1, 1);
    const planeMaterial = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
      transparent: true,
      blending: THREE.AdditiveBlending,
      depthWrite: false,
      map: texture,
      alphaMap: texture,
    });

    this.mesh = new THREE.Mesh(planeGeometry, planeMaterial);
    this.mesh.position.copy(position);
  }
}