WebGl中文網看了幾篇教程，又百度了幾篇文章，頓時感覺手癢，打開編輯器，寫個demo玩玩。
demo是寫在vue項目中的，所以首先：
npm install three --save;
npm install tween --save;
安裝依賴包（目前階段tween用不上，但是先一起安裝了）。
到具體的vue模板中import這個庫：
import * as Three from 'three'；
注意：這個必須在使用three.js的模板文件中import，在main.js中引入是無效的，親測。
一、三大組件
three.js的三大組件，是缺一不可的，分別是場景（scene）、相機（camera）、渲染器（renderer）
首先在data中聲明這些變量，然后定義一個init函數來初始化three.js的環境。
二、初始化環境
在這里我加了一個判斷，因為考慮到用戶有可能需要全屏展示WebGl圖像，又有可能只是在具體的DOM中展示WebGl圖像，然后其余的操作，注釋里都有，應該不難理解。
三、往場景中添加mesh模型
在計算機里，3D世界是由點組成，兩個點能夠組成一條直線，三個不在一條直線上的點就能夠組成一個三角形面，無數三角形面就能夠組成各種形狀的物體：
通常把這種網格模型叫做mesh模型，所以接下來就是往場景中添加mesh模型。
四、動畫效果
這里只是一個簡單的自動旋轉效果，既然要實現自動旋轉，無疑需要兩個要素：偏移量、定時器。
說到定時器，大家自然想到setInterval()，但是這個定時器有它的局限性，它的內在運行機制決定了時間間隔參數實際上只是指定了把動畫代碼添加到瀏覽器UI線程隊列中以等待執行的時間。如果隊列前面已經加入了其他任務，那動畫代碼就要等前面的任務完成后再執行。
requestAnimationFrame采用系統時間間隔，保持最佳繪制效率，不會因為間隔時間過短，造成過度繪制，增加開銷；也不會因為間隔時間太長，使用動畫卡頓不流暢，讓各種網頁動畫效果能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。
注：大多數電腦圖形渲染1S大概是60幀，所以較流暢的定時器周期一般是1000/60~~17ms。
上面代碼，每次重繪或回流中，都會增加x軸和y軸的偏移量，從而實現旋轉。
五、效果圖