Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染。此外，将会介绍一个Three.js作者写的另外一个库stat.js，用来观测每秒帧数（FPS）。
1.实现动画效果
1.1 动画原理
对于Three.js程序而言，动画的实现是通过在每秒中多次重绘画面实现的。
为了衡量画面切换速度，引入了每秒帧数FPS（Frames Per Second）的概念，是指每秒画面重绘的次数。FPS越大，则动画效果越平滑，当FPS小于20时，一般就能明显感受到画面的卡滞现象。
那么FPS是不是越大越好呢？其实也未必。当FPS足够大（比如达到60），再增加帧数人眼也不会感受到明显的变化，反而相应地就要消耗更多资源（比如电影的胶片就需要更长了，或是电脑刷新画面需要消耗计算资源等等）。因此，选择一个适中的FPS即可。
对于Three.js动画而言，一般FPS在30到60之间都是可取的。
1.2 setInterval方法
如果要设置特定的FPS（虽然严格来说，即使使用这种方法，JavaScript也不能保证帧数精确性），可以使用JavaScript DOM定义的方法：
setInterval(func, msec)
其中，func是每过msec毫秒执行的函数，如果将func定义为重绘画面的函数，就能实现动画效果。setInterval函数返回一个id，如果需要停止重绘，需要使用clearInterval方法，并传入该id，具体的做法为：
首先，在init函数中定义每20毫秒执行draw函数的setInterval，返回值记录在全局变量id中：
id = setInterval(draw, 20);
在draw函数中，我们首先设定在每帧中的变化，这里我们让场景中的长方体绕y轴转动。然后，执行渲染：
function draw() {
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
}
这样，每20毫秒就会调用一次draw函数，改变长方体的旋转值，然后进行重绘。最终得到的效果就是FPS为50的旋转长方体。
我们在HTML中添加一个按钮，按下后停止动画：
<button id="stopBtn" onclick="stop()">Stop</button>
对应的stop函数为：
function stop() {
if (id !== null) {
clearInterval(id);
id = null;
}
}
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试10.1</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<button id="stopBtn" onclick="stop()">Stop</button>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
var scene = null;
var camera = null;
var renderer = null; var mesh = null;
var id = null; function init() {
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
scene = new THREE.Scene(); camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(5, 5, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshLambertMaterial({
color: 0xffff00
}));
scene.add(mesh); var light = new THREE.DirectionalLight(0xffffff);
light.position.set(20, 10, 5);
scene.add(light); id = setInterval(draw, 20);
} function draw() {
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
} function stop() {
if (id !== null) {
clearInterval(id);
id = null;
}
}
</script>
</html>
你会看到一个傻缺在一直转。
1.3 requestAnimationFrame方法
如果不在意多久重绘一次，可以使用requestAnimationFrame方法。它告诉浏览器在合适的时候调用指定函数，通常可能达到60FPS。
requestAnimationFrame同样有对应的cancelAnimationFrame取消动画：
function stop() {
if (id !== null) {
cancelAnimationFrame(id);
id = null;
}
}
和setInterval不同的是，由于requestAnimationFrame只请求一帧画面，因此，除了在init函数中需要调用，在被其调用的函数中需要再次调用requestAnimationFrame：
function draw() {
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
id = requestAnimationFrame(draw);
}
因为requestAnimationFrame较为“年轻”，因而一些老的浏览器使用的是试验期的名字：mozRequestAnimationFrame、webkitRequestAnimationFrame、msRequestAnimationFrame，为了支持这些浏览器，我们最好在调用之前，先判断是否定义了requestAnimationFrame以及上述函数：
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame;
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试10.2</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<button id="stopBtn" onclick="stop()">Stop</button>
</body>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame; var scene = null;
var camera = null;
var renderer = null; var mesh = null;
var id = null; function init() {
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
scene = new THREE.Scene(); camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(5, 5, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshLambertMaterial({
color: 0xffff00
}));
scene.add(mesh); var light = new THREE.DirectionalLight(0xffffff);
light.position.set(20, 10, 5);
scene.add(light); id = requestAnimationFrame(draw);
} function draw() {
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
id = requestAnimationFrame(draw);
} function stop() {
if (id !== null) {
cancelAnimationFrame(id);
id = null;
}
}
</script>
</html>
和上面的差不多，点stop会停止。
1.4 两种方法的比较
setInterval方法与requestAnimationFrame方法的区别较为微妙。一方面，最明显的差别表现在setInterval可以手动设定FPS，而requestAnimationFrame则会自动设定FPS；但另一方面，即使是setInterval也不能保证按照给定的FPS执行，在浏览器处理繁忙时，很可能低于设定值。当浏览器达不到设定的调用周期时，requestAnimationFrame采用跳过某些帧的方式来表现动画，虽然会有卡滞的效果但是整体速度不会拖慢，而setInterval会因此使整个程序放慢运行，但是每一帧都会绘制出来；总而言之，requestAnimationFrame适用于对于时间较为敏感的环境（但是动画逻辑更加复杂），而setInterval则可在保证程序的运算不至于导致延迟的情况下提供更加简洁的逻辑（无需自行处理时间）。
2.使用stat.js记录FPS
stat.js是Three.js的作者Mr. Doob的另一个有用的JavaScript库。很多情况下，我们希望知道实时的FPS信息，从而更好地监测动画效果。这时候，stat.js就能提供一个很好的帮助，它占据屏幕中的一小块位置（如左上角），效果为：
，单击后显示每帧渲染时间：
。
首先，我们需要下载stat.js文件，可以在https://github.com/mrdoob/stats.js/blob/master/build/stats.min.js找到。下载后，将其放在项目文件夹下，然后在HTML中引用：
<script type="text/javascript" src="js/stat.js"></script>
在页面初始化的时候，对其初始化并将其添加至屏幕一角。这里，我们以左上角为例：
var stat = null;
function init() {
stat = new Stats();
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement);
// Three.js init ...
}
然后，在上一节介绍的动画重绘函数draw中调用stat.begin();与stat.end();分别表示一帧的开始与结束：
function draw() {
stat.begin();
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
stat.end();
}
最终就能得到FPS效果了。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.js测试10.4</title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<button id="stopBtn" onclick="stop()">Stop</button>
</body>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript">
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame; var scene = null;
var camera = null;
var renderer = null; var mesh = null;
var id = null; var stat = null; function init() {
stat = new Stats();
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement); renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000);
scene = new THREE.Scene(); camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(5, 5, 20);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera); mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshLambertMaterial({
color: 0xffff00
}));
scene.add(mesh); var light = new THREE.DirectionalLight(0xffffff);
light.position.set(20, 10, 5);
scene.add(light); id = requestAnimationFrame(draw);
} function draw() {
stat.begin(); mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
id = requestAnimationFrame(draw); stat.end();
} function stop() {
if (id !== null) {
cancelAnimationFrame(id);
id = null;
}
}
</script>
</html>
整理自张雯莉《Three.js入门指南》
Three.js基础探寻十——动画的更多相关文章
- Three.js基础探寻一
1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...
- Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
- Three.js基础探寻九——网格
在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...
- Three.js基础探寻八——法向材质与材质的纹理贴图
4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...
- Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...
- Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
- Three.js基础探寻五——正二十面体、圆环面等
除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...
- Three.js基础探寻七——Lamber材质与Phong材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...
- Three.js基础探寻六——文字形状与自定义形状
1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...
随机推荐
- xml追加节点
添加方法 public void XmlAppend(VisitM vm) { XmlDocument xmldoc = new XmlDocument(); string path = Server ...
- Delphi XE5 如何与其他版本共存
如果你想使用Delphi诸如XE4.XE3.XE2.XE之类的版本跟Delphi XE5共存的话,在cglm.ini中简单修改两行就行啦. 找到Delphi XE5的安装根目录C:\Program F ...
- [Virtualization][SDN] VXLAN到底是什么 [转]
写在转发之前: 几个月以前,在北大机房和燕园大厦直接拉了一根光钎.两端彼此为校园内公网IP.为了方便连接彼此机房,我做个一个VPN server在燕园的边界,北大机房使用client拨回.两个物理机房 ...
- ubuntu下c／c++开发环境配置
刚转好的UBUNTU14.04.01 TLS . 试了一下GCC,结果如下不能编译 gcc -o hello hello.cpp gcc: error trying to exec 'cc1plus' ...
- Qt 自定义 滚动条 样式（模仿QQ）
今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几 ...
- Qt使用一个事件队列对所有发出的事件进行维护（QObject的event()函数相当于dispatch函数），用EventLabel 继承QLabel作为例子（简单明了） good
事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等:另一些事 ...
- Windows创建文件链接
Windows平台创建文件.文件夹链接: 测试平台,windows10. D:\>mklink 创建符号链接. MKLINK [[/D] | [/H] | [/J]] Link Target / ...
- angularJS自定义指令模板替换
<html> <head> <meta charset="utf-8"/> <title></title> </h ...
- C/C++ 排序&&查找算法（面试）
一.排序 1.冒泡排序 void BubbleSort(int array[],int n) { ; ; ; ; ;i<n - ;i++) /*外循环控制排序的总趟数*/ { flag = ; ...
- 通过自定义属性存储数据实现输入框获得焦点与失去焦点改变value值
http://gopro.ee.cagoe.com/index.html html: <div class="name"><input value=&qu ...