3D建模與程式設計

課程總覽


學校日簡報

學校日簡報六年級下學期

單元一:海龜畫圖

LOGO 海龜畫圖

Logo是一種電腦程式設計語言,在1966年由西摩爾·派普特和Wally Feurzeig設計,Logo一詞源自希臘語邏各斯(logos)。Logo是一種直譯語言,和其他語言不同的是,它內建一套海龜繪圖(Turtle Graphics)系統,通過向海龜傳送命令,使用者可以直觀地學習程式的執行過程,因此很適於初學者特別是兒童學習程式設計。

海龜繪圖使得Logo使用者可以通過簡單的編程創作出豐富多彩的視覺效果或圖案。假想一隻帶著畫筆的海龜可以接受簡單的命令,例如向前走100步,或者左轉30度。通過對這隻海龜傳送命令,可以讓它繪製出較為複雜的圖形,例如正方形,三角形,圓等。

海龜的移動相對於它本身所在的位置。例如,命令"左90"意味著讓海龜左轉90度,學生可以站在海龜的角度來思考它將如何執行命令,這使得程式設計更加形象化,也更易於理解。

LOGO 海龜畫圖線上版

code.org 冰雪奇緣闖關活動

網址:https://studio.code.org/s/frozen

底下三個難關,請依據老師課堂上的提示,嘗試過關:

第六關:巢狀迴圈的應用

第十關:平行四邊形四個外角的計算方法

第十四關:自定義函式(Function)的應用

從畫點到畫線

要在舞臺上畫出線條,必須用到 Scratch 的畫筆積木

使用畫筆積木,應該先做「初始化」,也就是把舞台上所有筆跡清除,並讓畫筆角色回到舞台中央面朝上

練習使用函式積木定義自己的指令積木

使用新定義的積木清除畫布(舞臺)

幾何學裡面最基本的單位是點,畫點可以使用「下筆」積木

連續畫點就會形成線,右圖的「畫線」積木用來畫長度 100 的線

改成自行輸入線的長度,積木會更好用,函式積木可以定義輸入方塊以接受外部輸入的資料,在程式設計裡這些方塊被稱為:引數(或稱為「參數」)

引數與變數功能相同,但作用範圍不同,引數僅在該函式積木內有作用。

輸入方塊有兩種:數字或文字、布林值,我們要使用的是前者,並將該輸入方塊命名為 x,你可以把 x 當成該函式積木的內建變數來使用(用拖曳方式引用)

正多邊形的畫法

我們知道繞一圈回原位就是轉 360 度,三角形可以想成是圓形的變形(把一個圓形的橡皮筋套在三根鐵釘上面),因此畫完每一邊要轉 360÷3=120 度,總共要畫三次。

其餘多邊形也可以想成是圓形的變形,畫 N 邊形每次要轉 360÷N 度

把長度和邊數改成輸入方塊並命名為 y 和 z,設計出多邊形函式積木。

利用剛剛設計好的多邊形積木,我們可以畫出複雜圖形

右邊範例是畫 10 個 5 邊形繞一圈的結果,請小朋友自行修改邊長和邊數化出不同的複雜圖形,也可以修改重複次數,但右轉角度也必須同步修改。

圓的畫法

多邊形積木也可以用來畫圓形,方法是把長度改為 1 或 2,邊數改成 360 邊。

我們習慣用直徑來測量圓形的大小,利用多邊形積木畫圓,必須改用邊長,比較難掌握畫出來的大小。

請嘗試設計一個新的積木來畫圓,輸入的資料是直徑。

把直徑乘以圓周率(3.14)算出周長,然後把周長除以 360 就得到 360 邊形的邊長。這樣我們就可以畫出正確大小的圓。

弧的應用

畫圓畫一半就會得到弧線,我們根據畫圓的積木,設計一個新的畫弧積木。

利用畫弧積木,可以進一步設計出更多複雜圖案。

組合兩個弧變成花瓣,然後利用花瓣積木,畫出不同花瓣數量的花。

作業:請利用隨機數在舞台的任意位置,繪製 3 ~ 12 個花瓣,大小 20 ~ 60 的花朵,記得修改畫筆顏色,以呈現出五彩繽紛的花園氣氛。 

範例程式:https://e.meps.tp.edu.tw/scratch/turtle_draw.html

補充資料:五芒星畫法

要畫五芒星,那就先研究三芒星畫法,所謂三芒星其實就是正三角形。小朋友已經知道三角形內角和是 180 度,也就是說「三芒星的三個芒角加起來是 180 度」,事實上「五芒星的五個芒角加起來也是 180 度」。

要畫五芒星的話,就是要把 180 度分給 5 個芒角,180÷5=36,每個芒角 36 度。用海龜來畫圖,每次轉彎的角度是外角,外角的算法是 180-內角,以五芒星為例,就是 180-36=144 度。

下面最右邊的積木可以用來畫任意奇數的芒星,但偶數芒星的算法太複雜,這裡略過不討論。

補充資料:螺旋與遞迴

利用課堂上所設計的「畫弧」函式積木,可以進一步畫出螺旋線,方法是一邊畫弧線,然後一邊把直徑縮小,例如:每畫一條 90 度的弧線就把直徑縮小 5 點,一直縮小到直徑為 0 時停止。

這是一個需要反覆執行相同動作的程式,可以利用「重複執行直到」積木來製作,如下圖左邊的函式積木。這個函式積木裡面需要對「引數(參數)」進行運算操作,但可惜 Scratch 的「引數(參數)」不提供運算功能,所以只能改用變數來設計。

換個方式來思考,把螺旋線最外面一條 90 度弧線擦掉,剩下的圖形也是螺旋線,以此類推,我們可以發現螺旋線就是由更小的螺旋線組成的。只要反覆執行「螺旋線積木」就可以把整個螺旋線畫好。這種函式積木「引用自身」的做法稱為「遞迴」演算法。

下面右側示範的是最簡單的遞迴程式,僅只引用自身一次,而這一次不需要用到變數。下列兩個程式的執行結果完全相同,仔細觀察比較很快就會發現「遞迴其實就是重複執行的另一種寫法」。

單元二:浮雕建模(已經學過的小朋友,請忽略)

浮雕雕刻的一種,藝術家在一塊平板上將他要塑造的形象雕刻出來,使它脫離原來材料的平面。在 3D 建模裡面,浮雕建模被稱為 2.5D 建模,意思是介於平面和立體之間。

浮雕一般可以分為陽刻和陰刻,與之相對的 2.5D 建模也可分為凸雕凹雕種技法。如果想要的圖案浮在表面材料上面,就是凸雕。如果是沈入於表面材料之中,則稱為凹雕

生活中屬於 2.5D 的物品有:招牌、名、匾額、印章、杯墊、隔熱墊、行李吊牌......等等。這些物品都可以使用 3D 建模軟體繪製,然後透過 3D 印表機製作出來。

3D建模方式可分為六種:

優秀學生作品

多邊形建模

連接網址:https://www.tinkercad.com/,按右上角的「登入」按鈕

登入頁面出現後,點擊「學生,加入您的課程」,然後輸入課程代碼(由老師提供)

點擊課程歡迎畫面下方的「Google」圖示,使用學校提供的學生郵件信箱帳號加入課程。

Tinkercad 教學示範影片

單元三:立體建模

三維座標系

在幾何學概念中,「點」是不佔有空間的,僅用來表示「位置」,所以是 0D。「線」是點運動的軌跡,除了位置之外還佔有長度空間,稱為 1D。將線連續排列在一起形成「面」,除了在立體空間的位置外,還佔有長、寬兩種空間,也就是 2D,而「體」則是將面疊在一起而有了高度,因此稱為 3D。

三維座標系即三維空間座標系統,使用三個參數來標示三維空間中的每一個點,右圖是常用的直角座標系,分別用 X、Y、Z 代表三維,而 x、y、z 則是點(x,y,z)與原點 O 在三維上面的距離。

利用電腦來表示 3D 物體的方法就是建立 3D 模型,要將 3D 模型顯示在 2D 螢幕上,需要運用「投射」數學對 3D 模型進行演算,稱為「算圖」(render)。

投射數學源於文藝復興時期的畫家「達文西」所發明的「透視法」,是一種把立體三維空間的形象表現在二維平面上的繪畫方法。達文西是一個博學者:在繪畫音樂建築數學幾何學解剖學生理學動物學植物學天文學氣象學地質學地理學物理學光學力學發明土木工程等領域都有顯著的成就。

取自維基百科

三視圖

除了「透視法」以外還有另外一種將立體投影成平面的方法,稱為「三視圖」。當我們觀察一個物體時,隨著觀測者位置的不同會有上面、下面、左面、右面、面、後面共六個角度,將看到的物體輪廓測量繪製出來的圖形稱為「視圖」,由於上、下視圖方向相反但圖形相同,左、右視圖和前、後視圖也是如此,因此可以把六個視圖歸納成兩個兩個一組,上視圖和下視圖合稱「俯視圖」,左視圖和右視圖合稱「側視圖」,前視圖和後視圖合稱「正視圖」,這三種視圖合稱「三視圖」。

下圖取自國家教育研究院「三視圖-從哪裡看?」教師手冊,請仔細觀察圖表,是否有發覺「透視圖」與「三視圖」之間的關係呢?

草圖 3D 建模

在前一單元介紹過的 3D 建模軟體分類中,參數建模(CAD 電腦輔助設計)這一個類別,通常是從繪製草圖開始,然後再調整各種參數,例如:位置、大小、角度、曲度...等等,製作出可以用於鍛造衝床的 3D 模型。這裡介紹的草圖建模是一種簡化的 CAD,運用多個不同平面的草圖,進行交集、聯集數學運算來產生 3D 模型,不但直觀易學,也比較適合用於 3D 印表機製作模型。

右圖為有固定式安全防護裝置的衝床

草圖的參考平面

當我們開始繪製 3D 模型時,參考平面是我們工作的基礎,就像一張無形的紙張,我們需要選擇在哪張紙上進行繪圖。大多數 3D 建模軟體會提供三個主要的參考平面,它們彼此垂直,就像三維空間中的坐標軸。以下是這些平面的簡單解釋:

XY 平面(俯視圖)

這是 X 軸和 Y 軸所構成的平面。它通常代表水平的工作平面,就像桌面一樣,適合繪製俯視圖(從上往下看)或水平的形狀。

YZ 平面(側視圖)

這是 Y 軸和 Z 軸所構成的平面,它通常代表垂直於地面的平面,像是一堵牆,適合繪製側視圖(從側面看)。

XZ 平面(正視圖)

這是 X 軸和 Z 軸所構成的平面,它也代表一個垂直平面,但是正對著我們的方向,像站在你面前的黑板,適合繪製正視圖(從正面看)。


3D立體參考平面

為什麼參考平面很重要?

可以把參考平面想像成遊戲中的棋盤,棋盤上的格子是我們可以放置的區域。選擇合適的棋盤,才能確保你的棋子放在正確的位置,整個遊戲才會運作順利。

草圖的閉合性

線條可以拉伸為一個平面,一個平面可以拉伸成一個立體,草圖需要是一個封閉的輪廓,也就是一個完整的平面,才能進一步進行拉伸成為立體,否則它只是線條而已,所以在製作上要沒有開口或重疊的幾何線條。

基礎3D操作概念

拉伸(Extrude):從封閉草圖生成直線方向的3D形狀。

旋轉(Revolve):旋轉是必要基礎,因為電腦的3D畫面並非真正3D畫面,而是數學模擬出來的,因為設備的限制無法分辨遠近,例如在XY平面上無法順利的觀測Z軸的變化,所以需要藉由時常的旋轉來觀察整個形體。

問題:為什麼人眼可以輕易的在xy平面上觀察Z軸的變化,也就是很容易的注意到深度的變化?

雙眼視覺

有關遠近的問題,由於人眼是屬於雙眼視覺,形成的視差可以輔助產生精細的深度知覺,進而產生立體視覺,所以人眼能在真實的XY平面上觀測Z軸的變化 。

視錯覺

透過幾何排列、視覺成像規律等手段,製作有「視覺欺騙」成分的圖像進行眼球欺騙,引起的視覺上的錯覺,可以達到藝術或者類似魔術般的效果。當我們觀察立體圖形時,兩隻眼睛的可視範圍合起來大約是 124 度左右,無法同時看到圖形的左右兩側,而人類的大腦會根據有限的視覺訊息去想像和推測不足的部分,因此很容易造成視錯覺,例如:凹面看成凸面、斷裂的圖形看成是連接的......等等。

Shapr 3D

Shapr3D 是一套開源軟體,基於西門子 Parasolid® 引擎所建構的 CAD 系統,所有 3D 建模工具的格式均有支援。

可以從這裡下載:https://www.shapr3d.com/

教育版完全免費,但需要上傳教師證、學生證進行驗證。如果未經過驗證一樣可以免費使用,但會有儲存容量限制,以及部分進階功能(例如:視覺化功能)無法使用。

自學:Shapr3D有良好的自學介面,同學第一次進入可以先完成「基本知識」操作學習,如果沒有看到第一次的「基本知識」操作畫面,可以參考右圖的操作方式找到這個功能。

Shapr3D基本介紹

由平面建模立體的Shapr3D (角錐篇)

由平面建模立體的Shapr3D (球形篇)


實作3D建模椅子

進入編輯頁面之後,首先要告訴 Sharp3D 我們要從哪一個平面來建立平面的草稿,這個草稿未來將會抽出成為這個3D物件的一個基礎的立體形狀,所以請選擇XY平面的平面稿繪製,操作方式:草圖→新增,選擇要在XY平面上編輯。


第二步驟需要選擇我們要繪製什麼樣的平面圖形,我們這邊先從建立椅子的座塾部分,我們可以使用矩形繪製椅面,第一次建立建議選取矩形功能,並且在XY平面上繪製一個椅面的正方形。

第三步驟開始將剛才所繪製的草稿立體化,由於在XY平面(俯視圖)的角度是無法抽出Z的方向,所以必需先旋轉到XYZ都可以控制的角度再進行抽出,請操作:

Shift+滑鼠右鍵旋轉至適合角度後,使用鍵頭將平面抽出,成為一個立體。

步驟四:從平面上的草稿到完成一張完整的椅子

可以在已有的3D形體當中,再找其中的一個面,來抽出成為椅腳、椅背或其它裝飾,最後完成整個作品,同學若有不清楚可以參考下面的影片「Shapr3D教學 | 3D建模實戰:手把手教你設計椅子」,依序操作,也可以發揮你的創意,創造一張專屬於你夢想中的椅子喔。

作業:3D建模 | 實作一張夢想中的椅子

說明請各位同學使用參考平面來3D建模一張椅子,同學可以依照講義的教學步驟加上創意來完成作品,完成後,請產生三張截圖「俯視圖、側視圖、正視圖」並將成果上傳至老師要求指定交作業的平台,完成作業繳交。

Blender

是專業的自由及開放原始碼3D電腦圖形軟體擁有極豐富的高階模組塑造功能,可用於捏塑、建立 3D 模型、材質貼圖、製作 3D 動畫......等等。

作業系統安裝 Blender 軟體示範

Blender軟體非商業性質,是開源軟體,完全免費無病毒,也沒有廣告或試用期,同學可以在家裡的電腦裡嘗試自行安裝,以利學習。

在Windows上安裝Blender

在Mac (蘋果電腦) 上安裝 Blender

跟著一起做:3D建模示範操作教學影片~~堆雪人

單元四:文字型程式遊戲

什麼是程式語言?

所謂「程式語言」是指用來向電腦發出指令,讓電腦能因應不同狀況採取適當行動的「人工語言」,與自然演化而來的「自然語言」不同例如:國語、英語......等)兩者之間的差異除了產生方式不同、使用目的不同之外,主要的差異是:人工語言有嚴格的語法定義,不符合規範的語法將無法解析意義,具有「單義性」;自然語言則會根據個別使用者允許有語法、意義上的差異,這種特性稱為「多義性」。

最早的程式語言是在電腦發明之前產生的,當時是用來控制提花織布機自動演奏鋼琴的動作而在電腦發明之後,專為電腦設計的「電腦程式語言」大量出現,至今已將近有 1000 種,並且每年仍有新的電腦程式語言誕生。隨著電腦科學的發展,無論是提花織布機或自動演奏鋼琴都已經改由電腦直接控制,也因此「程式語言」通常就是指「電腦程式語言」。

自然語言是先用語音來表達語意(程式語言中稱為語義)然後才發明文字,有了文字以後才發展出文法(程式語言中稱為語法)。而程式語言則一開始就先發展語法,透過語法來定義語義。「語法」是說明程式設計語言中,哪些符號或文字的組合方式是正確的,「語義」則是對於程序的解釋。

過去學過的 Scratch 算不算是一種程式語言呢?如果從 Scratch 積木僅有「語義」沒有定義「語法」的特性來判斷,Scratch 並非傳統所說的「程式語言」,之所以沒有語法是為了避免輸入程式時會有「語法錯誤」導致程式無法正常運作,對於不熟悉程式語言的小朋友來說,要檢查出語法錯在哪裡,會是一件痛苦而且耗時的工作,也可能因此導致小朋友喪失學習興趣。

然而 Scratch 積木所堆積出來的程式是可以確實執行的,在「語義」方面是完整可行的,與傳統所說的「程式語言」並沒有不同。因此有些程式語言專家認為 Scratch 是一種「視覺化」程式語言,因為 Scratch 是透過視覺操作介面用滑鼠拖拉來寫程式,而不是用文書處理軟體(例如:記事本)來寫程式。「視覺化」程式語言只是讓小朋友在接觸真正的「程式語言」之前,培養邏輯與運算思維的工具,其最終目標是要讓小朋友熟悉「文字型」程式語言。

CodeCombat

Python 是一種擁有簡潔語法,容易理解的語言,因此非常適合作為「文字型」程式語言入門學習使用。除此之外,Java Script 也是一種適合作為入門學習的程式語言。透過遊戲方式來學習 Python(或 Java Script)是一件輕鬆又有趣的方法,特別是底下推薦的「CodeCombat」遊戲網站。

請點選右圖右上角的圖示,進入 CodeCombat 網站,然後點選「我是學生」,輸入班級代碼(由老師提供)

進入登入畫面後,請點選右下角的「Sign in with Google」按鈕,使用學校提供的學生信箱帳號密碼登入。

打開 gmail 信箱收取 CodeCombat 網站寄給你的「確認信」,並啟用帳號。

看老師示範前面 2 關並講解遊戲玩法,然後自己嘗試闖關,祝你好運囉!