three.js动画中setAnimationLoop回调的time参数运行机制疑问
Three.js setAnimationLoop回调time参数运行原理解答
- 首先明确回调传参的逻辑:你将
animation作为函数引用传入setAnimationLoop时,并非由你主动执行该函数,而是Three.js内部的帧调度逻辑负责在每帧刷新时调用这个函数,调用时会自动传入预设的参数,不需要你手动传参。 - time参数的来源:这个参数底层来自浏览器原生
requestAnimationFrameAPI的回调入参,单位为毫秒,数值是页面完成加载到当前帧触发时的时间差。Three.js的setAnimationLoop本身就是对requestAnimationFrame的上层封装,会把从浏览器拿到的时间参数直接传递给你传入的回调函数。 - 结合你的代码说明用法:示例中用
time / 2000赋值旋转角度,就是利用这个持续累加的时间值实现和帧率无关的匀速动画,不需要自己额外定义计数变量,就能保证不同性能的设备上动画速度一致。
补充说明:只有你主动调用函数,比如写
animation(1000)的时候才需要手动传参;如果是把函数作为回调传给其他API执行,参数都是由对应的API内部负责传入的,这是JavaScript回调机制的通用规则,不是Three.js独有的设计。
内容的提问来源于stack exchange,提问作者user15635022
相关产品推荐
相关产品推荐

