Verge3D 开发者工具包

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

开发者工具包是为那些希望探索或调整引擎(和拼图)的经验丰富的 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

如果您需要重建拼图编辑器,还应为 puzzlespuppeteer_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 应用时,用户可以在浏览器控制台中看到以下信息行:

Chrome 控制台中的 Verge3D 版本信息

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

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

const PRINT_VERGE3D_LINE = true;

并将此常量改为 false

const PRINT_VERGE3D_LINE = false;

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

遇到问题?

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