javascript - 三.js ObjectLoader 不解析来自worker的对象

Question

让我们从一个运行良好的用例开始..

工人.js：

const newMaterial = new THREE.MeshStandardMaterial( { color: 0x606060 } );
    dracoLoader.decodeDracoFile(drcMesh,function(bufferGeometry){
    var geometry;
    geometry = new THREE.Mesh(bufferGeometry, newMaterial);
    var serializedGeometry = geometry.toJSON();
    postMessage(serializedGeometry);
    
});

在 HTML 方面：

const consumer = new Worker('../workers/consumer.js', {
        type: 'module'
      });

      consumer.onmessage = function(e) {
        console.log('Message received from worker', e.data.type);
        var jsonLoader = new THREE.ObjectLoader(); 
        var geometry = jsonLoader.parse(e.data)
        meshes.push(geometry)         
      }

在这种情况下，我可以在 HTML 端创建网格，但是在下一个用例中，我遇到了一些问题。现在我将添加一个纹理 THREE.ImageBitmapLoader();你可能会问我为什么不使用THREE.TextureLoader();它，因为工人有几个限制，其中之一是：访问 dom 是被禁止的。

   // instantiate a loader
    const textureLoader = new THREE.ImageBitmapLoader();

    // load a image resource
    textureLoader.load(
        // resource URL
        url,
        // onLoad callback
        function ( imageBitmap ) {
            const texture = new THREE.CanvasTexture( imageBitmap );
            const material = new THREE.MeshBasicMaterial( { map: texture } );
       // var serializedMaterial = material.toJSON();
       // postMessage(serializedMaterial)
        dracoLoader.decodeDracoFile(drcMesh,function(bufferGeometry){
        var geometry;
        geometry = new THREE.Mesh(bufferGeometry, material);
        var serializedGeometry = geometry.toJSON();
        postMessage(serializedGeometry);
        
    });
    
        },  
        // onError callback
        function ( err ) {
            console.log( '!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!' );
        }
    );

但是现在，当我在浏览器（chrome）开发人员工具中检查网络选项卡时，我看到了undefined error(not found).

我能够显示网格（没有纹理），当我显示它时，我又得到两个错误：

WebGL: INVALID_VALUE: texImage2D: bad image data

[.WebGL-00000A9800214880] GL_INVALID_OPERATION: Texture format does not support mipmap generation.

如果我在 HTML 端做了一些修改，比如：

var geometry = jsonLoader.parseObject(e.data);

快速复习：用于jsonLoader.parse第一个用例。

现在：未定义的错误消失了。但是当我尝试显示网格时，我什么也看不到。

那么如何从工作人员发送纹理网格以及如何在主线程上处理它？

标签： javascriptthree.jsweb-worker