使用 Node.js 和 NPM — Soft8Soft
Description: 如何使用 Node.js 和 npm 开发 Verge3D 应用。

# 使用 Node.js 和 NPM

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

- 安装 Node.js 和 npm
- 创建基础 Verge3D 应用
- 使用 webpack
- 激活许可证
- 下一步

#

## 安装 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 集成。