项目结构

为了给艺术家和设计师更好的用户体验,Verge3D为WebGL应用创建了一套完整案例库及相关文件。建议您不要编辑这些已经初始化的项目文件,因为其中一些文件可能会在某些用户操作(如导出、保存拼图等)时自动重新生成,而其他文件可能会在更新到新的Verge3D版本时被覆盖。

初阶案例

使用应用管理器初始化的默认项目(使用默认配置参数),包含以下内容。

文件管理器中的常规Verge3D项目文件清单

HTML、CSS和JavaScript文件

新建的应用主体,由与应用同名(“my_awesome_app”)的 .html, .css.js 文件,及Verge3D运行时 v3d.js组成。还有一个名为 media 的文件夹,其中包含全屏按钮及一组用于在不同设备上调用的图标图片。

尽管我们不推荐,但您依然可以编辑核心的 .html, .css.js 文件。推荐通过新建自己的CSS和JavaScript文件,并链接到主 .html文件中。在执行 清洁更新后,请一定仔细检查您之前做的修改。

请注意,如果您试图通过直接打开 .html 文件的方式启动Verge3D应用,很可能由于浏览器 安全策略 限制而无法允许,该策略禁止JavaScript跨域访问。请始终使用应用管理器来运行您的应用。

glTF文件

当Verge3D应用运行时,会优先加载 .gltf 格式3D场景,该文件包含了用于进一步加载场景的二进制文件 .bin 和外部纹理的路径。这个 .gltf.bin 文件是由您从选用的DCC软件软件(Blender、3ds Max或Maya)中导出的。

工作场景文件

取决于你在使用什么3D编辑软件,默认立方体有 .blend, .max.mb 格式。这是您的场景工作重点,请随意修改此文件。您可以重命名或用其他文件覆盖它,但导出glTF文件时,请使用原始名称。

你以可以添加更多的场景文件到应用文件夹,用做库文件,或用于创作多场景应用。如果你的应用加载了多个glTF文件,别忘了从相应的的 .blend, .max.mb 文件执行导出操作。

资产

应用中调用的贴图和声音通常作为外部文件加载。请确保在所选的3D编辑器中使用 相对的 文件路径,并将图像存储在应用文件夹 内部 ,否则可能会在发布时导致问题。

拼图

当你在拼图编辑器中点击 保存 时,拼图将保存在 visual_logic.xml中。它还将拼图生成JavaScript代码并保存在 visual_logic.js中。每次单击 保存 按钮时,文件 visual_logic.xml 都会重新生成,并将上一版重命名添加时间戳后移动到 v3d_app_data/puzzles_backup 文件夹中备份。因此,你可以通过将文件 .xml 复制到应用根目录并重命名的方式来从备份中恢复拼图。

高阶案例

一些Verge3D应用(例如Soft8Soft官方案例中的工业机器人Demo),包含了大量的其他文件。这些文件主要分为两类:

已压缩的glTF文件

如果您为应用启用了 资产压缩 (推荐),导出器将首先执行常规导出glTF,然后创建glTF文件的压缩版本。您的应用会自动调用压缩文件,而非glTF文件。您也无需删除glTF,因为在之后的导出操作中,它们还会自动生成。

第三方软件导出

如您通过第三方软件(比如Webflow或Google Web Designer)集成设计HTML布局,可通过 iframe 方式嵌入Verge3D应用。该HTML文件也可以保存在该应用的文件夹中,无需通过应用管理器修改。另外,较复杂的HTML设计,可能还包含了其他CSS、JavaScript、字体及图像文件,这些也应该存储在应用文件夹中,并保留其原本的层级结构。

文件管理器中的高级Verge3D项目文件列表

遇到问题?

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