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 ...

随机推荐

Yii源码阅读笔记（十四）
Model类,集中整个应用的数据和业务逻辑——场景.属性和标签: /** * Returns a list of scenarios and the corresponding active attr ...
OneDrive无法正常登录
可能是DNS被污染手动设置DNS 134.170.108.26 onedrive.live.com134.170.108.152 skyapi.onedrive.live.com
获取真实ip的报告
今天登录九秒社团 http://www.9miao.com/的时候忘记了用户名和密码,尝试了5次都没登录成功,网站弹出提示15分钟后才能再次登录.我纳闷它是怎么判断用户的登录次数,这时候用户还没有登录 ...
Ext TabPanel items高度宽度自适应
写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯.先来看张截图吧. 有没有注意到里面的G ...
Dom4j
Dom4j http://baike.baidu.com/link?url=2XOnr06saKUd-9By1GyPxIolXMQhf_C-CnMFll_yhtR4m00i27zphbkI5-dGpw ...
Jquery元素选取、常用方法;js只能获取内联样式，jquery内联内嵌都可以获取到；字符串.trim();去字符串前后空格
一:常用的选择器: 基本选择器 $("#myDiv") //匹配唯一的具有此id值的元素 $("div") //匹配指定名称的所有元素 $(".myC ...
python标准库介绍
操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...
C++ 实现发送HTTP Get/Post请求 good
1.简述最近简单看了一下关于HTTP请求方面的知识,之前一直用Qt来实现,有专门HTTP请求的QNetworkAccessManager类来处理,实现也比较简单,这里主要讲解一下用C++代码来实现H ...
Linux的常用基本命令
Linux的常用基本命令. 首先启动Linux.启动完毕后需要进行用户的登录,选择登陆的用户不同自然权限也不一样,其中“系统管理员”拥有最高权限. 在启动Linux后屏幕出现如下界面显示: …… Re ...
Swift 学习难点笔记
定义一个字典 let interestingNumber = [ ,,,,,], ,,,,,], ,,,,] ] var array = interestingNumber["Prime&q ...

Three.js基础探寻十——动画

Three.js基础探寻十——动画的更多相关文章

随机推荐

热门专题