资格审核、面试能力
试听试讲、集团培训
考核认证、持证上岗
童程童美实行“严选拔、强实力、常培训”的教师管理标准,每月“专业+心理学+教育学”等交叉知识学科培训,坚持高品质素质教育。“童程在线”提供面向全国的线上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平面上的投射坐标的变化。换言之,旋转改变物体坐标后,还要重新计算投射坐标。
更多培训课程、学习资讯、课程优惠、课程开班、学校地址等学校信息,请进入 东莞虎门童程童美少儿编程培训 详细了解,咨询电话: