提供Verge3D教程和Web3D开发技术服务

【verge3d】工作流程

下面记录了Soft8Soft团队和Verge3D用户在内部使用的典型工作流程(示例包括Teapot Heater演示,Industrial Robot演示,电子商务网站模型等)。
3ds Max和Blender版本的Verge3D都可以同样成功运行。

建模(Modeling)

在建模阶段,创建了中模(建议每个模型不超过10万三角面)。最后,网格是三角形的 – 这不是Verge3D的要求,而是推荐用于烘焙的贴图和3D编辑器之间更好的转移。然后使用三角面网格烘焙法线和AO贴图。
在这个阶段,Verge3D的Sneak Peek按钮可以方便地检查引擎渲染效果。

贴图和材质(Texturing and materials)

原则上,可以使用任何合适的软件创建标准或物理材质(PBR着色器)的纹理。在本手册中,我们将介绍如何使用Substance Painter生成一组适合PBR着色器的贴图。
在前一阶段烘焙的模型和贴图通过OBJ格式加载到Substance Painter中。最终在该软件中生成3张地图:颜色/透明度,AO/粗糙度/金属和法线贴图。使用Substance Painter的Verge3D预设导出纹理。可以在物理材质部分找到说明和预设的下载链接。
PBR材质是为上面相关模型设置的,在此过程中使用Sneak Peek检查材质效果。

动画(Animation)

像往常一样为相关模型部件创建动画片段。可以使用蒙皮,整个对象,变形目标和材质动画来产生各种动画效果。
您可能希望为动画对象提供有意义的名称,以便可以在拼图编辑器中轻松找到它们。

工程/项目(Project)

在此阶段,使用带有默认配置设置的App Manager创建Verge3D项目。
默认的.max或.blend文件中包含一个盒子,使用准备好的模型覆盖.max或.blend文件,并导出为.glTF。务必将所有相关的贴图文件也移动到应用程序文件夹(位于verge3d / applications)中。
或者,您可以考虑首先创建一个项目,并使用应用程序文件夹中的默认.max或.blend文件,就像在初学者指南中推荐的那样。

拼图(Puzzles)

使用拼图创建交互式场景,用于在点击时触发动画,在悬停时显示物体轮廓,定位模型部件,逻辑检查等。
请参阅本手册“拼图”部分中的更多信息。

布局和UI(Layout and UI)

在这个无代码工作流程中,基于HTML的界面是使用外部Web设计软件构建的。能够导出HTML / CSS / JS文件的任何可视化编辑器都可以工作 – 例如,Webflow(付费,基于云),Google Web Designer(免费,跨平台),Pinegrow(付费,跨平台)和Adobe Muze(支付,停产)都可以做到这一点。当然,您可以使用代码或使用其他专用软件手动构建HTML界面。
界面元素(菜单,按钮,信息框……)是作为单个网页的一部分创建的。与3D对象一样,您可能希望提供有意义的标识符(由id属性表示)来控制元素,以便可以在拼图编辑器中轻松地对它们进行寻址。
关键是要在嵌入应用程序的3D部分所需的布局中添加iframe元素。 iframe的src属性应指向App Manager生成的.html文件:

<iframe width=“100%” height=“100%” frameborder=“0” allowfullscreen=“” src=“teapot_heater.html”></iframe>

例如,Webflow提供了适合此目的的所谓“嵌入”元素。
您只需将上面引用的HTML代码行复制并粘贴到此元素内容中,iframe就会出现在导出的.html文件中。
另一个工具Google Web Designer提供专门用于此类任务的“自定义”组件。
或者,您可以使用文本编辑器将iframe代码行添加到导出的.html文件中,以使其看起来像这样:
<body>
<div>
<iframe width=“100%” height=“100%” frameborder=“0” allowfullscreen=“” src=“teapot_heater.html”>
</iframe>
</div>
</body>

集成(Assembling)

生成的HTML / CSS / JS文件集保存在应用程序文件夹的根目录下。新的.html文件(通常称为index.html)负责启动已集成的应用程序。您可以通过单击应用程序管理器中应显示的其他蓝色图标来运行该应用程序。
然后,2D和3D部分在逻辑上与HTML拼图互连,以处理用户事件。
请参阅本手册“拼图”部分中的更多信息。

声音(Audio)

可以使用由用户触发的拼图添加背景音乐和/或事件声音。请参阅本手册“拼图”部分中的更多信息。

资产压缩(Asset compression)

完成应用程序后,您可以按照本手册相应章节中的说明优化其场景文件的加载。

zjbcool

zjbcool
关闭菜单