基於WebGL的在線3D建模與互動腳本開發 ThingJS

2020-12-21 ThingJS

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

ThingJS編輯界面布局3D建模與場景搭建方法交互控制腳本開發關鍵點

ThingJS平臺基於 Web GL中的3D框架進行3D開發,界面設計採用HTML5,系統腳本採用 JavaScript。完整的平臺系統包含七大模塊:3D場景搭建、模型操作、模型導入、模型導出、場景渲染、壓縮與解壓、信息存儲與顯示。

各模塊獨立又緊密聯繫,核心的核心主要是3D建模與場景搭建、交互控制開發,ThingJS本著加速3D項目開發的原則,做了間接的封裝,擁有自己的平臺特色。

平臺只有一個主界面,分為三個區域:在線開發工具欄、3D編輯器及3D場景渲染區域。場景渲染區域為用於實時渲染整個場景的3D數據,同時用戶也可以在這上面進行滑鼠交互操作,例如縮放、旋轉、平移等;在線開發工具欄區域提供官方示例及用戶創建並保存的項目;3D編輯器區域展示了打開的項目或文件的內容,包含對象列表、幾何信息、材質信息等,同時,用戶可以通過編輯修改這些信息來改變對象的材質或屬性等。

3D場景所需要的基本要素包括渲染器、場景、相機、燈光、物體,ThingJS 3D引擎都已經封裝成js庫,不需要再造輪子,當然,缺少其中某一樣都不能構成一個完整的3D場景。

下面就來談談3D場景創建、腳本開發構建的過程,分成3D建模、交互控制兩部分。

1. 3D建模與場景搭建

渲染方式ThingJS平臺提供兩種渲染方式,即 WebGLRenderer及 CanvasRenderer。兩者的渲染比較,從圖中可以看出 WebGLRendere的3D渲染效果更真實生動,可以充分表現場景的細節與材質特性,但它對硬體性能和顯卡有要求。相反地,CanvasRenderer則具有更好的兼容性,且沒有鋸齒,能夠適用於更多的設備。

很顯然,如果你的設備支持 WebGL,那麼 WebGLRenderer渲染器具有比 Canvas Renderer更好的性能。ThingJS支持用Canvas進行2D面板內的貼圖繪製。在合理範圍內選擇高效率、低成本的實現方案,這是平臺宗旨。

基礎幾何體有了場景,我們就可以添加物體對象了。ThingJS 3D引擎提供多種基礎幾何體對象,供用戶選擇創建於場景中,包括平面、圓形、立方體、圓柱體、球體、多面體等,如圖所示。直接JavaScript調用代碼創建,用戶可以通過修改其參數來改變幾何體的形狀,物體參數可分為通用參數、特定物體類型(type)的專屬參數、系統其他功能。列表如下:

(1)通用參數

type:該物體用什麼物體類來創建

id:該物體的編號

name:物體的名字

position:設置世界位置

localPosition:設置在父物體下的相對位置,和 position 只能輸入一個

angles:設置世界坐標系下三軸旋轉角度,例如:angles:[90,45,90] ,代表在世界坐標系下物體沿X軸旋轉90度,沿Y軸旋轉45度,沿Z軸旋轉90度

scale:設置相對自身坐標系下的縮放比例

parent:設置父物體是誰

(2)特定物體類型(type)的專屬參數

url :物體模型資源路徑,這個是 「Thing」 物體需要的參數

(3)系統其他功能

complete:初始化完成後的函數回調

外部模型使用ThingJS創建常見幾何體是十分方便的,非常複雜的模型會用3DSMAX軟體製作。

ThingJS允許用戶導入由3DMax、 blender等工具製作的三維模型,並在CampusBuilder裡添加到場景中。支持導入的格式包括:obj、mtl、dae、.wrl、vtk、stl等【官方文件格式列表】。ThingJS導入外部模型文件需要3D插件,官網資源中心提供下載。

材質設置有些精模在3DSMAX製作,加載的時候不帶材質,那是因為沒有同步加載模型的材質文件,從3DSMAX中導出模型的材質文件port.mtl即可。

在ThingJS中,模型材質創建與定義可以有兩種方式,一種是在建模軟體繪製好材質然後導出材質文件,利用CampusBuilder搭建3D場景,直接在建築外立面添加貼圖,自動生成材質的參數,截圖如下。

另一種是在模型導入場景之後通過代碼創建或設置材質。平臺內直接JavaScript調用3D源碼,引入圖片URL進行貼圖。

2. 交互控制腳本開發

虛擬漫遊ThingJS中提供了多種用於漫遊的控制器,包括Track BallControls、 FlyControls RollControls、 OrbitControls、 FirstPersonContro、 PathControls。

FirstPersonControls (第一人稱控制項) 常用於物聯網3D可視化領域的漫遊場景。它的行為類似於第一人稱射擊遊戲中的相機,用鍵盤移動或用滑鼠轉動,

對象拾取3D場景的一個重要的用戶交互技術是對象拾取,即3D場景中的對象選擇。

一般系統的輸入設備是一個2D滑鼠。用戶實際單擊的是在其中渲染3D場景的畫布。因為當用戶圍繞場景運動時,渲染會發生變化,必須將滑鼠的2D坐標在單擊時動態地映射到場景的三維坐標空間,以確定哪些對象被選中。

ThingJS的拾取分兩種操作方式,一是通過屬性和接口獲取滑鼠拾取(Pick)的物體,當滑鼠在一個物體上懸停時,我們經常希望做一些操作,比如變色等。可以使用 Picker 類來獲取滑鼠拾取(Pick)的物體,通過 app.picker 得到 Picker 類來實現這個功能;二是通過事件獲取滑鼠拾取的物體。可以通過 MouseEnter 和 MouseLeave 來實現 。

平移、旋轉與縮放在三維空間坐標中,對象的平移變換是最簡單的變換,其變換原理是在初始位置點坐標基礎上加上一個平移的向量;相對而言,對象的旋轉變換比較複雜,其變換原理是變換後點坐標等於初始位置點坐標乘以一個變換矩陣,繞指定的任意軸旋轉變換就是由幾個繞坐標軸旋轉變換和平移變換效果疊加而成的。同樣的,對象的縮放變換的原理為初始位置點坐標乘以一個變換矩陣。

在ThingJS中,控制對象的平移、旋轉及縮放是比較容易實現的,分別對應translate, rotation, scale這三個屬性。 ThingJS中封裝了一個工具類,可以直接用來進行平移、旋轉和縮放操作。

官網註冊獲取 3D demo

相關焦點

  • 基於webgl的三維室內空間邏輯建模 three.js ThingJS
    三維室內場景基本都帶了默認的層級切換腳本,讓相機視角進入建築內,因此出入口不僅是建築可視化的一部分,也是獲取建築內信息的一個虛擬通道。進出層級官方示例>>```javascriptvar app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址
  • ThingJS:基於WebGL的3D技術在網頁中的運用
    Three.js、ThingJS這些引擎庫可以加載3D製作軟體的模型,大幅度提高了製作效率,改變WebGL開發困難的局面,讓Web開發者享受便捷的3D開發服務。因此,很多3D圖形引擎庫應運而生,直接使用Javascript腳本語言開發,將WebGL進行不同程度的封裝,例如「three js「、「scenceJS」、「Oak3d」和「simjs」等,這些引擎庫能夠讓用戶更加方便地進行3D圖形繪製和動畫的製作。
  • 基於WebGL的倉儲糧食溫度告警可視化 ThingJS
    ThingJS 3D 引擎技術WebGL直接工作在計算機的顯卡端,Three.js是基於WebGL的3D框架,這是一種在3D圖形中簡單、直觀的建立常見模型的方法,能夠高速利用許多最佳圖形引擎實踐技術,使用流程沿用一般三維世界的基本結構進行定義:設置場景-攝像機-燈光-物體-渲染器,如圖所示。
  • 面向新手的十款免費3D建模軟體
    這個免費的3D建模軟體適合哪些人?正在尋找易於學習程序的初學者,以簡化Minecraft風格設計與3D建模之間的轉換。這款3d設計軟體的導出格式:3dslash,OBJ,STL,FBX,Collada,gITFVectaryVectary聲稱可能是「最簡單的在線3D和AR設計工具」。
  • MXFlutter:基於JS的Flutter框架,用JS也能寫出Flutter應用
    MXFlutter Team開源許可協議:MIT項目地址:https://gitee.com/huoxd/MXFlutter項目簡介MXFlutter 是一套基於JavaScript 的 Flutter 框架,可以用極其類似 Dart 的開發方式,通過編寫 JavaScript 代碼,來開發 Flutter 應用,或者使用 mxjsbuilder 編譯器,把現有Flutter 工程編譯為JS,運行在 mxflutter 之上。
  • 高中學生所開發的一款瀏覽器,用於觀看VIP電影。油猴腳本通用
    基於這兩點,當前有很多瀏覽器可供選擇。例如,每個人都一直推薦的Quark瀏覽器和Alook已廣受歡迎。今天介紹的Yujian瀏覽器也相當不錯,值得稱讚的是它是由高中生開發和維護的移動瀏覽器。您也可以自己手動設置其他URL2實用網站合集+常見工具將首頁滑動到下一頁,您可以看到瀏覽器中內置的各種小工具的集合,包括各種常用的網站,並且分為以下類別,包括在線劇院,常用工具,在線小說,漫畫,短視頻下載, 等等Yujian瀏覽器的內置工具和URL非常實用,特別是工具集包括一些網站,例如圖書館下載
  • 動畫公司介紹3d人物建模軟體有哪些
    隨著3d動畫的商業化趨勢,許多人想學習從事相關的製作,首先需要了解基礎人物的設計建模。下面藝虎動畫介紹,3d動畫人物建模軟體有哪些。 姜子牙 1、Maya 3d動畫人物建模軟體Maya應用對象是專業的影視廣告、角色動畫、電影特技等,Maya功能完善靈活、易學易用
  • 鴻蒙輕量級JS核心開發框架!
    簡介JS應用開發框架,提供了一套跨平臺的類web應用開發框架,通過Toolkit將開發者編寫的HML、CSS和JS 文件編譯打包成JS Bundle,解析運行JS Bundle,生成native UI View組件樹並進行渲染顯示。
  • 零基礎,一周上手室內3d建模!
    1、  看到一些炫炸酷的室內3d效果圖,感覺好高大上,想學,又無處下手?
  • 【js腳本】Flex 3 補丁管理 1.6 更新 | 新模式功能 新模式
    合併各種不方便出現各種問題,有朋友反饋1.5版本在點擊添加腳本時會卡很久,為了解決這個問題,我將腳本又改了一下,新增加了一種分享面板添加補丁模式。2020年6月15日 更新:修復:分享最後一個補丁節點對齊問題。修復:修復原先補丁分割造成補丁無法顯示問題。新增:文件分享面板添加管理補丁。直接Filza文件內操作,無需藉助iCloud雲盤。
  • Scriptables 腳本合集
    countdown.js - 一個簡單倒數日1.健康類incidence.js - Covid-19德國的發病率數據.incidence_at.js - Covid-19奧地利的發病數據.Coronavirus.js -  可自由選擇國家的Covid-19數據.手機類telekom.js - 基於費率的Telekom.de數據消耗.VodafoneDE - 沃達豐DE的基於費率的數據消耗.
  • 前端高效開發必備的 js 庫梳理
    比如說你對移動端比較感興趣, 工作中也剛好涉及到一些技術的應用,那麼我可以專門研究移動端相關的技術和框架, 又或者你對企業後臺/中臺產品感興趣, 比較喜歡開發PC端項目, 那麼我們可以專門研究這種類型的js庫或者框架, 接下來筆者也是按照不同前端業務的需求, 來整理一份能快速應用到工作中的js庫, 以提高大家的開發效率。
  • 21 個 JSBox 腳本發布或更新
    04本腳本由開發者 再見 開發,發布於 Erots 腳本商店。開發採用百度通用翻譯API,建議自行註冊。問題或功能建議聯繫QQ:1265894132。15二次元宅必備動漫在線觀看腳本本腳本由開發者 Azite 開發,發布於 Erots 腳本商店。
  • 想學3D遊戲建模不得不看的4個忠告,未雨綢繆學習才能事半功倍
    電子競技也逐漸得到大眾認可,遊戲建模自然而然地成為就業香餑餑了,很多想學習3d遊戲建模的小夥伴會來問我一些問題,在這我總結了一些大家最關注的問題和疑惑,希望對想學遊戲建模的你有些許幫助。1.零基礎學3D建模能自學嗎?可以,但是難度較大,不建議。
  • SpreadJS 用於開發多人協作「在線excel」系統的優勢
    本文將不再過多贅述這類成品軟體,而是深入協同辦公系統的實現原理,從企業IT管理者的角度出發,深入研究多人協作的形式、基礎和難點,分析一款開發工具應具備怎樣的特點,才是實現多人協作「在線excel」系統的關鍵。
  • 亞馬遜或開發3D建模系統,讓尺碼問題不再成為退貨理由!
    打造優質listing,經濟使用FBA,與大賣互動暢聊如何提升單量。
  • 有人分析了7個基於JS語言的DL框架
    更重要的是,考慮到 Web 應用程式與本機應用程式性能的長期爭論,開發基於 DL 的 Web 應用程式時也存在同樣的問題。在這篇文章中,我們以北京大學研究人員發表在 WWW』19(The World Wide Web Conference 2019)中的文章《Moving Deep Learning intoWeb Browser: How Far CanWe Go?》
  • 和 transformjs 一起搖擺
    類似的效果如下面的 gif 所示:facebook 當時使用的是 createjs 下的子項目 easeljs 和 tweenjs 去製作,基於 Canvas 的動畫。基本的原理主要是:循環運動 Canvas 抽象的 DisplayObject 的 skewX 和 scaleY 來實現軟體搖擺。
  • 入行遊戲3d建模,能得到多少「麵包」?
    遊戲原畫市場已經漸漸地偏向飽和了,但遊戲3d建模市場尤其是次世代的崗位缺口仍然很大,並且伴隨著次世代技術的不斷發展進步,這個崗位需求還會越來越大。 不要擔心沒有美術基礎,實際上現在很多建模師都是沒有美術基礎的人等轉行過來的,不過話說回來,現在想要入遊戲3d建模肯定是要報班的。遊戲行業發展太快,我國目前的學校教育系統完全跟不上,即使是學遊戲相關專業畢業出來的學生也不能直接跟項目,這是行業發展現實及現狀。 聽說要學的軟體又多又難?
  • Unity3d-C#入門基礎
    最近他還創造了TypeScript(JavaScript超集),國內Html5引擎http://www.egret-labs.org/就採用TypeScript開發。開發工具1.window平臺開發工具:http://www.visualstudio.com/Visual studio開發插件[代碼高亮、錯誤提示、重構、搜索等]:http://www.jetbrains.com/resharper