假設你已經創建好了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版本上，直接就看不到圖形了，這點切記。