项目结构

Verge3D追求功能强大、美术友好的理念，为WebGL应用程序创建了一整套文件。建议不要编辑大多数初始化的项目文件，因为其中一些可能会在某些用户操作（例如导出，保存拼图等）时自动重新生成，而其他文件可能会在更新到新的Verge3D版本时被覆盖。

简单案例

使用App Manager创建的项目文件结构（使用默认配置参数）如下所示。

项目结构 - 图1

HTML, CSS和JavaScript文件

应用程序核心包含具有相同名称的.html，.css和.js文件（“my_awesome_app”）以及Verge3D运行时v3d.js.还有一个名为media的文件夹，其中包含一些小图片（全屏按钮图标和一组图标）。

虽然不推荐，但您可以编辑核心.html，.css和.js文件，添加自己的CSS和JavaScript的更好方法是创建新文件并将它们链接到主.html。在执行纯净更新后，请务必挑选您更改的文件。

请注意，如果您只是单击.html文件尝试启动Verge3D应用程序，则很可能由于浏览器安全策略禁止JavaScript访问不是从同一域加载的文件而无法运行。请始终使用包含本地Web服务器的App Manager来运行您的应用程序。

glTF文件

在运行时，应用程序首先加载.gltf格式的3D场景，它包含文件路径，从而继续加载glTF场景的.bin和外部纹理的二进制部分。.gltf和.bin文件可以使用您喜欢的3D软件（3ds Max或Blender）从菜单导出。

场景文件

根据您使用的3D软件，会有一个包含默认盒子的.max或.blend文件。这里包含最终场景中的主要内容。你可以自由的修改这些文件，重命名或覆盖，但是一定不要重命名那个导出的glTF文件。

资产

贴图和声音一般作为外部文件加载。在3D软件中确保你选择的贴图使用的是相对路径，并且贴图都要保存在你的项目文件夹下，否则在发布程序的时候会出问题。

拼图

在拼图编辑器中，当点击保存时，拼图会保存进visual_logic.js文件中。同时，会从拼图生成JS代码，并保存为visual_logic.js文件。每次点击保存按钮都会覆盖这些文件，之前编辑的visual_logic.xml会拷贝到puzzles_backup文件夹下，名字上加了时间戳。因此，你可以通过从备份中拷出并改回名字的方式，恢复拼图。

高级案例

有一些Verge3D程序（如官方案例中的工业机器人）可能会包含大量的额外文件，大致可以分成两类：

压缩的glTF文件

如果你的程序开启了资产压缩（asset compression 压缩是个好事），首先执行导出，然后创建glTF的压缩文件。这些文件会被程序自动拾取，用来代替.glTF文件。

第三方软件的导出

整合程序会用到第三方软件（如webflow,google web designer）设计HTML布局，在整合后的程序里Verge3D程序会用一个iframe元素嵌入进去。这种情况下，HTML布局文件会不做任何改变的被App Manager 保存到程序文件夹下。复杂的HTML布局会包含额外的CSS/JS文件，字体或图片，这些也需要以原有的层级保存到程序文件夹下。

项目结构 - 图2