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. Spring Boot 中yml配置文件

    步骤一:yml格式 现在大家发现,在springboot里还是要用到配置文件的. 除了使用.properties外,springboot还支持 yml格式. 个人觉得yml格式的可读性和..prope ...

  2. webservice的测试案例

    1.服务器端 服务器接口Test_service.java package com.xiaostudy; /** * @desc 服务器接口 * @author xiaostudy * */ publ ...

  3. LA 5846 霓虹灯广告牌(单色三角形问题)

    https://vjudge.net/problem/UVALive-5846 题意: 圆周上有n个点,两两相连,只能涂红色或蓝色.求单色三角形的个数. 思路: 这个问题在训练指南105页有详细讲解. ...

  4. 缓存技术内部交流_03_Cache Aside

    参考资料: http://www.ehcache.org/documentation/3.2/caching-patterns.html http://www.ehcache.org/document ...

  5. angular之自定义 directive

    1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...

  6. spring mvc: xml练习

    xml练习,得到的结果是: <?xml version="1.0" encoding="UTF-8" standalone="yes" ...

  7. git代码版本回退

    git log 用于查看我们修改提交的快照记录(commit记录),然后会有个commit修改记录的id编号,该命令显示从最近到最远的提交日志,我们可以看到3次提交记录,如下: git checkou ...

  8. flask学习(五):使用配置文件

    1. 新建一个config.py文件 2. 在主app文件中导入这个文件,并且配置到app中,示例代码如下: import config app.config.from_object(config) ...

  9. JS判断键盘上的上下左右键

    document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.argumen ...

  10. JavaScript中Function Declaration与Function Expression 或者说 function fn(){}和var fn=function(){} 的区别

    JavaScript是一种解释型语言,函数声明会在JavaScript代码加载后.执行前被解释,而函数表达式只有在执行到这一行代码时才会被解释. 在JS中有两种定义函数的方式, 1是:var aaa= ...