three.js学习
三大组建：场景(scene),相机(camera),渲染器(renderer)
创建三要素代码：
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) // 将渲染器对应的canvas(画布)添加到body中一. 场景
在three.js中场景就只有一种，就是用var scene = new THREE.Scene();来表示
总结：场景是所有物体的容器，如需使用就把物体放到场景中就可以。
二. 相机
相机有很多种，场景中的角度(参数)不同，显示出来的景色也不一样。
1. 透明相机(THREE.Perspective)
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.docuElement);四. 添加物体到场景中
var geometry = new THREE.CubeGeometry(1,1,1); // geometry - 几何
var meterial = new THREE.MeshBasicMaterial({color:0x00ff00}); // meterial - 材料,素材; color:0x00ff00 深蓝色
var cube = new THREE.Mesh(geometry, material); // cube - 立方体; Mesh - 网格
scene.add(cube);CubeGeometry语法：
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides);
width: 立方体X轴的长度
height: 立方体Y轴的长度
depth: 立方体Z轴的深度(长度)
以上3个参数就能够确定一个立方体
segmentsWidth: 分段宽度
segmentsHeight: 分段高度
materials: 材料五. 渲染
渲染使用渲染器，结合相机和场景来得到结果画面。实现这个功能的函数是
renderer.render(scene, camera);
渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
六. 渲染循环
渲染有两种方式：实时渲染和离线渲染 。
1. 事先渲染好一帧一帧的图片，然后再把图片拼接成电影的。这就是离线渲染。
2. 不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染，这就是实时渲染。