使用 Node.js 和 NPM

本节介绍如何使用 Node.js 和 npm 进行 Verge3D 应用开发。

安装 Node.js 和 npm

如果您还没有安装，可以按照此处的提示进行安装。

创建基础 Verge3D 应用

为您的新项目创建一个文件夹，例如 my_app，进入该文件夹，然后初始化 npm 包：

npm init

系统会询问一些问题，您可以随意选择或使用默认值。

安装 verge3d 包作为依赖项：

npm install --save verge3d

创建 my_app.html 文件，内容如下：


  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>我的第一个 Verge3D 应用</title>
      <style>
        body { margin: 0; }
        #v3d-container { position: absolute; width: 100%; height: 100% }
      </style>
    </head>
    <body>
      <div id="v3d-container"></div>
      <script type="module" src="my_app.js"></script>
    </body>
  </html>

创建 my_app.js 文件，内容如下：


  import * as v3d from './node_modules/verge3d/build/v3d.module.js';

  const app = new v3d.App('v3d-container');

  app.loadScene('cube.glb', () => {
      app.enableControls();
      app.run();
  });

下载 cube.glb 文件并将其放在 my_app.html 同级目录下。

启动开发服务器：

npx http-server

在浏览器中打开 http://127.0.0.1:8080 链接，然后从列表中启动 my_app.html。

使用 webpack

使用 webpack 可以简化 Verge3D 应用的开发，允许您在 JavaScript 代码中使用更简洁的导入方式：

import * as v3d from 'verge3d';

同时还可以通过将 Verge3D 模块和代码打包为一个 JavaScript 分发文件来优化您的应用。

让我们修改基础应用以适配 webpack。首先删除 my_app.js 文件，因为不再需要它了。

安装 webpack 依赖：

npm install --save webpack webpack-cli

修改 my_app.html 文件，将内容替换为以下内容：


  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>我的第一个 Verge3D 应用</title>
      <style>
        body { margin: 0; }
        #v3d-container { position: absolute; width: 100%; height: 100% }
      </style>
    </head>
    <body>
      <div id="v3d-container"></div>
      <script src="dist/main.js"></script>
    </body>
  </html>

创建 src 目录，并在其中创建 index.js 文件：


  import * as v3d from 'verge3d';

  const app = new v3d.App('v3d-container');

  app.loadScene('cube.glb', () => {
      app.enableControls();
      app.run();
  });

运行 webpack 构建应用：

npx webpack

启动开发服务器：

npx http-server

在浏览器中打开 http://127.0.0.1:8080 链接，然后从列表中启动 my_app.html。

激活许可证

要使用您的许可证密钥签名 Verge3D 引擎模块（v3d.js 和 v3d.module.js），请使用 keymanager 命令（需要 Python 3）：

npx keymanager activate node_modules/verge3d/build/v3d.js XXXXXXXXXX

或

npx keymanager activate node_modules/verge3d/build/v3d.module.js XXXXXXXXXX

其中 XXXXXXXXXX 是您的许可证密钥。请注意，此命令不会输出任何信息。激活后，只需在应用中检查 MADE WITH VERGE3D TRIAL 水印是否消失即可。使用 webpack 时，请务必重新构建应用。

下一步

了解如何将 Verge3D 引擎与 React 和 Vue.js 集成。