01-02-从立体图形到平面图形

90 阅读16分钟

此文章面向中小学生或其家长,视频链接:www.bilibili.com/cheese/play…

课程目标

  • 把立体图形展开成平面图形
  • 理解立体图形展开的意义
  • 为立体图形绘制纹理贴图
  • 切割立体图形
  • 寻找立体图形的截面
  • 为立体图形的截面绘制纹理贴图
  • 使用photoshop 合成纹理贴图
  • 探索立体图形展开的方式

1-将立体图形展开成平面图形的意义

给大家举例说一下把立体图形展开成平面图形的意义。

比如下面的三维地球,它的优点是比较立体、直观,缺点是只能看见它朝向我们的那一面。

07-地球

如果我们想要看到三维地球中的所有大陆和海洋,那就需要把它展开成平面。

164068843655238900425912047365

同理,如果是一个正方体,我们想要看到它所有的面,那就需要把这个正方体展成平面,如下图所示:

image-20241130153153873

2-在blender 中将正方体展开

1.使用blender 建立常规文件。

image-20241029075928789

默认在常规文件里就有一个正方体了:

image-20241029080047326

2.点开UV编辑窗口,可以看到blender 将这个正方体展开的样子。

image-20241105234335457

左侧窗口中的6个面就是正方体展开后的6个面,我们可以将其称之为纹理贴图。

3.如果我们想要知道正方体展开后的纹理贴图和正方体中的每个面的对应关系,我们可以在右侧窗口中选择一下正方体的面。

image-20241105235122145

3-在模型上绘制纹理

纹理贴图和正方体中的每个面的对应关系,也可以同过在模型上绘制标记来确定,这时我们就要说一下在模型上绘制纹理的方法。

1.点击纹理绘制,进入纹理绘制界面。

image-20241107081147352

2.建立一张基础色纹理贴图。

纹理相当于一张包裹在模型上的画布,通常我们会将其称之为纹理贴图。

基础色代表了模型的基本颜色,我们也可以将其称之为漫反射。

我们无法直接在模型上画画,所以要给模型包裹一张基础色纹理,然后在纹理上画画。

image-20241107081620536

3.选择了基础色后,我们就可以设置纹理贴图的尺寸、名称等属性。设置完相应属性后,点击添加即可。

image-20241107083635103

4.调整画笔的大小和颜色,在模型上灵活绘制纹理。

我们可以使用粗点的画笔,在不同的视图中,为正方体的每个轴向的面涂抹不同的颜色。

image-20241109102844835

我还可以使用细点的画笔,白色的颜色,在立方体的每个面上写上其朝向。

image-20241109104135888

立体效果如下:

image-20241109104326394

4-正方体的不同展开方式

我可以在blender 里手动设置正方体展开的方式。

想象我们手里有一把剪刀,我们只要沿着特定的边剪开,那么正方体的表面就可以展成一个平面。

1.进入UV编辑模式,用材质预览的方式显示模型。有时候材质预览会被遮挡,需要拖拽左右两个窗口中间的边界线,将右边的窗口放大。

image-20241109135358762

在上图中我们可以清晰的看到模型每个面和贴图的对应关系。

2.使用边选择的方式,选择我们要剪开的边。有时候为了方便选择,可以将视图着色模式切换到线框模式。

在选择边的时候,按住shift 可以实现加选,最终选择效果如下:

image-20241109141927595

3.在边菜单中选择标记缝合边,这就是在告诉blender 等会要沿着我选中的线把模型剪开。

image-20241109142134259

4.选择全部的边

image-20241109144337145

5.展开uv。uv 是模型被展开后的顶点位置。

image-20241109144456899

展开后的效果如下:

image-20241109144818485

这时候,我们会发现正方体展开后形状变成了T字形,但之前画过纹理也不能用了,所以我们需要在创建一个新的基础色纹理,然后重新绘制。

绘制纹理的方法咱们之前说过了,我就不再赘述,效果如下:

image-20241109160254071

6.我们可以尝试沿着不同的边剪开这个正方体。

在尝试其他的剪开方式之前,我们需要先进入UV编辑窗口,选择所有的边,执行清除缝合边的命令。

image-20241109163931524

接下来,我们在选择不同的边,进行UV展开,如下所示:

image-20241109164432329

为了快速查看效果,我们可以用填充工具,给模型填充一个颜色。

image-20241109164740385

7.如果我们想要对创建的纹理做删除、重命名等操作,可以再右上角打开blender 文件。

image-20241109162631614

然后在blender 文件的图像里找到相应名称的纹理,右击,便可以看到删除、重命名等操作。

image-20241109162743717

5-其它常见图形的展开

参考正方体的展开原理,我们也可以尝试展开展开其它的立体图形:

  • 三棱柱

image-20241110100624332

  • 五棱柱

image-20241110105443872

  • 球体

image-20241110154026104

  • 圆锥

image-20241110111235305

当前圆锥的剪开方式和之前的有点不一样,之前的立体图形在剪开后,其表面是连在一起的,而这个圆锥的侧面和底面断开了。

至于那种剪开方式合适,要看我们的实际需求。

6-示例-绘制西瓜纹理

我们可以发挥自己的想象力,有不同的立体图形和不同的纹理画出各种有趣的东西。

比如我下面绘制的西瓜。

image-20241112231950358

西瓜的绘制步骤如下:

1.建立一个球体,把它拉长,放倒。

2.在纹理绘制里,用填充工具给球体填充一个深颜色。

3.用浅颜色、半径25、抖动0.3的画笔在右侧的纹理中,沿着纹理走向,竖着绘制抖动的线。

7-截面

立体图形展开成平面,研究的是物体表面的东西。

那如果我想研究一下物体内部的东西,那就需要截面了。

截面就是把物体切开后看到的面。

接下来我们就在blender 里裁剪一个正方体玩玩,看看我们都能裁剪出什么样的截面。

7-1-在blender 里裁剪正方体

1.建立一个常规的blender 文件,默认里面就有了一个正方体。

image-20241118215823255

2.选择正方体,进入编辑模式。

image-20241118215924740

3.选择网格>裁刀拓扑工具。

裁刀拓扑工具就是用来切割正方体的刀子。

image-20241118220047321

4.在窗口底部可以看到裁刀拓扑工具的辅助快捷键,我要按下C 键,以透切的方式切割正方体。

image-20241118221318537

5.点击正方体的两处边界,就可以把正方体割一刀了。

image-20241118222048227

变换一下视角,就可以看到这样的效果。

image-20241118222217332

看着没啥问题,就可以按Enter 回车键,确认切割。

6.选择我们要切掉的那一部分的顶点。

image-20241118222340120

7.按x,删除顶点。

image-20241118222433447

效果如下:

image-20241118222511217

现在这个正方体被开了一个口子,我们把这个口子封起来,那它就是截面了。

8.按住ctrl 键,选择这个口子的3条边。

image-20241118222934618

9.选择面>填充

image-20241118223014934

这样敞开的口子就被封上了,效果如下:

image-20241118223124617

现在我们看到的这个三角面就是我们对正方体进行切割后出现的截面。

7-2-不同的切割方式

我们用不同的切割方式切割正方体,可以切出不同的截面。

四边形截面1

image-20241119203917715

其切割过程如下:

1.随便找个视角,切割正方体的两个角。

image-20241119201452464

变换视角,查看效果:

image-20241119201539924

为了更清晰的观察效果,我们可以开启透视模式。

image-20241119201708916

2.在选择截面的边界线的时候,我可以先选中一条,然后再选择循环边,这样就可以选择一圈的边了。

image-20241119202123933

选择了截面的边界线后,再选择循环线内侧区域。

image-20241119202640897

效果如下:

image-20241119203043794

3.使用融并面,可以将我们选中的区域变成一个面。

image-20241119203711645

效果如下:

image-20241119203849523

四边形截面2

这样也可以切出四边形截面:

image-20241119204803735

五边形截面

image-20241119205245869

六边形截面

image-20241119205546126

7-3-切西瓜

除了切割正方体,我们也可以切割其它的东西试试,比如之前画过的西瓜。

1.选择西瓜上的一圈循环边。

image-20241119215641897

选择效果如下:

image-20241119215444632

2.选择循环线内侧区域。

image-20241119215537363

效果如下:

image-20241119215804195

3.使用融并面,将我们选择的区域变成一个面。

image-20241119215859575

效果如下:

image-20241119220007277

现在这个西瓜没有看到瓤,这是因为我们在绘制纹理的时候只画皮了,没有画瓤(rang),接下来咱们就画一下。

8-示例-画西瓜瓤

接下来我们要画一个这样的西瓜瓤:

image-20241120232141953

1.选择西瓜截面,然后UV>展开。这时你会在左侧窗口看到一个充满整个画布的圆。

image-20241120232728753

2.点击右侧窗口,选择所有的面。这时你会在左侧窗口看到模型的所有UV。

image-20241120233102886

3.在左侧窗口的面模式下,选择界面的UV。

image-20241120233245392

4.用缩放工具缩小截面。

image-20241120233400162

5.用移动工具吧截面移动到左下角。不要让截面与其它的UV重叠。

image-20241120233602403

6.进入纹理绘制模式,准备用不同颜色、半径、强度和衰减度的画笔绘制西瓜瓤。

image-20241120234232901

7.用绿色、硬朗画笔画绿色西瓜皮。

image-20241120234725185

画笔的硬度会影响画笔颜色的透明度。

画笔的衰减方式会影响画笔边缘的柔和程度。

image-20241120234913882

衰减曲线对应着画笔的透明度:

image-20241120235922570

曲线越低的地方画笔颜色越透明,反之越不透明。

3.用白色、柔和画笔画白色西瓜皮。

image-20241121000738653

4.用红色、柔和画笔画红色西瓜瓤。

image-20241121001352793

5.用白色、低强度、柔和画笔画出西瓜的沙瓤。

image-20241122080451736

6.用黑色、高强度、柔和画笔画西瓜籽。

image-20241122081118477

7.用个红色画笔把西瓜籽擦除一个尖来。

image-20241122081848715

现在,我们就完成了西瓜瓤的绘制。

实际上,我们自己画的西瓜瓤和现实中的西瓜瓤还是有所差距的,所以我们可以把现实中的西瓜瓤直接批到西瓜的纹理中。

image-20241126223558865

9-用Photoshop 软件合成西瓜瓤贴图

Photoshop是一个图像编辑软件,简称PS,它可以把两张图片合在一起。

大家可以从网上下载Photoshop,如果找不到下载地址,或者不会安装,可以跟我说。

接下来我们说一下如何把用相机拍出来的真实的西瓜瓤贴到西瓜模型的截面上。

1.在UV编辑中,把我们之前绘制的西瓜纹理导出图片。

image-20241126224732515

大家可以将其存储到一个专门用于批图的文件夹中。

image-20241126230158455

2.把西瓜的UV坐标导出图片。

image-20241126230533703

同样将其存储到一个专门用于批图的文件夹中。

image-20241126230708720

3.打开Photoshop,把西瓜的纹理图导入Photoshop。

image-20241126233143456

效果如下:

image-20241126233216757

4.从网上下载一张真实的西瓜的截面图,拖到Photoshop里。

image-20241126233607762

效果如下:

image-20241126233703812

按回车键确认。

5.把西瓜的UV 坐标图拖到Photoshop里。

image-20241126233856705

效果如下:

image-20241126233930059

回车确认。

5.选择真实西瓜所在的图层,通过其变换框,调整其大小和位置,使西瓜截面与其UV相匹配。

image-20241126234957393

6.给西瓜添加一个遮罩,在遮罩中用黑色画笔涂抹掉西瓜截面之外的部分。

image-20241126235414790

7.点击UV图层左边的眼睛,将UV图层隐藏。

image-20241126235630590

8.导出图像。

image-20241126235817551

image-20241127000406067

把图像导出到一个专门放blender 贴图的文件夹。

image-20241127000522594

9.进入布局模式,打开材质面板。

image-20241127002148593

10.把刚才Photoshop 导出的图像导入到西瓜的基础色中。

image-20241127001921978

效果如下:

image-20241127002325808

一般切开的西瓜会截面朝上,所以咱们可以把模型沿着x 轴旋转90°,效果如下:

image-20241128084740533

10-玩转截面图

我们可以按照你喜欢的样子,给西瓜不同的截面,做出好玩的效果。比如这样:

image-20241128090633119

你还可以给它橘子、苹果等其它水果的截面图,只要你喜欢,一切皆可变。

11-视图详解

我们在上一节课说“blender 视图变换” 的时候说过视图的作用,我们可以通过对视图的平移、旋转和缩放来更好的观察场景中的物体。

接下来咱们再具体说一下其视图的概念。

视图是将三维空间中的物体按照特定的投影规则映射到二维平面上的结果。

视图根据其投影效果、投影方向,可以分成透视图、前视图、顶视图、左视图等。

具有近大远小的透视效果的视图叫透视图。

透视图

透视图虽然看着有立体感,但它依旧是投影的二维平面上的结果,不然我用来显示这张透视图的电脑屏幕就不会是平的了。

前视图、顶视图、左视图是从不同的正交方向看向物体的视图,它没有近大远小的效果。

视图

从我们前方看物体的时候,看到的视图就叫前视图,或者正视图、主视图。

从我们顶上看物体的时候,看到的视图就叫顶视图,或者俯视图。

从我们左侧看物体的时候,看到的视图就叫左视图。

同理类推,我们在blender 里还可以看到其它方向的视图,比如后视图、右视图和底视图。

12-正方体有多少种展开方式

当我们对正方体进行展开和折叠的时候,会发现正方体无论是否展开,都有这样规律:

  • 有且只有6个面:顶面、底面、前面、后面、右面、左面。
  • 每一个方向的面有且只有一个,不会发生重复,比如正方体展开后不会出现2个顶面。
  • 每个面都不会与其对面的面相邻,比如顶面不可能与底面相邻、前面不可能与后面相邻、右面可能与左面相邻。

根据上面的规律逆推,找出不违背此规律的所有展开方式,就是正方体所有的展开方式。

image-20241130153153873

我们可以一起做个好玩的游戏。

想象我们有6个人(正方体有6个面)。

大家一起从顶面出发,1个人驻守顶面,其他人一起走到顶面的相邻面,比如前面,然后派1个人驻守此面。

剩下的4个人继续寻找当前所驻守的面的相邻面。

寻找相邻面的时候,要遵守的规则:已经有人驻守的面不能再走。

找到无人驻守的相邻面后,要派1个人驻守。

同理类推。

剩下的3个人根据当前驻守的面,寻找其无人驻守的相邻面,找到后,派1个人驻守此面;

剩下的2个人根据当前驻守的面,寻找其无人驻守的相邻面,找到后,派1个人驻守此面;

最后还剩下1个人,这个人可能会有点倒霉,因为他根据当前驻守的面,可能无法找到其无人驻守的相邻面。

举个例子,当你依次走完顶面 > 前面 > 底面 > 后面 > 左面的时候,你会发现左面的相邻面(顶面 、前面、底面、后面) 都有人驻守了。

这时,你就需要返回到左面的上一个面,即后面,寻找后面的相邻面,此时你会发现后面的相邻面中只有右面无人驻守,所有右面就是最后1个人要走的面。

与此同时,当你从顶面向其相邻的面(前面、左面、后面、右面) 走的时候,无论走到哪个面,路径的形状都是一样的,只是方向不一样,所以我们可以只选择一个面走,比如前面。

按照以上方式走出的所有路径,就是正方体的所有展开方式,如下图所示,共有11种:

image-20241204224436855

为了验证你的结论,你可以将正方体展开试试。

比如下图的展开方式:顶(z)>前(-y)>左(-x)>后(y)>右(x)>底(-z)

image-20241204230639218

总结

这一章主要目的就是让大家形成二维和三维之间相互转换的空间意识,让大家在后面的学习中,把一些算法具象化,从而避免大家觉得数学刻板、抽象、枯燥、乏味。

在这一章,我们把立体图形展开了、剖开了,让大家看到了立体图形的表面和截面。

立体图形的展开可以让大家一目了然的看到其整个表面;

立体图形的截面可以让我们看到立体图形内部有什么。

我们通过blender 对立体图形进行了展开和剖开,并且对其进行了贴图。

讲blender 的目的不仅是让大家更加开心的玩转数学,也是为大家以后的职业规划提供一种可能性,埋下一颗种子。

当我们可以熟练的建模和贴图的时候,就可以成建模师。

建模师去游戏公司、家居公司、影视公司、广告公司等,在其中建游戏场景、游戏角色、家居、特效元素等。

当然我们可以从建模师继续发展,为模型加上动画后就变成了动画师。再深入研究其中的算法和程序,并学习一下美术,那你就可以成为技术美术(Technical Artist),简称TA。

我们在制作贴图的时候,还用Photoshop 对贴图进行了修改,给了模型不同的截面。这么做的目的是希望大家打破常规,发散思维,勇于创新,不要因为学习而泯灭眼中的光芒。

如果大家学好了Photoshop,就可以做平面设计师、UI设计等视觉传达相关的职业,当然前提是你还要有一定的美术基础。

最后,我们还根据正方体的展开规律一步步推导出了正方体的展开方式。

以此,希望大家通过对客观事物的认知和实践,积极的发现规律,利用规律。

下一章我会把正方体的展开规律告诉计算机,让计算机帮我们计算正方体有多少种展开方式。