相信大家應(yīng)該都接觸過(guò)3D游戲和3D動(dòng)畫(huà)，那些栩栩如生的畫(huà)面，其實(shí)它們并不是照片，而是通過(guò)編程讓計(jì)算機(jī)實(shí)時(shí)畫(huà)(計(jì)算)出來(lái)的。下面就來(lái)說(shuō)說(shuō)怎樣用scratch實(shí)現(xiàn)3d，大家千萬(wàn)別錯(cuò)過(guò)。 ?

怎樣用scratch實(shí)現(xiàn)3d ?

基本思路 ?

首先必須明確，3D這種東西不論那個(gè)平臺(tái)的實(shí)現(xiàn)(已有的3D引擎不算，我指自己編寫(xiě)一個(gè)新的3D引擎)都是需要一定的數(shù)學(xué)基礎(chǔ)的。如果你沒(méi)有過(guò)多的去研究數(shù)學(xué)的話(huà)，我建議*(含*)以下的吧友不要闖3D領(lǐng)域，你會(huì)覺(jué)得無(wú)從下手。對(duì)于3D的研究最適合高中的吧友們，這時(shí)候不僅可以增長(zhǎng)編程水平，而且對(duì)你的高中數(shù)學(xué)的學(xué)習(xí)也有極大的幫助。 ?

對(duì)于3D的實(shí)現(xiàn)，最重要的是思路，公式及圖像的形成原理大家都懂，我就不普及這種基礎(chǔ)知識(shí)了。實(shí)現(xiàn)的思路有很多，這篇文章我會(huì)給你們提供我實(shí)現(xiàn)3D時(shí)使用的思路，并不會(huì)教你們那里怎么做哪里怎么做(這樣我不如直接放源碼出來(lái))，只是給你們一個(gè)可行的探索方向。 ?

接著我們來(lái)看下一個(gè)3D實(shí)現(xiàn)的基礎(chǔ)思路，我的這個(gè)思路很像計(jì)算機(jī)成像的思路: ?

用戶(hù)腳本-->運(yùn)算-->成像; ?

是不是很類(lèi)似于計(jì)算機(jī)成像; ?

二進(jìn)制欲顯示圖像-->GPU處理-->顯示器發(fā)光. ?

沒(méi)錯(cuò)，就是這樣的。也就是這是我們3D成像主攻的3大塊:用戶(hù)腳本、運(yùn)算、成像。我看過(guò)我們吧友的一些3D實(shí)現(xiàn)方法，他們都犯了一個(gè)大錯(cuò)：將這3大塊揉和在了一起。這是大錯(cuò)特錯(cuò)的，這三大塊應(yīng)該是可以分別從你的腳本中獨(dú)立出來(lái)的(也就是3個(gè)角色)。 這樣有利于對(duì)腳本的維護(hù)，學(xué)過(guò)高級(jí)語(yǔ)言的吧友們就知道了，這樣“塊”狀的腳本是特別利于開(kāi)發(fā)的。 ?

對(duì)于這3大塊的開(kāi)發(fā)順序應(yīng)該是先開(kāi)發(fā)運(yùn)算、再成像、*用戶(hù)腳本。為何這么說(shuō)，拿計(jì)算機(jī)成像來(lái)看，目前的顯示器只支持GPU輸出的圖像，所以你得先研發(fā)GPU，然后GPU研發(fā)完了顯示器就順理成章了，接著在于CPU配對(duì)接受二進(jìn)制，不然的話(huà)先給你二進(jìn)制顯示不出來(lái)有何意義?對(duì)于3D實(shí)現(xiàn)同理。如果你直接開(kāi)發(fā)成像你會(huì)發(fā)現(xiàn)你在不知不覺(jué)中也開(kāi)發(fā)了運(yùn)算，然而這樣開(kāi)發(fā)出來(lái)的運(yùn)算是和成像揉在一起的，違反了我們的開(kāi)發(fā)原則。 ?

*階段 ?

我們開(kāi)發(fā)的*階段運(yùn)算是最難啃的，這個(gè)階段的開(kāi)發(fā)猶如混水摸魚(yú)。你并不知道你的運(yùn)算結(jié)果是什么，你看不到圖像，只知道運(yùn)算而得到的數(shù)字。這要求對(duì)各類(lèi)函數(shù)的確切掌握。那我們?nèi)绾慰焖龠M(jìn)階呢?這個(gè)就很像矢量圖了，大家可以在此處參考矢量圖的實(shí)現(xiàn)。那我們要得到些什么數(shù)字?首先對(duì)于3D我們肯定得拋棄Scratch原有的二維坐標(biāo)系統(tǒng)(xy)，要自行再開(kāi)發(fā)一個(gè)三位坐標(biāo)系統(tǒng)(xyz)，這個(gè)系統(tǒng)里要有長(zhǎng)度單位、以及三維基本的三個(gè)軸。你3D里的每一個(gè)實(shí)體，都需要一個(gè)確切的坐標(biāo)以及長(zhǎng)寬高。這是*步。第二步，你要確定一個(gè)視界與被觀察實(shí)體的相對(duì)位置及相對(duì)距離，注意實(shí)體的坐標(biāo)是固定的，但是視界不是固定的，所以我們需要一個(gè)實(shí)時(shí)相對(duì)位置與相對(duì)距離算法，通過(guò)這個(gè)算法得知一些數(shù)據(jù)(至于是什么數(shù)據(jù)，就看你數(shù)學(xué)學(xué)怎么樣了)以測(cè)算角度來(lái)成像。 ?

例如p1(作圖抽象，請(qǐng)自行想象)里的正方體是實(shí)體，長(zhǎng)方體是你的可視范圍，那么紅線(xiàn)延長(zhǎng)出去的就是視界。接下來(lái)就要介入成像了。 ?

第二階段 ?

在成像方面，我比較推崇位圖式與矢量式結(jié)合的思路。矢量式描繪實(shí)體邊框，位圖式給一個(gè)面填色。矢量方面并不難，你只要運(yùn)算出了關(guān)鍵數(shù)據(jù)，一根線(xiàn)(剛開(kāi)始不要介入曲線(xiàn))的長(zhǎng)度、大小、位置、角度自然都是可以通過(guò)公式測(cè)算的出來(lái)的。假設(shè)p2(作圖抽象，請(qǐng)自行想象)是我們看到的圖像，那么我們需要確定圖上幾個(gè)關(guān)鍵性的紅點(diǎn)把他們連起來(lái)，如何確定這些紅點(diǎn)可以參考紅線(xiàn)(我稱(chēng)之基準(zhǔn)線(xiàn))，確定這些在成像時(shí)沒(méi)有基準(zhǔn)線(xiàn)就是運(yùn)算要做的，這些基準(zhǔn)線(xiàn)必須從視界的一個(gè)角出發(fā)其終點(diǎn)就是我們要的關(guān)鍵點(diǎn)。成像難在位圖式(建議大家不要馬上研究位圖式這一塊)，你需要研究在Scratch里實(shí)現(xiàn)MS-Paint里油漆桶的方式，研究出了這個(gè)，也就沒(méi)什么難的了。但是實(shí)現(xiàn)個(gè)看似簡(jiǎn)單的油漆桶并不簡(jiǎn)單。 ?

第三階段 ?

啃完了兩塊大難關(guān)，接著用戶(hù)腳本的研究自然就特別簡(jiǎn)單了。我們只要自定義函數(shù)后提交到運(yùn)算創(chuàng)建實(shí)體，然后給成像模塊提供運(yùn)算結(jié)果成像就完成了。 ?

?

用scratch制作3d投影的步驟 ?

*步：在“造型”里將思思兔的造型圖片按照方向一一對(duì)應(yīng)，動(dòng)作越復(fù)雜，所需圖片越多。 ?

第二步：設(shè)置思思兔的朝向、大小、位置。 ?

第三步：設(shè)置重復(fù)執(zhí)行動(dòng)畫(huà)。 ?

第四步：見(jiàn)證奇跡的時(shí)刻，運(yùn)行腳本，注意腳本命令之間不要有斷層。 ?

用scratch實(shí)現(xiàn)3D動(dòng)畫(huà)的方法 ?

1. 坐標(biāo) ?

接觸過(guò)scratch的同學(xué)對(duì)于2D坐標(biāo)已經(jīng)非常熟悉：一個(gè)物體的x坐標(biāo)代表它在屏幕左右方向的位置，y坐標(biāo)代表它在上下方向的位置。Scratch規(guī)定了舞臺(tái)的坐標(biāo)范圍分別是：x坐標(biāo)范圍在-240到240，y坐標(biāo)范圍在-180到180。 ?

3D坐標(biāo)系增加了一個(gè)z軸，其實(shí)就是2D坐標(biāo)在縱深方向的擴(kuò)展。紅色直線(xiàn)代表x、y、z軸，黑色點(diǎn)的坐標(biāo)(x,y,z)代表了它在三維立體空間中的位置。 ?

在scratch的2D舞臺(tái)上畫(huà)一個(gè)四邊形，我們需要知道四個(gè)頂點(diǎn)的坐標(biāo)，然后把它們連線(xiàn)就可以畫(huà)出來(lái)。同樣道理，如果要在3D空間中畫(huà)出一個(gè)物體，一個(gè)方法是知道它的所有頂點(diǎn)的坐標(biāo)，然后把頂點(diǎn)用直線(xiàn)連起來(lái)。比如下面這個(gè)立方體，把它的8個(gè)頂點(diǎn)連起來(lái)就能畫(huà)出來(lái)。 ?

事實(shí)上，最復(fù)雜的3D圖案和最真實(shí)的3D動(dòng)畫(huà)，背后都是通過(guò)這種方法畫(huà)出來(lái)。當(dāng)然畫(huà)面細(xì)節(jié)越豐富，背后的數(shù)學(xué)模型越復(fù)雜，也需要越多的計(jì)算機(jī)資源(CPU、內(nèi)存、顯卡)。作為入門(mén)介紹，本文只用最基本的3D圖形作為例子。 ?

比如下面這個(gè)八面體，它有6個(gè)頂點(diǎn)，上半部分和下半部分分別有四個(gè)三角形。它是最簡(jiǎn)單的可以一筆畫(huà)出來(lái)的多面體(上面的立方體就不能一筆畫(huà)出來(lái)，而八面體可以，同學(xué)們可以思考一下為什么)，比如依次連接點(diǎn)1-6-2-5-3-6-4-5-1-2-3-4-1就可以不重復(fù)任一條邊把它畫(huà)出來(lái)。 ?

簡(jiǎn)單來(lái)說(shuō)，只要我們知道了八面體的6個(gè)頂點(diǎn)的3D坐標(biāo)，我們就能一筆過(guò)把它畫(huà)出來(lái)。 ?

2. 投射 ?

計(jì)算機(jī)屏幕是一個(gè)2D的平面，我們通過(guò)屏幕看到的3D物體，實(shí)際上是它根據(jù)透視原理在屏幕上的一個(gè)2D投射。 ?

原理：視點(diǎn)代表了觀察者(眼睛或者攝像頭)的位置。藍(lán)色是一個(gè)3D物體，紅色平面代表了屏幕。綠色部分就是3D物體在屏幕上的投射。在屏幕上顯示一個(gè)3D物體，其實(shí)是顯示它在2D平面上的投射(綠色部分)。 ?

在屏幕上看到的一個(gè)3D物體的大小和形狀，其實(shí)跟以下幾個(gè)因素有關(guān)：3D物體的實(shí)際位置、視點(diǎn)的位置、屏幕的位置。 ?

那3D空間某一個(gè)點(diǎn)投射在某個(gè)2D屏幕上的坐標(biāo)是怎么計(jì)算的呢? ?

P代表3D空間中的一個(gè)點(diǎn)，設(shè)它的位置坐標(biāo)值是x，y，z?，F(xiàn)在要計(jì)算的是它在紅色的代表屏幕的平面上的投射點(diǎn)P’的坐標(biāo)值。其中O點(diǎn)代表視點(diǎn)。 ?

兩次強(qiáng)調(diào)，3D點(diǎn)的投射除了和它本身的坐標(biāo)有關(guān)之外，還和視點(diǎn)位置、投射屏幕位置有關(guān)。這三個(gè)因素是互相影響的。忽略了任何一個(gè)因素都不能得出投射點(diǎn)坐標(biāo)! ?

綠色平面代表P經(jīng)過(guò)的、和紅色屏幕平面平行的一個(gè)平面。線(xiàn)段OAB和紅色以及綠色平面都垂直。為了方便計(jì)算，我們讓紅色平面與x軸和y軸組成的平面平行。這樣，線(xiàn)段OAB和z軸平行(并垂直于紅色及綠色平面);線(xiàn)段BC以及AC’與x軸平行;線(xiàn)段PC以及P’C’與y軸平行。 ?

因?yàn)锽C與AC’平行、PC與P’C’平行。根據(jù)相似三角形的特點(diǎn)，我們很容易知道： ?

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

所以，如果知道： ?

P點(diǎn)坐標(biāo)x,y,z ?

O點(diǎn)坐標(biāo)ox,oy,oz ?

紅色平面的z坐標(biāo)值pz ?

則： ?

OA = pz – oz ?

OB = z – oz ?

BC = x – ox ?

PC = y – oy ?

則P在紅色屏幕平面投射點(diǎn)P’的x、y軸坐標(biāo)值為： ?

P’的x坐標(biāo) = ?

ox + AC’ = ?

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

P’的y坐標(biāo) = ?

oy + P’C’ = ?

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

接下來(lái)我們就用這個(gè)結(jié)論在scratch里畫(huà)出一個(gè)3D的八面體來(lái)。 ?

我們要做的就是把3D物體在2D屏幕上的投射畫(huà)出來(lái)。所以在畫(huà)(編程)之前我們先要在自己心中有一個(gè)3D坐標(biāo)，視點(diǎn)的位置、屏幕的位置、物體的位置我們都要先想清楚。 ?

八面體有6個(gè)頂點(diǎn)，依次連接點(diǎn)1-6-2-5-3-6-4-5-1-2-3-4-1就可以一筆過(guò)畫(huà)出它來(lái)； ?

- 首先我們用三個(gè)數(shù)組分別保存八面體6個(gè)頂點(diǎn)的x坐標(biāo)、y坐標(biāo)和z坐標(biāo)； ?

- 定義視點(diǎn)及投射屏幕平面的位置(前面說(shuō)過(guò)，為了方便計(jì)算，我們讓投射平面與x軸和y軸組成的平面平行，所以投射面只有一個(gè)z值)； ?

- 根據(jù)前面3D到2D屏幕的投射公式，自定義一個(gè)積木用來(lái)投射轉(zhuǎn)換； ?

- 接下來(lái)就依次投射1-6-2-5-3-6-4-5-1-2-3-4-1點(diǎn)，用畫(huà)筆畫(huà)出連接各點(diǎn)的軌跡。 ?

執(zhí)行“投射八面體“積木就可以畫(huà)出下面的形狀： ?

3. 移動(dòng) ?

物體移動(dòng)只需要改變它所有頂點(diǎn)的x,y,z值，然后再重新投射一次就可以了。 ?

注意這里物體的移動(dòng)是在原3D空間的移動(dòng)，所以物體在x軸方向或y軸方向移動(dòng)后，在屏幕上的投射會(huì)產(chǎn)生一定的旋轉(zhuǎn)效果。視點(diǎn)離投射平面越近，這種旋轉(zhuǎn)效果越明顯。 ?

物體在z軸方向的移動(dòng)會(huì)產(chǎn)生物體大小變化的視覺(jué)效果：物體遠(yuǎn)離視點(diǎn)時(shí)物體投射縮小，接近視點(diǎn)時(shí)物體投射增大。 ?

4. 旋轉(zhuǎn) ?

物體旋轉(zhuǎn)涉及到三角函數(shù)的知識(shí)。推導(dǎo)過(guò)程需要一定的篇幅。我們只需要記住簡(jiǎn)單的結(jié)論來(lái)應(yīng)用就可以了。 ?

旋轉(zhuǎn)可以分為三種：沿x軸的旋轉(zhuǎn)、沿y軸的旋轉(zhuǎn)和沿z軸的旋轉(zhuǎn)。 ?

- 沿x軸旋轉(zhuǎn)時(shí)，物體的x坐標(biāo)不變，y坐標(biāo)和z坐標(biāo)的變換規(guī)律是(A為旋轉(zhuǎn)角度)： ?

新的y坐標(biāo) = y * cos A + z * sin A； ?

新的z坐標(biāo) = z * cos A – y * sin A。 ?

- 沿y軸旋轉(zhuǎn)時(shí)，物體的y坐標(biāo)不變，x坐標(biāo)和z坐標(biāo)的變換規(guī)律是(A為旋轉(zhuǎn)角度)： ?

新的x坐標(biāo) = x * cos A – z * sin A； ?

新的z坐標(biāo) = x * sin A + z * sin A。 ?

- 沿z軸旋轉(zhuǎn)時(shí)，物體的z坐標(biāo)不變，x坐標(biāo)和y坐標(biāo)的變換規(guī)律是(A為旋轉(zhuǎn)角度)： ?

新的x坐標(biāo) = x * cos A – y * sin A； ?

新的y坐標(biāo) = x * sin A + y * cos A。 ?

顯示了沿z軸旋轉(zhuǎn)時(shí)的變換情況。有興趣的同學(xué)可以自己推導(dǎo)出坐標(biāo)的變換規(guī)律。 ?

注意上面說(shuō)的坐標(biāo)變化都是物體原3D坐標(biāo)的變化，而不是投射在2D平面上的投射坐標(biāo)的變化。換言之，旋轉(zhuǎn)改變物體坐標(biāo)后，還要重新計(jì)算投射坐標(biāo)。 ?