新手指南

Verge3D是一款多功能的软件,您可以根据个人喜好使用不同的软件。本指南仅介绍了如何构建工作流程的一种方法,因此请将其作为一种友好推荐。唯一的先决条件是您应该具备使用Verge3D工作的3D软件的经验:Autodesk 3ds Max或Blender。

安装(Installation)

安装过程将在每个支持的3D套件的相应部分中逐步描述:3ds MaxBlender

预览(Sneak Peek)

要确保正确安装Verge3D,可以使用Sneak Peek菜单选项(3ds Max)或按钮(Blender)在浏览器中预览基本模型。此功能将执行导出到临时文件夹,并将使用交互式渲染运行默认浏览器。

新手指南 - 图1

新手指南 - 图2

应用管理器(App Manager )

虽然您可以先开始处理图形并稍后创建Verge3D项目,但我们建议您从一开始就习惯App Manager。通过这样做,您可以确保正确组织文件并将其存储在同一文件夹中,这对项目的完整性非常重要,特别是对于发布。您还将拥有一个可用的Web应用程序,您可以在浏览器中独立于源场景文件运行/重新加载。

新手指南 - 图3

App Manager作为基于Web的工具,当您在Verge3D菜单(3ds Max)中选择App Manager选项或单击同名按钮(Blender)时,该工具将在浏览器中打开。默认系统浏览器将运行 – 您可以在操作系统设置中更改它。任何现代浏览器都可以使用,我们推荐最新版本的谷歌浏览器,它快速,符合标准并提供良好的网络开发工具。

新手指南 - 图4

新手指南 - 图5

您可以使用右侧的面板创建新项目。键入项目名称(或使用默认的my_awesome_app),然后单击“创建应用程序”。暂时保留默认配置选项。

新手指南 - 图6

新手指南 - 图7

点击后,将在Verge3D安装的applications文件夹中创建以您的应用程序命名的文件夹。了解app文件夹的位置非常重要,因为所有纹理和其他项目资产都应存储在此处。

新手指南 - 图8

创建项目后,返回到App Manager的主屏幕 – 您的项目应该列在那里。现在,您可以通过简单地运行,创作图形,创建交互式场景以及最终发布,在多个方向上继续您的应用。

新手指南 - 图9

您还可以查看以下视频,了解如何使用App Manager创建新的Verge3D项目:3ds MaxBlender

运行程序(Running Your App )

您可以通过单击Verge3D图标(蓝色或绿色图标)随时运行您的应用程序。蓝色图标以最终形式启动应用程序,其中包含Puzzles场景和编程代码(如果存在)。相反,绿色图标仅打开导出的场景。

新手指南 - 图10

新创建的应用程序加载并显示一个盒子。您可以按下鼠标左键环顾四周,然后使用鼠标滚轮放大和缩小。

新手指南 - 图11

如果不是盒子,而是显示“无法访问此站点”,这意味着开发服务器已关闭,可能是因为您不小心关闭了第一个启动的3D软件实例和开发服务器。在这种情况下,您应该启动3ds Max或Blender,或者,如果程序已在运行,请再次启动App Manager。

虽然非常罕见,但可能会显示另一个警告:“您的图形卡似乎不支持WebGL。”如果您使用的是过时或不受支持的浏览器(如版本11以下的Internet Explorer),或者您的显卡和/或驱动程序被浏览器列入黑名单,则可能会发生这种情况。尝试安装最新的谷歌浏览器/更新您的操作系统/下载最新的驱动程序或只是找到另一台计算机。

导出(Export )

通过单击3ds Max或Blender图标,您可以分别打开应用程序的.max或.blend文件。

新手指南 - 图12

3D文件也可以习惯的通过“文件>打开”对话框打开,或者只需在应用程序文件夹中双击它们即可。

重要的是要了解应用程序仅加载导出的场景而不加载源3D文件。因此,每次更改源文件中的内容时,都应将其导出,以便在应用程序中查看修改后的场景。

可以从主菜单栏的Verge3D菜单(在3ds Max中)或从“文件>导出”菜单(在Blender中)执行导出。您可能希望为此操作指定快捷方式,因为您可能经常执行此操作。

新手指南 - 图13

新手指南 - 图14

您应该以glTF格式将场景导出到应用程序文件夹的根目录。

新手指南 - 图15

新手指南 - 图16

要测试它,在场景中添加一个茶壶/ 猴头,导出到glTF并通过单击App Manager中的蓝色Verge3D图标来运行您的应用程序。

为了更快地进行迭代,您可以使应用程序始终在浏览器选项卡中运行。 重新导出场景后,在键盘上按“F5”,以便在浏览器中重新加载。 使用“Alt + Tab”(Mac上的“Command + Tab”)快捷键可立即在3D软件和浏览器之间切换。

拼图(Puzzles )

到目前为止,我们使用Verge3D作为一个理想的Web导出器,它可以生成在浏览器中运行的实时3D视图。借助Verge3D的可视化脚本工具Puzzles,您可以添加动作脚本,以便您的3D场景成为真正的交互式Web应用程序。

新手指南 - 图17

单击应用程序管理器中应用程序名称旁边的“拼图”按钮。这将运行你的应用程序与它上面的拼图编辑器。在左侧,工具箱中包含一些类别(“事件”,“选择器”,“对象”等)。通过鼠标单击显示图标可以展开类别,您可以将其拖出到工作区。通过将各种拼图相互连接,您可以创建三维物体在用户操作时的行为方式。

新手指南 - 图18

要在开始时执行有意义的操作,请从“事件”类别中拖出when clicked拼图,然后从“选择器”中选择一个对象拼图。

新手指南 - 图19

将它们连接在一起表示您的应用程序将等待用户单击您在下拉菜单中选择的对象(例如,“盒子”),并且除非您在do插槽中添加内容,否则将不执行任何操作。

新手指南 - 图20

从对象中拖出hide拼图并将其插入该插槽。拖出另一个对象选择器拼图并将其与hide拼图连接。

新手指南 - 图21

现在,一旦用户点击3D对象,它就会消失。单击“运行”按钮以启动程序,并通过单击盒子来检查它是否有效。

新手指南 - 图22

为了使您的场景永远成为应用程序的一部分,请务必保存它。

新手指南 - 图23

完成拼图后,您可以使用App Manager中的蓝色图标运行现在的交互式应用程序。

恭喜你,你已成为一名程序员!

您还可以查看以下视频,了解如何使用拼图:3ds MaxBlender

发布(Publishing )

在您自己的网站上。。。

您已经创建了一个Web应用程序,可能希望数十亿的Internet用户来查看它。如果您拥有一个网站,这不会是一个问题 – 只需将您的应用程序的整个文件夹上传到您的服务器(例如,通过FTP)。部署后,您可以在网站上的某个位置提供应用HTML文件的链接,或将其嵌入带有iframe HTML元素的网页中:

  1. <iframe width="1024" height="640" src="https://www.example.com/my_awesome_app/my_awesome_app.html"></iframe>

使用Wordpress…

如果您在网站上运行Wordpress CMS,则任务更加简化 – 您可以使用免费的Verge3D WordPress插件上传和嵌入Verge3D应用程序。

在Verge3D网络服务器上…

但是如果你没有机会成为一名网络高手呢?没问题 – 通过单击App Manager中的“Globe”按钮,您可以将应用程序上传到Verge3D 网络服务器,这是一个基于云存储和托管在Amazon服务器上的CDN。

新手指南 - 图24

上传完成后,屏幕将显示一个链接,您可以通过任何方式共享(在博客文章,社交媒体,评论,电子邮件,您的名字)。它还会生成HTML代码,以便将您的应用嵌入第三方网站,就像使用YouTube视频一样。

新手指南 - 图25

您还可以查看以下视频,了解如何使用拼图:3ds MaxBlender

在Facebook上…

最后,您可以通过利用3D帖子功能直接在Facebook上发布3D模型。

许可证(License Key )

获得许可证后,您将通过电子邮件收到许可证信息(下面的密钥是随机示例)。

新手指南 - 图26

新手指南 - 图27

许可证密钥将激活您的Verge3D实例,并将从您的所有应用程序中删除试用水印。

新手指南 - 图28

每次更新到新版本时,请务必输入许可证密钥。

下一步

通过用户指南的其它章节获取更多细节。我们邀请您加入Soft8Soft论坛,在这里我们很高兴解答您的所有问题。