使用Three.js的計算機圖形技術(shù)課程教學(xué)反思

余莉

摘? 要 《普通高等學(xué)校本科專業(yè)類教學(xué)質(zhì)量國家標準（2018版）》規(guī)定，計算機圖形學(xué)與數(shù)字圖像處理是數(shù)字媒體技術(shù)專業(yè)的專業(yè)主干課程。經(jīng)過分析上海建橋?qū)W院數(shù)字媒體技術(shù)專業(yè)培養(yǎng)方案，把計算機圖形技術(shù)課程定位為培養(yǎng)數(shù)字內(nèi)容制作及相關(guān)技術(shù)工具開發(fā)能力，以制作型人才為主，并選擇Three.js庫作為開發(fā)工具，課程既包含圖形學(xué)的主要內(nèi)容，又介紹圖形學(xué)最新技術(shù)。經(jīng)過一輪教學(xué)，對學(xué)生在三維空間的建立、數(shù)字內(nèi)容的制作和技術(shù)工具的使用這三個方面暴露的問題進行反思，對下一步的工作進行展望。

關(guān)鍵詞 Three.js;數(shù)字媒體技術(shù)專業(yè);計算機圖形技術(shù);課程定位;數(shù)字媒體技術(shù)

中圖分類號：G642.3? ? 文獻標識碼：B

文章編號：1671-489X（2020）10-0028-03

1 引言

在《普通高等學(xué)校本科專業(yè)類教學(xué)質(zhì)量國家標準（2018版）》的“動畫、數(shù)字媒體藝術(shù)、數(shù)字媒體技術(shù)專業(yè)教學(xué)質(zhì)量國家標準”中規(guī)定，計算機圖形學(xué)與數(shù)字圖像處理是數(shù)字媒體技術(shù)專業(yè)的專業(yè)主干課程。計算機圖形學(xué)的主要內(nèi)容是研究如何在計算機中表示圖形，以及利用計算機進行圖形的計算、處理和顯示的相關(guān)原理與算法[1]，理論性強，比較抽象。課程的難點在于計算機圖形學(xué)研究范圍廣，與其他學(xué)科交叉性強，且知識不斷更新變化[2]。近年來，隨著應(yīng)用型本科的發(fā)展，學(xué)生的數(shù)學(xué)基礎(chǔ)、程序設(shè)計等能力又相對比較薄弱，所以對于圖形學(xué)原理和算法的理解與實現(xiàn)更是難上加難。

目前，計算機圖形學(xué)課程的教學(xué)和評價環(huán)節(jié)側(cè)重于底層算法的實現(xiàn)和基于OpenGL的程序設(shè)計能力，不利于對于數(shù)媒專業(yè)學(xué)生的培養(yǎng)，也未能銜接后續(xù)課程，可使用更簡便的技術(shù)開發(fā)工具降低學(xué)生的學(xué)習(xí)門檻。

2 教學(xué)改進

課程定位? 經(jīng)過研讀國家標準與上海建橋?qū)W院數(shù)字媒體技術(shù)專業(yè)的培養(yǎng)方案，確定學(xué)生應(yīng)具有數(shù)字內(nèi)容制作及相關(guān)技術(shù)工具開發(fā)的能力，以制作型人才為主。計算機圖形技術(shù)的課程定位也與創(chuàng)作型（研發(fā)型）不同，不要求學(xué)生實現(xiàn)圖形學(xué)的原理與算法，而是深入理解并運用這些原理與算法，用于后續(xù)的三維設(shè)計與制作、虛擬現(xiàn)實等課程。

教材的選擇? 通過調(diào)查發(fā)現(xiàn)，現(xiàn)行的計算機圖形學(xué)實驗教學(xué)主要有兩種：MFC應(yīng)用程序用C++語言編程模擬相關(guān)算法，或者用OpenGL圖形開發(fā)庫來模擬算法的實現(xiàn)[3]。這兩種方式的編程要求和學(xué)習(xí)門檻都比較高，也和數(shù)媒技術(shù)專業(yè)的課程定位不一致，所以選擇Three.js庫作為開發(fā)工具。Three.js是一個由JavaScript編寫的WebGL框架，開發(fā)者不需要精通WebGL的細節(jié)，就可以調(diào)用API直接在瀏覽器中創(chuàng)建三維場景，并進行光照、材質(zhì)、紋理計算后的實時渲染，可以很方便地加載OBJ等格式的三維模型，也可使用鼠標旋轉(zhuǎn)、平移和縮放，與虛擬場景進行簡單交互[4]。

采用Jos Dirksen編寫的《Three.js開發(fā)指南：WebGL的JavaScript 3D庫》作為教材，孫家廣編寫的《計算機圖形學(xué)基礎(chǔ)教程》作為參考書目，既包含圖形學(xué)的主要內(nèi)容（涵蓋了圖形的幾何變換和投影變換、實體造型技術(shù)、真實感圖形學(xué)、計算機動畫與場景交互），又介紹圖形學(xué)最新技術(shù)（粒子系統(tǒng)、自定義頂點和片段著色器）。通過大量的交互示例和示例代碼，學(xué)習(xí)計算機圖形學(xué)的基本原理和算法的應(yīng)用[5]，增強課堂教學(xué)的趣味性，有助于提高學(xué)生的學(xué)習(xí)熱情和學(xué)習(xí)效率。

3 教學(xué)反思

本門課程共設(shè)置了三個實驗，分別是第一個三維場景、三維圖形系統(tǒng)（變換、投影）和真實感圖形系統(tǒng)（光照、材質(zhì)、紋理）。每個實驗完成后，都要及時對完成情況進行反饋，展示優(yōu)秀作品進行充分肯定和評價，激發(fā)其他學(xué)生的創(chuàng)作熱情，并且對不足之處和共性的問題進行補充與講解。在實驗中反映出來的問題主要在三維空間的建立、數(shù)字內(nèi)容的制作和技術(shù)工具的使用這三個方面。

三維空間的建立

1）三維空間坐標系。Three.js的坐標系遵循右手坐標系，坐標系的原點在畫布中心，水平向右X軸，垂直向上Y軸，如圖1所示的中指方向為Z軸。坐標系的單位可以是1.0米/英寸/千米/里格，這取決于開發(fā)者，唯一的要求是必須使用統(tǒng)一的測量單位，投影和其他變換在本質(zhì)上都是無單位的[6]。初學(xué)者可以通過Three.js提供的“THREE.AxisHelper（）”輔助方法將坐標系可視化，如圖2所示，該圖的照相機位置為（-30，40，50）。

實驗中，有學(xué)生制作了一個在地面上行走的小兔子，“但是始終不知道怎么將兔子的整體向上移動，就造成了地面橫切進了身體的現(xiàn)象”，如圖3a所示。為了解決學(xué)生對坐標系的困惑，首先添加輔助坐標系，如圖3b所示，可見小兔子的position（即小兔子的重心）的y軸坐標偏低，只需要修改小兔子的y軸坐標，即可得到圖3c的效果

2）位置的動畫。還有學(xué)生搭建了一輛小車，但“實驗中遇到的一些問題并未解決，如對車整體前進，無論怎么調(diào)試，都無法將車運動起來”，如圖4a所示。添加輔助坐標系后，發(fā)現(xiàn)只需要修改小車的z值就可以了，如圖4b所示，代碼為在“requestAnimationFrame（renderScene）;”回調(diào)的“renderScene（ ）”函數(shù)中添加“group.position.z -= 0.02;”語句。由輔助坐標系觀察可得，z值減少是小車往樹的方向運動，z值增加是往相反的方向運動。

關(guān)于位置的動畫有兩種常見的模式，一種是跑馬燈效果動畫，即一端消失后從另一端出現(xiàn)，代碼為“if （group.position.z < -地面長/2） group.position.z =?地面長/2;”;另一種是往返方式，即循環(huán)往返于兩個邊界處，代碼為“var flag = 1; if （group.position.z > 地面長/2 || group.position.z < -地面長/2） flag=-flag; group.position.z += flag*0.2;”。

數(shù)字內(nèi)容制作

1）組合或合并得到新幾何體。數(shù)字內(nèi)容制作是數(shù)媒專業(yè)的核心能力之一，可以通過Three.js自帶的功能來組合或合并已有的幾何體，創(chuàng)建出新的幾何體。如圖5所示的兩只小兔子，就是通過基本的cube、sphere制作的耳朵、眼睛、頭、軀干和四肢，再組合成兔子，并且分別貼了紋理圖片，可以做局部以及整體的動畫。

2）外部加載模型。使用基本幾何體創(chuàng)建模型的工作量比較大，使用基礎(chǔ)的加載器如Loader、紋理加載器如TextureLoader、文件加載器如OBJLoader等各種加載器[7]，Three.js可以加載JSON、OBJ、STL、CTM等多種格式的模型[8]，降低了模型制作的成本。如圖6a中房子的模型是學(xué)生用3DMAX做的，沒有畫貼圖;圖6b是學(xué)生在MAYA上制作的一個火箭模型。

dat.GUI工具的使用? 為了能夠快速地搭建three.js的交互ui，可引入輔助插件dat.GUI，通過簡單的學(xué)習(xí)就能夠使用。使用這個插件可以很容易地調(diào)配出需要的顏色、光源、速度等。dat.GUI使用過程如下。

4 目前改進效果及下一步計劃

目前改進效果? 學(xué)生評教結(jié)果如圖8所示，使用Three.js的計算機圖形技術(shù)教學(xué)，評教結(jié)果有了很大進步，這對于教學(xué)型大學(xué)是很有益處的。

下一步建設(shè)計劃? 下一步的工作可從兩個方面展開：

1）組合得到的新模型鼠標未能拾取到，目前還沒有找到解決方案;

2）虛擬場景漫游中碰撞檢測的實現(xiàn)，以及提高實時繪制性能的LOD技術(shù)等。

參考文獻

[1]劉晉鋼，孔令德，王進忠.“計算機圖形學(xué)”課程新教學(xué)模式的研究與實踐[J].計算機教育，2010（3）：63-65.

[2]梁棟，孫涵.面向工程實踐的本科生計算機圖形學(xué)課程改革思路[J].科教導(dǎo)刊，2017（5）：31-32.

[3]夏力前.數(shù)字媒體技術(shù)專業(yè)計算機圖形學(xué)教學(xué)內(nèi)容研究[J].中國教育技術(shù)裝備，2017（4）：91-92.

[4]趙海鵬，周楊，卞和方.基于Three.js的三維虛擬校園系統(tǒng)設(shè)計與實現(xiàn)[J].蘭州交通大學(xué)學(xué)報，2019（3）：85-94.

[5]德克森.Three.js開發(fā)指南：WebGL的JavaScript 3D庫[M].北京：機械工業(yè)出版社，2017.

[6]Woo M， Neider J， Davis T， et al. OpenGL Progra-mming Guide： The Official Guide to Learning OpenGL， Version 1.2[M].Addison-Wesley Longman Publishing Co.?Inc，1999.

[7]蘇亞光，王冬，劉佳.通過Three.js引擎加載STL模型[J].電腦編程技巧與維護，2016（10）：7-8.

[8]聶帥，秦爽，麥文.通過Three.js引擎加載OBJ模型[J].科學(xué)技術(shù)創(chuàng)新，2019（14）：80-82.