Web Worker 是否可以支持消息和进度等多个事件？

Question

是否可以编写一个 web worker 来响应两个不同的事件？

我有一个工作人员通过取出相应的法线、位置、索引数组信息并将其作为数组缓冲区传递，从各种 .json 文件加载缓冲区几何图形。然后主线程根据 worker 的 'message' 事件获取它。几何图形加载完美。

难点在于我经验不足，如何将worker的xhr请求的进度传回主线程？如果我追加进度属性，则只有 100% 通过。

有没有办法创建一个 'progress' 事件侦听器并在触发此进度事件时将其发送到主事件？

我确实收到了缓冲区数组，我能够在场景中正确构建和渲染网格。我希望数据的进度可以流过，但我只得到 100。进度的 100 以外的数字来自控制台日志。

我想将 xhr 请求的进度从 worker 发送到 main，但无法弄清楚。

网络工作者摘录：

import { BufferGeometryLoader, BufferGeometry } from 'three';


var progress;

const loader = new BufferGeometryLoader();
const geometry = new BufferGeometry();

  /* is this possible? how to get progress info in here to stream over? */
  self.addEventListener('progress', (event) => {
    console.log('event in progress: ', progress);
  });

  self.addEventListener('message', (event) => {
    const { model, part } = event.data;
     loader.load(`https://models/${model}/${part}.json`, (geometry) => {
      // all the code to load the buffergeometry and pass to the main thread
      // removed for sake of focus
      },
      (xhr) => {
       /* how to pass just the value of progress as it happens so i can get a progress bar in the DOM? Or say emit a progress event that this worker can respond to? */
       progress = (xhr.loaded / xhr.total * 100);
       console.log('progress: ', progress);
      },
      (err) => {
        console.log('err: ', err);
      }
    );
  });

主要节选

    /* If i can capture the progress data, i can easily build a loading progress bar */
    worker.addEventListener('progress', (event) => {
      console.log('event.data: ', event.data);
    });

    worker.addEventListener('message', (event) => {

      // build meshes from buffergeometries and assign materials and add to scene
    });

Answer 1

您可以使用 message 事件执行此操作，传递一个对象，您可以在其中区分您使用属性发送的消息的类型（也许叫做 type）。

SO 在你的 worker 中，当你想用进度更新主线程时：

postMessage({type: "progress", progress: xhr.loaded / xhr.total * 100});

何时发送数据：

postMessage({type: "data", data: /*...*/});

在 main 中，您有一个 message 的事件处理程序，它在 type:

上调度

worker.addEventListener('message', (event) => {
    const msg = event.data;
    switch (msg.type) {
        case "progress":
            // ...handle progress message, progress is in `msg.progress`
            break;
        case "data":
            // ...handle data message, data is in `msg.data`
            break;
    }
});

Live Example on plnkr

Web Worker 是否可以支持消息和进度等多个事件？

Can web workers support multiple events like message and progress?

javascript

web-worker

three.js