Project Structure ——fastest已校订

Pursuing a strong artist-friendly approach, Verge3D creates a complete set of files for a WebGL application. It is recommended not to edit most of the initialized project files, because some of them may be automatically regenerated upon certain user actions (such as export, saving Puzzles etc), while others may get overridden upon updating to new Verge3D versions.


  • 简单案例(Simplest Case)

  • 高级案例(Advanced Case)

简单案例(Simplest Case)

A default project initialized with the App Manager (with default configuration parameters) looks as follows.

使用App Manager初始化的默认项目(使用默认配置参数)如下所示。

HTML,CSS和JavaScript文件(HTML, CSS and JavaScript files)

The application core consists of the .html, .css and .js files with the same name ("my_awesome_app"), and the Verge3D runtime v3d.js. There is also a folder called media which contains small images (fullscreen button icons and a set of favicons).


Although not recommended, you can edit the core .html, .css and .js files, although a better approach for adding your own CSS and JavaScript would be creating new files and linking them to the main .html. Be sure to cherry-pick your changes back after performing clean updating.


Please notice that if you attempt to launch a Verge3D application by simply clicking on the .html file, most likely it won't run due to the browser security policy which forbids JavaScript from accessing files loaded not from the same domain. Please always use the App Manager, which includes a local web server, to run your apps.

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

glTF文件(glTF files)

When running, an application loads a 3D scene in .gltf format first, which in turn contains file paths for further loading of the binary part of a glTF scene .bin and external textures. The .gltf and .bin files are exported using user interface menu of your favorite 3D editor (3ds Max or Blender).

运行时,应用程序首先加载.gltf格式的3D场景,然后包含文件路径,以进一步加载glTF场景.bin和外部纹理的二进制部分。该.gltf.bin文件使用您喜欢的3D编辑器(3ds Max或Blender)的用户界面菜单导出。

工作场景文件(Working scene files)

Depending on the 3D editor you are using, there will be one .max or .blend file containing the default cube. This is where most work on your scenes is performed. Feel free to modify this file, rename or override it with some other file, but be certain to preserve the original name of the exported glTF file.


You can add more .max or .blend files to the app folder, for using as library files or for multi-scene applications. If your app loads multiple glTF files, don't forget to perform export from the corresponding .max or .blend files.



Textures and sounds are typically loaded by an application as external files. Make sure that you use relative file paths in the 3D editor of your choice for all images, and that your images are stored inside your application folder, otherwise there may be issues with the publication of your app.



When you click Save in the Puzzles editor, it will save your app puzzles in visual_logic.xml. It will also generate JavaScript code from your puzzles and save it as visual_logic.js. These files will keep being overridden every time you click the Savebutton, with the previous edition of the visual_logic.xml copied to the puzzles_backup folder, renamed with a time stamp. Therefore, you can always restore your puzzles from this backup by copying the .xml file to the root and renaming it back.

当您在拼图编辑器中单击“保存“(“Save“)时,拼图将保存在visual_logic.xml中。它还将生成JavaScript代码并保存在visual_logic.js中。每次单击“ 保存”按钮时,这些文件都将被覆盖,并将之前版本的visual_logic.xml复制到puzzles_backup文件夹,并使用时间戳重命名。因此,您始终可以通过将.xml文件复制到根目录并将其重命名来从此备份中恢复您的拼图。

高级案例(Advanced Case)

Some Verge3D apps (such as Soft8Soft's Industrial Robot demo) may contain quite a number of additional files, which however, come from just 2 extra categories.


压缩的glTF文件(Compressed glTF files)

If you enable asset compression for your app (which is always a good thing), the exporter will at first perform export as usual and then create a compressed version of glTF files. These files are automatically picked up by the application instead of the regular glTF file. There is no point in deleting the regular glTF files even if they are not used at the time, since they may be generated again in some future export operation.

如果您为应用启用了资产压缩(asset compression这总是一件好事),导出器将首先执行导出,然后创建glTF文件的压缩版本。这些文件由应用程序自动选取,而不是常规的glTF文件。删除常规glTF文件没有意义,即使它们当时没有被使用,因为它们可能会在将来的某些导出操作中再次生成。

第三方软件导出(Third-party software exports)

Composite applications may leverage HTML layouts designed in some third-party software (such as Webflow or Google Web Designer), in which a regular Verge3D application is embedded with an iframe element. In such cases, the HTML layout can be saved to the app folder without any change to be picked up by the App Manager. Complex HTML layouts may in turn include additional CSS/JavaScript files, fonts or images, which are also needed to be stored in the app folder with their original hierarchy preserved.

整合应用程序可以利用某些第三方软件(例如Webflow或Google Web Designer)设计的HTML布局,其中常规Verge3D应用程序嵌入了iframe元素。在这种情况下,HTML布局可以保存到app文件夹,而不需要由App Manager选择任何更改。复杂的HTML布局可能反过来包括其他CSS / JavaScript文件,字体或图像,这些文件也需要存储在app文件夹中,并保留其原始层次结构。

Last updated