[教程向]如何在SC中实现3D效果
scratch吧
全部回复
仅看楼主
level 8
Arkos 楼主
大家好,这里是zjezhpy~
快开学了。。估计没时间碰sc了
所以打算趁还活着(?),发点光和热,出个3D教程(
本教程将会以 尽量 简单的语言,让你掌握在sc中实现3D效果的方法
怎样?是不是很期待[滑稽]
这是LZ做的pvz和3D结合的效果↓
2020年05月01日 06点05分 1
level 8
Arkos 楼主
前排
提示:
1.观看此教程,您需要:
*能够非常熟练地使用sc
*能够非常熟练地使用数据运算和操作
*较好的空间想象能力
*有一定数学基础(涉及到三角函数和空间向量)
2. 声明:
*这个教程完全是按照作者的理解和经验瞎写的,不一定是最简单的方法,不一定是最常用的方法,所以教程提到的看似比较专业的说法请不要完全相信(如果有错不要打我,欢迎指出)
————————————
目录:
1. 摄像头固定的3D效果
2. 尝试移动摄像头
3. 尝试旋转摄像头
2020年05月01日 06点05分 2
看到需要数学基础,我溜了
2020年05月16日 07点05分
没有
2020年06月08日 12点06分
果断收藏
2020年06月14日 05点06分
我是小学生怎么办
2020年06月29日 00点06分
level 8
Arkos 楼主
Part1 摄像头固定的3D效果
首先,我们知道sc中有xy坐标。
现在让我们在sc中引入一个新坐标——z坐标。z轴垂直于电脑屏幕,从屏幕外指向屏幕里。(如下图)
z坐标表示纵深,即这个角色在屏幕内的深度,z坐标越大表示角色离屏幕所在平面越远,因为近大远小,z越大物体看起来会越小(当z为负数表示角色跑到了屏幕外面,看不到)
为了方便你理解z坐标的含义,现在我们来看通过增减z坐标能够实现什么效果↓
可以看到,z坐标增加时,小猫远离屏幕,小猫变小;z坐标减小时,小猫靠近屏幕,小猫变大
2020年05月01日 06点05分 3
大佬求个联系方式,我搞了好多天没搞明白。[呼~]
2020年05月20日 06点05分
ta是共创世界/阿儿法营的Arkos
2022年07月03日 07点07分
level 8
Arkos 楼主
下面第一个重头戏来了!!
接下来将向你展示实现3D的的代码
准备好了吗?不要被吓一跳哦~
当当当当!
是的!你没有看错!代码只有一行!!!
(想不到吧.jpg)
使用这个代码可以让角色移动到对应的坐标
其中变量“#3D常数”设为350(也可以是其他的值,不同的值效果不同,比如在-6大佬的过河之战中,这个值被设为200,貌似这个值很小的时候可以实现广角镜头效果)
(接下来告诉你为什么是这么写,这一段不重要,听不懂也没关系,可以直接跳过)
—————————以下这一段可跳过—————————
(注:以下纯属个人的理解,非常不专业,请不要完全相信)
这个#3D常数(前面的#号是我的变量命名习惯,表示这个变量是常数)是什么?
在初中我们学过凸透镜成像原理,这个常数就是像距——成像到凸透镜的距离。
以人眼为例,像距就是视网膜到晶状体的距离,这个距离是个定值,当然,如果像距是固定的,焦距就要随物距改变,所以晶状体会具有伸缩调焦的功能。
已知一个物体的长度和这个物体到凸透镜的距离,我们就能算出这个物体的成像的长度(屏幕上显示的长度)。
根据凸透镜成像原理和相似三角形,有如下关系:
实际长度:显示长度=物距(物体到凸透镜距离):像距(成像到凸透镜长度)
把这个式子变形一下,就是:
显示长度=实际长度*(像距/物距)
因此在代码中,我们看到:
显示y=实际y*(像距/z)
显示x=实际x*(像距/z)
显示大小=实际大小*(像距/z)
(你发现多了一行调大小的代码?当然,如果只使用画笔,大小可以不用调整;如果要使用角色,角色大小也要调整)
同时,上面的式子也可以解释为什么“近大远小”:
显示大小与z成反比例关系,z越大,显示大小越小,即物体离屏幕越远,物体看起来就越小
————————————接下来继续————————————
2020年05月01日 06点05分 4
3D常数取多少最好?
2020年05月08日 11点05分
应该没有标准,看你自己怎么想,我设置的是一般是350
2020年05月08日 12点05分
scarch中不就是直接调用写好的轮子嘛
2020年07月11日 12点07分
(想不到吧.jpg)
2021年11月30日 09点11分
level 8
Arkos 楼主
那么这个代码具体可以怎么用呢?
首先,如果让你在sc中用画笔绘制一个正方形,边长为100,左下角坐标为(0,0),你应该知道怎么做吧?
就像这样:
那么现在举一反三,我们来尝试用刚才的代码在三维空间中画一个正方形:边长为100,“放”在“地面”上(“地面”y坐标假设设为-150),正方形左下角坐标(-150,-150,300),你知道怎么画吗?
可以这样写:
运行效果:
怎么样?是不是很像某个正方体的底面?
那么现在,我们以这个正方形为底面,绘制出一个完整的正方体...
首先我们来尝试画正方体的左侧面,类似于刚才底面的画法,你应该明白怎么画吧?
像这样:
其他面的代码同理。接着我们把其他面依次画完...
(Tips:其实可以直接画边,不用每个面都写一个绘制代码)
怎么样?是不是有内味了!好了,到这里,你已经掌握了实现3D的一半了
怎样,是不是意外的简单?
如果你听懂了,尝试自己画一个正方体。
2020年05月01日 06点05分 5
怎么画啊[乖]
2021年11月07日 03点11分
我会了,谢谢你交我[太开心]
2021年11月07日 04点11分
level 8
Arkos 楼主
————————————练习时间———————————————
(接下来是运用刚才的知识可以实现的几个案例练习,如果你听懂了,可以尝试自己做一下)
案例1:让正方体动起来!
预期效果:按wasd可上下左右移动正方体,↑↓键可前后移动正方体
具体过程:我们用三个变量:左下x,左下y,左下z来储存正方体左下角的坐标,然后编写程序,按对应的按键就增减正方体对应的坐标(例如按↑键增加z坐标,↓键减少z坐标)
实现结果↓
案例2:画个圆吧!
预期效果:画个铺在“地上”的圆(“地面”y:-150(当然你也可以自己设置)),半径100,圆心(-40,-150,500)
Tips:首先我们先尝试在sc自带的坐标系中尝试画圆(注意,需要用到三角函数!)
(即使在二维平面画出一个圆,代码其实也不简单↓,因此需要各位在阅读此教程之前需要比较扎实的基础)
我们对上面的代码稍作修改:
效果↓
(平放在“地上”的圆看起来像个椭圆)
案例3:画个马路!(可以用来做公路跑酷游戏)
代码:
(效果↑)
2020年05月01日 06点05分 6
今天先更这么多,尽量假期内把全部更完
2020年05月01日 06点05分
大佬,正方形移动视觉的程序我研究了半天都没搞懂,能不能教教我。
2020年05月02日 04点05分
案例1移动视觉的程序,可否借鉴一下[吐舌]
2020年05月02日 04点05分
@墨媚丶 呃,到时候会把案例代码传上来
2020年05月02日 04点05分
level 8
顶顶[滑稽]
2020年05月01日 06点05分 7
level 3
大佬能去我的吧[Scratch工作室]吧,看看嘛?
2020年05月01日 06点05分 9
level 10
看不懂,只能疯狂orz hpy了[滑稽][haha]
2020年05月01日 10点05分 10
level 11
大佬nb[真棒]
2020年05月01日 12点05分 11
level 5
谢谢,我收藏了,希望加精
2020年05月01日 23点05分 12
level 12
%%%
2020年05月02日 07点05分 13
level 8
哇 是大佬 太强了
2020年05月02日 08点05分 14
他可不是大佬,他是大佬了,艾幻算什么,他应该是大神!!!(1X大神=9X大佬)
2020年07月12日 13点07分
@彩色君◆ 抓(我是Lmowzyf[滑稽])
2020年09月20日 05点09分
@彩色君◆ 3D大佬和美术大佬没有可比性[滑稽]
2020年10月01日 14点10分
level 3
大佬厉害👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻
2020年05月02日 08点05分 15
level 5
orz
顺便我问下,另外一个枪战的作品(就刚成初精的)难不成是大量绘制……
2020年05月02日 09点05分 16
如果真这样我们电脑都炸了[滑稽][茶杯]
2020年06月14日 05点06分
@贴吧用户_58X8JEW 希望电脑出事(雾)
2020年07月12日 00点07分
1 2 3 4 5 6 尾页