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

余莉摘

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

：B：1671-489X（2020）10-0028-031引言在《普通高等學(xué)校本科專業(yè)類教學(xué)質(zhì)量國家標(biāo)準(zhǔn)（2018版）》的“動(dòng)畫、數(shù)字媒體藝術(shù)、數(shù)字媒體技術(shù)專業(yè)教學(xué)質(zhì)量國家標(biāo)準(zhǔn)”中規(guī)定，計(jì)算機(jī)圖形學(xué)與數(shù)字圖像處理是數(shù)字媒體技術(shù)專業(yè)的專業(yè)主干課程。計(jì)算機(jī)圖形學(xué)的主要內(nèi)容是研究如何在計(jì)算機(jī)中表示圖形，以及利用計(jì)算機(jī)進(jìn)行圖形的計(jì)算、處理和顯示的相關(guān)原理與算法[1]，理論性強(qiáng)，比較抽象。課程的難點(diǎn)在于計(jì)算機(jī)圖形學(xué)研究范圍廣，與其他學(xué)科交叉性強(qiáng)，且知識(shí)不斷更新變化[2]。近年來，隨著應(yīng)用型本科的發(fā)展，學(xué)生的數(shù)學(xué)基礎(chǔ)、程序設(shè)計(jì)等能力又相對(duì)比較薄弱，所以對(duì)于圖形學(xué)原理和算法的理解與實(shí)現(xiàn)更是難上加難。目前，計(jì)算機(jī)圖形學(xué)課程的教學(xué)和評(píng)價(jià)環(huán)節(jié)側(cè)重于底層算法的實(shí)現(xiàn)和基于OpenGL的程序設(shè)計(jì)能力，不利于對(duì)于數(shù)媒專業(yè)學(xué)生的培養(yǎng)，也未能銜接后續(xù)課程，可使用更簡便的技術(shù)開發(fā)工具降低學(xué)生的學(xué)習(xí)門檻。2教學(xué)改進(jìn)課程定位

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

通過調(diào)查發(fā)現(xiàn)，現(xiàn)行的計(jì)算機(jī)圖形學(xué)實(shí)驗(yàn)教學(xué)主要有兩種：MFC應(yīng)用程序用C++語言編程模擬相關(guān)算法，或者用OpenGL圖形開發(fā)庫來模擬算法的實(shí)現(xiàn)[3]。這兩種方式的編程要求和學(xué)習(xí)門檻都比較高，也和數(shù)媒技術(shù)專業(yè)的課程定位不一致，所以選擇Three.js庫作為開發(fā)工具。Three.js是一個(gè)由JavaScript編寫的WebGL框架，開發(fā)者不需要精通WebGL的細(xì)節(jié)，就可以調(diào)用API直接在瀏覽器中創(chuàng)建三維場(chǎng)景，并進(jìn)行光照、材質(zhì)、紋理計(jì)算后的實(shí)時(shí)渲染，可以很方便地加載OBJ等格式的三維模型，也可使用鼠標(biāo)旋轉(zhuǎn)、平移和縮放，與虛擬場(chǎng)景進(jìn)行簡單交互[4]。采用JosDirksen編寫的《Three.js開發(fā)指南：WebGL的JavaScript3D庫》作為教材，孫家廣編寫的《計(jì)算機(jī)圖形學(xué)基礎(chǔ)教程》作為參考書目，既包含圖形學(xué)的主要內(nèi)容（涵蓋了圖形的幾何變換和投影變換、實(shí)體造型技術(shù)、真實(shí)感圖形學(xué)、計(jì)算機(jī)動(dòng)畫與場(chǎng)景交互），又介紹圖形學(xué)最新技術(shù)（粒子系統(tǒng)、自定義頂點(diǎn)和片段著色器）。通過大量的交互示例和示例代碼，學(xué)習(xí)計(jì)算機(jī)圖形學(xué)的基本原理和算法的應(yīng)用[5]，增強(qiáng)課堂教學(xué)的趣味性，有助于提高學(xué)生的學(xué)習(xí)熱情和學(xué)習(xí)效率。3教學(xué)反思本門課程共設(shè)置了三個(gè)實(shí)驗(yàn)，分別是第一個(gè)三維場(chǎng)景、三維圖形系統(tǒng)（變換、投影）和真實(shí)感圖形系統(tǒng)（光照、材質(zhì)、紋理）。每個(gè)實(shí)驗(yàn)完成后，都要及時(shí)對(duì)完成情況進(jìn)行反饋，展示優(yōu)秀作品進(jìn)行充分肯定和評(píng)價(jià)，激發(fā)其他學(xué)生的創(chuàng)作熱情，并且對(duì)不足之處和共性的問題進(jìn)行補(bǔ)充與講解。在實(shí)驗(yàn)中反映出來的問題主要在三維空間的建立、數(shù)字內(nèi)容的制作和技術(shù)工具的使用這三個(gè)方面。三維空間的建立1）三維空間坐標(biāo)系。Three.js的坐標(biāo)系遵循右手坐標(biāo)系，坐標(biāo)系的原點(diǎn)在畫布中心，水平向右X軸，垂直向上Y軸，如圖1所示的中指方向?yàn)閆軸。坐標(biāo)系的單位可以是1.0米/英寸/千米/里格，這取決于開發(fā)者，唯一的要求是必須使用統(tǒng)一的測(cè)量單位，投影和其他變換在本質(zhì)上都是無單位的[6]。初學(xué)者可以通過Three.js提供的“THREE.AxisHelper（）”輔助方法將坐標(biāo)系可視化，如圖2所示，該圖的照相機(jī)位置為（-30，40，50）。實(shí)驗(yàn)中，有學(xué)生制作了一個(gè)在地面上行走的小兔子，“但是始終不知道怎么將兔子的整體向上移動(dòng)，就造成了地面橫切進(jìn)了身體的現(xiàn)象”，如圖3a所示。為了解決學(xué)生對(duì)坐標(biāo)系的困惑，首先添加輔助坐標(biāo)系，如圖3b所示，可見小兔子的position（即小兔子的重心）的y軸坐標(biāo)偏低，只需要修改小兔子的y軸坐標(biāo)，即可得到圖3c的效果2）位置的動(dòng)畫。還有學(xué)生搭建了一輛小車，但“實(shí)驗(yàn)中遇到的一些問題并未解決，如對(duì)車整體前進(jìn)，無論怎么調(diào)試，都無法將車運(yùn)動(dòng)起來”，如圖4a所示。添加輔助坐標(biāo)系后，發(fā)現(xiàn)只需要修改小車的z值就可以了，如圖4b所示，代碼為在“requestAnimationFrame（renderScene）;”回調(diào)的“renderScene（）”函數(shù)中添加“group.position.z-=0.02;”語句。由輔助坐標(biāo)系觀察可得，z值減少是小車往樹的方向運(yùn)動(dòng)，z值增加是往相反的方向運(yùn)動(dòng)。關(guān)于位置的動(dòng)畫有兩種常見的模式，一種是跑馬燈效果動(dòng)畫，即一端消失后從另一端出現(xiàn)，代碼為“if（group.position.z<-地面長/2）group.position.z=

地面長/2;”;另一種是往返方式，即循環(huán)往返于兩個(gè)邊界處，代碼為“varflag=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制作的耳朵、眼睛、頭、軀干和四肢，再組合成兔子，并且分別貼了紋理圖片，可以做局部以及整體的動(dòng)畫。2）外部加載模型。使用基本幾何體創(chuàng)建模型的工作量比較大，使用基礎(chǔ)的加載器如Loader、紋理加載器如TextureLoader、文件加載器如OBJLoader等各種加載器[7]，Three.js可以加載JSON、OBJ、STL、CTM等多種格式的模型[8]，降低了模型制作的成本。如圖6a中房子的模型是學(xué)生用3DMAX做的，沒有畫貼圖;圖6b是學(xué)生在MAYA上制作的一個(gè)火箭模型。dat.GUI工具的使用

為了能夠快速地搭建three.js的交互ui，可引入輔助插件dat.GUI，通過簡單的學(xué)習(xí)就能夠使用。使用這個(gè)插件可以很容易地調(diào)配出需要的顏色、光源、速度等。dat.GUI使用過程如下。4目前改進(jìn)效果及下一步計(jì)劃目前改進(jìn)效果

學(xué)生評(píng)教結(jié)果如圖8所示，使用Three.js的計(jì)算機(jī)圖形技術(shù)教學(xué)，評(píng)教結(jié)果有了很大進(jìn)步，這對(duì)于教學(xué)型大學(xué)是很有益處的。下一步建設(shè)計(jì)劃

下一步的工作可從兩個(gè)方面展開：1）組合得到的新模型鼠標(biāo)未能拾取到，目前還沒有找到解決方案;2）虛擬場(chǎng)景漫游中碰撞檢測(cè)的實(shí)現(xiàn)，以及提高實(shí)時(shí)繪制性能的LOD技術(shù)等。Reference[1]劉晉鋼，孔令德，王進(jìn)忠.“計(jì)算機(jī)圖形學(xué)”課程新教學(xué)模式的研究與實(shí)踐[J].計(jì)算機(jī)教育，2010（3）：63-65.[2]梁棟，孫涵.面向工程實(shí)踐的本科生計(jì)算機(jī)圖形學(xué)課程改革思路[J].科教導(dǎo)刊，2017（5）：31-32.[3]夏力前.數(shù)字媒體技術(shù)專業(yè)計(jì)算機(jī)圖形學(xué)教學(xué)內(nèi)容研究[J].中國教育技術(shù)裝備，2017（4）：91-92.[4]趙海鵬，周楊，卞和方.基于Three.js的三維虛擬校園系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].蘭州交通大學(xué)學(xué)報(bào)，2019（3）：85-94.[5]德克森.Three.js開發(fā)指南：WebGL的JavaScript3D庫[M].北京：機(jī)械工業(yè)出版社，2017.[6]WooM，NeiderJ，DavisT，etal.OpenGLProgra-mmingGuide：TheOfficialGuidetoLearningOpenGL，Vers