V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fqzz
V2EX  ›  前端开发

Chrome 下 Three.js 动画求助 [cpu 降频导致动画不流畅]

  •  
  •   fqzz · 2022-04-11 11:39:25 +08:00 · 1410 次点击
    这是一个创建于 967 天前的主题,其中的信息可能已经有所发展或是发生改变。
    场景和动画都很简单,单个模型,然后用 tween 移动相机位置。
    没啥负载的时候,cpu 会降频到 1g 以下,这时候触发动画就会很卡,一跳一跳的。
    用 inspector 看,会有很多 dropped frame 。
    如果写个死循环,保持一个 cpu 核满载,主频在 4.6g 的时候触发动画,就很顺滑,没有卡顿的情况。

    大家碰到过这样的情况么,有啥解决思路?
    写个 service worker 占满 cpu 有点太。。。不符合节能环保的理念
    5 条回复    2022-04-18 10:48:50 +08:00
    timpaik
        1
    timpaik  
       2022-04-11 12:52:46 +08:00 via Android
    你是不是笔记本没插电源(
    march1993
        2
    march1993  
       2022-04-11 14:04:33 +08:00
    用 setInterval 而不是 requestAnimationFrame ?
    fqzz
        3
    fqzz  
    OP
       2022-04-11 15:13:14 +08:00
    @timpaik 客户笔记本反映有卡顿问题,我用的是台式机也能重现。

    @march1993 是用的 requestAnimationFrame 。好像默认就是 60Hz ,我的显示器是 30Hz ,不知道这个有没有影响。
    march1993
        4
    march1993  
       2022-04-14 11:15:07 +08:00   ❤️ 1
    @fqzz 我意思是用 setInterval 试试看。。强制渲染 60fps
    fqzz
        5
    fqzz  
    OP
       2022-04-18 10:48:50 +08:00
    @march1993 这招好使啊,本地测试流畅度好多了,万分感谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1204 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:16 · PVG 02:16 · LAX 10:16 · JFK 13:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.