立方体上的视频纹理

Question

试图把一个简单的视频作为纹理放在一个立方体上，结果什么都没有：)

video = document.createElement('video');
video.width = 320;
video.height = 320;
video.autoplay = true;
video.loop = true;
video.src = 'video.mp4'


var videoTexture = new THREE.Texture(video);
videoTexture.needsupdate = true;


  var cube = new THREE.Mesh(new THREE.BoxGeometry( 10, 10, 10, 1, 1, 1 ), new THREE.MeshBasicMaterial({ map: videoTexture }));
  scene.add(cube);

如果我添加 color: '#fff' 而不是 map: videoTexture 我看到一个白色方块，所以立方体正在添加，所以它与视频有关？

Answer 1

您是否有迹象表明视频正在播放？您还需要检查您的 render() 函数：

if ( video.readyState === video.HAVE_ENOUGH_DATA ) {

    if ( videoTexture ) videoTexture.needsUpdate = true;

}

对于质量/速度，您还可以将这些添加到您的定义中：

videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
videoTexture.generateMipmaps = false;