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

Question

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

//出现一次

INVALID_VALUE: 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)

}

这是设置视频源的代码：

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 已设置并可能正在播放它作为一个纹理。 Hth

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

Three.js Webgl texture errors - power of two - no video

javascript

webgl

three.js

reactjs