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

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

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

0 引 言

虛擬仿真實驗很好地豐富了教學(xué)輔助手段，完善了物理實驗教學(xué)環(huán)節(jié)，克服了實驗教學(xué)長期受到課堂、課時限制的困擾，使實驗教學(xué)在時間和空間上得到延伸［1-2］。虛擬仿真實驗和實操實驗相結(jié)合，為創(chuàng)建更有利于學(xué)生自主學(xué)習(xí)的線上和線下相結(jié)合的實驗教學(xué)模式提供可能［3］。同時，實驗教學(xué)中發(fā)現(xiàn)，有些實驗儀器操作復(fù)雜，學(xué)習(xí)難度較大，學(xué)生難以通過講義和實驗講解視頻進(jìn)行有效預(yù)習(xí)，影響實驗學(xué)習(xí)的效果。目前大學(xué)物理的虛擬仿真實驗多為二維場景下的實驗操作。而有些實驗，如“分光計實驗”，對學(xué)生空間思維能力要求較高，二維場景下學(xué)生無法看到實驗儀器內(nèi)部結(jié)構(gòu)或者光路，導(dǎo)致對實驗原理的理解存在較大困難。研究開發(fā)設(shè)計的虛擬仿真實驗是以三維實驗場景和動畫形式完成實驗具體操作，很好地解決了二維場景下虛擬仿真實驗的局限性；類游戲操作實驗環(huán)境，友好的交互方式，提高了學(xué)生實驗學(xué)習(xí)興趣，從而達(dá)到較好的實驗教學(xué)和實驗學(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)造了新的機遇［4-6］。但原生的WebGL使用難度較高，在實際應(yīng)用和開發(fā)中效率較低。Three.js是由第三方用JavaScript編寫、對WebGL 進(jìn)行了進(jìn)一步封裝的高級開源程序庫，它通過使用scene（場景）、camera（相機）、renderer（渲染器）3 個主要組件可以直接在Web 瀏覽器中創(chuàng)建和渲染場景［7］。通過Three.js可以方便地實現(xiàn)面向?qū)ο蟮脑O(shè)計和開發(fā)，如調(diào)用光源、渲染器、材質(zhì)、模型等各種對象來創(chuàng)建實際需要的三維場景［8-10］。此外由于Three.js 是用JavaScript 開發(fā)編寫的，它在IE、Chrome 和Firefox 等主流瀏覽器中均有很好的兼容性［11-12］。同時，Three.js 提供了大量的實例程序，方便開發(fā)人員在這些程序的基礎(chǔ)上針對自己的應(yīng)用進(jìn)行組裝和定制［13-14］。目前Three.js已在不同的學(xué)科領(lǐng)域得到了廣泛應(yīng)用。

2 技術(shù)要點

2.1 實驗設(shè)計

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

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

2.2 實驗場景、光源和相機的創(chuàng)建

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

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

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

圖2 分劃板上光點的聚焦（左）和失焦（右）

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

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

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

2.3 實驗的交互控制

Three.js可以編程實現(xiàn)物體的運動（動畫）。物體的運動也可以交互地用鼠標(biāo)或鍵盤實現(xiàn)。這時可用一個小型的圖形交互工具——dat.gui 來實現(xiàn)［16］。它提供可以以一個很小步長改變某變量的滑塊、勾選布爾變量的單選框以及從多個參數(shù)中選擇某個參數(shù)的菜單選框等控件（見圖5），能實時地改變程序的參數(shù)，且程序能實時地作出響應(yīng)。通過這些控件可對場景中的對象進(jìn)行操作和控制，例如望遠(yuǎn)鏡筒轉(zhuǎn)動及聚焦的調(diào)節(jié)。為了改善操作的體驗，還將這些控件的調(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)行實驗開發(fā)。用JavaScript開發(fā)還有一個優(yōu)勢，就是網(wǎng)上有很多范例可供免費使用，例如計時器，其代碼即可從網(wǎng)上找到。可以說這是一個相對比較容易入門的仿真實驗開發(fā)工具，利于不同學(xué)科的教師進(jìn)行在線虛擬實驗開發(fā)，具有較高的應(yīng)用價值。

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

4 結(jié) 語

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

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