I’m having a problem showing the movement of my ESP32 using the three.js library. The code reads the data generated by the gyroscope and implements it to the 3D model. It is not fluid and even the model spins several times for only a little bit of movement.

Example of data generated by ESP32
aT26.81aH26.90aP861.40bT26.84bH31.91bP862.40Ax-1.20Ay-0.17Az9.96Gx-0.26Gy-0.95Gz-1.58

Gyroscope values:
Axis X: -0.26 rad/s
Axis Y: -0.95 rad/s
Axis X: -1.58 rad/s

Model’s code:

            let deltaTime = 0.10; // 10 ms per frame
            let xAxe = data.gyrX;
            let yAxe = data.gyrY;
            let zAxe = data.gyrZ;

            // 3D Model
            var canvas = document.getElementById("canvas");
            canvas.width = canvas.parentElement.clientWidth; 
            canvas.height = canvas.parentElement.clientHeight; 

            var scene = new THREE.Scene();
            scene.background = new THREE.Color();

            var camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
            camera.position.z = 5;

            var renderer = new THREE.WebGLRenderer({ canvas: canvas });

            var geometry = new THREE.BoxGeometry(1.75, 1.75, 1.75); 
            var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
            var cube = new THREE.Mesh(geometry, material); 
            scene.add(cube); 

            function animate() {
                requestAnimationFrame(animate);
                cube.rotation.x += (xAxe * deltaTime);
                cube.rotation.y += (yAxe * deltaTime);
                cube.rotation.z += (zAxe * deltaTime);
                renderer.render(scene, camera);
            }

            animate();

I have already tried to modify the reading times and generation of data packets, but it has not worked. What I hope is that I can see the movement of the ESP32 smoothly represented.
I would greatly appreciate your help.