由于對WebGL的興趣，初步接觸Three.js，決定將學習過程進行記錄，以便于后期復習。
初步以實現3D機房為目標，熟悉Three.js，初步設想3D機房構思如圖1：
一、下載Three.js
先去下載代碼，它的地址是： https://github.com/mrdoob/three.js。
其中，有用的是Build目錄，其中包含兩個文件，three.js 和three.min.js 。這是three.js最終被引用的文件。一個已經壓縮，一個沒有壓縮的js文件。
為了更清晰的理解three.js原理，在此使用three.js。
二、IDE選擇
由于大部分是對JavaScript進行開發(fā)操作，因此WebStorm和VS code是最佳選擇。
根據操作習慣和輕量級原因，選擇VS code作為IDE編輯器。
三、基本環(huán)境
1.npm 安裝
2.vs code相關插件安裝（美化插件、智能提示插件等）
3.npm插件安裝，包括live-server（由于three.js一些渲染和文件，需要web服務器的形式獲取，不支持跨域）
四、three.js基本概念
1.OpenGL,WebGL到Three.js
OpenGL大概許多人都有所耳聞，它是最常用的跨平臺圖形庫。
WebGL是基于OpenGL設計的面向web的圖形標準，提供了一系列JavaScript API，通過這些API進行圖形渲染將得以利用圖形硬件從而獲得較高性能。
Three.js是通過對WebGL接口的封裝與簡化而形成的一個易用的圖形庫。
簡單點的說法：
WebGL可以看成是瀏覽器給我們提供的接口，在javascript中可以直接用這些API進行3D圖形的繪制；而Three.js就是在這些接口上又幫我們封裝得更好用一些。
2.Three.js中的一些概念
要在屏幕上展示3D圖形，思路大體上都是這樣的：
構建一個三維空間，Three中稱之為場景(Scene)；
選擇一個觀察點，并確定觀察方向/角度等，Three中稱之為相機(Camera)；
在場景中添加供觀察的物體Three中的物體有很多種，包括Mesh,Line,Points等，它們都繼承自Object3D類；
將觀察到的場景渲染到屏幕上的指定區(qū)域，Three中使用Renderer完成這一工作
3.Scene
場景是所有物體的容器，也對應著我們創(chuàng)建的三維世界。
4.Camera 坐標系
Camera是三維世界中的觀察者，為了觀察這個世界，首先我們要描述空間中的位置。
Three中使用采用常見的右手坐標系定位。
5.三維投影
Three中的相機有兩種，分別是正投影相機THREE.OrthographicCamera和透視投影相機THREE.PerspectiveCamera。
正交投影與透視投影的區(qū)別如上圖所示，左圖是正交投影，物體發(fā)出的光平行地投射到屏幕上，遠近的方塊都是一樣大的；右圖是透視投影，近大遠小，符合我們平時看東西的感覺。
1)正交投影相機
注：圖中的”視點”對應著Three中的Camera。
這里補充一個視景體的概念：視景體是一個幾何體，只有視景體內的物體才會被我們看到，視景體之外的物體將被裁剪掉。這是為了去除不必要的運算。
正交投影相機的視景體是一個長方體，OrthographicCamera的構造函數是這樣的：OrthographicCamera( left, right, top, bottom, near, far )
Camera本身可以看作是一個點，left則表示左平面在左右方向上與Camera的距離。另外幾個參數同理。于是六個參數分別定義了視景體六個面的位置。
可以近似地認為，視景體里的物體平行投影到近平面上，然后近平面上的圖像被渲染到屏幕上。
2)透視投影相機
透視投影相機的視景體是個四棱臺，它的構造函數是這樣的：PerspectiveCamera( fov, aspect, near, far )
fov對應著圖中的視角，是上下兩面的夾角；aspect是近平面的寬高比；在加上近平面距離near，遠平面距離far，就可以唯一確定這個視景體了。
因此，選擇透視投影相機THREE.PerspectiveCamera，作為使用相機。
6.Objects
Three中供顯示的物體有很多，它們都繼承自Object3D類，這里我們主要看一下Mesh和Points兩種。
1)Mesh
我們都知道，計算機的世界里，一條弧線是由有限個點構成的有限條線段連接得到的。線段很多時，看起來就是一條平滑的弧線了。
計算機中的三維模型也是類似的，普遍的做法是用三角形組成的網格來描述，我們把這種模型稱之為Mesh模型。
這是那只著名的斯坦福兔子。它在3D圖形中的地位與數字圖像處理領域中著名的lena是類似的。
看這只兔子，隨著三角形數量的增加，它的表面越來越平滑/準確。
在Three中，Mesh的構造函數是這樣的：Mesh( geometry, material )
geometry是它的形狀，material是它的材質。
不止是Mesh，創(chuàng)建很多物體都要用到這兩個屬性。下面我們來看看這兩個重要的屬性。
(1).Geometry
Geometry，形狀，相當直觀。Geometry通過存儲模型用到的點集和點間關系(哪些點構成一個三角形)來達到描述物體形狀的目的。
Three提供了立方體(其實是長方體)、平面(其實是長方形)、球體、圓形、圓柱、圓臺等許多基本形狀；
你也可以通過自己定義每個點的位置來構造形狀；
對于比較復雜的形狀，我們還可以通過外部的模型文件導入。
(2).Material
Material，材質，這就沒有形狀那么直觀了。
材質其實是物體表面除了形狀以為所有可視屬性的集合，例如色彩、紋理、光滑度、透明度、反射率、折射率、發(fā)光度。
這里講一下材質(Material)、貼圖(Map)和紋理(Texture)的關系。
材質上面已經提到了，它包括了貼圖以及其它。
貼圖其實是‘貼'和‘圖'，它包括了圖片和圖片應當貼到什么位置。
紋理嘛，其實就是‘圖'了。
Three提供了多種材質可供選擇，能夠自由地選擇漫反射/鏡面反射等材質。
2).Points
Points其實就是一堆點的集合，它在之前很長時間都被稱為ParticleSystem(粒子系統(tǒng))，r68版本時更名為PointCloud,r72版本時才更名為Points。更名主要是因為，Mr.doob認為，粒子系統(tǒng)應當是包括粒子和相關的物理特性的處理的一套完整體系，而Three中的Points簡單得多。因此最終這個類被命名為Points。
7.Light
光影效果是讓畫面豐富的重要因素。
Three提供了包括環(huán)境光AmbientLight、點光源PointLight、 聚光燈SpotLight、方向光DirectionalLight、半球光HemisphereLight等多種光源。
只要在場景中添加需要的光源就好了。
8.Renderer
在場景中建立了各種物體，也有了光，還有觀察物體的相機，是時候把看到的東西渲染到屏幕上了。這就是Render做的事情了。
Renderer綁定一個canvas對象，并可以設置大小，默認背景顏色等屬性。
調用Renderer的render函數，傳入scene和camera，就可以把圖像渲染到canvas中了。
