三维动画网站3D展示

3D产品配置器是在线营销和电子商务的一个主要新趋势。由于WebGL的快速发展,它们成为可能,WebGL是一种在客户的Web浏览器中显示3D图形的技术。阻止这种趋势增长得更快的唯一问题是缺乏有效的工具。值得庆幸的是,使用Verge3D,您可以非常轻松地构建交互式3D定制器。在本教程中,我们将介绍创建此类应用程序的最简单易用的管道。

在本文中,我们将回顾制作一个简单的3D珠宝配置器的过程,如下所示(点击下面的图像在线运行):

Verge3D珠宝配置器
用Verge3D构建的珠宝配置器。
顺便说一句,您可以在Verge3D发行版中找到此配置程序的源文件(3ds Max,Blender和Puzzles)。

由于Verge3D适用于3ds Max和Blender,我们将使本教程与3D包无关。此外,在本文中,我们假设您已经安装了Verge3D。如果没有,请查看Verge3D for 3ds Max或Verge3D for Blender安装指南。

概要
不要听那些说创建3D产品配置器既困难又昂贵的人 – 实际上很容易!坚持计划:

创建3D内容(模型+材料)。
使用Puzzles编辑器使您的3D应用程序交互。
在线发布配置器。
让我们一步一步地审查生产过程。

创建3D内容
这一步是最复杂的。但是,如果你有一些3ds Max或Blender体验,或者有这种经历的朋友或员工,你会没事的。

首先,使用Verge3D App Manager初始化您的珠宝个性化应用程序。在应用程序创建对话框中键入项目名称,并保持其他设置不变。

然后创建您的模型。请注意,为了获得最佳效果,您的3D对象应该是中间多边形,每个模型基本上不要使用超过100k的多边形。

下一阶段是创建材质和纹理。请记住,您可以通过查看此珠宝应用程序的源文件来熟悉材料。

银和金
这就是银色材料在Blender中的样子。我们在这里基本上有一个球形纹理(称为“ring_matcap”)与噪声和法线贴图混合。第一个表示“金属”表面,另外两个表示渲染材料更逼真。由于我们有3种不同的材料:银色,玫瑰色和黄金色,我们只需对配置ColorRamp程序贴图上所需颜色的相同节点系统进行微调。

这就是3ds Max中相同的银色材质。这有点容易,因为它有一个额外的漫反射颜色纹理,表示渲染表面的颜色。
钻石
让我们回顾一下钻石材料。为了使钻石闪耀并闪烁,我们使用两层建模。宝石的内层具有不规则的网状结构和以下材料:
下一个图像显示gem的外部图层。这只是一个代表钻石两侧的覆盖网格:
对于3ds Max钻石材质也是如此,下面的图像包括两个宝石的图层:
您可能对如何为这些材质生成纹理有疑问。实际上,这里没有什么复杂的。其中大部分是基本的噪音/颠簸/环境程序地图,您可以自己创建或在网络上找到一些现成的图像。例外是普通的地图纹理,需要从高多边形模型生成并在中间多边形模型之上烘焙。

添加交互性
使用Puzzles,您无需成为程序员即可创建精美的3D配置器。只需使用“点击时”拼图让您的应用响应用户操作,“显示”/“隐藏”以更改戒指形状并“分配材料”以更改材料。在这个珠宝应用程序中,我们有4种不同的戒指型号,配有银色,玫瑰金和黄金款式。

这就是Puzzles编辑器中逻辑的样子:
看,这里没有什么复杂的。在左侧,您可以看到显示/隐藏拼图,而右侧负责更改戒指材料。

总的来说,这个简单的应用程序提供多达12个环变化!

上网
这部分很容易。 Verge3D内容可以部署在您自己的Web服务器上,也可以上传到名为Verge3D Network的分布式托管平台。在后一种情况下,只需单击App Manager中的绿色地球图标即可将配置器存储在云端。成功上传后,您会看到类似的内容:
在此对话框中,您可以获得指向您应用的直接链接,用于将配置程序嵌入您自己的网站/博客/在线商店的HTML代码段代码以及通过社交媒体分享应用程序的各种按钮。

在结束时
我们希望您发现这篇文章很有用。由于这只是对该过程的简要概述,因此许多主题都没有被讨论。您可以考虑阅读ou中的Workflow主题




发表评论

电子邮件地址不会被公开。