1. Home
  2. Docs
  3. Verge3D用户手册
  4. 入门
  5. 项目结构

项目结构

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

简单案例

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

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文件,字体或图片,这些也需要以原有的层级保存到程序文件夹下。

Was this article helpful to you? Yes No 1