使用@ar-js-org/ar.js npm包构建时出现console.assert断言失败错误求助

问题描述 #

通过npm导入ES6版本的@ar-js-org/ar.js，使用Webpack 5构建AR应用，导入过程无异常，但测试时控制台反复出现Assertion failed: console.assert错误，同时存在模型偏离标记点、但坐标显示x,y,z=0的问题。控制台初始化日志如下：

A-Frame Version: 1.3.0 (Date 2022-02-04, Commit #cc3516ce)
aframe-master.js:71837 THREE Version (https://github.com/supermedium/three.js): ^0.137.0
aframe-master.js:71839 WebVR Polyfill Version: ^0.10.12
aframe-ar.js:1 Assertion failed: console.assert
aframe-ar.js:1 Assertion failed: console.assert
aframe-ar.js:1 Assertion failed: console.assert
aframe-ar.js:1 AR.js 3.4.1 - trackingBackend: artoolkit
aframe-ar.js:1 ARToolkit 0.2.0
aframe-ar.js:1 [ARController] ARToolkit initialized
aframe-ar.js:1 [ARController] Camera params loaded with ID 0
aframe-ar.js:1 [ARController] Got ID from setup 0
aframe-ar.js:1 actual source dimensions 1023 767
aframe-ar.js:1 source orientation landscape
aframe-ar.js:1 actual source dimensions 1023 767
aframe-ar.js:1 source orientation landscape

排查方向与解决方法 #

1. Webpack 5 配置调整（核心修复） #

Webpack 5默认的环境变量优化和模块处理逻辑，会导致AR.js内部依赖的Node.js模块或环境判断失效，触发断言错误。需修改webpack.config.js：

• 添加DefinePlugin声明环境变量：

  const webpack = require('webpack');
  
  module.exports = {
    // ...其他配置
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
        'typeof window': JSON.stringify('object'),
        'process.browser': JSON.stringify(true)
      })
    ]
  };
  

• 配置resolve.fallback补充缺失模块：

  module.exports = {
    // ...其他配置
    resolve: {
      fallback: {
        'fs': false,
        'path': require.resolve('path-browserify'),
        'crypto': require.resolve('crypto-browserify')
      }
    }
  };
  

  安装对应依赖包：

  npm install path-browserify crypto-browserify --save-dev
  

2. AR.js 标记点与模型配置检查 #

• 标记点路径验证：Webpack构建后，标记点图片会被打包到输出目录，需确保<a-marker>的url指向构建后的正确相对路径，而非源码路径。
• 标记点类型配置：自定义标记需设置type="pattern"并指定正确的url；使用预设标记（如hiro）需确认preset值无误。
• 模型轴心修正：确保3D模型的原点与标记点中心对齐，可通过建模软件调整轴心，或在A-Frame中添加position属性修正偏移：

  <a-marker preset="hiro">
    <a-entity gltf-model="#model" position="0 -0.5 0"></a-entity>
  </a-marker>
  

3. 版本兼容性验证 #

• 匹配A-Frame与AR.js版本：当前A-Frame 1.3.0与AR.js 3.4.1可能存在兼容性冲突，可尝试降级A-Frame到1.2.0或升级AR.js至最新稳定版测试。
• 避免Three.js版本冲突：不要手动引入独立的Three.js包，使用A-Frame内置的版本即可，防止与AR.js依赖的版本不一致。

4. 断言错误根源定位 #

若上述配置无效，可开启Webpack源码映射定位具体错误：

• 在webpack.config.js中设置devtool: 'source-map'，然后在浏览器开发者工具中点击错误行，查看压缩代码对应的原始源码，找到触发console.assert的具体条件，针对性修复。

内容的提问来源于stack exchange，提问作者Ulrich