项目结构 - Soft8Soft
Description: 了解Verge3D应用的项目结构。

# 项目结构

为了给艺术家和设计师更好的用户体验，Verge3D为WebGL应用创建了一套完整案例库及相关文件。建议您不要编辑这些已经初始化的项目文件，因为其中一些文件可能会在某些用户操作（如导出、保存拼图等）时自动重新生成，而其他文件可能会在更新到新的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、字体及图像文件，这些也应该存储在应用文件夹中，并保留其原本的层级结构。

## 遇到问题？

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