WebGL4---让场景动起来
1、场景如何动起来？
有两种实现方式：1）让物体在坐标系里面移动，摄像机不动；2）让摄像机在坐标系里面移动，物体不动；
2、循环渲染
如果我们改变了物体的位置或者颜色之类的属性，就必须重新调用render()函数，才能将新的场景绘制到
浏览器中。否则浏览器不会自动刷新场景的；
renderer.render(scene,camera);
关于循环渲染代码：
function animate(){
render();
requestAnimationFrame(animate);//调用requestAnimationFrame函数，传递一个callback函数，则在
下一个动画帧时，会调用callback;
}
3、改变相机的位置，让物体移动
关键代码如下：
function animation(){
camera.position.x = camera.position.x +1; //不断将相机的位置沿X轴移动1个单位。相机向右移动；
renderer.render(scene,camera);
requestAnimationFrame(animation);
}
4、改变物体自身的位置
关键点： mesh.position.x - =1;//其中mesh是指物体
5、物体运动后，如何评估性能？
在3D的世界中，经常使用帧数的概念来评估性能；
帧数：图形处理器每秒钟能够刷新几次，通常使用fps(Frames Per Second)来表示；
5.1）性能监视器Stats
在Three.js中，性能由一个性能监视器来管理；其中，FPS表示上一秒的帧数，这个值越大越好，一般在60左右；
当点击图片后就显示另一个衡量指标：MS(渲染一帧需要的毫秒数，这个值越小越好)；
5.2）性能监视器Stats的使用
在Three.js中，性能监视器被封装在一个类中，这个类叫做Stats，如下代码：
var stats = new Stats();
stats.setMode(1); //参数为0表示显示FPS界面，参数为1表示MS界面；
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);//stats的domElement表示绘制的目的地（DOM）
setInterval(function(){
stats.start();
//你的每一帧代码
stats.end();
},1000/60)；//关于Stats的begin和end函数本质上是在统计代码执行的时间和帧数，fps = 帧数/时间；该功能被封装在函数update
只要在渲染循环中调用即可；
代码实例如下：
① 在initThree函数中声明stats
stats = new Stats();
stats.domElement.style.position = "absolute";
stats.domElement.style.x = "0px";
stats.domElement.style.y = "0px";
document.getElementById('canvas-frame').appendChild(stats.domElement);
② 在animation函数中加入update函数
stats.update();
6、使用动画引擎Tween.js来创建动画；
①引入引擎文件 <script src="Tween.js"></script>
② 构建一个Tween对象，对Tween进行初始化，
function initTween(){
new TWEEN.Tween(mesh.position)//TWEEN.Tween的构造函数接受的是改变属性的对象；注意：Tween的任何一个函数返回都是自身；
.to({ x: -400},3000)//to函数，接受两个参数，第一个参数是集合，表示动画结束后需要移动到的位置；第二个参数，是完成动画需要的时间，这里是3000ms
.repeat(Infinity)//表示重复无穷次，也可以接受一个整数；
.start();//表示动画开始，默认情况下是匀速的将mesh.position.x移动到-400位置
}
③ 在渲染函数中去不断更新Tween;(TWEEN.update())
