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軸的偏移量，從而實現旋轉。

五、效果圖