前言：本篇主要是three.js的一個介紹，瞭解WebGL與three.js的關係。以及three.js的四個重要的組建。
文章目錄
一、什麼是WebGL？
WebGL是一項可以在瀏覽器中流暢展示3D模型和場景的一種技術。他使用JavaScript作爲編程語言，調用瀏覽器支持的3D繪製函數，來實現3D模型和場景的展現。
1.1瀏覽器爲什麼能繪製3D？
因爲瀏覽器實現了OpenGL es的規範，這套規範可以直接使用指令操作顯卡，使顯卡渲染的3D世界，直接反應到瀏覽器中。
1.2webgl能做什麼
- 遊戲
- 家居
- 虛擬現實
- 城市地圖
- CAD製圖
1.3 WebGL與three.js的關係
three.js是一個封裝好的WebGL庫，他使WebGL的學習更爲簡單。
1.4 導入three.js
（1）直接npm
如果使用了框架，可以npm後再導入
npm install three --save
在使用的文件中引入
var THREE = require('three');
//或者
import * as THREE from 'three';
（2）單頁面中引入
首先先在官網下載好最新版本的three.js壓縮包，解壓後在build文件夾中找到three.js文件，將它複製到使用的文件夾下即可。
<script src="./js/three.js"></script>
二、四大組建
在three.js中，要渲染物體到網頁中，需要4個組建：場景、相機、渲染器、和幾何體。有了這四樣東西，才能使用相機將場景渲染到網頁上去。
2.1 場景
場景就是所有物體的容器，可以把任何想要顯示的東西，放在場景中的任何位置。
- 在three.js中場景就只有一種
- 用THREE.Scene來表示。
構建一個場景：
var scene = new THREE.Scene();
2.2 相機
相機決定了場景中哪個角度的景色會顯示出來。我們最終能夠在瀏覽器中看到的景象，就是相機拍攝出來的。
相機分爲兩大類：
- 透視相機
- 正投影相機
定義相機：只要設置不同的相機參數，就能讓相機產生不一樣的效果。
var camera = new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,0.1,1000);
2.2.1 透視相機
透視相機：透視投影符合人們的心理習慣，即離視點近的物體大，離視點遠的物體小，遠到極點即爲消失，成爲滅點。
2.2.2 正投影相機
就是遠處和近處的是一樣大。
2.3 渲染器
渲染器，決定了畫家怎麼把眼前的場景畫到屏幕上，即渲染器決定了渲染的結果應該畫在頁面的什麼元素上，並且以怎樣的方式來繪製。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
注意：渲染器render的DOMElement元素，表示渲染器中的畫布，所有的渲染都是畫在DOMElement上的，所以這裏的appendChild表示將這個domElement掛接在body下面，這樣渲染的結果就能夠在頁面中顯示了。
2.3.1 渲染
渲染應該使用渲染器，結合相機和場景來得到結果畫面。
renderer.render(scene,camera);
//渲染函數的原型
render(scene,camera,renderTarget,forceClear);
- scene:前面定義的場景
- camera:前面定義的相機
- renderTarget:渲染的目標，默認是渲染到前面定義的render變量中
- forceClear:每次繪製之前都將畫布的內容清除，即使自動清楚標誌autoClear爲false，也會清除。
2.3.2 實時渲染和離線渲染
實時渲染：需要不停的對畫面進行渲染，即使畫面中什麼也沒有改變，也需要重新渲染。
其中一個重要的函數就是 requestAnimationFrame(),這個函數就是然後瀏覽器去執行一次參數中的函數，再通過參數的函數去調用，就可以成爲無限循環了。
離線渲染：事先渲染好一幀一幀的圖片，然後再把圖片拼接成電影。
2.4 幾何體
幾何體，就是要顯示在場景中的對象。
三、一個栗子
一個旋轉的正方體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01</title>
<script src="three.js"></script>
</head>
<body>
<script>
//1.創建場景
var scene = new THREE.Scene();
//2.創建相機
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//3.創建渲染器
var renderer = new THREE.WebGLRenderer();
//渲染器的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//將渲染器結果掛載到body中
document.body.appendChild(renderer.domElement);
//4.定義一個幾何體
//var geometry = new THREE.CubeGeometry(1,1,1); 這樣子定義正方體報錯了？？
var geometry = new THREE.BoxGeometry(1,1,1); //定義一個正方體
var material = new THREE.MeshBasicMaterial({
color:0xff0000}); //定義材質
//定義實體，即這是最終展現出來的實體
var cube = new THREE.Mesh(geometry,material);
scene.add(cube); //將實體加到場景裏
//將物體移動到可視位置
camera.position.z = 5;
function render(){
//render函數執行一次就會重新繪製一次
requestAnimationFrame(render); //不斷去調用render這個函數
cube.rotation.x+=0.01; //繞x的旋轉+0.01
cube.rotation.y+=0.01;
renderer.render(scene,camera);
}
render();
</script>
</body>
</html>