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

Question

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

//出现一次

INVALID_VALUE:texImage2D:无视频

//至少出现15次左右

[.Offscreen-For-WebGL-0x7fa724847800]渲染警告:绑定(bind)到纹理单元 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)

}

这是设置视频源的代码:

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...此外，在开始将其用作纹理之前，您可能还必须确保您的视频URL已设置并且可能正在播放。第H次