三维 - 框内的油画（难度：2）

[info-creaticode]

 

覆盖的关键课题

• 创建三维场景
• 使用盒子
• 使用分享文件来更新纹理
• 更新纹理
• 更新比例
• 使用长方形管子
• 三维文字
• 摄像头设置

 
 

介绍

在这个教程中，你将会创建一个程序来展示画框内的著名油画，就像下图展示的一样，以便用户可以从不同角度和距离来欣赏它：

 

 

 

步骤 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 - 摄像头动画

要制作一个更有趣的观看体验，我们可以在一开始时把摄像头设置到一个不一样的位置，并通过动画把它移动到前方的位置。

 

 

这是最终的演示：

 
 

创意点子

这里有有一些有趣的点子，你可以尝试使用它们来更改项目：

• 多个油画: 你可以尝试创建一个包含很多个油画的画廊，并在三维空间里面排列他们。
• 解说文字: 你可以在油画或者油画四周添加更多的解说型文字。举个例子，用户可以点击按钮 来显示说明，并再次点击之后隐藏它。
• 加厚的文字: 你可以尝试使用"添加三维加厚文本" 编程积木来添加说明，因为它支持更多的文字种类。