requestAnimationFrame(callback)触发的callback方法会接受一个时间戳参数,所以如果不想直接跟随浏览器系统帧频的话,
就可以利用这个时间戳参数来做到自定义帧频,做法就是当前时间减去所记录的上一次的时间,如果超过自定义的帧频时间,就可以真正做渲染了

var fps = 60;
var frameDelay = 1 / fps * 1000;
var timeRecord = -frameDelay;
function render(time){
 
if(time - timeRecord >= frameDelay)
{
 
cube.rotation.x += 0.1;
cube.rotation.y += 0.1; ballMesh.rotation.x += 0.1;
ballMesh.rotation.y += 0.1; line.rotation.y += 0.1; renderer.render(scene,camera);
 
timeRecord = time;
 
stats.update();
}
 
 
requestAnimationFrame(render);
}
render(0);
}

自定义requestAnimationFrame帧频的更多相关文章

  1. JS:指定FPS帧频,requestAnimationFrame播放动画

    Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...

  2. 秀才提笔忘了字:javascript使用requestAnimationFrame实现动画

    requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的 ...

  3. requestAnimationFrame制作动画:旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  4. window.requestAnimationFrame

    今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现.但是在Demo中就是找不到这个函数.干着急的小猪只好一步一步 ...

  5. html5 requestAnimationFrame制作动画:旋转风车

    详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...

  6. 移动端 touchmove高频事件与requestAnimationFrame的结合优化

    移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化,使用 requestAnimationFrame性能优化 H5性能优化requestAnimati ...

  7. WebGL three.js学习笔记 自定义顶点建立几何体

    自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的. 基本效果如图: 点击查看 ...

  8. 移动端滑屏全应用【三】requestAnimationFrame的兼容与使用

    首先,传统做动画的方式有以下几种: 1. css的transition过度动画 2. css的animation动画 3. 使用setTimeout或setInterval模拟动画贞(js执行机制决定 ...

  9. Egret自定义计时器(TimerManager和Laya.timer)

    一 自定义计时器 因为游戏中经常用到计时器,比如每1秒发射一枚子弹啊,每2秒怪物AI自动转向啊 每次去new Timer 然后addEventListener(egret.TimerEvent...  ...

随机推荐

  1. java程序结构

    if....else.... 1.  if都需要接判断表达式 2.  else不需要表达式 3. 有if没else可以,但else必须要有一个if,if数>=else数 if (A条件)     ...

  2. 解题报告:hdu 1276 士兵队列训练问题 - 简单题

    Problem Description 某部队进行新兵队列训练,将新兵从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列,剩下的向小序号方向靠拢,再从头开始进行 ...

  3. appium 处理滑动的方法

    appium 处理滑动的方法是 swipe(int start-x, int start-y, int end-x, int end-y, int during) - Method in class ...

  4. tp5搭建1

    1.首先在wamp环境根目录下创建文件夹resource. 2.利用composer下载tp5框架 怎么利用composer下载tp5框架 根据tp5完全开发手册,composer下载你的tp5框架 ...

  5. Amazon, Clear, Debian, Gentoo, Red Hat, SUSE & Ubuntu Performance On The EC2 Cloud

    https://www.phoronix.com/scan.php?page=article&item=ec2-holiday-2017&num=5

  6. ZooKeeper分布式锁简单实践

    ZooKeeper分布式锁简单实践 在分布式解决方案中,Zookeeper是一个分布式协调工具.当多个JVM客户端,同时在ZooKeeper上创建相同的一个临时节点,因为临时节点路径是保证唯一,只要谁 ...

  7. iPhone 和Android应用,特殊的链接:打电话,短信,email

    下面的这篇文章主要是说,网页中的链接如何写,可以激活电话的功能. 例如,页面中展示的是一个电话号码,当用户在手机浏览器里面点击这个电话号码的时候,手机会弹出拨号的面板,或者是短信程序会启动等. 1. ...

  8. HDU-4705-树形dp/组合数学

    Y Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submiss ...

  9. Less开发指南(二)- 基本语法

    (一)嵌套规则 [1]less可以让我们以嵌套的方式编写层叠样式,先看下面这段CSS: .box-a .hd { height: 20px; } .box-a .bd .txt { color: #0 ...

  10. linux下面安装maven

    maven作为最近比较火的项目管理工具,对项目的jar包及其开元添加相应的插件的管理,很方便. 安装maven: 在官网上面去下载最新的maven的压缩包,apache-maven-3.3.1-bin ...