用于3ds Max的Verge3D：入门指南 - Soft8Soft
Description: 开始使用Verge3D，学习如何从头开始创建交互式3D网络体验。本指南包括使用应用管理器，设置3ds Max以进行有效的图形创作，使用拼图编辑器环境，以无需编码的方式创建交互式WebGL内容，并通过Verge3D Network发布。

# 入门指南 / 3dsMax

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

- 安装
- Sneak Peek - 先睹为快，一键预览
- 应用管理器
- 运行应用
- 导出
- 拼图
- 发布
- 激活授权
- 向前一步

#

## 安装

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

#

## Sneak Peek - 先睹为快，一键预览

为确保Verge3D已正确安装，您可以使用 Sneak Peek 菜单选项在网页浏览器中快速预览一个基础模型。此功能将执行导出到临时文件夹，并在默认浏览器打开预览页面。

在项目工作过程中，您随时都可以使用Sneak Peek进行快速预览。

#

## 应用管理器

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

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

当您点击Verge3D菜单中的App Manager时，应用管理器将在网页浏览器中打开。您可以在操作系统的设置中更改默认的网页浏览器。您可以使用任何现代浏览器，但我们推荐使用最新版本的 谷歌浏览器。它是最快速且最符合行业标准的浏览器，同时内置了好用的网页开发工具。针对中国大陆区的用户的友情提示：我们不推荐QQ浏览器和IE浏览器。如果您使用猎豹浏览器或360浏览器，使用过程中也请确保不要开启兼容性模式。

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

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

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

#

## 运行应用

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

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

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

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

#

## 导出

点击 3 图标，即可打开应用对应的 .max 文件。

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

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

可以从主菜单栏的Verge3D菜单中进行导出。建议为该操作指定一个快捷方式，因为这是常用操作。

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

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

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

#

## 拼图

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

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

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

从下面这个简单易懂的示例做起，先从 Events | 事件 类目中拖出 When Clicked(当点击时) 拼图，然后从浅绿色下拉列表中选择一些对象。

将它们连接在一起，意味着应用将会一直等待用户点击下拉菜单指定的对象（例如“立方体”），然后执行在do插槽中的命令。但如果 do 插槽中为空则不执行任何操作。

拖出 hide(隐藏) 拼图从 objects 并插入到该插槽。在其下拉列表中选择相同的对象（"Box001"）。

现在一旦用户点击3D对象，它就会从视图中消失。单击 Run(运行) 按钮以启动应用，点击立方体，检查拼图设置是否生效。

为保存您刚才对场景的交互设计，请记得关闭拼图编辑器前点击保存按钮。

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

恭喜您，您已经成为一名程序员了！

您也可以在下方视频中了解如何使用这些拼图： YouTube链接 或 Bilibili链接

#

## 发布

### 在个人网站发布...

您已经创建好了应用，也许会希望全世界的互联网用户都有机会浏览和使用。如果您拥有个人网站，这将非常简单——只需将整个应用目录上传到您的服务器中即可（例如通过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。

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

您可以查看 此视频 了解如何在Verge3D Network上发布应用。
注意：受到亚马逊AWS中国大陆区域的政策限制，中国大陆区域内的客户无法直接上传应用，您在点击上传后大概率会遇到进度停留在10%很久接着自动关闭的情形。为保证正常上传，您需要开启可以访问AWS欧洲节点的VPN服务才能够正常上传。应用上传后，会通过CDN加速到全球节点，所以您你和客户浏览托管在Verge3D Network的应用是无需使用VPN的。 另外，为方便没有VPN服务的用户发布，Verge3D中国还提供了免费发布到腾讯云与阿里云服务器的解决方案。授权用户和测试用户都可以使用，您可以在Verge3D应用发布方法一文中了解使用方法，或者在QQ群(171678760)里咨询客服。

#

## 激活授权

如果您还处在学习过程中，可以长期试用Verge3D。但如果已经正式项目流程中使用，您必须购买 授权。授权信息将通过电子邮件发送（下图为随机示例）。

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

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

#

## 向前一步

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

## 遇到问题？

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