文章/答案/技术大牛

发布

社区首页 >问答首页 >ReferenceError在ammo.js、npm和webpack中的应用

问ReferenceError在ammo.js、npm和webpack中的应用
EN

Stack Overflow用户

提问于 2022-02-10 13:02:25

回答 1查看 235关注 0票数 0

概述：

我试图让ammo.js的物理工作在一个aframe项目，是建立在npm和webpack。我需要ammo.js，因为cannon.js从三个in中引用.Geometry组件，这必须通过npm来完成，因为我需要访问三个路径查找，它只以npm包的形式出现。

问题:在启动编译后的项目时，我在控制台中遇到了此错误消息，物理操作不起作用：

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)

当前设置：

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>

javascript

npm

webpack

aframe

ammo.js

回答 1

Stack Overflow用户

发布于 2022-02-26 17:38:51

我已经找到了解决这个问题的办法。在我看来，webworkify只适用于browserify。如果您想使用webpack，就会有一个webworkify-webpack包来解决这个问题。

npm install webworkify-webpack --save
编辑./node_modules/aframe-physics-system/src/drivers/worker-driver.js并将第一行修改为：

var webworkify = require('webworkify-webpack'),
    webworkifyDebug = require('./webworkify-debug'),
    Driver = require('./driver'),
    Event = require('./event'),
    worker = require('./worker'),
    protocol = require('../utils/protocol');

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71065600

复制

相似问题

问ReferenceError在ammo.js、npm和webpack中的应用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReferenceError在ammo.js、npm和webpack中的应用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReferenceError在ammo.js、npm和webpack中的应用
EN