时间戳

首页 > 解决方案 > 为 CannonDebugRenderer 导入 Javscript 文件与 Webpack 构建包

javascript - 为 CannonDebugRenderer 导入 Javscript 文件与 Webpack 构建包

问题描述

我正在尝试为我在 Three.js 和 Cannon.js 之上构建的应用程序设置 CannonDebugRenderer 的实例化和实例。我正在看这个涉及同时使用 Cannon.js 和 Three.js 的示例

https://github.com/schteppe/cannon.js/blob/master/tools/threejs/example.html

此示例似乎在运行脚本标记中的主脚本之前运行了许多脚本。

到目前为止，我一直在使用 Three.js，通过使用 NPM 将其保存为依赖项，我假设它是从 github 存储库 https://github.com/mrdoob/three.js/中提取的

我可以使用我已经了解的常见 ES6 语法将它导入到我的脚本中，并使用 webpack 进行转换

import * as THREE from "three"

我的理解是，这取决于几件事

  1. Webpack 理解“三”实际上是 node_modules/three/build/three.min.js 所以它知道在转译时从哪里提取
  2. NPM 跟踪允许 webpack 找到它的正确元数据（可能在 package.json 中）

Mu 的困惑在于我上面列出的来自 cannon.js 的这个示例如何适合这个打包和捆绑构建周期。

第一个问题是示例使用的 Cannon 存储库的 lib 目录中似乎有一个 three.js，而不是 node_modules/three 中的官方 NPM 管理目录中的 three.min.js

https://github.com/schteppe/cannon.js/blob/master/libs/Three.js

第二个问题是 CannonDebugRenderer 似乎包含在这个 Cannon.js 打包版本的 Three.js 中，而不是官方的 Three.js 本身。

Cannon 是否意味着要像 Three.js 那样捆绑？repo 上的 README 似乎表明它与 NPM 兼容，但也许这仅包括从存储库中获取它的能力，而不是像 Three.js 那样捆绑它与 Webpack 捆绑的能力？

如何使用 ES6 语法导入 CannonDebugRenderer 并将应用程序捆绑到单个 Javascript 文件中？

标签： javascriptnpmwebpackthree.jscannon.js

解决方案

推荐阅读