Verge3D 开发者工具包 — Soft8Soft
Description: 了解如何使用开发者工具包来自定义修改Verge3D主程序。

# Verge3D 开发者工具包

Verge3D 开发者工具包（DevKit）是一个示例、工具和源代码的集合，通过 Verge3D 企业版 提供。这个集合将帮助您执行各种开发任务，例如：

- 切换到未压缩版的 Verge3D 运行时，以简化您自己应用的调试。
- 学习并评估 Verge3D 工具包的内部功能。
- 修改 Verge3D 并在您开发的应用中使用修改版本。
- 使用您自己的类和方法扩展 Verge3D API。
- 添加新的拼图模块。
- 以 Verge3D for WordPress 插件为参考，为 WordPress 开发您自己的产品配置程序或电子商务系统。

开发者工具包是为那些希望探索或调整引擎（和拼图）的经验丰富的 JavaScript 程序员准备的。创建具有标准功能设定的 Verge3D 应用时，并不需要它（尽管可能有用）。

- 安装和配置
- DevKit 结构
- 构建 Verge3D
- 激活引擎模块
- 添加新方法到 JavaScript API
- 向 JavaScript API 添加新类
- 添加新的拼图
- 从浏览器控制台移除 Verge3D 信息行

#

## 安装和配置

从您的 帐户仪表板 下载区域获取 DevKit 压缩包。将此压缩包解压到自定义目录中。

如果您想从源代码构建 Verge3D 引擎或拼图，需要使用 npm 工具，它是 Node.js 运行时的一部分。您可以参照 如下说明 安装 npm。

#

## DevKit 结构

新安装的 DevKit 包括以下目录：

DevKit 目录 | 说明
--- | ---
build | 预构建的 Verge3D 引擎脚本和附加模块（ammo.js 等）。
puzzles | 拼图编辑器的预构建脚本和源代码。
src | Verge3D 引擎源代码。
templates | Verge3D 应用模板。
utils | 各种实用程序脚本和构建依赖项。
wordpress | Verge3D for WordPress 插件源代码（用 PHP 编写）。
xz | XZ 压缩模块的源代码。

在 DevKit 的 `build` 目录中有 4 个Verge3D 运行时变体：

v3d.js
  压缩（优化）版本，适用于大多数应用。它通过全局 `v3d` 命名空间提供所有 Verge3D 类/函数/常量。此版本由应用管理器和您可以在资产商店中找到的大多数演示使用。
v3d.unminified.js
  这是上述版本的未压缩（未优化）版本。要使用它，请将此文件复制到应用文件夹并重命名为 `v3d.js`，替换原始文件。
v3d.module.js
  提供 ES6 模块而非全局 `v3d` 命名空间的压缩（优化）运行时。
v3d.module.unminified.js
  这是上述版本的未压缩（未优化）版本。

#

## 构建 Verge3D

在编译 Verge3D 之前，请确保您已按照上述说明安装了 npm。

安装 npm 后，进入 DevKit 的解压目录，执行以下命令来安装依赖项：

`npm install`

如果您需要重建拼图编辑器，还应为 `puzzles` 和 `puppeteer_testing` 目录安装额外的依赖项：

`npm install --prefix puzzles && npm install --prefix utils/puppeteer_testing`

要编译 未优化 的 Verge3D 构建，适合测试和调试，请在 DevKit 目录中执行以下命令：

`npm run build`

您可以在 DevKit 的 `build` 目录中找到编译好的模块。要对其进行测试，只需将 `v3d.js` 引擎运行时复制到应用文件夹内的应用中，例如：

`cp build/v3d.js APPS_FOLDER/my_awesome_application`

要编译 已优化的 Verge3D（也称为发行版），请在 DevKit 目录中执行以下命令：

`npm run build-release`

以下命令用于构建拼图逻辑编辑器。要构建 未优化的 版本：

`npm run build-puzzles`

要构建 已优化的 版本，请执行：

`npm run build-puzzles-release`

您可以在 DevKit 的 `puzzles` 目录下找到已编译好的拼图编辑器脚本。要将其应用到 Verge3D，请将该目录的全部内容复制到 Verge3D 安装中的 `puzzles` 目录（替换已存在的文件）。

#

## 激活引擎模块

要使用您的授权码对已编译的引擎运行时进行签名，请使用 `utils` 目录中的 keymanager.py 脚本（需要 python）：

`./keymanager activate ../build/v3d.js XXXXXXXXXX`

其中 XXXXXXXXXX 是您的授权码。因为此命令不打印任何内容，您需要将运行时复制到某个应用文件夹，检查 MADE WITH VERGE3D TRIAL 水印来验证激活是否成功。

#

## 添加新方法到 JavaScript API

假如您想添加一个额外的方法到 App 类中。例如，`printHelloWorld()` 方法可将指定内容打印到浏览器控制台：

`App.printHelloWorld()`

App 类通过位于 `src/extras/App.js` 的运行时模块实现。打开并将以下代码添加到文件的末尾，即 `App` 类的关闭括号之前。

`printHelloWorld() { console.log('Hello World!'); }`

构建 并将 Verge3D 运行时 `v3d.js` 复制到您的应用文件夹中。要测试新添加的方法，打开浏览器控制台，然后输入：

`v3d.apps[0].printHelloWorld()`

它应该在下面打印出"Hello World!"。

#

## 向 JavaScript API 添加新类

要用一些自定义类来补充 Verge3D API，请在 DevKit 的 `src` 文件夹的相关子目录（例如 `src/extras/MyAwesomeClass.js`）中创建一个以类命名的 .js 文件。在这个 .js 文件中实现自定义的类——您可以从已经存在的类中得到启发。最后，通过在 `src/v3d.js` 文件中添加以下行，在全局命名空间 `v3d` 中注册您的类：

`export { MyAwesomeClass } from './extras/MyAwesomeClass.js';`

构建 并将 Verge3D 运行时 `v3d.js` 复制到应用文件夹中，然后在浏览器控制台中试用。

`const myAwesomeStuff = new v3d.MyAwesomeClass(); myAwesomeStuff.whatEver();`

#

## 添加新的拼图

要创建自定义拼图块，请编辑 `puzzles/src/puzzles_blocks.js` 文件。您可以从现有的拼图中得到启发。将其注册到文件顶部的相关工具箱类目中。

构建 并将拼图运行时复制到 Verge3D 安装文件夹 中。您现在可以在拼图编辑器的工具箱中找到新的拼图了。

除了编辑 `puzzles_blocks.js`，您还可以将自定义代码放在插件中，这样更便于复用。

#

## 从浏览器控制台移除 Verge3D 信息行

每次启动 Verge3D 应用时，用户可以在浏览器控制台中看到以下信息行：

此信息行显示当前运行的 Verge3D 运行时版本、是否已授权，以及当前使用的 WebGL 版本。

如果您出于某些原因不希望此信息行出现，可以按如下方式修改引擎源代码。打开文件 `src/renderers/WebGLRenderer.js`。找到以下行：

`const PRINT_VERGE3D_LINE = true;`

并将此常量改为 `false`：

`const PRINT_VERGE3D_LINE = false;`

构建 并将 Verge3D 运行时 `v3d.js` 复制到您的应用文件夹中。验证信息行不再打印。

## 遇到问题？

欢迎您随时在 论坛 上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。