简介
three.js 是一款WebGL框架，WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西，可供查阅的资料也不多。这篇文章仅是一个入门篇，介绍如何绘制一个3D正方体。
Three.js中的基本概念
Three.js包含3个基本概念：场景（Scene）、相机（Camera）和渲染器（Renderer）。
场景就是需要绘制的对象，相机代表取景的视角，渲染器是绘制的载体（可以挂靠到浏览器的DOM元素中），
也就是我们通过相机拍摄场景然后绘制到目标介质中去。
创建场景、相机和渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth,window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth,window.innerHeight );
document.body.appendChild( renderer.domElement );
上述代码首先创建一个场景，然后创建一个PerspectiveCamera（立体感的相机），接着创建了一个WebGL的渲染器（注意Three.js也支持非3D的Canvas 2D的渲染器），然后挂靠为HTML文档body的DOM子元素。
介绍完毕，首先奉上实现的效果图：
绘制前的准备
写代码前，要先下载最新的three.js框架包，引入自己的页面。
具体实现过程
准备一个canvas画布
这个画布是我们展现整个3D正方形的画布，也就是上图那个黑色的方框。