Three.js（6）：vue中基于worker-loader使用web worker设置动态模型的移动路线

1 版本

vuecli：4.5.7

three.js：0.131.0

---

2 使用worker-loader

2.1 安装worker-loader

npm install worker-loader --save-dev

2.2 vue.config.js中进行配置

chainWebpack: config => {
    // 设置解析以worker.js 结尾的文件使用worker-loader 解析
   config.module.rule('worker-loader').test(/\.worker\.js$/).use('worker- 
   loader').loader('worker-loader').end();
   config.module.rule('js').exclude.add(/\.worker\.js$/);
}

---

3 创建Animate.worker.js用于不断更新模型位置信息

注意：必须以worker.js 结尾的文件才能使用worker-loader 解析

// animate.worker.js 文件
import * as THREE from "three/build/three.module.js";
onmessage = function (e) {
    console.info('animate.worke