Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    三维 - 框内的油画(难度:2)

    小教程
    1
    1
    254
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

       

      覆盖的关键课题

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

       
       

      介绍

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

       

       

       

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

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

       

       

      这是最终的演示:

       
       

      创意点子

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

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