Javascript web工作人员能否支持消息和进度等多个事件？

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

我有一个worker，它从各种.json文件中加载一个buffergeometry，方法是取出相应的normal、position、index数组信息，并将其作为数组缓冲区传递。然后，主线程根据来自工作线程的“消息”事件获取该消息。几何图形以完美的方式加载

由于我缺乏经验，困难在于如何将xhr请求的进度从工作线程传递回主线程？如果我附加一个progress属性，那么只会100%通过

是否有方法创建“进度”事件侦听器，并在该进度事件激发时将其发送到主进程

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

我希望将xhr req的进度从工作进程发送到主进程，但无法理解

网络工作者摘录：

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
    });

---

您可以通过

message

事件来实现这一点，通过属性（可能称为

type

）传递一个对象，在该对象中可以区分要发送的消息类型

因此，在worker中，当您希望使用进度更新主线程时：

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

当您要发送数据时：

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

在main中，您有一个用于

消息的事件处理程序，它在
类型上调度：

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;
    }
});

@JoeC：别担心！我错过了上面的
.data
，现已修复，plnkr上有一个实例。