前不久在微信公众号上看到一篇文章介绍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=)