Three.js无头Node.js渲染中map_Kd纹理格式转换问题

我正在基于Three.js开发用于OBJ和MTL文件的无头Node.js渲染器，已重写加载器实现本地文件加载，OBJ渲染功能正常。但加载MTL对应的map_Kd纹理时遇阻：已获取正确路径并加载纹理数据，却无法将原始图像数据转换为Three.js可识别格式。

TextureLoader.js代码 #

class TextureLoader extends Loader {

    constructor( manager ) {

        super( manager );

    }

    async load( url, onLoad, onProgress, onError ) {
        console.log('Called texture loader load')

        const texture = new Texture();

        const loader = new ImageLoader( this.manager );
        loader.setPath( this.path );

        await loader.load( url, function ( image ) {

            console.log('Texture loader image:', image)

            texture.image = image;
            texture.needsUpdate = true;

            if ( onLoad !== undefined ) {

                onLoad( texture );

            }

        }, onProgress, onError );

        return texture;

    }

}

我认为问题出在负责加载颜色贴图的ImageLoader.js中，目前使用Canvas和JSDOM模拟HTMLCanvasElement，但无法正常渲染。

ImageLoader.js代码 #

class ImageLoader extends Loader {
  constructor(manager) {
    super(manager);
  }

  async load(url, onLoad, onProgress, onError) {
    console.log('ImageLoader Requested:', url);
    const scope = this;
  
    const imageData = new Promise((res) => {
      fs.readFile(url, (err, data) => {
        if (err) {
          // Handle error
        } else {
          scope.manager.itemStart(url);
          const imageBase64 = 'data:image/png;base64,' + data.toString('base64');
          const dom = new JSDOM(`<!DOCTYPE html><body><img id="myimg" /></body>`);
          const img = dom.window.document.getElementById('myimg');
          img.onload = () => {
            const canvas = Canvas.createCanvas(img.width, img.height);
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            console.log('ImageLoader Loaded:', url);
            scope.manager.itemEnd(url);
            onLoad(canvas); // Pass the Canvas to the callback
          };
          img.src = imageBase64;
        }
      });
    })
  
    return await imageData;
  }
};

我已确认纹理包含图像数据，但不确定Three.js所需数据类型。尝试过模拟HTMLImageElement、HTMLCanvasElement，也修改代码支持base64图像，均未生效。

内容的提问来源于stack exchange，提问作者Reece Harris