文檔學習視頻鏈接

近年來web得到了快速的發(fā)展。隨著HTML5的普及，網(wǎng)頁的表現(xiàn)能力越來越強大。網(wǎng)頁上已經(jīng)可以做出很多復(fù)雜的動畫，精美的效果。還能通過WebGL在網(wǎng)頁中繪制高性能的3D圖形。

隨著瀏覽器性能和網(wǎng)絡(luò)帶寬的大幅度提升，以及WebGL的實現(xiàn)，使得3D技術(shù)不再是桌面程序的專利，越來越多的Web應(yīng)用使用3D技術(shù)。

對網(wǎng)站而言，Web3D技術(shù)運用，實現(xiàn)企業(yè)網(wǎng)站三維呈現(xiàn)，讓企業(yè)形象更直觀、更立體地展現(xiàn)給客戶，打破傳統(tǒng)平面展示模式，打造智慧、個性、創(chuàng)新的企業(yè)形象。目前政府有大量的新基建項目，如數(shù)字孿生、智慧城市、智慧園區(qū)、智慧工廠等等都涉及到了3D可視化技術(shù)。

今天就來給大家講講如何系統(tǒng)的學好WEB 3D可視化技術(shù)。

我們可以先從threejs庫入手。threejs是一個讓用戶通過javascript入手進入搭建webgl項目的類庫。眾所周知學習webgl需要圖形學知識，而webgl需要通過js和glsl兩種語言。如果我們不通過threejs使用webgl勢必逃不過底層知識:你必須全面了解著色器語法和自己編寫頂點著色片元著色；但你使用了threejs顯然可以便捷的逃過這些難懂的底層，對于傳統(tǒng)js從業(yè)人員直接挑戰(zhàn)的shader確實是有難度的。

學習three.js首先掌握基礎(chǔ)概念什么是點、線、面、幾何體、材質(zhì)、物體、場景、相機、渲染器、動畫、控制器等基礎(chǔ)概念，搞定一個最基礎(chǔ)的場景和3d物體的顯示。接著學會調(diào)試3D開發(fā)代碼。接著即可深入上訴概念的每一個概念，詳細了解官網(wǎng)文檔該類的各種屬性與概念。

接著3d渲染要真實性，肯定離不開PBR，詳細了解什么是PBR，PBR基于物理的光照原理的渲染,。掌握什么是環(huán)境貼圖、凹凸貼圖、置換貼圖、放射光、,環(huán)境貼圖、金屬貼圖、粗糙度貼圖等等，去打造真實的物體顯示效果。接著掌握如何繪制粒子群，來繪制雨雪、落葉、星河等各種粒子效果，甚至產(chǎn)品的粒子效果。

掌握了這些，基本就算入了個小門了，接著就是要實現(xiàn)能和物體進行交互，如何選中與場景中的物體進行交互。而且還要能夠掌握物理引擎讓物體有真實的物理效果，例如重力，反彈、摩擦力等這樣物體相互作用會更加真實。

接著就要開始真正進入WEBGL魔力的世界，掌握著色器語言，控制GPU渲染，掌握實現(xiàn)three.js底層封裝的原理，能夠圖形渲染原理，掌握編寫頂點著色器和片元著色器，來繪制動態(tài)飄揚的旗幟。以及編寫動態(tài)的煙霧和烏云，水紋。

掌握了這些就可以寫節(jié)日酷炫的煙花了，接著可以繼續(xù)掌握各種后期合成效果，對整個渲染畫面進行調(diào)整，例如打造閃爍的畫面，雪花感的陳舊電視畫面，又或者通過編寫著色器，打造出水底世界的效果。

接著掌握曲線和物體運動的結(jié)合，在加上著色器編寫，即可實現(xiàn)各種飛線、雷達、光墻特效。通過地理信息數(shù)據(jù)，獲取建筑信息，可以生成建筑的框架和高度渲染出數(shù)字城市。當然日常網(wǎng)頁也或有一些文字信息標識，想要文字標識也加上3d效果，就需要掌握css3d的渲染器來渲染。當然如果需要掌握渲染精美真實的智慧園區(qū)的，就需要掌握建模技術(shù)，例如學習blender軟件搭建模型和優(yōu)化模型，才能最終輸出到網(wǎng)頁中，包括動畫也可以先用blender做好在輸出到網(wǎng)頁中，不用辛苦的進行復(fù)雜動畫的編寫，可以可視化的制作。