Question

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

//出现一次

INVALID_VALUE：texImage2D：没有视频

//至少出现15次

[.Offscreen-For-WebGL-0x7fa724847800] RENDER警告：绑定到纹理单元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代码可以在这里找到：

https://github.com/Timothy-Tolley/timothytolley-3js/blob/master/client/components/ThreeD/ThreeD.jsx

可以在以下位置找到应用的实时版本（带警告）： https://timothytolley.com

任何提示都会很棒。此外，任何使渲染运行更顺畅的提示都会很棒！

干杯，添

Answer 1

您必须将texture.minFilter和.magFilter设置为THREE.NearestFilter ...在开始将其用作纹理之前，您可能还必须确保设置了视频网址并可能正在播放。 HTH

Three.js Webgl纹理错误 - 2的幂 - 没有视频

1 个答案: