lagroumgroum
lagroumgroum

Reputation: 67

ThreeJS FPS drops

I've got some problems with a character movements and the FPS of my scene. The more I move the character, the lowest FPS are. I have a first period at the beggining where I can move without any problem but after several seconds of movements, fps are dropping to a really low level. I don't understand if that come from my movement function or the animation one. I followed some tutorials for the movments and none of them have fps drops. Here are my functions of movement and animate.

                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();

            }

Upvotes: 0

Views: 749

Answers (1)

M -
M -

Reputation: 28482

Pay attention to your code on each keydown event. It calls render() which requests a new animation loop. By the second keydown you'll get two render loops per frame, each time adding more and more loops, until your computer can’t handle any more.

You only need one requestAnimationFrame loop, no need to add a new one on each keystroke.

Upvotes: 2

Related Questions