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 ...
随机推荐
- php实现上传图片保存到数据库的方法
http://www.jb51.net/article/61034.htm 作者:傲雪星枫 字体:[增加 减小] 类型:转载 这篇文章主要介绍了php实现上传图片保存到数据库的方法,可通过将图片保 ...
- 11.PHP内核探索：嵌入式PHP PHP内核探索：嵌入式PHP
从PHP源码目录结构的介绍以及PHP生命周期可知:嵌入式PHP类似CLI,也是SAPI接口的另一种实现. 一般情况下,它的一个请求的生命周期也会和其它的SAPI一样:模块初始化=>请求初始化=& ...
- Nutch相关框架视频教程--说明
PDF文档: Nutch大数据相关框架讲义.pdf Nutch1.7二次开发培训讲义.pdf Nutch1.7二次开发培训讲义之腾讯微博抓取分析 Nutch公开课从搜索引擎到网络爬虫 ======== ...
- 运维技能大全 | Devops Tools 周期表
老外整理的 Devops Tools 周期表,可以用酷炫屌炸天形容,划分了数据库.CI.日志.安全.监控.配置管理.云服务等15个大类,120个工具.我是有点孤陋寡闻,很多都没听说过,你要是全学会了你 ...
- java笔记--关于线程同步（5种同步方式）【转】
为何要使用同步? java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查), 将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完 ...
- 局部变量、结构体和main函数
在函数中定义的变量称为自动局部变量.因为每次调用该函数时,它们都自动“创建”,并且它们的只对于函数来说是局部的,局部对象的变量都会默认为空.局部变量的值只能在定义该变量的函数中访问,不能从函数之外访问 ...
- 【Swing】Swing初步认知
AWT(abstract Window Toolkit) AWT是java发布的第一个图形界面库.AWT通过调用系统本地的库,来创建和显示控件. AWT 的组件都是使用的native code来编写的 ...
- IOS应用程序生命周期的AppDelegate详解
IOS 中的 AppDelegate.m/h 文件是很重要的呢,因为它是对 Application 的整个生命周期进行管理的. 先明白,每个iPhone应用程序都有一个UIApplication,UI ...
- c#中如何将一个string数组转换为int数组
举个例子. string[] strArray = "a,b,c,d,e,f,g".Split(new char[]{ ',' }); int[] intArray; //C# 3 ...
- Wall---hdu1348(求凸包周长 模板)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 求凸包周长+2*PI*L: #include <stdio.h> #include ...