三维 - 框内的油画(难度:2)
-
覆盖的关键课题
介绍
在这个教程中,你将会创建一个程序来展示画框内的著名油画,就像下图展示的一样,以便用户可以从不同角度和距离来欣赏它:
步骤 1 - 有三维轴的“空无”场景
请创建一个新程序,移除小狗角色,并在“空白1”角色中添加这些编程积木。你可以在“三维场景”类别中找到"创建三维场景"编程积木以及"展示三维轴"编程积木。
就像展示的一样,X轴指向右边,Y轴指向前方(面向荧幕),以及Z轴指向上方。你可以在舞台上拖拽你的滑鼠,围绕着轴线旋转摄像头:
步骤 2 - 一个扁平的盒子
我们首先需要添加一个大的扁平的盒子 来作为我们的“画布”。他在X轴和Z轴会是一个正方形(每边大小1000),但是在Y方向会非常薄(大小1)。盒子的颜色不重要,因为我们会在盒子上面填色。
这是你会得到的效果。你需要缩小摄像头来看到它。
步骤 3 - 网上寻找一个油画图像
接下来,你需要在网上寻找一个你想要展示的油画图像。
首先,打开一个搜索比如谷歌,并用油画的名字或者艺术家名字进行搜索。切换到“图像”页面,并像这样浏列表:
当你选择一个你喜欢的油画之后,并且右击图像预览,并选择“复制图像地址”。这会复制图像的链接到你的电脑的剪贴板。
在这个教程中,我们会使用梵高《稻田群鸦》的链接:
https://upload.wikimedia.org/wikipedia/commons/b/ba/Vincent_van_Gogh_-Wheatfield_with_crows-_Google_Art_Project.jpg
需要注意的是,在大部分的例子中,你只可以免费使用这些图像作为学习用途。如果你正在创建一个商用的项目,那你会需要得到一个使用图像的正式授权许可。
步骤 4 - 使用图像作为纹理
接下来,我们可以使用 “共享文件添加盒子” 编程积木来让那张图象来作为盒子的纹理。因为我们的盒子尺寸是1000乘以1000,你需要把纹理的“单元大小”也设置成1000,以便图像会刚好地贴合到盒子的面上。以及,你需要删除编程积木输入框里的链接,并粘贴你在步骤3中复制的新链接。
现在你的盒子应该会被你选择的画像覆盖:
步骤 5 - 调整高度
大部分的油画都不是正方形的。换句话说,宽度和高度的比例不会是1。我们可以通过调整盒子的比例来解决这个问题。
在这个例子中,油画的高度会比自身宽度的一半再少一些。因此,我们需要把盒子在Z方向的比例缩小到48%,就像这样:
现在,盒子的宽度依旧是1000,但是高度只有480。它看起来更像原有的画作了。
步骤 6 - 添加一个图像框
接下来,让我们使用长方形管子,围绕着油画添加一个图像框。假设相框边框的厚度是20,那么左边和右边的两个边框总共就会添加40个单元。我们知道油画本身的尺寸是1000乘以480,所以长方形管子的尺寸会是1040乘以520。
我们也需要旋转图像框,因为默认情况下它会朝上。
现在,我们得到了一个围绕着画框的油画:
步骤7 - 对画框使用木质纹理
要让画框看起来更真实,我们可以对他使用一种纹理,比如“大理石06”。你也可以调试纹理大小来获得不一样的视觉效果。举个例子,如果我们把纹理大小设置成3000,纹理的图像将会是更延展开的。
这是当应用纹理之后,图像框看起来的样子:
步骤8 - 添加说明
我们使用三维文字物体,来添加一个包含图像名字和艺术家的说明。它的宽度应该要和油画的宽度差不多,也就是1000。并且,说明需要被移动到优化的下方,因为油画的高度是480,那么它的底部边角就会处于Z=-240的位置。我们也需要加上边框的厚度,也就是20,因此文字需要在Z=-260的位置。
说明看起来会长这样:
步骤 9 - 把摄像头移向前方
因为说明是朝向前方的(Y的正向方向),我们需要180度旋转字体,或者把摄像头移到前方。在这个例子中,移动摄像头是一个比较好的旋转,因为我们需要把摄像头移动到一个好的观看位置,以便能够展示整个油画。
现在用户在点击运行旗帜之后,就可以得到观看油画的良好视角,不需要再旋转或放大摄像头:
步骤 10 - 一个星空背景
要有更好的观看体验,我们可以使用“指定天空”编程积木来添加一个好看的背景。这个编程积木应该在程序一开始时就被植入,因为他会需要一些时间来加载背景图像,以及设置天空会让摄像头移到更远一点的位置。
并且,现在是一个隐藏三维轴的好时候,因为我们已经差不多完成程序了:
现在,我们就得到了一个在移动摄像头时也会跟着移动的好背景。
步骤 11 - 摄像头动画
要制作一个更有趣的观看体验,我们可以在一开始时把摄像头设置到一个不一样的位置,并通过动画把它移动到前方的位置。
这是最终的演示:
创意点子
这里有有一些有趣的点子,你可以尝试使用它们来更改项目:
-