目錄
- 前言
- OpenGL
- WebGL
- Three.js
- 輸出一個DEMO
- GitHub
- END
前言
最近拖更蠻嚴重，因為對自己的要求高了一大截。
最近玩了個Three.js的Demo，也算了解了一波前端的動畫方面的延伸，因為我公司主要業務為大資料，學了很多資料層的東西，動畫方面沒什麼用武之地，但是我是喜歡動畫效果的，哎，有沒有種逼良為娼的感覺。
OpenGL
想入門WebGL的時候就查了很多文章，以前學c++的時候接觸過一點OpenGL，查了一下兩者的聯絡。有個圖很形象。
WebGL 1.0 基於OpenGL ES 2.0（OpenGL ES是針對移動裝置的OpenGL）。
複製程式碼為什麼是基於2.0呢?
因為OpenGL2.0之前沒有著色器。從2.0之後開始才支援了這個非常重要的特性，“可程式設計著色器方法”。有沒有顏色還是很重要的。
那麼OpenGL是什麼呢。OpenGL並不是一個API或者SDK，而是一組規範，Khronos Group團隊維護這個規範（我也不知道是啥團隊）。
這組規範定義了一組函式，這組函式傳入的是什麼引數，傳出的是什麼結果。由於只是這樣的一組規範，所以只要合乎規範，誰都能以不同的方式實現函式。
瞭解到此感覺已經可以了。
WebGL
WebGL是大部分瀏覽器直接支援的一種3D繪圖示準
複製程式碼Google在這個網站上webglsamples.org/釋出了一些WebGL做出的樣品。
炫酷到讓人心動，老司機已經感覺到這個東西沒那麼好學了。
Three.js
如果直接使用WebGL進行開發的話，十分吃力，然而這個Three.js 已經火了很多年了，Three.js 是WebGL的一個開源框架。封裝了很多api，使用方便，節省我們的開發細節。
所以我打算通過Three.js 輸出一片Demo來熟悉3D的Javascript.
Start
首先我們先搭建一個本地服務。
根目錄下建立index.js服務啟動檔案，和一個專案資料夾www
然後我們開始寫業務檔案
想象螢幕裡就是個小世界，你就是上帝，你先構建了個空間。
建立相機，就是你看小世界的角度
- PerspectiveCamera(fov, aspect, near, far)
- Fov – 相機的視錐體的垂直視野角
- Aspect – 相機視錐體的長寬比
- Near – 相機視錐體的近平面
- Far – 相機視錐體的遠平面
渲染器決定了渲染的結果應該畫在元素的什麼元素上面，並且以怎樣的方式來繪製。
就是個單純的座標軸3緯長度為200
建立地板，設定紋理引數。這裡我選擇了以一張grond草坪樣式的紋理貼紙。
我們還需要設定一下地板的大小及位置
是的，scene.add方法就是將你創造的任何東西放到場景中去。
我們將渲染器插入到頁面中去
開啟渲染，看一下效果.
效果大概就是這個樣子，一片黑，座標軸到是有了
因為我們的材質沒有光，上帝說要有光，對吧，剛才我的草坪哪去了。
再來看一下效果
空蕩蕩的草坪上有個座標系。
這時候我們發現，我們無法移動視角。
孤單的場景，這時候上帝想加入一些東西，後來想想加個立方體也太沒創意了，所以就去查了查加入個3D MAX的模型。
three.js支援計入obj資料模型及mlt貼圖檔案。我就去找了找，好看的模型超級貴，這年頭版權意識都起來了，我也很尊重版權這個東西。所以弄了個沒那麼炫酷的、你們絕對猜不到的。電塔...
話不多說，看一下匯入模型程式碼
看一下效果
看一下動效
有沒有種回到苞米地的感覺。
GitHub
附上GitHub地址：
user-gold-cdn.xitu.io/2019/5/17/1…
END
經過初步瞭解，越發感覺這個東西深不見底，一切皆有可能。如果條件允許的話，我十分願意在WebGL的海洋裡肆意遨遊。尤其是本人特別喜歡動畫效果。
emmm，不要催我的DIV監控平臺下..... 不妥更的作者不是好前端。
我對那篇文章的要求比較高，一直沒構思好，這篇文章有一點是為了頂績效。
先溜了，最近可能是高產母豬，績效要寫8篇。。。。