场景: 在react的服务端渲染框架Next.js中使用ammo.js
在原生js中使用非常方便，像three.js示例那样几乎不需要什么配置

在webpack打包的项目中使用Ammo.js还是很繁琐的

有两种选择
ammo.js js版本 目前为止是1.9M 太大了 所以没采用这个方案
ammo.wasm.js wasm版本 使用它需要配合ammo.wasm.wasm两个一起使用 一共大概1M多
文件在此处获取
https://github.com/kripken/ammo.js/tree/main/builds
也可在three文件中获取
位置:

"three/examples/jsm/libs/ammo.wasm.js";

我的项目仓库 Next.js项目 仅供参考

位于physics分支下

本文展示使用ammo.wasm.js 结合ammo.wasm.wasm的wasm版本使用方法

1. 配置webpack

源码中有引用fs这个node库的代码 不配置会报fs的错

如果使用create-react-app需要使用工具自定义webpack配置
create-react-app问题不少 不认为是最佳的react项目工具，可以尝试其他基于react的框架

配置如下

我是在框架的自定义webpack配置文件处更改 但不管怎么变化都是上图的配置
next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  compiler: {
    styledComponents: true,
  },
  webpack: (config, options) => {
    // 为了支持 ammo.js 物理引擎
    config.resolve.extensions.push('.js');
    config.resolve.fallback = { fs: false };
    config.resolve.alias.path = require.resolve('path-browserify')

    return config
  },
}

module.exports = nextConfig

2. 导出Ammo 修改ammo.wasm.js文件

在文件最后加入默认导出语句

至此应该已经可以打印Ammo函数了
但不能执行 执行会有报错 下面逐一解决

3. 删除语句 通过查找 this.Ammo= 删除这句话 这句话会报错this是undefined

4. 添加ammo.wasm.wasm文件并在 ammo.wasm.js中指定位置

查找 ammo.wasm.wasm定位位置， ammo.wasm.js中引用了ammo.wasm.wasm 但源码中引用位置不适合现代项目 需要手动指定文件位置
在next.js框架中放在public目录下的文件可以使用/xxx定位 所以我改成了 /ammo.wasm.wasm并将文件放在public目录下 其他框架可以灵活调整

ok至此 在我的本地项目中已经可以正常使用了