vue+three.js中使用Ammo.js

直接通过npm i ammo.js安装进webpack的项目里调用时，会出现如下报错：

ERROR in ./node_modules/ammo.js/ammo.js 1:1683-1696                                                                                                                  
Module not found: Error: Can't resolve 'fs' in 'D:\WebProject\GosunProject\project\my-viewer\node_modules\ammo.js'
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Walk.vue?vue&type=script&lang=js& 11:0-27 131:41-77 132:29-55 133:29-50 134:25-48 136:30-58 137:39-53 153:34-50 373:24-46 377:27-41 384:31-45 386:28-44 388:30-44 389:30-55 390:27-59 391:23-39
 @ ./src/components/Walk.vue?vue&type=script&lang=js& 1:0-198 1:214-217 1:219-414 1:219-414
 @ ./src/components/Walk.vue 2:0-56 3:0-51 3:0-51 10:2-8
 @ ./src/router/index.js 3:0-42 15:13-17
 @ ./src/main.js 3:0-36 6:2-8
1
2
3
4
5
6
7

是因为ammo.js是为node环境设计的，而webpack环境下没有fs库，不配置就会报错。

引用按照如下步骤：

1. 去kripken/ammo.js下载build下的ammo.js

github地址如下：https://github.com/kripken/ammo.js/tree/main/builds

2. 修改ammo.js文件

把ammo.js文件放在自己方便调用的位置，我个人放在了src下的utils文件夹里。
在文件末尾增加一行代码export default Ammo

然后在文件中搜索这句话删除

3. 配置webpack

我是vue2.6.14的项目，vue-cli的版本是5.0.0，在vue.config.js文件里配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:{
    resolve:{
      extensions:['.js'],
      alias:{
        path: require.resolve("path-browserify")
      },
      fallback:{
        "fs":false,
      }
    }
  }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

保存后执行npm install path-browserify
然后启动项目，尝试打印调用Ammo的结果如下：

引入成功