在h5火熱的當下，各種絢麗的場景層出不窮。但是，我們是不是發現大部分或者說絕大部分的網站只是一個向用戶展示信息的平臺。至於用戶與其進行的交互則僅限於下拉瀏覽，點擊觸發，或者填寫一些表單信息。
我一直在思考下一個web時代，並不敢斷言一定會是WebGL，但是在不久後的幾年中，用戶在瀏覽網站時所能進行的交互將會越來越多，一種類似於遊戲的渲染將會更多的應用在Web開發中。
下面是我對WebGL的第三方庫Three.js的學習心得，如有不足還望諒解。非常希望您能提出寶貴意見。
開始學習：)
1、引入Three.js
在進行開發之前，我們要要引入開發所必須的庫文件three.js。這個建議在官網上下載。建議直接左側download，裏面包含的其他js文件將在後期還會有用。下載完成後，我們便需要引入js文件。下面是引入three.js文件的代碼展示。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
2.創建場景
場景的創建同Scene對象，他是設置由three.js呈現的內容的位置，是我們放置燈光，物體和照相機的地方。
var scene = new THREE.Scene();//使用場景
3.創建相機
下面的語句表示的是創建一個透視相機，什麼是透視相機爲了讓顯示的更像3維的效果。透視相機在現實的 時候會根據距離的遠近來顯示場景，離的近會顯示大，離的遠會顯示的小。其實就像我們眼睛一眼，離的近所能看見的物品少，離的遠就能看見較多的物品。
PerspectiveCamera( fov, aspect, near, far )有三個四個參數，分別是仰角，長寬比 近裁剪面 遠裁剪面。
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
4.渲染
使用WebGL來渲染場景。WebGLRenderer含有參數，在定義參數中可以將場景渲染於特定的canvas中，不寫參數時爲默認值。
var renderer = new THREE.WebGLRenderer();//渲染
renderer.setSize( window.innerWidth, window.innerHeight );//設置顯示的效果 如果需要顯示很少的分辨率的話 可以設置更小的高度的寬度
document.body.appendChild( renderer.domElement );//渲染元素到body中顯示
5.創建一個geometry幾何體
BoxGeometry能夠創建一個box。其中的三個參數分別表示長寬高。
MeshBasicMaterial 表示用最簡單的方式來繪製幾何體。其中color是設置幾何體的顏色。
Mesh函數調用geometry,和material來構造出幾何體。
最後將我們所畫的正方體添加在場景中。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
6.渲染顯示
在我們創建了場景、照相機、和渲染的對象，並且我們還創建了一個幾何體添加在場景中時，我們還不能顯示出來這個正方形的幾何體。創建的場景是需要渲染的。
renderer.render( scene, camera ); //渲染場景和攝像機
7.完整代碼展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>the first three.js </title>
<style>
body { margin: 0;}
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<script src="../js/three.js"></script>
<script>
var scene = new THREE.Scene();//使用場景
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
}
animate();
</script>
</body>