Three.js封装了底层的图形接口，使得我们能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。
准备
开发之前先下载Three.js或者Three.min.js，然后在页面上添加标签
<script src="/js/three.js" ></script>
Hello World
使用Three.js要分为五个步骤：
- 设置渲染器(render)
- 设置场景(scene)
- 设置摄像机(camera)
- 设置光源(light)
- 设置物体(object)
渲染器
三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas')//这个是渲染所用的canvas标签
});
renderer.setClearColor(0x000000);//背景
场景(scene)
var scene = new THREE.Scene();
摄像机(camera)
OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);//将摄像机放入场景中
光源(light)
OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。
var light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源向量
scene.add(light);// 追加光源到场景
物体(object)
//声明一个正方形
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);
scene.add(cube);
渲染(render)
renderer.render(scene, camera);
把上面的代码全部合并到一个页面上就是一个最简单的demo。
