应用管理器 | App Manager

应用管理器(App Manager)是一个易于使用的工具,用于创建和执行Verge3D应用的各种操作。可以把它看作是开发Verge3D内容的任务控制中心。

内容

运行应用管理器

应用管理器以本地运行的Web服务器的方式实现,界面显示为类似于Wi-Fi路由器管理面板形式的网站。

应用管理器主界面

默认情况下,页面服务地址为:

您可以进行导航、保持在浏览器标签页中或添加书签。服务器本身可以通过多种方式启动(见下文)。

A. 从Blender、3ds Max或Maya中启动

当您启动已安装Verge3D插件的3D软件时,本地Web服务器会自动启动。点击App Manager按钮(Blender):

从Blender中运行应用管理器

或菜单选项(Max、Maya):

从3ds Max中运行应用管理器 从Maya中运行应用管理器

应用管理器页面将在默认Web浏览器中显示。

如果Web服务器碰巧因为某些原因关闭(例如您将Verge3D更新到了新版本),此操作也会将其重新启动。

B. 从桌面快捷方式启动

即使没有运行Blender、3ds Max或Maya,也可以启动本地Web服务器。只需单击Verge3D安装程序创建的桌面图标(仅限Windows),应用管理器页面将立即显示在Web浏览器中。

通过桌面快捷方式启动Verge3D

如果Web服务器已经在运行(例如您已经从3D编辑器启动了它),那么桌面应用程序只会在浏览器中打开应用管理器。

C. 用命令行启动

安装Python 3,例如从 Microsoft Store 安装。安装完成后,启动 Command Prompt 并输入:

cd verge3d_blender

(或您安装Verge3D的任何路径),然后对于Blender版本输入:

python manager\server.py BLENDER

对于3ds Max版本输入:

python manager\server.py MAX

或对于Maya版本输入:

python manager\server.py MAYA

最后,打开浏览器并导航到 localhost:8668localhost:8669localhost:8670 即可。macOS或Linux用户可以使用相同的命令,只需使用正斜杠。

首次启动

当Verge3D首次安装或更新到新版本时,会显示启动画面:

应用管理器启动界面

在此界面中,您应该选择一个应用程序文件夹,用于存储您的项目。您可以保留默认设置,这将在 Documents 中创建一个 verge3d_apps 子文件夹。您还可以在此界面切换浅色和深色主题。

探索应用

主页应用列表

启动或刷新主页时,应用管理器会扫描 applications folder 并将找到的所有文件夹显示为列表。

对于列表中的每个应用,应用管理器会显示在其文件夹中找到的所有 .html、.gltf/.glb 和3D编辑器保存文件(.blend、.max、.ma/.mb)。点击这些文件的图标即可查看。

应用管理器列表项

包含文件过多的应用行,可以通过应用名称旁的三角形图标展开。

应用管理器展开项

可以使用顶部的搜索字段对应用进行过滤。

应用管理器搜索

应用详情页面

点击应用名称后,将显示一个更为详尽的页面。

点击应用标题

在应用详情页中,所有文件都列出了名称,并且可以运行。该页面的文件可以通过搜索输入框进行过滤。

应用视图

资产商店

资产商店包含数十个随Verge3D一起提供的演示、教程项目和材质库。您可以使用这些内容进行学习,或将其用于自己的应用中。

资产商店目录

您可以点击 购物车 图标打开资产商店:

资产商店图标

创建应用

使用左侧栏上的按钮即可创建新应用。

新建应用图标

您可以输入新应用的名称,然后选择一个模板来创建应用。

应用创建选项

默认提供四个模板(您也可以 创建和添加更多模板 以供选择):

Standard Light
浅色主题应用,加载带有银色材质的基本立方体。还包括轨道相机、光源和基于HDRI的环境照明。
Standard Dark
深色主题应用,加载带有金色材质的基本立方体。还包括轨道相机、光源和基于HDRI的环境照明。
Blank Scene
空白应用,不加载任何模型。不过,它附带基于HDRI的照明设置。
Code-Based
非常基本的立方体场景,面向硬核JavaScript编码者。开箱不支持Puzzles。

您还可以在应用中包含可选模块:

Font Converter
TrueType字体转换器(opentype.js)。用于加载和渲染 动态文本对象
Texture Decompressor
纹理解压缩器(basis_transcoder.jsbasis_transcoder.wasm)。加载KTX格式的 压缩纹理
Physics
物理引擎(ammo.wasm.jsammo.wasm.wasm)。驱动 物理拼图

新应用创建完成后,将显示一个链接,您可以使用该链接跳转到应用页面(或直接关闭窗口)。

创建成功对话框

新应用将开始在主列表中显示。

导入应用

可以通过简单的拖放操作将 应用ZIP 附加(导入)到应用管理器中:

附加应用

应用附加完成后,将显示一个链接,您可以使用该链接跳转到应用页面(或直接关闭窗口)。

附加成功对话框

附加的应用将出现在应用列表中。

操作

Edit Puzzles

您可以通过点击主页上"操作"列中的按钮,开始为应用添加或编辑Puzzles:

主页中编辑拼图的图标

...或者在应用详情页面上使用右侧栏上的按钮:

应用页面内编辑拼图的图标

这里 查看更多有关Puzzles的信息。

Open Folder

您可以通过点击主页上"操作"列中的按钮打开应用文件夹:

打开应用文件夹图标

...或者在应用详情页面上使用右侧栏上的按钮:

应用页面内打开文件夹图标

此操作将调用操作系统的默认文件管理器(例如Windows 10/11中的文件资源管理器)。

Managing Application Settings

您可以在应用详情页面上使用右侧栏上的按钮打开 Application Settings 对话框:

打开应用设置对话框

通过此对话框,您可以自定义应用在浏览器、搜索引擎或社交媒体中的显示方式:

设置包括:

General Tab

应用通用设置
Title
在浏览器和搜索结果中显示的应用标题。
Description
在搜索结果中显示的应用描述。
Favicon 16x16, 32x32, 48x48
在桌面浏览器中运行应用时显示的基本应用图标(称为favicons)。这些图标也用于在搜索引擎结果页面上显示您的应用。您应使用PNG格式的图标并提供正确的尺寸,以获得最大兼容性。
Safari 180x180
在iPhone/iPad上的Safari浏览器中显示的应用图标。
Chrome 192x192, 512x512
在Android设备上的Chrome中显示的应用图标。也用于显示已安装的渐进式Web应用(PWA)的启动器。

Preloader Tab

应用预加载器设置
Image
预加载器图像。为获得更好的外观,您应使用PNG、JPEG、WebP或SVG格式的正方形尺寸图像。
Image Size
预加载器图像的宽度和高度。
Bar Color
预加载器进度条颜色、渐变或自定义CSS样式。
Bar Border Color
预加载器进度条边框颜色。
Bar Height
预加载器进度条高度。这不包括边框,边框有额外的1像素厚度。
Background Color
预加载器屏幕背景颜色。
Shadow
仅适用于深色主题应用。预加载器图像和进度条的阴影(发光)效果的颜色和宽度。

UI Tab

应用UI设置
Fullscreen Open
切换到全屏模式的按钮。为获得更好的兼容性,请提供PNG、JPEG、WebP或SVG格式的正方形尺寸图像。
Fullscreen Close
退出全屏模式的按钮。为获得更好的兼容性,请提供PNG、JPEG、WebP或SVG格式的正方形尺寸图像。
Move Forward
使用第一人称相机控制时在移动设备上显示的按钮。

Annotations Tab

应用标注设置
Marker Colors
标注文本、背景和边框颜色。
Marker Size
标注大小(以像素为单位)。
Dialog Colors
标注对话框文本、背景和边框颜色。

Sharing Tab

应用分享设置
Open Graph Title
在大多数社交媒体渠道(如Facebook、Reddit、LinkedIn等)中分享应用时显示的标题。
Open Graph Description
在大多数社交媒体渠道中分享应用时显示的描述。
Open Graph Image
在大多数社交媒体渠道中分享应用时显示的图像。推荐尺寸为1200x630。
X/Twitter Title
在X(Twitter)上分享应用时显示的标题。
X/Twitter Description
在X(Twitter)上分享应用时显示的描述。
X/Twitter Image
在X(Twitter)上分享应用时显示的图像。推荐尺寸为1200x630。

Errors Tab

应用错误设置
WebGL Error Message
当用户在不支持WebGL的浏览器中运行应用时显示的错误消息。您可以使用纯文本或HTML标记来指定此消息。
WebGL Error Image
显示在WebGL错误消息上方的图像。

PWA Tab

使用这些设置为您的应用配置渐进式Web应用功能。

PWA设置
Progressive Web App
使您的应用成为渐进式应用。这意味着它可以安装到您的系统中,并通过任务栏/停靠栏/开始菜单启动器(桌面端)或主屏幕/应用屏幕(移动端)启动。
Web App Name
渐进式Web应用(PWA)名称。此名称在将Web应用安装到系统时使用,也作为应用图标的标题。将此设置指定为空值实际上会禁用应用的PWA功能。
Offline Mode
允许您的应用在没有互联网连接的情况下运行(例如在飞行模式下)。离线模式通过特殊的 service worker 脚本(v3d_pwa_cache.js)实现,该脚本会自动生成并放置在应用文件夹中。此脚本负责创建和维护应用资产的永久缓存。Offline Mode 设置可以独立于PWA功能启用和工作。
Refresh Cache
一旦为应用激活了离线模式,持久性应用缓存将在首次启动时创建并填充,并在所有后续启动中重用。因此,在对应用进行任何修改后(例如导出新场景或编辑Puzzles),需要刷新此缓存。

Publish

您可以通过点击主页上"操作"列中的按钮来发布应用:

发布应用图标

...或者在应用详情页面上使用右侧栏上的按钮:

应用页面内发布应用图标

此操作将开始将应用上传到Verge3D Network(可取消操作),从而使其可以在线访问。

上传应用对话框

如果上传失败并显示消息"The difference between your local system time and the server time is too large"(本地系统时间与服务器时间之间的差异太大),则应更正计算机上的时间设置并重试。

上传完成后,将会弹出一个窗口,您可以从中复制应用链接或嵌入代码。

上传成功对话框

您还可以使用社交媒体分享按钮和二维码生成器。

Verge3D Network二维码

已上传的文件可以在 Network Directory 页面上查看或删除。

Exporting Applications

您可以在应用详情页面上使用右侧栏上的按钮来创建或上传应用文件夹的ZIP存档:

创建或上传ZIP图标

此操作将打包您的应用文件夹,然后:

  1. 将存档下载到本地文件系统,或
  2. 使用Verge3D Network将其上传到远程文件夹。

这样,您的应用就可以与同事、客户、合作伙伴或我们Verge3D开发人员(用于调试)共享了。此功能也适用于备份。

创建或上传ZIP选择器

如果您选择上传存档,将弹出一个窗口,您可以从中复制上传到Verge3D Network的文件链接。

上传完成对话框

如果上传失败并显示消息"The difference between your local system time and the server time is too large"(本地系统时间与服务器时间之间的差异太大),则应更正计算机上的时间设置并重试。

已上传的文件可以在 Network Directory 页面上查看或删除。

Create Desktop/Mobile Apps

应用管理器附带将您的3D项目转换为桌面或移动应用的工具。要执行此转换,请使用应用页面右侧栏上的以下按钮:

使用Verge3D创建桌面/移动端应用

根据您想要创建的应用类型,阅读以下章节了解更多信息:桌面端移动端

Create E-learning Apps

使用Verge3D,您可以将3D Web应用打包为与SCORM 1.2标准兼容的电子学习课件。请使用应用页面右侧栏上的以下按钮:

使用Verge3D创建SCORM课程的按钮

阅读 以下指南 ,了解如何正确使用此功能。

Move to Trash

您可以通过点击主页上"操作"列中的按钮来删除应用:

删除应用图标

...或者在应用详情页面上使用右侧栏上的按钮:

应用页面内删除应用图标

应用会被移动到系统垃圾箱,可以从中恢复。

Update

如果应用是基于旧版本Verge3D创建的,主页上"操作"列中的更新按钮将变为激活状态:

更新应用图标

该按钮也会出现在应用页面的右侧栏上:

应用页面内更新应用图标

这里 查看更多有关更新的信息。

模板

What's a Template

创建新应用时,您可以选择一个模板来作为基础创建应用。默认提供4个模板:"Standard Light"、"Standard Dark"、"Blank Scene"和"Code-Based"。

应用模板列表

这些模板的源文件可以在Verge3D安装文件夹内的 manager/templates 子文件夹中找到,例如 C:\Program Files\Verge3D_for_Blender\manager\templates。您可以修改这些文件,或为项目创建一个全新的模板。

在templates文件夹中,还有一个隐藏的模板叫做"Embeddable",您可以用它来创建 React.js或Vue.js应用

有很多可能的方法来修改/改进您的模板。您可以通过编辑HTML/CSS文件来更改布局,嵌入/使用一些JavaScript代码或库,替换UI元素或预加载器,或添加一些默认包含在每个新应用中的拼图。

Creating Templates

要创建您自己的模板,请点击左侧栏上的 Settings 按钮,然后选择 Templates 选项卡:

设置图标

在弹出的面板中,点击 + 并指定新模板的名称(例如"My Template"),然后点击 Apply Changes

管理模板对话框

这样,每次创建新应用时,都会出现选择您自定义模板的选项:

新建应用对话框中的新模板

默认情况下,将为您的新应用创建一个空文件夹,因为没有为新模板提供任何文件。最简单的真实模板创建方法是复制一些现有模板(例如"Standard Dark"),然后将复制的文件夹重命名为您的模板名称(即"My Template")。

管理网络目录

点击左侧栏上的云朵按钮,即可打开Verge3D Network目录:

Verge3D Network图标

网络目录列出了您之前上传的所有文件、目录或ZIP存档:

Verge3D Network远程文件

在此页面上,您可以查看项目的大小以及资产上传到Verge3D Network的日期/时间(当地时区)。对于目录,日期/时间信息对应于 最近上传 的子元素(文件或其他目录)。

第一项("/")显示了一些重要信息:所有数据占用的总大小,以及上次上传到网络目录的时间。

您可以选择(使用复选框)一些项目,然后点击右侧面板上的按钮:

  1. 将应用或单个文件下载回本地Verge3D发行版目录中。
  2. 从目录中删除文件。

应用管理器设置

点击左侧栏上的齿轮按钮,即可打开包含各种设置的面板:

应用管理器设置图标

默认情况下如下所示:

General Tab

应用管理器通用设置对话框
Applications Folder
使用指定的绝对路径(例如C:\Users\UserName\my_verge)作为应用文件夹。
Notify about Verge3D updates
当有新的稳定Verge3D版本可用时,应用管理器将显示通知(默认启用)。
Add source files (models, puzzles, backups, etc.) to exported ZIP
导出 功能在创建ZIP存档时将打包所有文件,包括源文件。这包括 .blend、.max、.ma/.mb、visual_logic.xml 以及 v3d_app_data 文件夹的内容。如果您不想共享任何源文件,可以禁用此选项。
Enable external server interface
使用本地Wi-Fi或以太网中的IP地址代替 localhost。您可以从操作系统首选项中找到计算机的IP地址:WindowsMacLinux。通过导航到网络地址启动应用管理器,例如:192.168.1.15:8668

UI Tab

应用管理器UI设置对话框
Select Theme
在应用管理器和Puzzles编辑器之间切换 LightDark 模式。
User Manual URL

为用户手册指定自定义路径。您可能在以下场景中需要这样做:

  • 用本地化版本替换英文文档。
  • 通过URL离线更快地阅读文档,例如对于Blender http://localhost:8668/docs/manual/en/index.html
  • 使用旧版本Verge3D的文档或预览版文档,而不是最新的稳定版用户手册。

此设置会替换Blender、3ds Max、Maya、应用管理器和Puzzles中的手册。

Puzzles Tab

应用管理器Puzzles设置对话框
Enable Performance Mode
Puzzles编辑器将使用一些优化措施,旨在提高拖动和缩放性能。用户体验可能因特定浏览器而异,其中基于Chromium的浏览器(Google Chrome、MS Edge、Brave等)受益最大,而Firefox和Safari等浏览器效果较小。如果您的拼图设置已经增长到导致明显性能问题的程度,此功能可以帮助解决。

Network Tab

使用这些设置配置Verge3D Network上传。

应用管理器网络设置对话框
Verge3D Network cache age (minutes)
设置Verge3D Network刷新重新上传应用的时间间隔。将此值设置为0(即立即刷新)可加快开发迭代速度。设置为更高的值(例如1440即一天)可使应用加载更快并消耗更少带宽。
Use URL shortener for uploads
缩短上传到Verge3D Network的应用链接,或生成直接(长)链接。使用直接链接可能不太方便,但有加载更快的优势。这也使得无法猜测其他用户上传到Verge3D Network的应用URL,如果隐私是关注点的话这是有意义的。
Publish all app files (models, puzzles, backups, etc.)
发布 功能将上传通常在线运行应用所不需要的文件,这些文件默认会被跳过。这包括 .blend、.max、.ma/.mb、visual_logic.xml 以及 v3d_app_data 文件夹的内容。当您想与用户、合作伙伴或同事共享源文件时,可以启用此选项。

Templates Tab

参见 上文

许可证管理

使用应用管理器中的 Key 图标激活您的Verge3D副本的许可证密钥,并查看许可证状态。当您刚安装Verge3D时,您的副本被指定为"Trial"状态——注意 Key 图标旁的小红点:

Verge3D试用版

点击 Enter Key 并粘贴您的许可证密钥。这会将您的Verge3D副本转为"Active"状态,过期日期将显示在结果窗口中:

Verge3D激活许可证

一旦维护订阅过期,您将收到通过电子邮件续订许可证的建议。这被称为"宽限期"(Grace period),持续一个月:

Verge3D宽限期

宽限期结束后,您需要以全价购买新许可证。不过,您仍然可以使用过期许可证覆盖的旧版本Verge3D。

Verge3D许可证过期

如果您计划长期使用Verge3D,最好利用宽限期。定期检查您的电子邮箱,并留意 Key 图标看是否有红点出现:

Verge3D许可证正常

遇到问题?

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