![2be4b531873997b9069a75f935b516c9.png](https://i-blog.csdnimg.cn/blog_migrate/ab5c88c98fcb4ea3081e0a52370ddb8c.jpeg)
从Maya导出到WebGL
https://www. soft8soft.com/exporting -from-maya-to-webgl/ 12May 2020 by Alexander Kovelenov
本教程的目的是为Maya用户提供一个将他们的3D模型或整个场景在线发布的快速使用指南。在这里我们简述了基于Verge3D工具包快速发布Maya到WebGL的流程。请继续阅读以了解更多。
![9463334e332b1260baa9cf32094e5c36.png](https://i-blog.csdnimg.cn/blog_migrate/8e779d2faf6b33c735c9d43de5a6d8b4.jpeg)
方案
- 首先,为Maya下载和安装Verge3D。
- 其次,基于现成的模板创建一个WebGL项目。
- 然后,添加模型到项目并导出。
- 最后,在线发布完整的项目。
简述WebGL
WebGL是浏览器中的一个独特功能,无需下载任何软件或第三方插件,您即可在浏览器内直接渲染三维交互图形。这项技术非常复杂,这就是为什么有许多WebGL工具包被创造出来——为了让您生活得更舒适。
这其中之一即是Verge3D,一个与Autodesk Maya全面集成的框架。这是一个基于物理的渲染管线,支持原生材质、灯光、阴影和动画。Verge3D背后的用户逻辑是,让您仅使用Maya现有功能,即可创建与视口中更接近的WebGL结果。
第一步,开始
在Windows系统中,只需直接下载并运行Verge3D for Maya即可,它会解压到您选定的文件夹中。对macOS或Linux系统,安装流程略有不同。请遵循官方手册中的安装步骤进行操作。
安装完成后,运行Maya,并选择主菜单栏中的窗口 > 设置/首选项 > 插件管理器…菜单。
![6cfda894489e566cabb23f9dbd747ac9.png](https://i-blog.csdnimg.cn/blog_migrate/a3c2856f321ba123e353d56e89b94981.jpeg)
通过勾选 已加载 和 自动加载 两个复选框来激活Verge3D插件。
![f8b3df2eab4bfdbece4ca7c3c89e2461.png](https://i-blog.csdnimg.cn/blog_migrate/4653388cbe8416660a76f7fe76bb5a7d.png)
此时您应该可以在菜单栏中看到Verge3D菜单。此菜单中最重要的功能是Sneak Peek(快览),点击后即可立即在浏览器的新标签页中预览场景。
![94c941c6a85a5d911c26278990dc799b.png](https://i-blog.csdnimg.cn/blog_migrate/fe1c52ac5379fa30203f3c62438729e6.png)
第二步,创建一个新的WebGL项目
现在是时候通过应用管理器创建一个新的WebGL项目了。应用管理器是一个基于网页的工具,您可以通过点击Run App Manager…菜单在浏览器中打开它。
请使用左侧工具栏的图标来新建项目。输入项目名称后点击Create App即可(默认名称My Awesome App也是可用的),其他选项您都可以保持默认。
![ef87c6aeebb4b87ecdd816cabb5e2cd1.png](https://i-blog.csdnimg.cn/blog_migrate/1f1189970bc92d4d3524be2d6df98b56.png)
在创建好项目后,请查看应用管理器主界面,您的项目会显示在列表中。现在,您即可按需使用该应用了:包括直接运行,创作图形内容,创建交互场景,以及最终发布。
![31faa855ec193efe8d4db93b5f2a5ca3.png](https://i-blog.csdnimg.cn/blog_migrate/7390ad3f1d02f36b6fd2fc9f5f8f6a0f.png)
您可以随时点击Verge3D图标(蓝色或绿色皆可)来启动应用。点击蓝色图标将启动包含拼图场景和程序代码的最终应用形态。预期相反,点击绿色图标将仅打开导出的场景。
第三步,添加Maya资产并导出
点击红色的Maya图标会打开您的应用中最主要的.mb场景文件。您可以简单编辑该文件或完全替换为自己的资产文件。
在Maya中点击Verge3D > Export glTF…菜单来导出场景。您可直接导出glTF文件到应用文件夹根目录,这是一种对WebGL非常友好的格式。
![8d42094063cd39ce2fd4b54c7565f67c.png](https://i-blog.csdnimg.cn/blog_migrate/8817b3d8fc1941100386758515316de6.jpeg)
导出成功后,在应用管理器中点击Verge3D logo图标即可运行您的应用。
第四步,发布
您已经创建好了一个基于网页的应用,也许您希望能有无数的互联网用户看到它。如果您拥有自己的网站,这将会很简单——只需简单地上传整个应用目录到您的服务器上就好了(例如,通过FTP或SSH方式)。
如果您还不是网络管理员,该如何操作呢?其实应用管理器中有一个带有“向上”图标的小按钮,点击它即可直接上传您的应用到Verge3D Network中了,这是一个Verge3D自带的应用托管平台。
![7be62a7c158506d68577c1ac8caf1720.png](https://i-blog.csdnimg.cn/blog_migrate/672f671580959dbe6f7d8b965df32a61.png)
上传完成后您会有多个选择:分享应用的公开链接,或在社交媒体上发布一个新帖子。
![fe56d1b2ee3d3cca2c8f6c887b8c0b14.png](https://i-blog.csdnimg.cn/blog_migrate/f536a31816f872af17c0fb7e984879c8.jpeg)
下一步
在此分步指南中我们仅将Verge3D作为导出器使用,生成了在浏览器中运行的WebGL实时视图。但您可以做得更多!通过拼图编辑器这个强大而有趣的脚本编辑环境,您无需再与代码纠缠即可编程了!快来试试吧!
本文仅仅是一个Verge3D工作流程的概览,还有许多未提及的主题,请浏览入门指南来发掘更多令人兴奋的功能吧!