webpack使用Ammo.js - 在react中使用Ammo.js

article/2025/10/8 23:27:20

真实麻烦啊

- - - [我的项目仓库 Next.js项目仅供参考](https://gitee.com/honbingitee/three-template-next.js/tree/feature%2Fphysics/)
    - 本文展示使用`ammo.wasm.js` 结合`ammo.wasm.wasm`的wasm版本使用方法
    - - 1. 配置webpack
      - 2. 导出Ammo 修改ammo.wasm.js文件
      - 3. 删除语句通过查找 `this.Ammo= `删除这句话这句话会报错this是undefined
      - 4. 添加`ammo.wasm.wasm`文件并在 `ammo.wasm.js`中指定位置

场景: 在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分支下

案例在线地址： http://three.hongbin.xyz/three/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目录下其他框架可以灵活调整
在这里插入图片描述