web worker使用第三方库

webpack4
使用webpack-loader
webpack5
https://webpack.js.org/guides/web-workers/

new Worker(new URL('./worker.js', import.Meta.url));

worker.js

import * as THREE from 'three';

onmessage = function (e) {
    console.log(e, e.data);
    postMessage({ v: new THREE.Vector3() });
};

例如和three.js一起使用

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import acter from "../../static/model/acter.glb";

const manager = new THREE.LoadingManager();
const dracoLoader = new DRACOLoader(manager);
dracoLoader.setDecoderConfig({ type: "js" });
dracoLoader.setDecoderPath("https://api.hongbin.xyz:3002/kmyc/");
// const dracoLoader = new DRACOLoader(manager);
// dracoLoader.setDecoderPath("draco/");
const gltfLoader = new GLTFLoader(manager);
gltfLoader.setDRACOLoader(dracoLoader);

manager.onStart = function (url, itemsLoaded, itemsTotal) {
    postMessage({ msg: "开始加载" });
};

manager.onLoad = function () {
    postMessage({ msg: "加载完成!" });
};

manager.onProgress = function (url, itemsLoaded, itemsTotal) {
    postMessage({ msg: "加载中文件: " + url + ".\nLoaded " + itemsLoaded + " of " + itemsTotal + " files." });
};

manager.onError = function (url) {
    postMessage({ meg: "加载出错：" + url });
};

gltfLoader.load(
  acter,
     (gltf) => {
         const model = gltf.scene.children[0] as THREE.Mesh;
         postMessage({ msg: "acter model load complete" ,attributes: model.geometry.attributes});
     },
     undefined,
     (err) => {
         postMessage({ msg: "开始err" });
     }
 );

let prevTime = 0;

function calculate(_e: any) {
    // animationFrame = requestAnimationFrame(animate);
    const time = performance.Now();
    const delta = (time - prevTime) / 1000;
    const intensity = Math.abs(Math.sin(time / 30000));
    prevTime = time;

    postMessage({ type: "calculate", intensity });
}

/**
 * 监听主线程发来的数信息
 */
onmessage = function (e) {
    switch (e.data.type) {
        case "start":
            postMessage({ msg: "start" });
            break;
        case "calculate":
            calculate(e);
            break;
    }
};

原文地址：https://www.jb51.cc/wenti/3284488.html