Open JaimieVos opened 2 years ago
I experience the same problem.
Configuration: Package.json:
{
"name": "a-frame-min-3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"serve": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"file-loader": "^6.2.0",
"path-browserify": "^1.0.1",
"webpack": "^5.68.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"dependencies": {
"@engaging-computing/aframe-physics-system": "^4.0.2",
"aframe": "^1.3.0",
"aframe-extras": "^6.1.1",
"ammo.js": "github:mozillareality/ammo.js#hubs/master",
"three-to-cannon": "^4.0.2"
}
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
globalObject: 'this'
},
experiments: {
asyncWebAssembly: true
},
node: {
},
resolve:{
fallback: {
fs: false,
path: require.resolve( 'path-browserify' )
}
},
module:{
rules:[
{
test: /\.(wasm)$/,
type: "javascript/auto",
use: {
loader: "file-loader",
options: {
outputPath: "wasm", //set this whatever path you desire
name: "[name]-[hash].[ext]"
}
}
}
]
}
};
src/index.js:
const Ammo = require("ammo.js/builds/ammo.wasm.js");
const AmmoWasm = require("ammo.js/builds/ammo.wasm.wasm");
window.Ammo = Ammo.bind(undefined, {
locateFile(path) {
if (path.endsWith(".wasm")) {
return AmmoWasm;
}
return path;
}
});
require("aframe")
require('@engaging-computing/aframe-physics-system')
require("aframe-extras")
dist/index.html:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<a-scene physics="driver: ammo; debug: true; debugDrawMode: 1;" vr-mode-ui="enabled: true; arEnabled: false;">
<a-sky id="sky" color="#aaaaaa"></a-sky>
<a-entity id="sun"
light="intensity: 0.6; castShadow: true; shadowCameraTop: 18.85; shadowCameraRight: 18; shadowCameraBottom: -15.18; shadowCameraLeft: -14.27"
position="7.97348 9.14859 8.98681">
</a-entity>
<a-entity id="ambient" light="color: #a3a3a3; type: ambient" id="ambient"></a-entity>
<a-entity id="rig"
position="0 0 0"
movement-controls
>
<a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
</a-entity>
<a-entity
id="testsphere"
geometry="primitive: sphere; radius: 0.5"
material=""
position="-5 5 -18"
shadow=""
></a-entity>
<a-entity
id="testsphere2"
geometry="primitive: sphere; radius: 0.5"
material=""
position="-3 5 -18"
shadow=""
></a-entity>
<a-entity
id="ground"
geometry="primitive: plane; height: 100; width: 100"
rotation="0 0 0"
position="0 -1 0"
visible="false"
shadow=""
></a-entity>
</a-scene>
</body>
</html>
Upon running the scene in a browser, physics does not function and I get this sort of stack trace:
index.js:1 Uncaught ReferenceError: arguments is not defined
at eval (index.js:1:16)
at Object../node_modules/webworkify/index.js (bundle.js:775:1)
at __webpack_require__ (bundle.js:819:41)
at eval (worker-driver.js:3:18)
at Object../node_modules/@engaging-computing/aframe-physics-system/src/drivers/worker-driver.js (bundle.js:218:1)
at __webpack_require__ (bundle.js:819:41)
at eval (system.js:8:20)
at Object../node_modules/@engaging-computing/aframe-physics-system/src/system.js (bundle.js:238:1)
at __webpack_require__ (bundle.js:819:41)
at eval (index.js:13:1)
i have too
I have found a workaround for this issue. Seems to me that webworkify
only works with browserify
. If you want to use webpack
, there is a webworkify-webpack
package which solves this problem.
npm install webworkify-webpack --save
./node_modules/aframe-physics-system/src/drivers/worker-driver.js
and modify 1st line to:
var webworkify = require('webworkify-webpack'),
webworkifyDebug = require('./webworkify-debug'),
Driver = require('./driver'),
Event = require('./event'),
worker = require('./worker'),
protocol = require('../utils/protocol');
I have found a workaround for this issue. Seems to me that
webworkify
only works withbrowserify
. If you want to usewebpack
, there is awebworkify-webpack
package which solves this problem.1. `npm install webworkify-webpack --save ` 2. edit `./node_modules/aframe-physics-system/src/drivers/worker-driver.js` and modify 1st line to:
var webworkify = require('webworkify-webpack'), webworkifyDebug = require('./webworkify-debug'), Driver = require('./driver'), Event = require('./event'), worker = require('./worker'), protocol = require('../utils/protocol');
What if I want to use NPM with NodeJS?
When I set up aframe physics and require it in my index.js and then run it with webpack I get the error "Uncaught ReferenceError: arguments is not defined" in my console.