Verge3D 开发者工具包
Verge3D 开发者工具包(DevKit)是一个示例、工具和源代码的集合,通过 Verge3D 企业版 提供。这个集合将帮助您执行各种开发任务,例如:
- 切换到未压缩版的 Verge3D 运行时,以简化您自己应用的调试。
- 学习并评估 Verge3D 工具包的内部功能。
- 修改 Verge3D 并在您开发的应用中使用修改版本。
- 使用您自己的类和方法扩展 Verge3D API。
- 添加新的拼图模块。
- 以 Verge3D for WordPress 插件为参考,为 WordPress 开发您自己的产品配置程序或电子商务系统。
开发者工具包是为那些希望探索或调整引擎(和拼图)的经验丰富的 JavaScript 程序员准备的。创建具有标准功能设定的 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),在线寻求帮助。