three.js学习笔记(十二)——使用Blender自定义模型

这次我们将学习如何用3D软件创建自己的模型

选择软件

有很多软件如Cinema 4D、Maya、3DS Max、Blender、ZBrush、Marmoset Toolbag、Substance Painter等都很不错。当然它们在用户体验、性能、功能、兼容性、价格等方面也有所不同。
这次我们选择Blender，因为它是免费的，性能卓越同时适用于所有主流操作系统，还有一个广泛的社区。

下载Blender

官网下载地址https://www.blender.org/download/

界面

区域

默认区域

默认情况下，有一个称为3D视口3D Viewport的主区域：

用于创建动画的时间线Timeline

用于查看和管理场景图（或场景树）的大纲视图Outliner：

用于管理活动对象（选择）和环境的属性的属性面板Properties：

更改区域

想要更改某个区域的显示内容，请单击该区域左上角的按钮。在这里，我们将更改Timeline区域。

把Timeline区域更改为另一个3D Viewport区域

创建新区域

要创建一个新区域，首先，我们必须决定要分割的区域。然后，我们必须将光标定位在区域的四个角之一（区域内的几个像素）：

移除区域

移除区域时我们必须决定两个区域是谁取代谁。如果要移除右侧区域，则应把光标放在左侧区域的与要移除区域相邻的两个角的其中一个角上面：

快捷键

Blender的优点之一是它的快捷键。有非常多快捷操作，一旦你掌握了基本知识，你就会使得工作变得非常高效。以下是一个非详尽的快捷键操作列表：
https://docs.google.com/document/d/1wZzJrEgNye2ZQqwe8oBh54AXwF5cYIe56EGFe2bb0QU/edit
同时我们还需要了解一个重点，快捷操作对于鼠标的悬停区域是敏感的。这意味着同一组快捷键，在不同区域有着不同的操作功能，具体取决于鼠标悬停区域。

视图

轨道旋转Orbit rotate

我们可以通过按住鼠标中键然后在3D视口3D Viewport中拖动鼠标来旋转视图

或者可以使用每个3D视口右上角的视图gizmo

这种旋转（类似于Three.js的OrbitControl），因为视图围绕一个称为“视点”的不可见中心旋转。

水平和垂直移动Truck and pedestal

当视图左右移动时为“Truck”，而当视图上下移动时为“Pedestal”。先按住Shift键，再按住鼠标中键移动。


或者我们可以使用右上角的手形图标：

推拉移动Dolly

通过鼠标滚轮实现视图向前移动或向后移动

或者我们可以使用右上角的放大镜图标：

不过需要注意的是，使用图标或滚轮进行视图前进或后退时，我们会里轨道部分中提到的“视点”越来越近或越来越远，我们无法将视图放大超过该“视点”，这样会导致视图卡住，如下图：

若要解决这个视图缩放限制问题，可以通过按住ctrl+shift+按住鼠标中键，然后在3D视口中拖动鼠标来缩放视图，这样便不会困在视点上。该操作无对应图标。

视角倾斜和平移Tilt and pan

倾斜和平移是相机点上的简单旋转。我们必须进入漫游模式Walk mode（也称为飞行模式Fly mode）才可以使用该操作。


按下shift键+反引号(`)键进入漫游模式，你会发现鼠标在3D视口中变成一个准星，说明进入漫游模式了，之后便可通过移动鼠标改变摄像机视图方向了，要退出漫游模式的话只需要单击鼠标就可以了。

透视Perspective/正交Orthographic

默认视图是使用透视图，可以通过按数字键盘上的 5 键，或者点击右上角栅格图标来切换透视视图和正交视图：

轴Axes

可以通过按数字键盘上的1、3、7三个键来在X、Y、Z轴上对齐相机，如果要将相机放置反方向，则需额外按住ctrl键，当然也可以点击右上角gizmo来实现操作。

在blender中，默认顶轴是Z轴，不像three.js里面是Y轴

摄像机Camera

我们已经在3D视口里看到摄像机了，可以通过按数字键盘的0键来获取摄像机的视点，或者右上角摄像机图标。
只有当我们在进行渲染的时候才会用到摄像机。如果没有摄像机那么就无法渲染场景。

重置Reset

有时我们可能会迷失方向了，甚至不知道我们的场景在哪里。我们可以按SHIFT+C键将焦点重新聚焦到场景上。

聚焦Focus

要将相机聚焦在某个对象上，则用鼠标左键选择该对象，然后按数字键盘上的逗号键。
我们还可以使用数字键盘上的斜杠/键将视图集中在一个对象上并隐藏其他所有内容，再按一次便离开焦点模式。

对象

创建和删除对象

创建对象时要把光标移到3D视口上，然后按shift+A弹出菜单，可以在里面选择要创建的各种对象。
删除对象只需要点击选中要删除的对象，按下x键然后确认删除便可。

当我们创建对象时，左下角会弹出个按钮，单击它可以更改该对象的各种属性，如果关闭后想再次打开，可以按F9

隐藏对象

隐藏被选中的对象，按H键可将其隐藏起来，按alt+H取消隐藏。
隐藏未选中的对象，按shift+H隐藏。
也可以直接在Outliner中点击眼睛图标隐藏对象。

变换对象

有3种变换类型，像three.js那样可以改变位置、旋转和缩放。

我们可以使用左侧的菜单单独激活每个按钮，或使用第四个按钮同时激活它们。
或者使用快捷键：按一次G键可以移动对象位置，同理R键旋转，S键缩放，若想在特定轴上进行操作，只需要再按一次X键、Y键或者Z键。或者你不想在Z轴上上下运动，只想在XY轴上进行平面运动，这时可以按shift+Z来排除Z轴。

复制物体

选中物体按shift+D即可复制

聚焦物体

按数字键盘的/键或者.键可以快速聚焦到你所选的物体上，只不过前者会隐藏其他物体。

模式

我们目前处于对象模式(Object Model)，这个模式中我们可以创建、删除、变换对象。

更换模式

在左上角切换或者在3D视口中按ctrl+tab弹出菜单。

编辑模式

可以通过上面方法更改到编辑模式，或者直接按tab键也可以进入编辑模式。
编辑模式与对象模式非常相似，但我们可以编辑顶点、边和面。默认情况下是修改顶点。

然后我们可以通过快捷键G、R、S来对点、边或面进行操作。完成编辑后按tab保存并回到物体模式。

着色处理Shading

实体Solid——默认着色，为每个对象使用相同的材质
材质预览Material——与实体着色类似，但具有材质及其纹理的预览
线框Wireframe——所有几何图形都是线框形态
渲染Renderer——低质量渲染，效果最逼真但性能最差

3D视口右上角可以更换视图着色处理方式，或者在3D视口区域按Z键

属性面板Properties

除非你自己改动了界面布局，不然的话界面右下角的区域便叫做Properties属性面板。
属性面板会显示渲染属性、环境属性和活动对象属性。(活动对象即是被选中的，轮廓最亮的那个对象)

物体属性

允许你对物体变化进行更精确的设置

修改器属性

修改器是一种自动操作，以非破坏性的方式影响对象的几何形状。使用修改器，可以自动执行许多效果而且不会影响对象的基本几何形状，否则手动执行这些效果(例如细分曲面)会非常麻烦。

材质属性

该属性允许我们去调整修改材质

默认情况下，会有一个叫Material的材质。

对于一种材质，我们可以使用不同类型的曲面。默认的一种曲面称为“原理化BSDF”，这种类型的曲面使用基于物理渲染的PBR原则，就像three.js中的标准网格材质MeshStandardMaterial一样。这意味着，如果我们把这种材质导出到three.js的场景中，则会得到一个非常相似的结果。

渲染引擎

有三种类型的渲染引擎：
Eevee——一个基于物理的实时渲染引擎。对GPU的使用就像three.js那样，它的性能非常好，但是它有一些限制，比如真实感、光反弹、反射和折射。
工作台WorkBench——专为布局，建模和预览而设计的。性能非常好，但结果不太真实。
Cycles——基于物理的光线追踪渲染器。它可以处理光线反弹、深度反射、深度折射和许多其他功能，但速度非常缓慢，渲染场景可能需要等待数小时甚至数天。

如果想渲染场景，则按F12键。

搜索

Blender里面有太多操作了，以至于我们容易忘记怎么去触发这些操作，当我们忘记了一些快捷方式或操作按钮在哪时，可以通过按F3键弹出搜索面板

保存设置

随便在Blender设置你的界面和对象，当你自己觉得满意之后，你可以选择文件>默认>保存启动文件，然后当你关掉blender再启动时，便会将保存的配置设置为默认配置并打开。

自定义汉堡包模型

下面我们将在Blender中制作汉堡包模型并导出，然后将其导入到three.js中。

起步

就像three.js那样，一次好的练习便是在于决定单位缩放规模。如果你查看网格，会发现一个正方形表示一个单位，默认情况下，Blender中一个单位表示一米。

如果不希望看到这个m，可以去属性面板中的“场景属性” > “单位” > “单位系统” 中将单位设置为“无”


这下我们可以把一单位看成是一厘米。

底部面包片

往场景中添加尺寸10cm的立方体，至于为什么不用柱体而是用立方体，往下看。

然后确保点击了立方体，处于活动状态，选择“修改器属性”，添加“表面细分Subdivision Surface”修改器。现在立方体稍微有那一点点像“球体”了。

“表面细分”是最常用的修改器之一，能够在切割几何体的同时使角度变得光滑。在“视图层级”选项中可以往表面添加更多细分。
然后这些面是平的，而我们需要更光滑的表面，这是可以选中物体，然后点击右键选择“平滑着色Shade Smooth”

使用修改器的好处在于我们可以保留原始的几何体。按TAB键转换为编辑模式，移动顶点，直到获得一个看起来类似鹅卵石一样的物体。
注意：若想缩放物体最好在编辑模式中去缩放，这样可以使得物体缩放比例保持为 1 而不会改变物体的缩放比例，若在物体模式中进行缩放则会改动缩放比例
进入编辑模式后，选中物体，选择上表面或下表面，按G移动表面位置，按Z限制只在Z轴上移动位置。

当然现在看起来里汉堡包面包片还差得远，我们需要往这个“鹅卵石”的边缘添加更多顶点，也就是来一个“环切”。
在编辑模式下按ctrl+R

然后我们可以保存文件，按ctrl+s进行保存。
需要注意的是，如果我们再做了一些修改然后再按保存，你会发现文件夹里新生成了一个后缀名为.blend1的文件，这个文件其实是我们的备份文件。
当我们进行保存文件后会生成blend文件，里面是我们最新的修改后的内容，而blend1文件则是我们修改前的blend文件的备份。当你像回到上次的修改，只需要重命名blend1文件就行了。

肉饼

在物体模式中选中面包然后按shift+D复制面包对象，然后到编辑模式里调整到肉饼形状

芝士

在肉饼上面添加一块平面

转为编辑模式，右键平面选择“细分”。

之后要芝士片的四角“融化”。
当我们处于编辑模式时，选择其中一个角。按O键或3D视口顶部中心的图标，进入衰减编辑模式，并选择衰减方式为“锐利”。

进入衰减编辑模式后，现在我们改变一个点的位置时，其相邻点的位置也会受到影响。
按G键后可以通过滚轮控制受影响的区域大小。

直到设置到自己满意的效果，接着回到物体模式，选中芝士片右键平滑着色

芝士片看起来不够厚，可以点击修改器属性，然后添加“实体化”修改器

还有一个小细节，如果比较讲究的话你可以看出芝士片边缘的平滑着色有点违和。

可以通过点击“物体数据属性”，再进去选择“法向”，开启“自动光滑”。仅当曲面边缘的角度小于30°时，此功能才会使曲面平滑。

顶部面包片

可以在物体模式中选中底部面包片，然后按shift+D复制出来后按G移动到上面，再按R旋转180°。

材质

按Z选择进入渲染着色，然后点击物体，选择“材质属性”，设置颜色和粗糙度直到满意为止。

导出模型

选中我们的汉堡包模型，注意不要把灯光也选进去。
然后按下图操作

文件格式选择glTF二进制，因为我们没有纹理，只需要尽可能小的文件。
，

在three.js中导入汉堡包模型

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')

const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

let mixer = null

gltfLoader.load(
    '/models/hamburger.glb',
    (gltf) =>
    {
        scene.add(gltf.scene)
    }
)

可以看出three.js中汉堡包的颜色和我们在Blender中设置的颜色有明显差异，这点会在后面改进。

其他

以下是一些优秀的Blender教程视频

• Blender Youtube Channel:
  https://www.youtube.com/user/BlenderFoundation
• Blender Guru Youtube Channel: https://www.youtube.com/channel/UCOKHwx1VCdgnxwbjyb9Iu1g
• Grant Abbitt Youtube Channel: https://www.youtube.com/channel/UCZFUrFoqvqlN8seaAeEwjlw
• CGFastTrack: https://www.youtube.com/c/CGFastTrack/videos
• CGCookie: https://cgcookie.com/