Javascript Three.js Webgl纹理错误-二次幂-无视频

我是三个新手，最近开发了一个完整的堆栈react应用程序，它使用Three.js渲染带有视频纹理的模型。我收到一些警告，我认为这些警告导致应用程序运行非常缓慢。警告如下:

//出现一次

无效的_值：texImage2D:无视频

//至少出现15次左右

[.Offscreen-For-WebGL-0x7fa724847800]渲染警告：绑定到纹理单元0的纹理不可渲染。它可能不是2的幂，并且具有不兼容的纹理过滤

我认为有关守则是：

const video = document.createElement('video')
video.setAttribute('crossorigin', 'anonymous')
video.load()
video.muted = 'muted'
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})
this.movieMaterial.map.needsUpdate = true

这是设置纹理的代码：

  handleComputerScreen (geometry) {
let mat = null
if (this.props.videoActive) {
  mat = this.movieMaterial
} else {
  mat = this.regScreenMaterial
}
this.screenMesh = new THREE.Mesh(geometry, mat)
this.screenMesh.castShadow = true
this.scene.add(this.screenMesh)

}

这是设置视频src的代码：

componentWillReceiveProps (nextProps) {
 if (this.props.video !== nextProps.video) {
  this.video.src = nextProps.video
  this.video.play()
  this.screenMesh.material = this.movieMaterial
  this.screenMesh.needsUpdate = true
 }
}

完整的Three.js代码可在此处找到：

可在以下位置找到带有警告的应用程序的实时版本：

任何提示都很好。另外，任何使渲染运行更平滑的技巧都将非常棒

干杯，

---

Tim

您必须将texture.minFilter和.magFilter设置为3。NearestFilter。。。此外，在开始将视频URL用作纹理之前，您可能必须确保已设置并可能正在播放视频URL。Hth

谢谢！我会试试看！这成功了！谢谢你。我更改了过滤器并添加了一个超时，其中视频纹理的设置类似于componentWillReceiveProps nextProps{if this.props.video！==nextProps.video{this.video.src=nextProps.video this.video.play setTimeout=>{this.screenMesh.material=this.movieMaterial this.screenMesh.needsUpdate=true}，500}我怎么知道什么时候使用最接近的滤镜和线性滤镜？如果你的纹理不是2的幂，即2/4/8/16/32/64/128/256等…你不能使用复杂的滤镜，因为更复杂的滤镜方法依赖于纹理是2的幂。所以在这种情况下，你应该使用最接近的。通常当你的纹理是非正方形或非幂of 2，使用最近的。感谢您花时间解释，非常有意义！干杯！