three。js和webGL
引用官方的說法：
three。js是使用WebGL來繪製三維效果的，three。js封裝了諸如場景、燈光、陰影、材質、貼圖、空間運算等一系列功能，讓你不必要再從底層WebGL開始寫起。
所以學習three。js並不需要專門去學習webGL，當然有基礎肯定是有幫助的。
官網說明
1。開啟官網看到下圖，右邊是一些3d樣例，對初學沒什麼用。
官網首頁
左邊r130代表的版本號，這邊建議大家去看的是
文件說明(documentation)
和
resources的第一個學習資源(Three.js Fundamentals),
他們都有對應的中文翻譯，講得比較基礎適合入門
three。js版本選擇
1） three。js版本更新得很快，今天你下載了一個新版本，明天可能又更新了。很多舊版的方法在新版中被刪除，一些方法的引用檔案也有所改變，在網上搜索到的很多教程都是
r6-r9
版本，方法的使用看起來也是各異，學習起來挺混亂的。這裡我使用
r130
版本（編寫這邊文章時候的最新版本）。各版本官方下載地址：
https：//github。com/mrdoob/three。js/tags
。
2） 下載完之後解壓得到three。js-master資料夾。這邊將build裡面的
three.js
拿出來，在自己專案做練習，examples裡面有各種樣例的程式碼包括了素材和對應的js依賴，之後可以拿來做練習（畢竟3d素材自己不好弄）。
目錄結構
開發工具
我使用的vscode ，安裝live Server外掛，可以跑本地服務，解決了圖片等素材引用的跨域問題，當然你也可以直接使用官方的腳手架來練習。官方腳手架需要node環境，如果不瞭解的建議使用vscode。
五。第一個3d程式
這裡我使用官網上的例子。先上全程式碼，附註釋。可以執行下看效果。
1。建立了一個場景，也就是3d模型等展示的舞臺。
const scene = new THREE。Scene（）；
2。建立一個相機，他拍到的地方就是我們看到的內容，這裡建立的是透視相
第一個引數：
是角度表示看到的範圍，
第二個表示：
長寬比，作用是展示的物體可以正常比例顯示
三四引數表示
：近截面（near）和遠截面（far），當物體某些部分比攝像機的遠截面遠或者比近截面近的時候，該這些部分將不會被渲染到場景中。
const camera = new THREE。PerspectiveCamera（50， window。innerWidth / window。innerHeight， 0。1， 1000）
3。建立一個渲染器，將場景和相機放入，渲染畫面，設定渲染範圍，並新增到頁面中
const renderer = new THREE。WebGLRenderer（）； renderer。setSize（window。innerWidth， window。innerHeight）； document。body。appendChild（renderer。domElement）；
4。建立簡單的3d模型
// 建立一個正方體 const geometry = new THREE。BoxGeometry（）； // 建立網格基礎材質 可以理解為外表樣子，材質有很多種，詳細可以查文件 const material = new THREE。MeshBasicMaterial（{ color： 0x00ff00 }）； // 建立網格 將他們加入網格中在新增到場景，網格包含一個幾何體以及作用在此幾何體上的材質 const cube = new THREE。Mesh（geometry， material）； scene。add（cube）；
5。渲染
// 這邊是將相機拉遠了，便於觀察。如下圖所示camera。position。z = 5；// 新增動畫，渲染const animate = function （） { requestAnimationFrame（ animate ）； cube。rotation。x += 0。01； cube。rotation。y += 0。01； renderer。render（ scene， camera ）； }； animate（）；
6。效果圖
