Three.js v147数据纹理渲染失效求助（v110可正常运行）

云原生阿岚

2026-8-5

解决Three.js v147中静态灰度位图渲染失效的问题

你的代码在v110到v147版本间失效，核心原因是Three.js对纹理格式枚举和WebGL兼容性做了调整，以下是具体修复方案：

关键修改点

替换废弃的LuminanceFormat：从v125版本开始，Three.js废弃了LuminanceFormat（对应WebGL 1.0的luminance格式，WebGL 2.0已不再原生支持），改用RedFormat作为单通道灰度纹理的标准格式。
显式指定纹理类型：明确设置texture.type = UnsignedByteType，确保和你的Uint8Array数据类型匹配，避免新版本默认值变化引发问题。
手动触发纹理更新：新版本中创建DataTexture后，需手动设置texture.needsUpdate = true，告知Three.js更新纹理数据。

修改后的完整代码

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, RedFormat);
    texture.type = UnsignedByteType;
    texture.flipY = true;
    texture.needsUpdate = 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);
}