四步实现从blender发布webGL

译自:BLENDER TO WEBGL IN 4 SIMPLE STEPS

本教程面向Blender用户,他们寻求快速在网上发布他们的3D模型,没有时间阅读冗长的手册。出于这个原因,只提到了必要的步骤,这些步骤简化了Blender-to-WebGL工作流程。

四步实现从blender发布webGL - 图1

步骤:

  • 下载安装blender版verge3d。
  • 新建webGL工程
  • 将现有模型加入工程并导出
  • 发布到web

什么是webGL?

WebGL的一个特性是,允许您直接在Web浏览器中呈现交互式3D图形,而无需下载任何内容或使用任何第三方插件。这需要初级编程技术。幸运的是,各种WebGL工具包的存在使您的生活更轻松。

其中之一是Verge3D,该框架有如下特色:写实级渲染,无代码交互,用于加载资产的高效、网络友好的格式,以及最重要的一点——它基于blender!

步骤1.入门

下载Verge3D并将其解压缩到您选择的目录中。确保您具有足够的权限来读取/写入此文件夹。建议不要在系统目录(例如“Program Files”)中进行安装。

打开Blender并通过选择“文件”菜单中的相应选项转到“用户首选项”。

四步实现从blender发布webGL - 图2

在“文件”选项卡上,找到“脚本”字段,并使其指向安装Verge3D的文件夹。单击“保存用户设置”并关闭“用户首选项”窗口。重启Blender。

四步实现从blender发布webGL - 图3

再次打开“用户首选项”窗口,然后转到“加载项”选项卡。找到并启用Verge3D插件,然后单击“保存用户设置”并关闭首选项窗口。

四步实现从blender发布webGL - 图4

从渲染引擎列表中选择“Verge3D”。 (可选)在“文件”(File)菜单中选择“保存启动文件”(Save Startup File)以使选择保持不变。

四步实现从blender发布webGL - 图5

安装结束!

顺便说一句,从现在开始,你有一个非常棒的功能叫做“Sneak Peek”。通过单击相应按钮,您将执行导出到临时文件夹并立即在新的浏览器选项卡中显示您的场景。在创建新项目时使用此选项进行快速测试是不可行的。

四步实现从blender发布webGL - 图6

步骤2.新建一个webGL工程

App Manager作为基于Web的工具,当您单击“App Manager”按钮时,该工具将在浏览器中打开。

四步实现从blender发布webGL - 图7

您可以使用右侧的表单创建新项目。只需输入项目名称(My Awesome App也可以使用),然后单击“创建应用程序”。您可以安全地保留其他创建选项。

四步实现从blender发布webGL - 图8

创建项目后,返回到App Manager的主屏幕 – 您的工程应该列在那里。现在,您可以在几个方向上继续使用您的应用程序:只需运行它,创作图形,创建交互式场景,最终发布。 您可以通过单击Verge3D图标(蓝色或绿色图标)随时运行您的应用程序。蓝色图标以最终形式启动应用程序,其中包含Puzzles场景和编程代码(如果存在)。相反,绿色图标仅打开导出的场景。

四步实现从blender发布webGL - 图9

步骤3.增加blender资源并导出

单击Blender图标将打开应用程序的主.blend文件。您只需编辑此文件或完全替换您自己的资源。

四步实现从blender发布webGL - 图10

可以从Blender中的File> Export菜单执行导出。您可以使用名为glTF的WebGL友好格式将场景文件直接导出到应用程序文件夹的根目录。

四步实现从blender发布webGL - 图11

成功导出后,单击App Manager中的蓝色Verge3D徽标图标启动应用程序。

步骤4.发布

您已经创建了一个Web应用程序,可能您希望数十亿的Internet用户来查看它。如果您拥有一个网站,这不会是一个问题 – 只需将您的应用程序的整个文件夹上传到您的服务器(例如,通过FTP或SSH)。

但是,如果你不是一名网络大拿呢?实际上,App Manager中有一个按钮(一个带有“Earth”图标)。单击该按钮会将您的应用程序上传到Verge3D网络,这是一个基于云的存储和托管在亚马逊服务器上的CDN。

四步实现从blender发布webGL - 图12

四步实现从blender发布webGL - 图13

下一步

在这个循序渐进的教程中,我们使用Verge3D作为一个理想的Web导出器,它“只是”生成在浏览器中运行的实时WebGL视图。但你可以做更多,更多!使用Verge3D附带的强大而有趣的脚本环境Puzzles,您不再需要成为程序员来进行编程。试试看!

四步实现从blender发布webGL - 图14

这只是Verge3D工作流程的简要概述,其中许多主题可能未经讨论。查看初学者指南,了解我们框架的更多令人兴奋的功能。