Question

对于大多数人来说，我的问题似乎很基本，但是我仍在学习THREE.JS，并且在理解它时遇到了困难。.

所以现在，我已经使用图像创建了一个滑块（我正在遍历每个纹理）。一切正常。但是我想用视频替换我的2张图片。现在，我的代码如下：

(...)
const gl = {
    camera: new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 1000),
    scene: new THREE.Scene(),
    renderer: new THREE.WebGLRenderer(),
    loader: new THREE.TextureLoader()
  };

  const textures = [
    gl.loader.load('https://i.ibb.co/myimage01.jpg'),
    gl.loader.load('https://i.ibb.co/myimage02.jpg'),
    gl.loader.load('https://i.ibb.co/myimage03.jpg'),
    gl.loader.load('https://i.ibb.co/myimage04.jpg')
  ];
(...)

阅读文档后，我了解到我无法使用纹理加载器加载视频，对吗？有解决方法吗？如何在不重新编写所有代码的情况下用网络上托管的某些.mp4视频替换图像？

我尝试执行以下操作：

var videoTexture01 = new THREE.VideoTexture(
    'https://linktomyvideo.mp4'
  );
  videoTexture01.minFilter = THREE.LinearFilter;
  videoTexture01.magFilter = THREE.LinearFilter;
  videoTexture01.format = THREE.RGBFormat;

  const gl = {
    camera: new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 1000),
    scene: new THREE.Scene(),
    renderer: new THREE.WebGLRenderer(),
    loader: new THREE.TextureLoader()
  };

  const textures = [
    videoTexture01,
    gl.loader.load('https://i.ibb.co/myimage02.jpg'),
    gl.loader.load('https://i.ibb.co/myimage03.jpg'),
    gl.loader.load('https://i.ibb.co/myimage04.jpg')
  ];

但是视频没有显示，我只有黑屏..（图像继续正常工作，并且控制台中没有任何错误）

Answer 1

我不好！阅读文档，我找到了答案。

对于同样的问题，这是我的解决方法。首先，将视频添加到html文件中：

<video id="video01" loop crossOrigin="anonymous" playsinline style="display:none">
      <source src="https://linktomyvideo.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>

然后在我的js中：

video01 = document.getElementById('video01');
  video01.play();
  const videoTexture01 = new THREE.VideoTexture(video01);

  const gl = {
    camera: new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 1000),
    scene: new THREE.Scene(),
    renderer: new THREE.WebGLRenderer(),
    loader: new THREE.TextureLoader()
  };

  const textures = [
    videoTexture01,
    gl.loader.load('https://i.ibb.co/myimage02.jpg'),
    gl.loader.load('https://i.ibb.co/myimage03.jpg'),
    gl.loader.load('https://i.ibb.co/myimage04.jpg')
  ];

使用three.js加载视频

1 个答案: