6.md

动画

本章会学到Three.js进行动态渲染.此外会学习到Three.js的另外一个库,用来观测FPS

动画原理

其实动画原理很简单,对于Three.js动画的实现也是通过每秒多次绘制画面来实现的

setInterval

其实这个方法不好,并不能保证刚好被绘制,可以从<<webkit技术内幕中看到相关描述>>

requestAnimationFrame

这是个主流方法,这是浏览器将要渲染下一帧时进行的回调,基本上移动端就用这个,兼容方法

var raf = window.requestAnimationFrame || 
			window.WebkitRequestAnimationFrame || 
			function(fn){setTimeout(fn, 16.7)}

使用stat.js记录FPS

stat.js是Three.js的一个插件,用它能知道FPS的信息,官方例子如下

var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

function animate() {

	stats.begin();

	// monitored code goes here

	stats.end();

	requestAnimationFrame( animate );

}

requestAnimationFrame( animate );