使用Three.js创建VideoTexture时显示出现条纹的问题求助

我之前在项目里也遇到过一模一样的VideoTexture条纹问题，折腾了好一阵才找到根源，结合你的代码和描述，给你几个针对性的解决思路：

最常见原因：纹理尺寸不是2的幂次方 + Mipmap冲突 #

Three.js的纹理系统对2的幂次方尺寸（比如512x512、1024x2048这类）有更好的兼容性，而普通视频的1920x1080这种非2幂分辨率，会触发默认的minFilter: THREE.LinearMipmapLinearFilter产生采样错误，这就是条纹的主要来源——你之前只改了magFilter，但问题出在minFilter和mipmap上。

解决方案代码调整： #

const video = document.getElementById('video');

// 一定要等视频加载完成再初始化纹理，避免尺寸未就绪的问题
video.addEventListener('loadeddata', () => {
  const videoTexture = new THREE.VideoTexture(video);
  videoTexture.encoding = THREE.sRGBEncoding;
  videoTexture.flipY = false;
  
  // 核心修复：禁用mipmap并修改minFilter
  videoTexture.generateMipmaps = false;
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  
  // 额外保险：防止纹理边缘重复导致的条纹
  videoTexture.wrapS = THREE.ClampToEdgeWrapping;
  videoTexture.wrapT = THREE.ClampToEdgeWrapping;
  
  // 可选优化：开启各向异性过滤，提升斜视角下的纹理清晰度
  videoTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
  
  // 将纹理绑定到你的Mesh材质上...
});

其他排查方向 #

• 视频播放状态：如果在视频还没加载完就创建纹理，可能会拿到错误的尺寸参数，导致采样异常，所以一定要监听loadeddata或canplaythrough事件后再初始化纹理。
• 渲染器配置：确保你的WebGLRenderer开启了正确的抗锯齿，比如初始化时设置antialias: true，也能缓解部分条纹问题。
• 材质设置：如果你的Mesh用的是MeshStandardMaterial，确保map属性正确绑定了videoTexture，没有同时叠加其他纹理导致冲突。

内容的提问来源于stack exchange，提问作者Tiphaine Richard