入门指南 / Maya

Verge3D是一款多功能的软件,您可以根据需求和习惯构建自己的使用方式。本指南仅描述了如何构建工作流的一种可能方法,因此请将其作为友好的建议,而不是唯一的标准答案。唯一的先决条件是,你应该有一些有一些Maya的使用经验,才可以基于Verge3D开展工作。

安装

此处详细介绍了Verge3D的安装步骤。

Sneak Peek

为确保Verge3D已正确安装,您可以使用 Sneak Peek 菜单选项在网页浏览器中快速预览一个基础模型:

Maya中的Sneak Peek菜单

...或者使用 Verge3D 工具架上的按钮:

Maya中的Sneak Peek工具架按钮

此功能将执行导出到临时文件夹,并在默认浏览器中打开交互式渲染预览。在项目工作过程中,您随时都可以使用Sneak Peek进行快速测试。

应用管理器

虽然您可以先设计好模型后再创建Verge3D项目,但我们建议您从一开始就习惯使用应用管理器。通过这样,您可以确保所有文件被正确组织并存储在同一个文件夹中,这对于项目的完整性非常重要,特别是如果您计划将其转交给第三方。

预先利用应用管理器的另一个好处是,您将始终拥有一个可以正常运行的,并可随时可在浏览器中运行或重载的网页应用,而无需每次都先打开三维场景文件。

Verge3D应用管理器主界面

当您点击Verge3D菜单中的Run App Manager(或点击相应的工具架按钮)时,应用管理器将在网页浏览器中打开。

从Maya中运行应用管理器 Maya中的应用管理器工具架按钮

将使用默认系统浏览器——您可以在操作系统设置中更改它。您可以使用任何现代浏览器,但我们推荐使用最新版本的 谷歌浏览器,它快速、符合行业标准,并提供了优秀的网页开发工具。针对中国大陆区用户的友情提示:我们不推荐QQ浏览器和IE浏览器。如果您使用猎豹浏览器或360浏览器,使用过程中也请确保不要开启兼容性模式。

点击左侧边栏上的按钮来创建一个新项目。

新建项目按钮

输入项目名称(或直接使用My_Awesome_App),然后单击"Create App"按钮。可以先不改变默认配置选项。

创建应用对话框

新应用创建好后,就会在列表中显示。

运行应用

点击Verge3D图标即可运行应用,蓝色的或绿色的都可以。点击蓝色图标将启动由模型、拼图、场景和编程代码(如果有的话)共同组成的最终形式的应用。相反,点击绿色图标只打开导出的三维场景,不会加载由拼图或编程创建的交互。

运行应用按钮

新建的应用只包含一个默认的立方体。点击鼠标左键可旋转视图,滚动鼠标滚轮可放大缩小视图。

在浏览器中运行应用

如果浏览器中没有显示默认的立方体,而是提示"无法访问此页面",则说明开发服务器已关闭,可能是因为您不小心关闭了3D编辑器的第一个启动实例。在这种情况下,请启动Maya。如已经在运行,请尝试再次点击视图中的 App Mamager 按钮。

极少数情况下,浏览器可能会显示另一个警告:"Ouch! Your graphics card does not support WebGL."(哎呀,您的显卡不支持WebGL。)这代表着您正在使用已过时的或不被支持的浏览器,或是因为您的显卡和驱动程序已被浏览器列入黑名单。请尝试安装最新版的谷歌Chrome浏览器,或更新您的操作系统,或下载安装最新的显卡驱动。如果还不能解决问题,建议更换其他电脑测试。

导出

点击 M 图标,即可打开应用对应的 .ma/.mb 文件。

点击按钮,打开My Awesome App项目的Maya场景文件

您可以如常在Blender中点击"文件>打开",或双击应用目录中的文件。建议直接通过Maya菜单"文件 > 打开"场景文件,因为这样不会新开Maya的程序实例。

您需要知道,应用只加载以glTF格式导出的文件,而不是Maya保存场景文件,这一点很重要。所以每次您在Blender源文件中做出修改后,都必须重新导出,以便在应用中实时看到修改后的效果。

可以从主菜单栏的Verge3D菜单中进行导出(或使用相应的工具架按钮)。建议为该操作指定一个快捷方式,因为这是常用操作。

导出Maya场景为glTF文件 Maya中的应用管理器工具架按钮

将场景导出为 gltf 格式的文件,保存到应用的根目录。

为导出的glTF资产选择名称

您可以在场景中添加几个3D对象,导出为glTF,然后在应用管理器中点击蓝色的Verge3D图标运行应用,以测试运行效果。

为提高迭代效率,建议始终在浏览器标签中保留该应用页面。 这样当您重新导出场景后,只需按下键盘上的"F5"刷新页面,即可在浏览器中重新加载场景。 使用"Alt+Tab"快捷键在Maya和浏览器之间快速切换,在macOS中的快捷键是是"Command+Tab"。

拼图

目前为止,您已经了解了如何使用Verge3D导出和生成在浏览器中实时运行的3D场景。您可以继续使用拼图编辑器为场景设置交互行为,使其成为一个真正的交互式网页应用。Puzzles,即拼图编辑器,时在Verge3D中内置的可视化脚本工具。

运行应用拼图逻辑的按钮

在应用管理器中单击列表中的拼图图标,即可打开拼图编辑器场景,应用场景预览视图将同步显示在其右上角。

拼图编辑器界面

位于左侧的工具箱包含了拼图的类别目录(如"事件"、"选择器"、"对象"等)。点击展开列表,打开拼图清单,可以选中拼图块并拖拽到工作区中。通过连接组合 各种拼图 ,您可在场景为3D对象创建基于用户行为的交互流程。

您可以将鼠标悬停在拼图上或使用 右键菜单 来快速获取任何拼图的帮助信息。

拼图工具箱

从下面这个简单易懂的示例做起,先从 Events 类目中拖出 when clicked 拼图,在浅绿色下拉菜单中选择某个对象。

从工具盒中添加when clicked拼图

此拼图意味着应用将会一直等待用户点击指定的对象,然后执行在 do 插槽中的命令。但如果 do 插槽中为空则不执行任何操作。

Objects 类目中拖出 hide 拼图并将其插入该插槽。在其下拉列表中选择相同的对象("pCube1")。

when clicked拼图和hide拼图使用方式

现在,一旦用户点击该3D对象,它就会消失。点击 Run 按钮来运行您的程序,然后通过点击立方体来验证效果。

运行拼图按钮

为使您的场景交互方案成为应用的持久部分,请务必保存。

保存拼图按钮

完成拼图后,您就可以在应用管理器中的单击蓝色图标运行此交互式应用了。

恭喜您,您已经成为一名程序员了!

发布

在个人网站发布...

您已经创建好了应用,也许会希望全世界的互联网用户都有机会浏览和使用。如果您拥有个人网站,这将非常简单——只需将整个应用目录上传到您的服务器中即可(例如通过FTP方式上传)。部署后,您可以在网站中录入应用的HTML文件的链接,或者用HTML的 iframe 元素嵌入:

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

使用WordPress发布...

如果您在您的网站是基于WordPress内容管理系统创建的,那发布应用的方式会更简单——请在您的WordPress后台中安装免费的 Verge3D for WordPress插件 ,即可通过后台上传和嵌入应用。

发布到Verge3D Network上...

如果您没有网站或者无权向服务器中上传文件,那要如何发布应用呢?没问题,我们提供了免费的云端托管平台,这是一个基于亚马逊AWS构建的云存储和CDN解决方案。在应用管理器中点击上传按钮按钮,即可将您的应用发布到 Verge3D Network

上传应用到Verge3D Network按钮

上传完成后,屏幕上会显示对应的链接,您可以通过任何方式分析作品了:粘贴到博客文章、发布到社交媒体、发表网络评论、发送电子邮件、通过即时通讯软件发送…… 怎样分享都可以,您说了算。同时,该页面还生成了一段用于在其他网页中嵌入应用的HTML代码,类似您在博客中嵌入YouTube视频或Bilibili视频那样。

分享应用对话框

激活授权

如果您还处在学习过程中,可以长期试用Verge3D。但如果已经在商业活动和项目流程中使用,您必须购买 授权。授权信息将通过电子邮件发送(下图为随机示例)。

Verge3D授权邮件 激活Verge3D for Maya授权

在应用管理器中输入授权码后,将激活Verge3D安装实例,并从所有应用页面中删除试用水印。

授权激活状态对话框

每次更新到新版本后,请务必再次输入授权码。

向前一步

请前往 工作流程 一章了解使用Verge3D的进阶指南。

遇到问题?

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