不能在 javascript worker 中使用 three.js 纹理加载器

Question

我正在尝试使用 three.js 加载纹理。

main.js:

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

这是简单的 worker.js:

    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';
 const textureLoader = new THREE.TextureLoader();
    textureLoader.load(
      // resource URL
      'images/texture.jpg',
    
      // onLoad callback
      function ( texture ) {
        // in this example we create the material when the texture is loaded
        const material = new THREE.MeshBasicMaterial( {
          map: texture
         } );
      },
    
      // onProgress callback currently not supported
      undefined,
    
      // onError callback
      function ( err ) {
        console.error( 'An error happened.' );
      }
    );

但我收到以下错误：

Uncaught ReferenceError: document is not defined

在我的搜索中，我发现无法访问 DOM 但我不知道如何解决这个问题，谢谢。

Answer 1

您可以使用 THREE.ImageBitmapLoader 而不是 THREE.TextureLoader 来解决这个问题。这种新型加载器不依赖于 DOM.

还有一个official example演示加载程序。基本用法是：

const loader = new THREE.ImageBitmapLoader();
loader.load( 'path/to/my/texture.png', function ( imageBitmap ) {

        const texture = new THREE.CanvasTexture( imageBitmap );
        const material = new THREE.MeshBasicMaterial( { map: texture } );

} );

不能在 javascript worker 中使用 three.js 纹理加载器

can`t use three.js texture loader in javascript worker

javascript

three.js

web-worker