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随机生成福彩双色球号码的2种方法
不瞒您说,俺也是个双色球爱好者,经常买,但迟迟没有中过一等奖,哈哈.这里为大家介绍用php随机生成福彩双色球号码的二种方法,供朋友们学习参考.新的一年,祝大家中大奖,发大财. 方法一复制代码代码如下 ...
DirectX 发展历程
在Windows下开发游戏,大家都会联想到DirectX.实际上,DirectX并不等同于游戏,它也不是写游戏程序的唯一选择.其实,DirectX只是提供了一种更直接的控制硬件的API库而已.当然,它 ...
ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了
ubuntu 工作区中拖动一个窗体到另一个工作区就卡住回不到桌面了解决方法: 按 alt + 回车键直接就返回去了
fenshijin
#include<stdio.h> int map[6][4]={8,0,18,10, 13,10,15,20, 10,50,13,30, ...
toast 防止一直不停弹出，累积显示
private Toast mToast = null; public void showTextToast(String msg) { if (mToast == null) { mToast = ...
phaser
phaser http://www.csdn.net/article/2015-10-08/2825865 https://github.com/gavinanderegg/coffeeQuest
Ajax 填充前端页面
PHP 依赖注入（转）
说这个话题之前先讲一个比较高端的思想--'依赖倒置原则' "依赖倒置是一种软件设计思想,在传统软件中,上层代码依赖于下层代码,当下层代码有所改动时,上层代码也要相应进行改动,因此维护成本较高 ...
Windows系统结合MinGW搭建软件开发环境
MinGW介绍 MinGW,即Minimalist GNU For Windows,它包含了GNU工具集的运行环境.GCC编译器工具集以及其它的GNU程序开发工具(如make.gawk.grep等等) ...
【Android开发学习笔记】【高级】【随笔】插件化——Activity生命周期
前言如同第一章我们说的,宿主程序通过 dexclassloader 将插件的类加载进来,然后通过反射去调用它的方法,这样Activity就被当成了一个普通的类来执行了,因此系统不再接管它的生命周期, ...

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

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

随机推荐

热门专题