破损的数据纹理渲染在较新的三个版本

Question

我有三个js渲染静态位图的代码。此代码在v110中工作，但在v147中不起作用。我爬了更新日志，但是找不到差异。

我调用方法的数据是整数位图灰度值的普通数组，所以:

data.length === width*height和0 < data[i] < 255

renderBitmap(data: Uint8Array, width: number, height: number): void {
const camera = new PerspectiveCamera(45, width / height, 0.1, 10000);
const texture = new DataTexture(data, width, height, LuminanceFormat);
texture.flipY = true;
const material = new MeshBasicMaterial({ map: texture });
const geometry = new PlaneGeometry(width, height);
const plane = new Mesh(geometry, material);
this._dispose(ImageDataIdentifier.BITMAP);
this.scene.add(plane);
camera.position.z = width / (2 * Math.tan(MathUtils.degToRad(camera.fov / 2))) / camera.aspect;
this.renderer.setSize(width, height);
this.renderer.render(this.scene, camera);
}

Answer 1

您的代码中有两个问题:

• 正如@ prisoners 849在评论中提到的，当创建DataTexture时，必须将needsUpdate设置为true。
第二，你不能在WebGL 2中使用THREE.LuminanceFormat。如果你想要灰度纹理，你必须将数据扩展到RGBA或使用THREE.RedFormat，并且只对着色器中的红色通道进行采样。后一个选项可能不适合你，因为你使用MeshBasicMaterial而不是自定义着色器。