ThreeJS FPS 下降

Posted 2023-02-25

【中文标题】ThreeJS FPS 下降

【英文标题】：ThreeJS FPS drops

【发布时间】：2020-12-31 14:27:06

【问题描述】：

我的角色动作和场景的 FPS 存在一些问题。我移动角色的次数越多，FPS 就越低。在开始的第一个阶段，我可以毫无问题地移动，但经过几秒钟的移动，fps 下降到非常低的水平。我不明白这是来自我的运动功能还是动画功能。我遵循了一些运动教程，但没有一个有 fps 下降。这是我的运动和动画功能。

                var xSpeed = 0.0001;
                var ySpeed = 0.0001;

                document.addEventListener("keydown", onDocumentKeyDown, false);
                function onDocumentKeyDown(event) 
                    var keyCode = event.which;
                    if (keyCode == 90) 

                        avatar.translateZ( -1 );

                     if (keyCode == 83) 
                        
                        avatar.translateZ( 1 );

                     if (keyCode == 81) 
                        avatar.rotation.y -= 0.1;
                     if (keyCode == 68) 
                        avatar.rotation.y += 0.1;
                     
                    render();
                ;

                var render = function() 
                    requestAnimationFrame(render);
                    renderer.render(scene, camera);
                ;

            function animate() 

                requestAnimationFrame( animate );

                render();
                stats.update();

            

【参考方案1】：

在每个keydown 事件中注意您的代码。它调用render() 请求一个新的动画循环。通过第二次按键，您将获得每帧两个渲染循环，每次添加越来越多的循环，直到您的计算机无法再处理为止。

您只需要一个requestAnimationFrame 循环，无需在每次击键时添加一个新循环。