WebGL-Demo

目錄

• 前言
• OpenGL
• WebGL
• Three.js
• 輸出一個DEMO
• GitHub
• END

前言

最近拖更蠻嚴重，由於對本身的要求高了一大截。

最近玩了個Three.js的Demo，也算了解了一波前端的動畫方面的延伸，由於我公司主要業務爲大數據，學了不少數據層的東西，動畫方面沒什麼用武之地，可是我是喜歡動畫效果的，哎，有沒有種逼良爲娼的感受。

OpenGL

想入門WebGL的時候就查了不少文章，之前學c++的時候接觸過一點OpenGL，查了一下二者的聯繫。有個圖很形象。

（圖出自： www.cnblogs.com/mirror-pc/p…

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篇。。。。