入门指南/Blender

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

安装

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

Sneak Peek - 先睹为快,一键预览

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

Blender中的Sneak Peek按钮

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

应用管理器

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

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

应用管理器主界面

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

Blender中的App Manager按钮

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

创建新项目的按钮

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

创建新应用的对话窗口

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

运行应用

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

运行应用的按钮

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

在浏览器中运行My Awesome App应用

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

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

导出

点击 B 图标,即可打开应用对应的 .blend 场景文件。

点击此按钮,打开对应My Awesome App应用的blend场景文件

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

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

可以从菜单 "文件 > 导出" 执行导出操作。建议为该操作指定一个快捷方式,因为这是常用操作。

导出Blender场景为glTF文件

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

为导出的glTF资产选择名称

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

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

您可以通过右键菜单快速获取任何 Verge3D 选项或按钮的使用帮助。您也可以将鼠标指针指向某个功能并按 F1 键。

Blender中的Verge3D在线手册

拼图

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

点击此按钮,运行My Awesome App应用对应的逻辑拼图

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

拼图编辑器界面

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

您可以通过将鼠标悬停在拼图上来快速获取帮助,或通过 右键菜单 查看帮助。

拼图编辑器工具箱

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

从工具箱中添加when clicked拼图

此拼图使您的应用等待用户点击指定对象,然后执行...除非您在 do 插槽中添加内容,否则不会执行任何操作。

Objects 类目中拖出 hide 拼图并插入到该插槽。在该拼图下拉菜单中选择同一个对象("Cube")。

使用when click和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 Network上发布应用。

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

激活授权

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

发放授权邮件的电子邮件示例截图 为Verge3D for Blender激活授权

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

授权激活状态的对话框

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

向前一步

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

遇到问题?

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