Three.js / DOC
Manual
创建一个场景
本节的目标是对Three.js作一个简单的介绍。我们将从设立一个场景开始，用一个旋转的立方体。示例见下文.
什么是Three.js？
如果你正在读这篇文章，你可能对Three.js有一定的了解，那我们来简单地介绍下Three.js是什么. Three.js是一个库，使得WebGL的3D效果在浏览器中运用很容易。而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行，而一个Three.js只需要一点点代码.在我们开始之前
使用Three.js，你需要有地方来显示它。保存下面的代码为HTML文件在计算机上，并在浏览器中打开它。
首先浏览器要支持,最重要的是要支持HTML5 (-o-) 哈哈,IE 6,7,8呵呵. chrom要开启
My first Three.js app
这就是全部。下面所有的代码放入空<script>标签中。
创建场景
要真正能够显示,Three.js要做什么呢，我们需要三样东西：一个场景，一个摄像头和一个渲染器.
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 );
让我们花点时间来解释一下这是怎么回事。现在，我们已经建立了一个场景(scene),我们的相机(camera)和渲染器(renderer)。Three.js有很多相机我们现在先用一个,之后再做详细介绍,让我们试使用一个PerspectiveCamera。PerspectiveCamera有四个参数,下面我做下简单介绍,详细介绍见以后的Camera部分咯. 参数1.为 ,参数2为纵横比。这参数几乎总是使用的元素的宽度除以高度，否则你会看到像老电影中的那样,图像被压扁了.参数3为相机允许离物体的最近距离.参数4为相机允许离物体的最远距离.默认情况之下,相机的上方向为Y轴,右方向为X轴,向里为Z轴.
简单介绍完PerspectiveCamera接下来简单介绍下渲染器,按原文的话来说, This is where the magic happens!创建一个渲染器实例,并设置宽和高,在这里我们设置和场景一样的长和宽,同样我们还可以设置为window.innerWidth/2 和 window.innnerHeight/2 ,设置成这样后不是说里面的图像变为了1/2,而是变模糊了. ----(原文是这么写的,但是我试了下,发现场景变成1/2大小了,无语)
最后我们把renderer加入到body中,renderer自动会创建一个<canvas>标签加入到<body>中去的.
好,那么接下来我们就在场景里放个立方体(cube)进去吧!
var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5; 要创建一个立方体，我们需要一个CubeGeometry。这是一个对象，它包含了立方体的所有点（顶点）和填充（面）。在以后我们将深入讨论这个.
除了几何形状，我们需要上色的材料。 Three.js带有一些材料，我们在这用MeshBasicMaterial。所有材料需要设置它们的属性的对象。这里为0x00FF00表示的颜色属性，它是绿色的。这颜色的表示和CSS或Photoshop（十六进制的颜色）的表示方式相同。
我们需要第三件事情是一个网格。网格是一个对象，我们需要将几何形状插入进去,把材料应用上去,然后放入场景中,那样就可以自由地移动了.
默认情况下，当我们调用scene.add（），我们添加的东西将被添加到该坐标（0,0,0）。这会导致相机和多维数据集重叠。为了避免这种情况，我们只需将相机移出来一点就可以了。
渲染场景
如果您复制以上代码到我们前面创建的HTML文件，你将无法看到任何东西。这是因为我们还没有实际渲染任何东西。为此，我们需要渲染这一步骤。
function render() { requestAnimationFrame(render); renderer.render(scene, camera);}render();
这将创建一个渲染循环，导致渲染器绘制场景每秒60次(FPS 60)。在这有人可能会问为什么不用setInterval呢,因为requestAnimationFrame 在你的浏览器浏览其他页面时,这个页面的效果将停止渲染,这样能做到更好的优化,不会浪费浏览器宝贵的处理能力,和电脑的电量.而setInterval很死板,不管你在浏览什么只要那个页面还开着,渲染就会不停地在做.
会动的立方体
如果之前你按照我的步骤去做了,你会看到一个绿色的立方体,现在我们来点噱头的东西.让小立方体动起来.添加下面代码到上面的render函数中
cube.rotation.x += 0.1;cube.rotation.y += 0.1;
这将在每帧（每秒60次），使立方体产生很好的旋转动画.
最终成果(嘎嘎)
恭喜！现在，您已经完成了第一个Three.js的应用程序。有一个好的开始了哈~ 完整的代码下面提供。把玩它，以获得对它更好的理解哦~My first Three.js app
没有three.js 就去下哇.