三大组建
在three.js中，要渲染物体到网页中，我们需要三个组建：场景(scene),相机(camera),渲染器(renderer),有了这三样东西，才能将物体渲染到网页中去。记住关键语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去
var scene = new THREE.Scene(); //创建场景
//创建透视相机
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChid(renderer.domElement)
场景
在Three.js中场景只有一种，用THREE.Scene来表示，要构建一个场景也很简单，只要new THREE.Scene(),场景是所有物体的容器，如果想显示一个女人，就需要将女人对象加入场景中。
相机
另一个组件是相机，相机决定了场景中那个角色的景色会显示出来，也就是说相机给哪个物体拍照，哪个物体就可以显示在场景中，相机决定了场景中哪个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同的位置，抬头或者低头都能够看到不同的景色。
场景只有一种，但是相机却有很多种。和实现中一样，不同的相机确定了呈现的各个方面，比如有的相机适合人像，有的相机适合景物。专业的景物摄影师根据实际用途不一样，选择不同的相机。对也程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。 在three.js中有很多种相机，常用的就是透视投影相机，正投影相机
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000)
渲染器
最后一步就是设置渲染器，渲染器决定了渲染的结果用该画在页面的什么元素上面，并且以怎样的方式绘制。这里我们定义了一个WebGLRenderer渲染器。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChid(renderer.domElement)
注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染器都是画在domElement上的(其实就是绘制在canvas画布上)，然后用appendChild方法将这个domElement挂接到body下面，这样渲染的结果就能够在页面中显示
添加物体到场景中
那现在，我们将一个物体添加到场景中去
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);
代码中出现了THREE.CubeGeometry是啥玩意，它是一个几何体，CubeGeometry是一个立方体
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
- width:立方体x轴的长度
- height:立方体y轴的长度
- depth:立方体z轴的深度，也就是长度
渲染
终于到了最后一步了，这一步做完，就可以去吃鸡了
渲染应该使用渲染器，结合相机和场景来得到结果画面，渲染的时候，渲染器会根据相机拍的画面把它渲染到我们的画布上，然后挂载到dom上，就可以在浏览器看到啦
renderer.render(scene, camera);
//渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
渲染循环
渲染有两种方式：
- 实时渲染
- 离线渲染
离线渲染:想想《复仇者联盟》中最后英雄们打灭霸的时候的酷炫场景，那肯定不是真的，是电脑渲染出来的，其实画面质量很高，它是实现渲染好一帧一帧的图片，然后把图片拼接成电影的。如果不是先处理，那么电影播放就会很卡的，CPU和GPU根本没有能力在播放的时候渲染出这么高质量的图片
实时渲染:就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染，下面就是一个渲染循环：
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
场景，相机，渲染器之间啥关系
Three.js中的场景是一个物体的容器，要想把物体显示出来，必须要把物体加入场景中去，开发者可以将需要的角色放入场景中去，例如女人，男人，小孩。同时角色自身也管理这其在场景中的位置
相机的作用就是面对场景，在场景中去一个合适的景，把它拍下来。渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。
