东莞虎门童程童美校区

童程童美实行“严选拔、强实力、常培训”的教师管理标准，每月“专业+心理学+教育学”等交叉知识学科培训，坚持高品质素质教育。“童程在线”提供面向全国的线上4-6人VIP小班授课，成为线上线下一体化的少儿编程教育平台，真正打造在您身边的少儿编程机构。

【资料图】

相信大家应该都接触过3D游戏和3D动画，那些栩栩如生的画面，其实它们并不是照片，而是通过编程让计算机实时画(计算)出来的。下面就来说说怎样用scratch实现3d，大家千万别错过。

怎样用scratch实现3d

基本思路

首先必须明确，3D这种东西不论那个平台的实现(已有的3D引擎不算，我指自己编写一个新的3D引擎)都是需要一定的数学基础的。如果你没有过多的去研究数学的话，我建议初二(含初二)以下的吧友不要闯3D领域，你会觉得无从下手。对于3D的研究最适合高中的吧友们，这时候不仅可以增长编程水平，而且对你的高中数学的学习也有极大的帮助。

对于3D的实现，最重要的是思路，公式及图像的形成原理大家都懂，我就不普及这种基础知识了。实现的思路有很多，这篇文章我会给你们提供我实现3D时使用的思路，并不会教你们那里怎么做哪里怎么做(这样我不如直接放源码出来)，只是给你们一个可行的探索方向。

接着我们来看下一个3D实现的基础思路，我的这个思路很像计算机成像的思路:

用户脚本-->运算-->成像;

是不是很类似于计算机成像;

二进制欲显示图像-->GPU处理-->显示器发光.

没错，就是这样的。也就是这是我们3D成像主攻的3大块:用户脚本、运算、成像。我看过我们吧友的一些3D实现方法，他们都犯了一个大错：将这3大块揉和在了一起。这是大错特错的，这三大块应该是可以分别从你的脚本中独立出来的(也就是3个角色)。 这样有利于对脚本的维护，学过高级语言的吧友们就知道了，这样“块”状的脚本是特别利于开发的。

对于这3大块的开发顺序应该是先开发运算、再成像、最后用户脚本。为何这么说，拿计算机成像来看，目前的显示器只支持GPU输出的图像，所以你得先研发GPU，然后GPU研发完了显示器就顺理成章了，接着在于CPU配对接受二进制，不然的话先给你二进制显示不出来有何意义?对于3D实现同理。如果你直接开发成像你会发现你在不知不觉中也开发了运算，然而这样开发出来的运算是和成像揉在一起的，违反了我们的开发原则。

第一阶段

我们开发的第一阶段运算是最难啃的，这个阶段的开发犹如混水摸鱼。你并不知道你的运算结果是什么，你看不到图像，只知道运算而得到的数字。这要求对各类函数的确切掌握。那我们如何快速进阶呢?这个就很像矢量图了，大家可以在此处参考矢量图的实现。那我们要得到些什么数字?首先对于3D我们肯定得抛弃Scratch原有的二维坐标系统(xy)，要自行再开发一个三位坐标系统(xyz)，这个系统里要有长度单位、以及三维基本的三个轴。你3D里的每一个实体，都需要一个确切的坐标以及长宽高。这是第一步。第二步，你要确定一个视界与被观察实体的相对位置及相对距离，注意实体的坐标是固定的，但是视界不是固定的，所以我们需要一个实时相对位置与相对距离算法，通过这个算法得知一些数据(至于是什么数据，就看你数学学怎么样了)以测算角度来成像。

例如p1(作图抽象，请自行想象)里的正方体是实体，长方体是你的可视范围，那么红线延长出去的就是视界。接下来就要介入成像了。

第二阶段

在成像方面，我比较推崇位图式与矢量式结合的思路。矢量式描绘实体边框，位图式给一个面填色。矢量方面并不难，你只要运算出了关键数据，一根线(刚开始不要介入曲线)的长度、大小、位置、角度自然都是可以通过公式测算的出来的。假设p2(作图抽象，请自行想象)是我们看到的图像，那么我们需要确定图上几个关键性的红点把他们连起来，如何确定这些红点可以参考红线(我称之基准线)，确定这些在成像时没有基准线就是运算要做的，这些基准线必须从视界的一个角出发其终点就是我们要的关键点。成像难在位图式(建议大家不要马上研究位图式这一块)，你需要研究在Scratch里实现MS-Paint里油漆桶的方式，研究出了这个，也就没什么难的了。但是实现个看似简单的油漆桶并不简单。

第三阶段

啃完了两块大难关，接着用户脚本的研究自然就特别简单了。我们只要自定义函数后提交到运算创建实体，然后给成像模块提供运算结果成像就完成了。

用scratch制作3d投影的步骤

第一步：在“造型”里将思思兔的造型图片按照方向一一对应，动作越复杂，所需图片越多。

第二步：设置思思兔的朝向、大小、位置。

第三步：设置重复执行动画。

第四步：见证奇迹的时刻，运行脚本，注意脚本命令之间不要有断层。

用scratch实现3D动画的方法

1. 坐标

接触过scratch的同学对于2D坐标已经非常熟悉：一个物体的x坐标代表它在屏幕左右方向的位置，y坐标代表它在上下方向的位置。Scratch规定了舞台的坐标范围分别是：x坐标范围在-240到240，y坐标范围在-180到180。

3D坐标系增加了一个z轴，其实就是2D坐标在纵深方向的扩展。红色直线代表x、y、z轴，黑色点的坐标(x,y,z)代表了它在三维立体空间中的位置。

在scratch的2D舞台上画一个四边形，我们需要知道四个顶点的坐标，然后把它们连线就可以画出来。同样道理，如果要在3D空间中画出一个物体，一个方法是知道它的所有顶点的坐标，然后把顶点用直线连起来。比如下面这个立方体，把它的8个顶点连起来就能画出来。

事实上，最复杂的3D图案和最真实的3D动画，背后都是通过这种方法画出来。当然画面细节越丰富，背后的数学模型越复杂，也需要越多的计算机资源(CPU、内存、显卡)。作为入门介绍，本文只用最基本的3D图形作为例子。

比如下面这个八面体，它有6个顶点，上半部分和下半部分分别有四个三角形。它是最简单的可以一笔画出来的多面体(上面的立方体就不能一笔画出来，而八面体可以，同学们可以思考一下为什么)，比如依次连接点1-6-2-5-3-6-4-5-1-2-3-4-1就可以不重复任一条边把它画出来。

简单来说，只要我们知道了八面体的6个顶点的3D坐标，我们就能一笔过把它画出来。

2. 投射

计算机屏幕是一个2D的平面，我们通过屏幕看到的3D物体，实际上是它根据透视原理在屏幕上的一个2D投射。

原理：视点代表了观察者(眼睛或者摄像头)的位置。蓝色是一个3D物体，红色平面代表了屏幕。绿色部分就是3D物体在屏幕上的投射。在屏幕上显示一个3D物体，其实是显示它在2D平面上的投射(绿色部分)。

在屏幕上看到的一个3D物体的大小和形状，其实跟以下几个因素有关：3D物体的实际位置、视点的位置、屏幕的位置。

那3D空间某一个点投射在某个2D屏幕上的坐标是怎么计算的呢?

P代表3D空间中的一个点，设它的位置坐标值是x，y，z。现在要计算的是它在红色的代表屏幕的平面上的投射点P’的坐标值。其中O点代表视点。

两次强调，3D点的投射除了和它本身的坐标有关之外，还和视点位置、投射屏幕位置有关。这三个因素是互相影响的。忽略了任何一个因素都不能得出投射点坐标!

绿色平面代表P经过的、和红色屏幕平面平行的一个平面。线段OAB和红色以及绿色平面都垂直。为了方便计算，我们让红色平面与x轴和y轴组成的平面平行。这样，线段OAB和z轴平行(并垂直于红色及绿色平面);线段BC以及AC’与x轴平行;线段PC以及P’C’与y轴平行。

因为BC与AC’平行、PC与P’C’平行。根据相似三角形的特点，我们很容易知道：

OA /OB = AC’ / BC = P’C’ / PC

所以，如果知道：

P点坐标x,y,z

O点坐标ox,oy,oz

红色平面的z坐标值pz

则：

OA = pz – oz

OB = z – oz

BC = x – ox

PC = y – oy

则P在红色屏幕平面投射点P’的x、y轴坐标值为：

P’的x坐标 =

ox + AC’ =

ox + [(pz – oz) * (x - ox)/(z - oz)]

P’的y坐标 =

oy + P’C’ =

oy + [(pz - oz) * (y - oy)/(z - oz)]

接下来我们就用这个结论在scratch里画出一个3D的八面体来。

我们要做的就是把3D物体在2D屏幕上的投射画出来。所以在画(编程)之前我们先要在自己心中有一个3D坐标，视点的位置、屏幕的位置、物体的位置我们都要先想清楚。

八面体有6个顶点，依次连接点1-6-2-5-3-6-4-5-1-2-3-4-1就可以一笔过画出它来；

- 首先我们用三个数组分别保存八面体6个顶点的x坐标、y坐标和z坐标；

- 定义视点及投射屏幕平面的位置(前面说过，为了方便计算，我们让投射平面与x轴和y轴组成的平面平行，所以投射面只有一个z值)；

- 根据前面3D到2D屏幕的投射公式，自定义一个积木用来投射转换；

- 接下来就依次投射1-6-2-5-3-6-4-5-1-2-3-4-1点，用画笔画出连接各点的轨迹。

执行“投射八面体“积木就可以画出下面的形状：

3. 移动

物体移动只需要改变它所有顶点的x,y,z值，然后再重新投射一次就可以了。

注意这里物体的移动是在原3D空间的移动，所以物体在x轴方向或y轴方向移动后，在屏幕上的投射会产生一定的旋转效果。视点离投射平面越近，这种旋转效果越明显。

物体在z轴方向的移动会产生物体大小变化的视觉效果：物体远离视点时物体投射缩小，接近视点时物体投射增大。

4. 旋转

物体旋转涉及到三角函数的知识。推导过程需要一定的篇幅。我们只需要记住简单的结论来应用就可以了。

旋转可以分为三种：沿x轴的旋转、沿y轴的旋转和沿z轴的旋转。

- 沿x轴旋转时，物体的x坐标不变，y坐标和z坐标的变换规律是(A为旋转角度)：

新的y坐标 = y * cos A + z * sin A；

新的z坐标 = z * cos A – y * sin A。

- 沿y轴旋转时，物体的y坐标不变，x坐标和z坐标的变换规律是(A为旋转角度)：

新的x坐标 = x * cos A – z * sin A；

新的z坐标 = x * sin A + z * sin A。

- 沿z轴旋转时，物体的z坐标不变，x坐标和y坐标的变换规律是(A为旋转角度)：

新的x坐标 = x * cos A – y * sin A；

新的y坐标 = x * sin A + y * cos A。

显示了沿z轴旋转时的变换情况。有兴趣的同学可以自己推导出坐标的变换规律。

注意上面说的坐标变化都是物体原3D坐标的变化，而不是投射在2D平面上的投射坐标的变化。换言之，旋转改变物体坐标后，还要重新计算投射坐标。