基于Three.js的大學物理在線仿真實驗開發

曲 典， 嚴華剛， 張智河， 許莉莉， 黃曉清， 師 煒

（首都醫科大學生物醫學工程學院，北京 100069）

0 引 言

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

1 Three.js簡介

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

2 技術要點

2.1 實驗設計

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

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

2.2 實驗場景、光源和相機的創建

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

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

圖1 光線的反射和折射（為方便顯示，望遠鏡筒暫處于不可視狀態）

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

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

圖3 密立根油滴實驗界面（左側為無遠景效果視圖，右側為有遠景效果視圖。左側視圖中油滴下降相同的格子數代表相同的下降距離，與油滴的遠近無關）

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

2.3 實驗的交互控制

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

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

3 討 論

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

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

4 結 語

作為真實物理實驗的補充，將虛擬仿真實驗引入教學，可以打破學生實驗學習空間的限制，實現線上線下混合式實驗學習，提高物理實驗預習和學習的效率，提升教學效果。學生通過生動、直觀的三維場景下的虛擬仿真實驗可有效地完成實驗學習，很好地解決了難以通過紙質實驗講義和視頻獲取對實驗原理及儀器結構直觀認識的問題?？梢云谕?，在線虛擬仿真實驗的開發和應用將解決學生對復雜物理實驗預習效果不佳、課堂難以高質量完成實驗的問題，對提高學生實驗學習的積極性和主動性大有裨益，還能有效訓練學生對實際問題的洞察以及動手解決問題的能力。

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