基於WebGL的虛擬太陽系漫遊技術實現 ThingJS 科幻片

2021-01-21 ThingJS

#三維可視化##3D開發#

虛擬功能需求2. 太陽系運行需求

3. 3D模型呈現

4. ThingJS技術分析

5. 系統實現步驟

3D可視化技術逐漸應用到現代多媒體的課堂教學中。

虛擬太陽系是一款天文類的3D可視化應用，它藉助3D在線瀏覽，模擬了一個「真實」的太陽系，以太陽為中心，八大行星逆時針圍繞太陽公轉，還有很多衛星繞轉在行星或者小天體周圍。ThingJS平臺在線提供教學演示連結，在中小學生的地理課堂或網上天文館作為虛擬課程案例使用。

以下是具體需求分析。

一、功能需求

B/S架構為主，通過瀏覽器在線訪問，無需安裝任何插件可觀察太陽系中太陽和各行星的3D模型及其運行狀況各行星運行軌道可視化簡單操作鍵盤滑鼠可實現自由漫遊點擊太陽或行星時顯示該天體的常識信息隨時控制太陽系運行速度準確度高，基於各項真實太陽係數據及運行製作運行基本無卡頓，對用戶輸入實時響應

二、運行需求

要求跨平臺、跨終端在線展示，兼容PC電腦、手機、平板電腦等設備。

ThingJS 的 3D 可視化應用是 B/S 架構的，3D 場景是運行在客戶端的瀏覽器中。3D 場景渲染展示對客戶端設備要求較高，特別是顯卡，一般必須是獨立顯卡。推薦的客戶端配置如下：

（1）客戶端

系統：Windows 7 及以上

CPU：雙核 CPU2.8GHz及以上

內存：8G 及以上

顯卡：最低 GTX650，推薦 GTX960 及以上，顯存 2G 及以上

硬碟：300GB 及以上

ThingJS 若是離線部署，需要部署到伺服器端，ThingJS 對伺服器端的要求並不高。

（2）伺服器端

系統：Windows Server 2003 及以上

CPU：雙核 CPU2.8GHz 及以上

內存：8G 及以上

硬碟：500GB及以上

軟體環境：JDK 1.6 及以上

三、模型呈現

經分析，由於虛擬太陽系的運行功能集中在瀏覽器端，伺服器端只需滿足HTTP的靜態響應即可，無需動態技術。瀏覽器端功能可分為模型展示、場景漫遊、運行控制三個部分。

（1）基於webGL技術，ThingJS可以將虛擬太陽系各星體3D模型和腳本運行情況相結合，最終呈現虛擬太陽系的3D可視化效果。

（2）場景漫遊是系統藉助3D技術中的攝像機控制原理，通過控制滑鼠和鍵盤上的預定按鍵，以及移動攝像機的位置來實現，同時對應位置控制和視向控制的場景漫遊技術。

位置控制。可以控制虛擬漫遊者所在點的位置，在技術上就是攝像機的位置由鍵盤控制，有上下左右四個方向，系統預定WSAD為移動鍵：W:前進、S:後退、A:左移、D:右移。同時增加滑鼠點擊操作，即可以通過滑鼠的左鍵進行前進，右鍵進行後退。

視向控制。可以控制用戶看向任意哪個方向，技術上是攝像機的視向(lookAt），由滑鼠的移動控制。通過第一人稱或第三人稱視角進行切換，給用戶較強的沉浸感。由於視向容易偏離畫布中心，設定空格鍵為鎖定鍵，完整的一次空格鍵點擊作為視向控制的開關。

（3）運行控制是用戶通過界面上的控制面板，對虛擬太陽系的運行速度進行控制。真實的太陽系下，公轉周期最短的水星，繞太陽一周需要88天，不便於用戶觀察，運行控制提供1百萬倍於真實運行速度的滑杆操縱，3D場景加入動畫、特效，便於用戶理解和操作。

四、ThingJS技術分析

ThingJS平臺為了Web開發而生，旨在加速3D開發，它與Web瀏覽器深度整合。ThingJS的所有接口功能都要通過 Javascript調用。當初，WebGL的誕生解決了在瀏覽器內無插件呈現3D圖像的難題；ThingJS則加速了3D專業開發效率，利用可視化開發組件可完成場景搭建、腳本開發、數據對接和項目部署，極大地促進3D可視化技術在應用端普及化。

比起Three.js的開源技術探索者風格，ThingJS是更為頂層的封裝庫，ThingJS繼承了webgl的技術優點，並且提供了較為全面的物聯網開發邏輯（如地球、城市、建築、設備等等）。

ThingJS開發特點如下：

掩蓋了渲染細節。將 webGL原生API的細節抽象化，3D場景拆解為網格、材質和光源。面向對象。開發者可以使用頂層的 Javascript對象進行編程。功能豐富。包含了許多實用的內置對象，可以方便地應用於3D動畫、高解析度模型和一些特殊的視覺效果製作。支持交互。提供了拾取和選擇功能，常用滑鼠完成一些操作，如變色。提供數學庫。作為數學類輔助功能進行坐標相加等三維運算。內置文件格式支持。支持3D插件下載3D建模軟體如3DMAS導出文本格式的文件，以及CampusBuilder平臺的場景文件格式。擴展性強。可以使用 ThingJS封裝自定義的數據結構，進行定製化3D開發。

五、系統實現步驟

ThingJS提供CampusBuider軟體搭建3D場景，並在ThingJS平臺調用3D源碼進行腳本開發，減少了代碼開發工作量。ThingJS從管理建模的角度出發，讓開發和設計達成良好的協作。況且建模軟體如3DSMAX的製作成本過高，並不適合小團隊的開發思路。

ThingJS系統工作流程如下圖。

太陽是恆星，其他的行星如金星、木星、水星、火星等，每個行星都有自己的魅力。

行星模型的搭建過程總結如下。

在太陽系外的背景星空中有著遙遠、眾多的恆星，反映出來是星星點點的光芒，可以通過粒子系統來實現。ThingJS定義了點在空間中的位置和材質，材質定義了顏色、所繪製單一顏色和尺寸的點。

基於瀏覽器端的3D仿真系統在商業、教育等領域將會有廣闊的應用前景，ThingJS可視化平臺支持智慧教育可視化系統應用發展，利用數字孿生技術將更多培訓內容生成虛擬場景，用戶理解更加直觀、高效。

相關焦點

  • 基於webgl的三維室內空間邏輯建模 three.js ThingJS
    三維室內場景基本都帶了默認的層級切換腳本，讓相機視角進入建築內，因此出入口不僅是建築可視化的一部分，也是獲取建築內信息的一個虛擬通道。進出層級官方示例>>```javascriptvar app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址
  • 基於WebGL的智慧校園可視化全景漫遊技術實踐 ThingJS
    #三維可視化##3D開發#智慧校園總體設計與規劃用戶與虛擬場景的互動實現全局場景的漫遊模式國內各大高校，近幾年紛紛搭建了3D智慧校園，如清華大學智慧校園系統，更是實現了虛擬課堂功能。新華三集團與優鍩ThingJS達成技術戰略合作，利用ThingJS平臺構建3D智慧校園，創建一個足不出戶就可以了解校園地理信息與文化背景的虛擬平臺。1. 總體設計與規劃智慧校園系統的架構設計分為基礎層、數據層、服務層、應用層和表示層五個層次。
  • 基於WebGL的3D可視化告警系統關鍵技術解析 ThingJS
    #三維可視化# #3D開發#WebGL 3D技術新一代3D框架-ThingJS3D可視化告警系統案例基於ThingJS的通用架構設計WebGL 3D技術WebGL是一種在網頁瀏覽器中渲染3D圖形的 JavaScript API，無需加裝插件，只需編寫網頁代碼即可實現3D圖形的展示。
  • ThingJS:基於WebGL的3D技術在網頁中的運用
    因此，很多3D圖形引擎庫應運而生，直接使用Javascript腳本語言開發，將WebGL進行不同程度的封裝，例如「three js「、「scenceJS」、「Oak3d」和「simjs」等，這些引擎庫能夠讓用戶更加方便地進行3D圖形繪製和動畫的製作。
  • webgl、Javascript、HTML、ThingJS、cesium都是什麼鬼?
    不是搞技術的朋友念一念就好了，搞技術開發的你得好好念。webgl——是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5。
  • 基於WebGL的倉儲糧食溫度告警可視化 ThingJS
    ThingJS有164個源碼實例下載>>因此，我們的客戶採用雙B樣條採樣方法進行數值模擬，並從時間和空間域兩方面進行分析，採用B樣條插值函數的方法進行溫度插值擬合，這樣就能夠解決糧食溫度傳感器密度的缺陷，並利用 WebGL技術實現糧堆溫度的可視化。什麼是B樣條曲線？
  • three.js為何如此奇妙
    WebGL是在瀏覽器中實現三維效果的一套規範，而最初使用WebGL原生的API來寫3D程序是一件非常痛苦的事情，在辛苦的付出下WebGL開源框架出現了，其中three.js就是非常優秀的一個，它掩蓋了很多麻煩的細節，那麼，就讓我們一起來看看，什麼是three.js吧！
  • 20個使用WebGL和Three.js實現的網頁場景
    20個使用WebGL和Three.js實現的網頁場景 也許你們可能已經聽說過關於Three.js庫，Three.js是一個WebGL第三方庫，它能夠讓瀏覽器更加輕鬆的使用和實現3D效果，就打個
  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    而現在，使用腳本語言和渲染器在瀏覽器中實現瘋狂的動畫效果已經成為可能。究其原因，大概有以下幾點： 處理器的性能越來越高。我們的電腦已經有足夠的強大的能力去渲染最為複雜的動畫效果。 現在瀏覽器和web技術的不斷發展。瀏覽器如Firefox、Chrome、Safari和IE10，web技術如Canvas、SVG和WebGL。 網速越來越快。
  • webgl 迷宮項目開發總結
    收穫webgl 三個js庫webgl-utils.jswebgl-debug.jscuon-utils.js圖片加載var img = new Image();這樣可以防止webgl在渲染的時候圖片還沒加載完而出現黑屏的問題。監聽鍵盤事件保證事件代碼只運行一次。否則會重複綁定多個事件，也就是按鍵一次會觸發多次事件處理。
  • 基於WebGL的三維數據可視化大屏開發流 ThingJS
    三維數據大屏可視化系統包含多源數據連接、生成二維/三維視圖、構建可視化大屏、大屏功能應用等一體化服務，基於多年可視化項目經驗，ThingJS平臺得出從數據源上傳到可視化大屏應用的完整流程，供參考。ThingJS可視化組件支持模型導入、場景搭建和可視化增效，基於CityBuilder+ThingDepot+3D源碼二次開發輕鬆實現：1. 城市級場景搭建工具CityBuilder操作簡單，利用可視化組件設置參數和交互動畫；2. 3D場景搭建完成後，在線接入ThingJS開發平臺進行代碼調試；3.
  • 《2001太空漫遊》這部了不起的科幻片
    今天看《2001太空漫遊》，更多應注意它的美學貢獻。它的思想內涵，可惜建構在半個世紀前的科學認知上。1968年，人類首次登月前一年，《2001太空漫遊》上映。我願意相信，這部了不起的科幻片，其面世是為了昭示那個偉大時刻。
  • 結合Echarts、Ajax技術實現可視化大屏監控 ThingJS 3d 開發
    創新的拖拽計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。基於數據流設計用戶獲取數據信息生成系統所需的頁面，需要通過登陸前臺界面觸發與後臺的交互，讀取數據傳輸信息，因此需要設計一個數據流模型圖，這裡就不展開來講。
  • 基於HTML5的WebGL經典3D虛擬機房漫遊動畫
    3D 技術的發展甚至挑戰受眾的分辨能力，使受眾的判斷游離於與虛擬和現實之間。而且 3D 特效的應用為創意提供了更加廣闊的思維空間,並成為創意執行的可靠保證,並豐富了創意的形式和風格手段。根據廣告主題的表現訴求,可以營造出夢幻般的神奇氛圍來刺激打動受眾,從而起到與受眾溝通的目的。
  • 科幻片排行榜前十名 最佳科幻片推薦
    科幻片是電影行業的一個非常受歡迎的類別，很多人都喜歡看科幻片，裡面種種超越現代的科技往往讓人非常的嚮往，覺得非常酷炫。而現在要為大家介紹的是科幻片排行榜前十名的影片，這些影片都是非常經典的科幻片，每一部都非常的贊。
  • 瀏覽器中實現深度學習?有人分析了7個基於JS語言的DL框架
    機器之心分析師網絡作者：仵冀穎編輯：H4O本文中，作者基於WWW』19 論文提供的線索，詳細解讀了在瀏覽器中實現深度學習的可能性、可行性和性能現狀。具體而言，作者重點分析了 7 個最近出現的基於JavaScript 的 DL 框架，並對比了具體框架支持哪些 DL 任務。深度學習（Deep Learning，DL）是一類利用多層非線性處理單元（稱為神經元）進行特徵提取和轉換的機器學習算法。每個連續層使用前一層的輸出作為輸入。近十年來，深度學習技術的進步極大地促進了人工智慧的發展。
  • WebGL 1.0標準規範正式公布 3D網際網路開啟
    GDC 2011遊戲開發者大會上，Khronos Group組織今天終於公布了WebGL 1.0標準規範的最終正式版，在HTML5標準網絡瀏覽器中不需要額外插件就能實現3D圖形硬體加速。
  • 基於HTML5/WebGL技術的BIM模型輕量化Web瀏覽解決方案
    使用基於HTML/WebGL技術的BIM模型輕量化Web瀏覽技術更契合技術發展方向，Autodesk的View and Data API技術的推出，進一步降低了對BIM模型預處理難度，使得基於HTML/WebGL技術對BIM模型的Web瀏覽、分享以及協作更簡單。
  • 瀏覽器中實現深度學習?有人分析了7個基於JS語言的DL框架,發現還有...
    具體而言，作者重點分析了 7 個最近出現的基於JavaScript 的 DL 框架，並對比了具體框架支持哪些 DL 任務。深度學習（Deep Learning，DL）是一類利用多層非線性處理單元（稱為神經元）進行特徵提取和轉換的機器學習算法。每個連續層使用前一層的輸出作為輸入。近十年來，深度學習技術的進步極大地促進了人工智慧的發展。
  • 令人激動的新興 Web 技術:WebGL和SVG
    其實，它們都屬於令人激動的新興 Web 技術(New Exciting Web Technology)，值得每個開發者關注。　　WebGL　　WebGL 是一種基於 Web 的 Graphic 庫，由非盈利組織 Khronos 運營，目前結合 HTML5元素廣泛應用在 3D 圖形開發中。