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