【Verge3D】如何在Blender和Verge 3D中创建3D交互式Web体验

文章

(注:文章翻译自https://cgbookcase.com/tutorials/how-to-create-3d-interactive-web-experiences-in-blender-verge-3d#_)

摘要

 

如果您已观看视频但忘记了某些内容的效果,则可以使用此文字摘要,而不是点击视频。如果您正在考虑购买Verge 3D,可点击这里购买。 (我会收到佣金。)
视频:https://www.youtube.com/embed/U6aGboR_sHE?rel=0

1.建模

 

门,墙,天花板,护壁板

 

添加平面,插入一些环切线并删除一些面以定义地板形状。
选择所有面,按E将其拉伸2.4米,然后按2.4的高度创建墙壁和天花板。
将地板与墙壁和天花板分开(Shift + P)。
要创建护壁板,请选择墙的底部边缘并复制它们。
将它们分开并在z轴上挤出以增加一些高度。
添加solidify 修改器以添加一些厚度。
添加bevel修改器以使边缘倒角。
窗户,门
在墙上添加环线以定义窗户的边缘。删除留做窗口的面。
激活Archipack插件(编辑>首选项>插件)。添加一个window(Shift + A> Mesh> Archipack> Window)并缩放它直到它适合开出的洞。
对门进行相同的处理,但不要为门切一个洞,因为在最终的项目中不需要打开它。
家具
大多数家具型号都是从Vitra免费下载的。
下载3DS文件并将其导入Blender(截至2018年12月17日,无法将3DS文件导入Blender 2.8,但这可能是因为它仍处于测试阶段。您可以使用Blender 2.79。)
为了创建一个流畅运行的Web3D 应用程序,我们的3D模型应该具有尽可能少的顶点。您可以通过将三角面转换为四边形(Alt + J),删除重合顶点(Vertex > Remove Doubles)然后选择几条循环线并将它们删除(Ctrl + X,必须处于边选择模式)来最小化顶点数。
在更多有机模型上,您还可以添加Decimate修改器。
厨房
要在厨房中创建厨柜,您可以使用一些立方体和平面,并在X,Y和Z轴上进行缩放。
要创建水槽,请在您想要水槽的位置添加一个倒角立方体。选择工作台面,添加一个布尔修改器。将布尔修改器设置为Difference ,并选择斜角立方体作为对象,这样它将切出斜角立方体所在的孔。您可以使用倒角立方体的下半部分作为实际的水槽本身。
添加圆(Shift + A > Mesh > Circle)并使用挤出(E)和 Bridge Edge Loops工具(Edges > Bridge Edge Loops)来创建水龙头。

2.灯光和烘焙

 

灯光

 

要创建光照,您可以使用环境贴图。 (我用过HDRI Haven的一个。)
展UV
由于您无法在Web浏览器中实时渲染逼真的内部空间,因此我们必须将光照烘焙到纹理贴图中。
选择场景中的任何网格对象,然后按Shift + G并选择“类型”以选择所有网格对象。然后将它们连接在一起(Ctrl + J)。
进入编辑模式,选择所有的面,并自动展开UV (U > Smart UV Project)。
为了不必要地在不需要的地方烘焙,您可以缩小隐藏区域的UV(例如沙发的底部,机柜的侧面和背面等)。我还建议将天花板的UV缩小一点,我们不需要很多细节,因为没有人会非常仔细地看天花板。
烘焙
创建仅包含漫反射着色器的新材质,因为我们只想烘焙漫反射但没有高光(=阴影)。添加贴图节点并创建新贴图。将贴图的分辨率设置为2的N次幂(例如:4069 x 4096像素)并检查“32位浮点”,因此我们可以烘焙大于1的值。
然后,最后烘焙它,转到属性编辑器中的渲染选项卡,滚动到“Bake”,将烘焙类型设置为“Combined”,边距设置为大约4个像素。根据自己的喜好调整采样,然后点击“Bake”。
烘烤完成后,您可能会看到一些夸张的亮点。这是因为默认情况下,Filmic View Transform不会影响贴图纹理。要更改它,请在图像编辑器(N)中打开属性区域,然后选中“View as render”。
降噪
导出纹理(Shift + S)并将其导入Affinity Photo(修图软件)。
在Affinity Photo中,添加一个Denoise过滤器,然后将其导出为JPG,质量设置为60到80之间。

3.设置Verge3D项目

 

下载Verge 3D for Blender。你可以在这里免费试用
安装
将.zip文件解压缩到您选择的目录中。要安装Verge 3D,请打开首选项(编辑>首选项),转到文件选项卡,然后输入解压缩.zip文件的目录。

 保存用户设置,关闭并重新启动Blender,再次打开“首选项”。然后,搜索名为“Verge3D”的附加组件并将其激活。

 

如果您已正确完成所有操作,则应在3D视图顶部显示“App Manager”和“Sneak Peek”按钮。
创建项目
打开App Manager并创建一个新项目。
创建应用程序后,它将显示在项目列表中。单击旁边的蓝色六边形图标,您可以在浏览器中运行完整的应用程序。单击绿色六边形图标,您可以仅运行3d场景,而无需用户界面。单击“puzzle ”图标,您可以进入拼图编辑器。单击Blender图标,您可以在Blender中打开场景,单击世界图标,您可以在Web上发布您的应用程序。在Blender中打开场景。
附加旧场景中的所有对象(File > Append)。

4.创建材质

 

基本设置

 

在创建材质之前,将所有应具有唯一材质的对象彼此分开(在编辑模式下:P>Selection)
场景中的所有材质都以相同的方式构建:导入烘焙图像纹理(Shift + A > Texture > Image Texture)并将其连接到Emission节点。
添加MixRGB节点以在烘焙图像纹理后进行相乘。使用color2控制颜色。
添加纹理
如有必要:添加纹理并再次使用MixRGB节点将其相乘。对于沙发,我使用Blue Cotton 02,用于地板Light Wooden Parquet Flooring 01和桌子Wood#05(按CC0 Textures)。
为了缩短加载时间,我建议在第三方图像编辑软件中将纹理转换为灰度,并将其导出为JPG,质量再次设置为60到80之间。
要更改比例,请添加“映射节点”和“纹理坐标”节点(选择图像节点并按Ctrl + T)并更改比例部分中的值。
增加光泽度

 如有必要:通过在Glossy节点中混合来添加一些光泽。 (这里不要超过顶部,这需要相对较多的处理能力。)

然后为每个对象重复该过程并创建一些变体。

5.添加交互

 

准备,介绍

 

将场景导出为Verge 3D glTF(File > Export > Verge 3D glTF)。
打开App Manager并单击拼图图标以打开拼图编辑器。
在拼图编辑器中有两个选项卡:Main选项卡和init选项卡。在Main选项卡中,您可以创建影响场景中3D对象的脚本,例如更改其材质,将相机从A移动到B等等。在Init选项卡中,您可以创建不影响3D场景中对象的脚本,例如更改加载图标。
本教程中我们只用到Main选项卡。
轮廓效果
将鼠标悬停在某个对象上时,我们希望它具有以下轮廓:
为此,我们需要在.blend文件中启用轮廓效果,方法是转到属性编辑器中的渲染选项卡,然后向下滚动到Verge 3D设置。再次导出场景并重新加载Puzzle编辑器。
使用when hovered拼图(事件类别)和selector 拼图(选择器类别),我们可以在鼠标悬停在其上时启用和禁用对象的轮廓。
按下保存,播放来测试效果。
相机运动
接下来,我们希望相机在点击它时飞到对象。为此,我们可以使用“摄像机”类别中的“tween camera”拼图。此拼图使相机飞到对象的位置并指向另一个对象。
返回Blender并添加空对象(Shift + A> Empty)
  • 你想要相机的地方
  • 以及你希望它在哪里看。

6.UI&交互2

 

用户界面使用HTML,CSS和JavaScript(JS)创建。
如果你打开保存了项目的.blend文件的文件夹,你会注意到其他一些文件:当我们在App Manager中按下这个蓝色按钮时,实际打开的.html文件是一个JavaScript文件,我们在那里可以添加更多功能,以及我们可以设置HTML元素样式的CSS文件。

 

HTML elements, CSS styling

 

白色选项卡的背景是<div>。最重要的属性是z-index,它设置为1.z-index定义何时呈现元素。 z-index越大,元素的渲染时间越晚。由于3D场景的z-index为0(默认情况下),因此用户界面将呈现在3D场景的顶部。
  1. positionabsolute;
  2. top0px;
  3. height: 100%;
  4. width: 25%;
  5. background-colorwhite;
  6. z-index: 1;
  7. padding8px;
  8. box-shadow: 2px 0 20px #00000069;
您可以更改材质的元素只是一个div,显示设置为grid,名称作为第一个元素,两个SVG作为第二个和第三个元素。
隐藏和显示控件
现在要使这些按钮工作,我们需要使用一些JavaScript。因为我们需要界面的按钮与3D场景中的对象“通信”,所以不能仅使用Puzzles编辑器执行此操作。
在第169行的.js文件中,您可以添加自己的代码。
当点击沙发时,我们希望相机飞到起居区,隐藏类别并仅显示起居室的控件和“返回”按钮。因此,在JavaScript中,我们将创建一个功能,将类别的display和所有其他区域的控件设置为“none”,并且起居室的display设置为“block”。
然后,在拼图编辑器中,我们将在单击对象时调用此函数,并添加“tweenCamera”拼图以移动摄像机。
单击箭头时更改材质
首先,我们需要定义哪些材质属于哪个对象,您可以使用列表来完成。创建一个新变量(将其命名为类似“CouchMaterials”)并将其设置为材质列表:
如果某些材质未显示在下拉列表中,那是因为只有对象实际使用的材质才会被导出。在.blend文件中,为每个未使用的材质添加一个平面并重新导出场景。
重新加载拼图编辑器。现在您应该能够选择材质了。
现在我们需要弄清楚如何编程,这样如果我们点击右箭头,沙发将变为列表中的下一个材质,如果我们按下左箭头,它将变为列表中的上一个材质。
我提出的解决方案相对简单:我们首先需要创建一个新的变量-称之为“CouchMaterialChange” – 并设置它可以被列表中的材质数整除的数字。例如:500。
要在单击右箭头时更改材质,我们需要向JavaScript添加一个事件侦听器,当单击箭头时,它会作出反应。当事件监听器做出反应时,它会调用一个名为CouchNext的函数,
调用CouchNext函数时,拼图编辑器中的脚本会被触发,并将CouchMaterialChange变量加1。然后下一个拼图获取CouchMaterialChange的剩余部分的结果除以CouchMaterials的长度,选择列表中的材质和结果的数量并将其应用于对象。

最后一步

 

您可以使用后期特效拼图进行一些颜色调整。在我的情况下,它看起来有点褪色和黑暗,所以我添加了一些对比度,并略微增加亮度。
文章
【web3d】基洛夫飞艇

基洛夫飞艇(Kirov Airship)是即时战略游戏《红色警戒》系列中苏联空军单位,拥有强大的攻击防御能力,是公认的《红色警戒》 …

文章
用GoogleWebDesigner制作的360图片展示

 等待360图片加载。 图片加载完成后,拖动图片可360度旋转。 https://zjbcool.com/static/asse …

文章
【Verge3D问答】使用HDRI的同时使用纯色背景

问:在使用HDRI进行场景照明的时候,世界背景会 变成HDRI图片背景,怎么样让背景使用纯色,比如黑色? 答:使用lightpat …