假設你已經建立好了three.js的開發環境（我是寫在vue專案中的），那麼接下來，從頭開始演示是如何用three.js來構建3D圖形的。（筆記本寫的程式碼，螢幕小，所以為了能夠整屏看到完整程式碼，就將字型縮小了，如果覺得看不清的，可以另行放大）

一、頁面DOM結構

正如你所見，這就是一個vue的模板頁面，一個簡單的dom，我們的3D圖形都是渲染在這個名為container的div中的，接下來，開始吧。

二、初始化三要素

場景、相機、渲染器，將繪好的場景渲染到渲染器中，將渲染器通過相機的視角傳達給使用者；

三、往場景中新增mesh模型以及其他

你應該看到上面中間有一個函式是新增mesh的，那我們具體來看看這個函式：

在這裡，只向場景中添加了輔助線和一個立方體；

注意這個立方體的新增過程，第一句是宣告立方體的形狀（怎樣的立方體），第二句是立方體的材質（材質決定最終看到的物體樣子，可能會因為色差的原因，導致物體不見了）。

這裡我的物體是法向量網孔材料（MeshNormalMaterial）的盒狀立方體（BoxGeometry），立方體的位置也會決定我們看到的最終效果。

四、最終效果

五、camera以及輔助線

我用的是three.js的r99版本，所以API上的有些程式碼直接拿來用是會出現錯誤的。

這裡用的是透視相機、除此之外還有立方體相機和正交相機，但是透視相機更符合人類看物體的視角，所以後面也會一直使用透視相機；

相機的x,y,z這就不用多說了，上面那個150其實和z效果差不多，都是用來決定相機的遠近（間接決定所見物體的遠近/大小），如有興趣，可以自己除錯各種值，r99版本中，x、y、z除錯的時候，一次+1,突然加多了，你就發現物體不見了（TT）

上面的程式碼是立方體的一些引數，包括形狀和材質，x、y、z軸偏移量；

尤其注意，r99版本中有很多值都是以1為上限，比如立方體的大小（長寬高），1就等於渲染器的大小，0.5表示渲染器大小的一半，物體的3軸偏移量也是以0.1為步長改變，所以老版本可能（是以畫素為單位）動輒加減個幾百的，到r99版本上，直接就看不到圖形了，這點切記。