天天看點

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

3d建築,3d消防,消防演習模拟,3d庫房,3d檔案室,3d密集架,webGL,threejs,3d機房,bim管理系統

這節課我們主要講解園區三維可視化炫酷感官技術方案

前言:

  當基礎技術達到普及狀态,應用就趨向于極緻,在三維可視化領域也是這個道理。各大可視化公司都追求美觀最大化,這時候美工的作用就不容忽視了。

  背景說明:

    A、經濟背景:經濟下行的大環境下,各大有社會責任的企業與部門開始拉動内需,擴大預算,向有技術有情懷的科技公司派送訂單,保證科技公司活下來,下一個科技風口能夠繼續戰鬥,國民經濟能夠挺住下行壓力。是以可視化,科技風,炫酷風成為擴大預算的一項重要名額。(有錢)

    B、技術背景:三維技術很早在遊戲方面就有應用,但是局限于用戶端龐大,電腦硬體要求高,是以在行業應用方面一直沒有普及,而目前群眾用的電腦基本都帶有獨立顯示卡,包括市面上的手機也基本都帶有GPU處理器,這為三維技術普及與應用奠定了很好的基石。還有就是webgl技術的發明與普及,浏覽器直接支援gpu加速,輕用戶端機制把一切封裝在浏覽器沙盒中。使用者隻需要解決業務相關的問題就可以。(有技術方案)

    C、項目背景:與本項目相關的背景就是各大可視化廠家發力做出越來越炫酷的效果,作為webgl愛好者,不能放過一切前沿的技術應用。着手研究與實施出炫酷效果,對于個人而言也是刻不容緩。(有人)

    D、錢、技術、人都有了,just do it!!!

     

技術交流 [email protected]

交流微信:

    

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

如果你有什麼要交流的心得 可郵件我

一、閑話少叙,先看效果圖

1、外立面效果圖加周遭環境特效。

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

2、單獨樓層效果與過度動畫

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

3、室内效果

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

二、難點重點說明

炫酷的效果最終在于技術的熟練應用與設計師的強大腦洞

這裡再次強調美工不可忽視的作用,尊稱設計師。

效果好壞以及工作量的多少全憑設計師前期的工作,專業的人幹專業的事情,大部分程式猿沒有審美能力,這時候就靠設計師想象出炸天的效果。程式猿這時候利用自己的知識能力實作設計師的設想。

至于難點技術有粒子效果、着色器語言、線性代數與圖檔的靈活應用、瓦片化加載等。

三、完成步驟

園區可視化方案的實施跟真實建築樓宇的過程是一樣的。從設計到地基到建築,一步也不能少。一步也不能跳過

1、先設計模型

  1.1、先設計,這裡設計師登場,首先設計師打開腦洞,想象出一款炫酷的設計,與風格方案,然後與程式猿交涉,輸出程式猿需要的原圖。

  1.2、開始“打地基”,根據設計師的設計,我們選的地基是科技虛幻話地基,就是科技網格

    效果:

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

    代碼:

    技術點講解:

    這裡面有兩種方案,1、用劃線的方式畫出網格,2、做一張網格透明圖檔作為網格。我建議使用第一種方案,具體優點我們後續再講。

  1.3、實作周遭環境

  效果:

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

  代碼:

  難點講解:這裡面主要涉及到虛化處理,uv處理時計算位置、在合适的位置将透明值設定為0

 1.4、添加道路特效

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

  難點:如何讓道路動起來,這裡我封裝了方法,具體如何封裝由于篇幅原因,隻能下節課詳解,這節課主要講宏觀搭建。

  1.5、添加樓層

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

  模型代碼:

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

  技術難點:瓦片式加載,初步加載時隻做外立面的加載與渲染,當點選時再做内部加載

  1.6、剩下部分全是樓層的疊加 這裡不做累訴

  最終達到如下效果即可

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

  1.7、瓦片是加載房間模型

  效果如下:  

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

  代碼如下:

2、業務邏輯

  2.1、場景設想

    我們設想場景是這樣的 初始化時看到整個園區樓宇的概況,然後輕按兩下樓宇,加載單個樓層模型,再輕按兩下樓層、加載樓層内房間模型、輕按兩下房間、可以進入。

  2.2、代碼實作

 由于篇幅原因,這一課先介紹到這裡 

後面我将繼續講解用webgl 建立 3D園區 3D智慧小區 炫酷效果等等

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

繼續閱讀