概述

Three.js是一个前端的3D渲染库。

效果展示：

首先请大家想想一下自己照相的时候，我们抓着手机（考虑现在摄像头已经是手机标配了，且手机比摄像机普遍，故以手机为例），我们在屏幕里看到了现实世界的真实场景，这是将3D世界显示在了2D屏幕上。我们使用Three.js开发3D应用时，就需要基于这个最简单的场景来进行开发。

好了下面开始我们的第一个例子 —— 在网页中创建一个旋转的立方体。

第一步先来创建我们的网页结构，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first Three.js app</title>
	</head>
	<body>
		<div style="width:200px;height:200px;" id="test"></div>
		<script src="js/three.js"></script>
		<script>
			// 代码
		</script>
	</body>
</html>

下面我们的所有代码都写在第二个Script标签里。

第二步我们来创建场景、摄像机、渲染器

var parent = document.getElementById("test");
// 创建场景
var scene = new THREE.Scene();
// 创建摄像机
var camera = new THREE.PerspectiveCamera( 75, parent.clientWidth / parent.clientHeight, 0.1, 1000 );
// 创建渲染器
var renderer = new THREE.WebGLRenderer();

场景（Scene）就是3D世界（我们想展示的那个世界）中拥有的实质物体的集合，而摄像头（Camera）就是我们的镜头所在的位置（想象一下我们正拿着手机四处晃，手机的摄像头就是此处的摄像机）。最后的渲染器是非常非常重要的，它的作用相当于手机，嗯，是手机而不是手机配件！渲染器需要将场景里的3D物体以2D形式展现出来，相对于手机摄像头照到场景里的东西后，需要通过手机处理后才能显示在屏幕上，“经过手机处理” 即经过渲染器处理。你看，何其重要！

创建好了场景，下面我们就来往场景中添加东西，也就是往我们想要创建的那个世界中添加东西，在这个实例中，当然是添加立方体了，代码如下：

// 创建一个盒装几何体
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 );
// 设置立方体的位置，z为屏幕深度（0在屏幕上，小于0在屏幕“里面”，大于0在屏幕“外面”），值越小就离我们越“远”，体现出来的就是立方体越小
cube.position.z = -2;

每一行的用处写在了注释里。从代码可以看出，Geometry（几何体）肯定不止一种，Material（材质）也肯定不止一种，我们这里用的都是最简单的。一个最基本的逻辑是，用材质来填充物体。

cube.position设置立方体的位置，z是屏幕深度，（x,y）是相对于屏幕中心（原点）的位置。

现在如果打开这个html的话，我们除了看到一个黑乎乎的场景外，看不到任何东西，因为我们还没有将场景、摄像机和渲染器连接起来。

// 启动渲染循环
function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();

好了，renderer.render(scene, camera)将三者联系起来了，我们也能在屏幕上看到立方体了。requestAnimationFrame建立了一个循环，每秒将这个场景绘制60次，这样，就能达到动态的效果了。现在看到效果，因为目前立方体是不动的。修改一下：

function render() {
	requestAnimationFrame( render );
	cube.rotation.y += 0.05;
	renderer.render( scene, camera );
}
render();

cube.rotation是立方体的旋转角度，每次渲染都将立方体沿y轴渲染0.05度。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first Three.js app</title>
	</head>
	<body>
		<div style="width:200px;height:200px;" id="test"></div>
		<script src="js/three.js"></script>
		<script>
			var parent = document.getElementById("test");
			// 创建场景
			var scene = new THREE.Scene();
			// 创建摄像机
			var camera = new THREE.PerspectiveCamera( 75, parent.clientWidth / parent.clientHeight, 0.1, 1000 );
			// 创建渲染器
			var renderer = new THREE.WebGLRenderer();
			// 设置渲染器大小
			renderer.setSize( parent.clientWidth, parent.clientHeight);
			// 将渲染器元素添加到我们的body里，这个元素实际上是一个<canvas>元素
			parent.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 );
			// 设置立方体的位置，z为屏幕深度（0在屏幕上，小于0在屏幕“里面”，大于0在屏幕“外面”），值越小就离我们越“远”，体现出来的就是立方体越小
			cube.position.z = -2;
			// 启动渲染循环
			function render() {
				requestAnimationFrame( render );
				cube.rotation.y += 0.05;
				renderer.render( scene, camera );
			}
			render();
		</script>
	</body>
</html>