Three.js WebGL纹理报错：无视频与非2的幂纹理问题求助

一、针对警告的解决方案 #

1. 消除INVALID_VALUE: texImage2D: no video警告 #

这个警告的核心原因是视频元素还未加载有效内容，就被绑定到了VideoTexture上——当Three.js尝试从视频读取像素数据时，视频处于无内容状态，自然会抛出错误。

具体修复步骤：

• 不要在创建视频元素后立刻生成纹理，而是等待视频的loadeddata事件触发后再初始化VideoTexture，确保视频已经有可读取的像素数据：

const video = document.createElement('video');
video.setAttribute('crossorigin', 'anonymous');
video.muted = true; // 这里用布尔值更规范，避免字符串类型的潜在问题

// 等待视频加载完成后再创建纹理
video.addEventListener('loadeddata', () => {
  const videoTexture = new THREE.VideoTexture(video);
  videoTexture.generateMipmaps = false;
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBFormat;
  
  this.movieMaterial = new THREE.MeshPhongMaterial({
    map: videoTexture,
    overdraw: true,
    side: THREE.DoubleSide
  });
  
  // 如果屏幕网格已存在，直接更新材质
  if (this.screenMesh) {
    this.screenMesh.material = this.movieMaterial;
  }
});

// 最后再设置视频源并加载
video.src = this.props.video;
video.load();

• 在更新视频源的逻辑里，也要重复这个“等待加载”的逻辑，避免切换视频时再次触发警告：

componentWillReceiveProps(nextProps) {
  if (this.props.video !== nextProps.video && this.video) {
    // 先暂停旧视频，清理旧的监听
    this.video.pause();
    
    const onVideoLoaded = () => {
      this.video.play();
      this.screenMesh.material = this.movieMaterial;
      this.screenMesh.needsUpdate = true;
      this.video.removeEventListener('loadeddata', onVideoLoaded);
    };
    
    this.video.addEventListener('loadeddata', onVideoLoaded);
    this.video.src = nextProps.video;
    this.video.load();
  }
}

2. 解决RENDER WARNING: texture bound to texture unit 0 is not renderable警告 #

这个警告反复出现，主要是两个原因：一是视频未加载时纹理处于无效空状态，二是视频分辨率可能不是2的幂（比如1920×1080这类常见尺寸就不符合2的幂要求）。虽然你已经关闭了mipmap并设置了线性过滤，但空纹理在部分WebGL环境下还是会触发警告。

具体修复步骤：

• 给视频纹理设置临时占位纹理，在视频加载完成前先用纯色或低分辨率占位纹理替代：

// 创建256×256的纯色占位纹理（256是2的幂，避免额外警告）
const placeholderCanvas = document.createElement('canvas');
placeholderCanvas.width = 256;
placeholderCanvas.height = 256;
const ctx = placeholderCanvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 256, 256);

const placeholderTexture = new THREE.CanvasTexture(placeholderCanvas);
placeholderTexture.minFilter = THREE.LinearFilter;
placeholderTexture.magFilter = THREE.LinearFilter;

// 初始材质先使用占位纹理
this.movieMaterial = new THREE.MeshPhongMaterial({
  map: placeholderTexture,
  overdraw: true,
  side: THREE.DoubleSide
});

// 视频加载完成后替换为视频纹理
video.addEventListener('loadeddata', () => {
  const videoTexture = new THREE.VideoTexture(video);
  videoTexture.generateMipmaps = false;
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBFormat;
  
  this.movieMaterial.map = videoTexture;
  this.movieMaterial.map.needsUpdate = true;
});

• 确认视频分辨率：如果视频不是2的幂尺寸，务必保持generateMipmaps = false，且只使用LinearFilter或NearestFilter，不要使用依赖mipmap的过滤方式（比如LinearMipmapLinearFilter）。

二、提升渲染流畅度的实用技巧 #

• 移除不必要的纹理更新：VideoTexture默认会自动跟随视频帧更新，手动设置needsUpdate = true会增加额外的渲染开销，建议删除这一行代码。
• 优化材质参数：overdraw: true是为了解决模型边缘撕裂，但会增加渲染计算量，如果你的模型没有边缘显示问题，可以尝试移除这个属性。
• 监控渲染性能：引入Three.js的Stats工具，实时查看帧率和渲染开销，定位性能瓶颈：

import Stats from 'three/addons/libs/stats.module.js';
const stats = new Stats();
document.body.appendChild(stats.dom);

// 在渲染循环中添加统计更新
function animate() {
  requestAnimationFrame(animate);
  stats.update();
  renderer.render(scene, camera);
}

• 优化视频资源：使用WebM这类适合Web的高效视频格式，压缩视频分辨率和码率，降低视频解码的CPU占用。
• 阴影优化：如果screenMesh的阴影不是必须的，直接关闭castShadow = true；如果需要阴影，降低阴影贴图分辨率（比如设置renderer.shadowMap.mapSize.set(512, 512)），并使用THREE.PCFSoftShadowMap类型减少性能开销。
• 适配React生命周期：如果使用较新版本的React，建议用useEffect替代componentWillReceiveProps，避免生命周期带来的场景不同步问题，减少不必要的材质和场景更新。

内容的提问来源于stack exchange，提问作者Tim Tolley