前不久在微信公衆号上看到一篇文章介紹three.js實作webVR的文章，覺得前端真的是無所不能呀，下面是three.js官網的一個事例，自己簡單翻譯一遍增加印象和了解。
Creating a scene
Before we start
官網有提供一個html模闆，複制在自己的編輯器裡，并下載下傳three.js庫。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style>
body { margin: ; }
canvas { width: %; height: % }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
Creating the scene
運作three.js程式，我們需要三樣東西：
A scene, a camera, and a renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( , window.innerWidth / window.innerHeight, , );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
我們現在建立了
the scene, our camera and the renderer
，在three.js中與camera有點不同的是，我們使用
PerspectiveCamera
：
1.第一個參數是視圖領域；
2.第二個參數是樣式比例，我們總是想要元素的width被height分割，或者，當你在寬屏放映老電影時，将會得到相同的結果，圖像看起來被壓扁了。
3.後面的參數是對象的near and far水準。意思就是，如果對象離camera距離過遠大于這個值或者太近小于這個值都不會被渲染出來。現在，不必太擔心這個值，你可能會使用其他值來得到一個更舒适的performance。
接下來便是渲染了。這裡使用了WebGLRenderer，three.js借用了一些别的東西以幫助使用者相容那些不支援webgl的浏覽器。
為了建立一個render執行個體，我們需要set size,我們使用了app的width，height設定size，這樣更好的填充我們的app.如果想要更好表現出來，可以使用比例子中設定的width，height更小的值。
如果你要使用一個低分辨率的來渲染建立的對象，那麼你需要調用
setSize
的第三個參數updateStyle，并設定為false，例如，
setSize(window.innerWidth/2, window.innerHeight/2, false)
最後，我們把render element添加至HTML document中。一個canvas元素便展現在裝置中。
添加下面代碼，便實作了一個3d視圖。
var geometry = new THREE.BoxGeometry( , , );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = ;
建立一個3d元素，我們需要
BoxGeometry
，它是一個對象容納我們建立的點和填充物。點選了解更多
在這個幾何體中，我們需要添加一些material來粉飾它。three.js有許多material，但是卻堅持使用MeshBasicMaterial。所有的material都含有我們需要調用的屬性，為了友善，這裡隻使用了顔色屬性。
第三件我們需要做的就是mesh。一個mesh對象一個幾何體geometry,并調用metarial給這個幾何體，這樣我們就能渲染進scene中，并可以四處移動。
預設的，three.js使用scene.add()，由于，預設的會把對象添加至坐标（0,0,0）的位置，為了避免對象的覆寫，是以我們需要給對象來點偏移，就如例子中camera.position.z = 5;，移動camera一點點。
Rendering the scene
如果你隻是copy了上邊的代碼放在html檔案中，你将不會看到任何東西，因為我們還沒有render任何東西，是以，我們需要調用一個render loop。
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
我們将會調用一個loop會使得每秒render to draw the scene 60次.如果你是第一次寫game，你會問為什麼我們不使用setInteral？我們可以使用，但是requestAnimationFrame有一系列的好處，可能最重要的原因是當我們離開目前頁面，動畫會自動暫停，是以很好的節約了寶貴的程序空間。
Animating the cube
下面我們添加一些代碼讓它轉動起來
cube.rotation.x += ;
cube.rotation.y += ;
如此這個3d幾何體的每個部分都會動起來，當然，元素的移動或者改變都會經過the render loop.
ok,到此就完成了一個小demo，下面是完整的代碼：
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: ; }
canvas { width: %; height: % }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( , window.innerWidth/window.innerHeight, , );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( , , );
var material = new THREE.MeshBasicMaterial( { color: } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = ;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += ;
cube.rotation.y += ;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
文章來源：http://threejs.org/docs/index.html#Reference/Extras.Geometries/BoxGeometry
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)