ThreeJS FPS 下降

Question

我在角色移动和场景的 FPS 方面遇到了一些问题。我移动角色越多，FPS 就越低。我在开始的第一阶段可以毫无问题地移动，但在几秒钟的移动之后，fps 下降到非常低的水平。我不明白这是来自我的运动功能还是动画功能。我遵循了一些关于运动的教程，其中 none 的 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();

            }

Answer 1

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

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

ThreeJS FPS 下降

ThreeJS FPS drops

frame-rate

three.js