基于Three.js的大學(xué)物理在線仿真實(shí)驗(yàn)開發(fā)

曲 典， 嚴(yán)華剛， 張智河， 許莉莉， 黃曉清， 師 煒

（首都醫(yī)科大學(xué)生物醫(yī)學(xué)工程學(xué)院，北京 100069）

0 引 言

虛擬仿真實(shí)驗(yàn)很好地豐富了教學(xué)輔助手段，完善了物理實(shí)驗(yàn)教學(xué)環(huán)節(jié)，克服了實(shí)驗(yàn)教學(xué)長期受到課堂、課時限制的困擾，使實(shí)驗(yàn)教學(xué)在時間和空間上得到延伸［1-2］。虛擬仿真實(shí)驗(yàn)和實(shí)操實(shí)驗(yàn)相結(jié)合，為創(chuàng)建更有利于學(xué)生自主學(xué)習(xí)的線上和線下相結(jié)合的實(shí)驗(yàn)教學(xué)模式提供可能［3］。同時，實(shí)驗(yàn)教學(xué)中發(fā)現(xiàn)，有些實(shí)驗(yàn)儀器操作復(fù)雜，學(xué)習(xí)難度較大，學(xué)生難以通過講義和實(shí)驗(yàn)講解視頻進(jìn)行有效預(yù)習(xí)，影響實(shí)驗(yàn)學(xué)習(xí)的效果。目前大學(xué)物理的虛擬仿真實(shí)驗(yàn)多為二維場景下的實(shí)驗(yàn)操作。而有些實(shí)驗(yàn)，如“分光計實(shí)驗(yàn)”，對學(xué)生空間思維能力要求較高，二維場景下學(xué)生無法看到實(shí)驗(yàn)儀器內(nèi)部結(jié)構(gòu)或者光路，導(dǎo)致對實(shí)驗(yàn)原理的理解存在較大困難。研究開發(fā)設(shè)計的虛擬仿真實(shí)驗(yàn)是以三維實(shí)驗(yàn)場景和動畫形式完成實(shí)驗(yàn)具體操作，很好地解決了二維場景下虛擬仿真實(shí)驗(yàn)的局限性；類游戲操作實(shí)驗(yàn)環(huán)境，友好的交互方式，提高了學(xué)生實(shí)驗(yàn)學(xué)習(xí)興趣，從而達(dá)到較好的實(shí)驗(yàn)教學(xué)和實(shí)驗(yàn)學(xué)習(xí)效果；瀏覽器訪問大大提高了學(xué)生在線學(xué)習(xí)便利性，有利于推廣和使用。

1 Three.js簡介

在基于網(wǎng)頁的前端網(wǎng)絡(luò)應(yīng)用開發(fā)中，HTML ＋CCS＋JavaScript是一種常見的開發(fā)模式，其中HTML語言負(fù)責(zé)網(wǎng)頁的內(nèi)容，CCS 負(fù)責(zé)網(wǎng)頁的格式和樣式，而JavaScript語言則負(fù)責(zé)交互與應(yīng)用。WebGL 是一種JavaScript的三維圖形編程接口，給在線三維虛擬仿真程序的開發(fā)創(chuàng)造了新的機(jī)遇［4-6］。但原生的WebGL使用難度較高，在實(shí)際應(yīng)用和開發(fā)中效率較低。Three.js是由第三方用JavaScript編寫、對WebGL 進(jìn)行了進(jìn)一步封裝的高級開源程序庫，它通過使用scene（場景）、camera（相機(jī)）、renderer（渲染器）3 個主要組件可以直接在Web 瀏覽器中創(chuàng)建和渲染場景［7］。通過Three.js可以方便地實(shí)現(xiàn)面向?qū)ο蟮脑O(shè)計和開發(fā)，如調(diào)用光源、渲染器、材質(zhì)、模型等各種對象來創(chuàng)建實(shí)際需要的三維場景［8-10］。此外由于Three.js 是用JavaScript 開發(fā)編寫的，它在IE、Chrome 和Firefox 等主流瀏覽器中均有很好的兼容性［11-12］。同時，Three.js 提供了大量的實(shí)例程序，方便開發(fā)人員在這些程序的基礎(chǔ)上針對自己的應(yīng)用進(jìn)行組裝和定制［13-14］。目前Three.js已在不同的學(xué)科領(lǐng)域得到了廣泛應(yīng)用。

2 技術(shù)要點(diǎn)

2.1 實(shí)驗(yàn)設(shè)計

在完成仿真實(shí)驗(yàn)的架構(gòu)和流程的設(shè)計中非常注重實(shí)驗(yàn)內(nèi)容和實(shí)驗(yàn)流程的教學(xué)設(shè)計，盡可能接近真實(shí)的實(shí)驗(yàn)情況，以確保與實(shí)操實(shí)驗(yàn)教學(xué)結(jié)合時對其有所幫助。通過簡化軟件操作界面，優(yōu)化實(shí)驗(yàn)流程，幫助學(xué)生能夠跟隨仿真實(shí)驗(yàn)在合理的時間內(nèi)完成實(shí)驗(yàn)操作和測量。比如分光計的仿真實(shí)驗(yàn)中，根據(jù)實(shí)驗(yàn)的主干步驟設(shè)計操控面板，每一步只顯示必要的調(diào)節(jié)旋鈕。

此外，仿真實(shí)驗(yàn)的設(shè)計除了要與真實(shí)實(shí)驗(yàn)相似之外，還要體現(xiàn)自己的優(yōu)勢：即能幫助學(xué)生對儀器的構(gòu)造和工作原理獲得感性認(rèn)識，可重復(fù)操作嘗試等。在這方面，Three.js的優(yōu)勢很明顯：它可以給任何模型提供半透明的視圖，使學(xué)生能容易看到儀器的內(nèi)部結(jié)構(gòu)和光路（這一點(diǎn)對分光計實(shí)驗(yàn)而言尤為重要）；直接刷新網(wǎng)頁就可以開始實(shí)驗(yàn)，幾乎所有的瀏覽器都支持虛擬實(shí)驗(yàn)的載入，也能像游戲那樣保存載入進(jìn)度。

2.2 實(shí)驗(yàn)場景、光源和相機(jī)的創(chuàng)建

實(shí)驗(yàn)場景主要是指實(shí)驗(yàn)儀器和實(shí)驗(yàn)臺。很多仿真實(shí)驗(yàn)只需要對實(shí)驗(yàn)儀器進(jìn)行三維建模，可以不顯示實(shí)驗(yàn)臺。如果實(shí)驗(yàn)儀器有可以相對移動的部件，那么這些部件需要獨(dú)立建模。Three.js除了提供了創(chuàng)建一些簡單幾何體（如球體、柱體、椎體等）的函數(shù)外，還提供了豐富的導(dǎo)入外部三維模型的接口，如stlloader、objloader、plyloader等，可將在其他應(yīng)用程序中制作的stl、obj、ply 等多種格式的三維模型導(dǎo)入到仿真程序的場景中。此外，借用一些外部的函數(shù)，還能在程序中對這些三維模型進(jìn)行合并、切割等操作，以創(chuàng)建更為復(fù)雜的幾何體。對于有相對運(yùn)動的部件，可以根據(jù)相對運(yùn)動的層次，創(chuàng)建多級群組（Group），每一個群組內(nèi)的對象可以相對運(yùn)動，還可以與上一級群組中的其他部件一起運(yùn)動。這些對象的運(yùn)動能方便同步到整個場景中［15］。如分光計實(shí)驗(yàn)中的目鏡、望遠(yuǎn)鏡筒、望遠(yuǎn)鏡筒支架和分光計底座，就分別屬于不同層次的對象，目鏡可以有相對于望遠(yuǎn)鏡筒的前后移動，望遠(yuǎn)鏡筒可以有相對于其支架的俯仰角度變化，而望遠(yuǎn)鏡筒支架又能繞分光計底座旋轉(zhuǎn)。

Three.js提供了幾種在三維動畫中常見的光源，如點(diǎn)光源和平行光光源，用于場景的照明和光影效果。注意，目前Three.js的光源除了有影子效果外，并不能產(chǎn)生真正物理意義上的反射和折射。那些逼真的反射和折射效果是通過一些算法“偽造”的，真實(shí)的物理反射和折射在仿真實(shí)驗(yàn)中對系統(tǒng)的計算需求太大，在普通的應(yīng)用場景中無法實(shí)現(xiàn)。因此，對于光學(xué)實(shí)驗(yàn)而言，不能采用系統(tǒng)提供的光源作為實(shí)驗(yàn)用光源，換言之，反射和折射也都不能用有照明效果的光來實(shí)現(xiàn)。由于分光計實(shí)驗(yàn)的難點(diǎn)在于理解光路和儀器各部件運(yùn)動的關(guān)系，因此直接利用明亮直線的可視化來代替光線，并通過編程讓這些光線在特定的鏡面上或透鏡中產(chǎn)生反射或折射，如圖1 所示。為在模擬實(shí)驗(yàn)中觀察到分劃板上光點(diǎn)的效果，Three.js提供了加載紋理的工具，每個光點(diǎn)可以顯示為一個真實(shí)實(shí)驗(yàn)中看到的十字像，不同十字像重合時表示聚焦，如圖2 所示。

圖1 光線的反射和折射（為方便顯示，望遠(yuǎn)鏡筒暫處于不可視狀態(tài)）

圖2 分劃板上光點(diǎn)的聚焦（左）和失焦（右）

Three.js 提供了有遠(yuǎn)景（perspective）效果和無遠(yuǎn)景效果的兩種相機(jī)，有遠(yuǎn)景效果的相機(jī)畫面立體感更強(qiáng)，可在多數(shù)場合下使用，但有些實(shí)驗(yàn)，例如密立根油滴實(shí)驗(yàn)則需要用到無遠(yuǎn)景效果的相機(jī)。如圖3 所示，左邊為無遠(yuǎn)景效果相機(jī)的畫面，右邊為有遠(yuǎn)景效果相機(jī)的畫面。左邊畫面觀察到的油滴下降對于遠(yuǎn)近不同油滴而言是一樣的，方便測量油滴下降特定距離的時間，而右邊畫面可以通過調(diào)焦觀察遠(yuǎn)近不同的油滴。利用不同的相機(jī)，還可以在網(wǎng)絡(luò)頁面上顯示不同位置和角度看到的畫面，例如在分光計實(shí)驗(yàn)中，可以開啟專門觀察目鏡視野的畫面，也可以有載物臺（見圖4）或游標(biāo)讀數(shù)的特寫畫面。畫面布局的變化可在適當(dāng)?shù)膶?shí)驗(yàn)步驟中通過鼠標(biāo)和鍵盤的操作實(shí)現(xiàn)。

圖3 密立根油滴實(shí)驗(yàn)界面（左側(cè)為無遠(yuǎn)景效果視圖，右側(cè)為有遠(yuǎn)景效果視圖。左側(cè)視圖中油滴下降相同的格子數(shù)代表相同的下降距離，與油滴的遠(yuǎn)近無關(guān)）

圖4 分光計實(shí)驗(yàn)界面（中間靠右的兩個視圖為目鏡視野和載物臺俯視圖的特寫）

2.3 實(shí)驗(yàn)的交互控制

Three.js可以編程實(shí)現(xiàn)物體的運(yùn)動（動畫）。物體的運(yùn)動也可以交互地用鼠標(biāo)或鍵盤實(shí)現(xiàn)。這時可用一個小型的圖形交互工具——dat.gui 來實(shí)現(xiàn)［16］。它提供可以以一個很小步長改變某變量的滑塊、勾選布爾變量的單選框以及從多個參數(shù)中選擇某個參數(shù)的菜單選框等控件（見圖5），能實(shí)時地改變程序的參數(shù)，且程序能實(shí)時地作出響應(yīng)。通過這些控件可對場景中的對象進(jìn)行操作和控制，例如望遠(yuǎn)鏡筒轉(zhuǎn)動及聚焦的調(diào)節(jié)。為了改善操作的體驗(yàn)，還將這些控件的調(diào)節(jié)和顯示關(guān)聯(lián)到了鼠標(biāo)的滾輪，通過滾動鼠標(biāo)滾輪，也能調(diào)節(jié)相關(guān)的參數(shù)。

圖5 dat.gui提供的各種圖形交互控件（最上面“打開十字光源”為布爾變量的單選框，載物臺放置的器件可從一個下拉菜單中選擇，其他變量通過拖動滑塊來控制）

3 討 論

Three.js是一個開源的開發(fā)平臺，他官網(wǎng)提供了海量的示例，可以在這些示例的基礎(chǔ)上進(jìn)行開發(fā)。文獻(xiàn)8 由淺入深地提供了可供學(xué)習(xí)和直接使用的范例。這些都大大簡化了開發(fā)的難度，只要對JavaScript有基礎(chǔ)性學(xué)習(xí)，即可進(jìn)行實(shí)驗(yàn)開發(fā)。用JavaScript開發(fā)還有一個優(yōu)勢，就是網(wǎng)上有很多范例可供免費(fèi)使用，例如計時器，其代碼即可從網(wǎng)上找到?？梢哉f這是一個相對比較容易入門的仿真實(shí)驗(yàn)開發(fā)工具，利于不同學(xué)科的教師進(jìn)行在線虛擬實(shí)驗(yàn)開發(fā)，具有較高的應(yīng)用價值。

本文開發(fā)的虛擬仿真實(shí)具有如下特點(diǎn)：①具有豐富的物理內(nèi)涵。該模擬實(shí)驗(yàn)，能夠真實(shí)地反映物理過程，在程序控制中融入了物理方程。盡管由于透鏡三維模型的精度有限，無法實(shí)現(xiàn)完美聚焦（見圖2 左圖），但在模擬光的折射中，該軟件是利用折射定律計算出射光線方向，而不是簡單地用牛頓方程根據(jù)物距和焦距算出像距；在密立根油滴實(shí)驗(yàn)中，虛擬實(shí)驗(yàn)嚴(yán)格地計算了油滴的速度和加速度，并盡可能多地用實(shí)際實(shí)驗(yàn)的參數(shù)（如重力加速度、油滴密度、空氣黏度等）來進(jìn)行仿真。②程序使用體驗(yàn)感好。類似電腦游戲仿真物理實(shí)驗(yàn)是通過鼠標(biāo)和鍵盤實(shí)現(xiàn)調(diào)節(jié)，雖然符合學(xué)生操作習(xí)慣，但如果設(shè)計不好，操作起來比真實(shí)儀器的調(diào)節(jié)可能更難。因此仿真實(shí)驗(yàn)，充分利用了鼠標(biāo)和鍵盤的各種功能。如仿真實(shí)驗(yàn)項(xiàng)目“密立根油滴實(shí)驗(yàn)”中利用鍵盤上位置靠近的幾個鍵，實(shí)現(xiàn)油滴電壓的控制；仿真實(shí)驗(yàn)項(xiàng)目“分光計”中使用鼠標(biāo)直接在場景中點(diǎn)擊完成螺絲的選擇，利用滾輪滾動即可實(shí)現(xiàn)載物臺高低調(diào)節(jié)，完成載物臺的3 個調(diào)節(jié)螺絲。操作便捷，程序運(yùn)行流暢。③仿真實(shí)驗(yàn)難度適當(dāng)。由于大學(xué)物理仿真實(shí)驗(yàn)與科研性質(zhì)的仿真實(shí)驗(yàn)不同，其目的是讓學(xué)生在無真實(shí)儀器的情況下了解實(shí)驗(yàn)的流程，對實(shí)驗(yàn)原理和操作獲得一些感性認(rèn)識。仿真實(shí)驗(yàn)作為真實(shí)操作實(shí)驗(yàn)預(yù)習(xí)和實(shí)驗(yàn)學(xué)習(xí)的輔助手段，完成實(shí)驗(yàn)的時間一般控制在30 ～45 min 之間。合理的流程設(shè)計能引導(dǎo)學(xué)生按正確的步驟來操作，可一定程度上降低難度。此外，通過調(diào)整實(shí)驗(yàn)初始參數(shù)的設(shè)置來實(shí)現(xiàn)難度的控制。

4 結(jié) 語

作為真實(shí)物理實(shí)驗(yàn)的補(bǔ)充，將虛擬仿真實(shí)驗(yàn)引入教學(xué)，可以打破學(xué)生實(shí)驗(yàn)學(xué)習(xí)空間的限制，實(shí)現(xiàn)線上線下混合式實(shí)驗(yàn)學(xué)習(xí)，提高物理實(shí)驗(yàn)預(yù)習(xí)和學(xué)習(xí)的效率，提升教學(xué)效果。學(xué)生通過生動、直觀的三維場景下的虛擬仿真實(shí)驗(yàn)可有效地完成實(shí)驗(yàn)學(xué)習(xí)，很好地解決了難以通過紙質(zhì)實(shí)驗(yàn)講義和視頻獲取對實(shí)驗(yàn)原理及儀器結(jié)構(gòu)直觀認(rèn)識的問題?？梢云谕诰€虛擬仿真實(shí)驗(yàn)的開發(fā)和應(yīng)用將解決學(xué)生對復(fù)雜物理實(shí)驗(yàn)預(yù)習(xí)效果不佳、課堂難以高質(zhì)量完成實(shí)驗(yàn)的問題，對提高學(xué)生實(shí)驗(yàn)學(xué)習(xí)的積極性和主動性大有裨益，還能有效訓(xùn)練學(xué)生對實(shí)際問題的洞察以及動手解決問題的能力。

由于JavaScript是單線程編程語言，對于復(fù)雜的應(yīng)用，有可能出現(xiàn)運(yùn)行很慢的問題。但WebGL 有web worker這樣一個可充分利用計算機(jī)多線程資源的工具，可擴(kuò)展Three.js 功能的庫——Physi.js，可以對三維場景中的對象應(yīng)用重力效果、碰撞效果等。期望將來能利用這些技術(shù)開發(fā)出更為復(fù)雜、物理內(nèi)涵更為豐富的虛擬仿真實(shí)驗(yàn)。