时间戳

首页 > 解决方案 > ThreeJS FPS 下降

three.js - ThreeJS FPS 下降

问题描述

我在角色动作和场景的 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();

            }

标签： three.jsframe-rate

解决方案

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

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

推荐阅读