threeJs 是用来方便快捷创建 3D 视图的库，内部对 WebGL 的接口进行了封装。使得编写代码的过程更加贴近常规思维。
基础 Api
1、创建画布
如果要画一幅画，首先需要的是一块画布：
var renderer = new THREE.WebGLRenderer({
//
canvas: document.getElementById('main')
})
// 设置画布的颜色
renderer.setClearColor('0x000000')
这样就有了一块画布，可以用来承载我们的画。
2、创建场景
场景的概念和画布很类似，场景内放物体，场景放到画布上。
var scene = new THREE.Scene()
之后创建的所有东西，都是放到场景内。
3、创建照相机
场景是一个“黑盒子”，从外部看不到任何东西，所以需要使用“照相机”来观察内部的物体。
var camera = new THREE.PerspectiveCamera(45, 4/3, 1, 1000)
创建好了一个照相机，回忆起之前学过的物理，照相机都是由一个“点”开始以椎体的视线向外延伸。
照相机
照相机在创建好之后，就可以把照相机放到我们想要的地方：
camera.position.set(0, 0, 5)
坐标系与照相机
4、创建物体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
})
)
创建了一个长宽高均为 1 的正方体，并且颜色为0xf0000并且是三维线框(wireframe: true)。
然后只要将这个正方体放到场景中，再把场景和照相机放到画布上就可以了。
5、显示
scene.add(cube)
// 重点在这一句，显示场景与相机
renderer.render(scene, camera)
控制照相机
虽然照相机显示出了我们的正方体，但是由于是面对面，所以无法看出正方体的立体感，需要调整下照相机的位置，让照相机俯视或者仰视。
改变照相机位置
所以肯定要改变照相机的位置：
// 在 x 轴与 y 轴方向上都 + 1
camera.position.set(1, 1, 5)
改变照相机位置
从图片上可以比较直观看出移动的方向，仅仅是改变了在 x 和 y 轴上的距离，没有改变 z 轴距离，所以和改变距离前还是在同一个平面上。
联系日常生活的经验，照相机到了这个位置，物体相对的就是等于往反方向移动。所以原来在正中央的正方体”移动“到了左下角。
改变照相机角度
camera.lookAt(new THREE.Vector3(0, 0, 0))
就可以将照相机的角度朝向原点。
改变照相机角度
控制物体
改变物体位置
初始化的物体都是在原点的，所以需要将其重新设置位置，每个物体都有position属性，通过改变该属性的x、y、z值就可以改变位置了，也可以调用position.set()传入x, y, z进行改变。
可能要注意的就是轴的方向。
物体材质
材质就是说这个物体是什么做的，金属和布就有很大区别。
如果不通过触摸，就需要借助”光“来将材质进行区分，金属有高光而布没有。
