Good day to everyone who has any thoughts about the fact that the animation is blocked if you quickly move your finger over the sensor. It turns out that the running animation begins at this moment, I move my finger across the screen all the time, the character stands still, as soon as he removed his finger, he appeared at the point where he was supposed to run.
Does this happen in all applications and with all browsers? Can you please if the following example works for you?
https://threejs.org/examples/webgl_animation_keyframes
I’m not able to reproduce your reported behavior on a Pixel 1 with latest Chrome.
Good evening, in all browsers it will be, the problem is that the event of touch and movement on the sensor creates a load and interrupts the main action, perhaps this is not a problem requestAnimationFrame because the character, being in one place, continues to perform the animation of the action, in this case it is a run, but Here the offset of the coordinates is on my socket, which in a separate thread of the webworker transfers the offset coordinates to the main page using the post method, perhaps at this moment the post request is lost.
Here is some interesting information on this issue.
This happened to me when using this
Nipplejs by yoannmoinet when turning, while I bring my finger to the desired angle of rotation and stop my finger there, I lost the displacement of the character, he jerked and then continued to run normally.
I spent 5 days solving this problem, having tested all possible options, I came to the conclusion that when using the virtual joystick it is better to switch to interval rendering.
setInterval (() => {
// render
}, 16.6) // 60 FPS
And yes it helped, if I have time I will show this problem in the video.
Here’s what I wanted to say, I just have a phone not for games, so the problem is visible.
Can you please try to set the CSS property touch-action to none? Assuming you are using renderer.domElement to register your event listeners, do this:
renderer.domElement.style.touchAction = 'none';
Can you please try to make your custom touch event listeners passive? I’m not sure how this is done with jQuery but with plain JS, you just pass a third parameter to addEventListener(). E.g.:
document.addEventListener( "touchmove", listener, { passive: true } );
Notice that you can’t make this change with OrbitControls since the class uses preventDefault() in its event listeners.
Can you reproduce the performance issue with one of the three.js examples e.g.:
https://threejs.org/examples/misc_controls_orbit
Or does it only happen in your app?
No, unfortunately there is no suitable example, this can only be observed in the application, the only option is to make a local version, but it will take a lot of time, I need to create a mini-scene with the movement of the character, I will try to find old sketches of the game where the local version was. Although I have one thought if it works out I will let you know.