入门指南/Blender

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

安装

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

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

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

Blender中的Sneak Peek按钮

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

应用管理器

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

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

应用管理器主界面

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

Blender中的应用管理器面板

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

创建新项目的按钮

输入项目名称(或直接使用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中的快捷键是是”Command+Tab”。

拼图

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

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

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

拼图编辑器界面

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

拼图编辑器工具箱

从下面这个简单易懂的示例做起,先从 Events | 事件 类目中拖出 When Clicked(当点击时) 拼图,从 Selectors | 选择器 中拖出 Select an object(选择一个对象) 拼图。

从拼图编辑器工具箱中添加 when clicked 拼图

此拼图意味着您的应用将会一直等待用户点击下拉菜单指定的对象(例如”立方体”),然后执行在do插槽中的命令。但如果 do 插槽中为空则不执行任何操作。

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

使用when click和hide拼图的例子

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

运行拼图的按钮

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

保持拼图的按钮

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

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

您也可以在下方视频中了解如何使用这些拼图:Verge3D for Blender基础教程 - 07.设置动画和声音

发布

在个人网站发布...

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