0

For quite some time, I've had an issue in three.js where when putting any HTML element updates in my animation loop, my PointerLockControls always have a strange stutter. For example:

function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Works completely normal. PointerLockControls feel smooth, responsive, and my framerate is normal.

But if I do this:

function animate() {
  document.querySelector("#some-element").textContent = "foobar";
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Suddenly, the PointerLockControls have a strange stutter effect, whereas if I point my cursor up slowly, the controls are stuck, but if I point my cursor up slightly faster, the controls completely jerk to the top of the screen.

Strangely enough, the framerate is not affected by this. It is just the PointerLockControls, nothing else.

Why does this issue happen, and how can I fix it? Also, I need to constantly update the element's textContent, so "updating it only when I need to" doesn't work.

Improve this question
4
  • I would at least move the query select outside the animate() function. But even tho you have to continuously update the DOM, does it really need to be 60 times a second? I've not used three.js, but wonder if updating the element two or three times a second would be sufficient visually and help with the stuttering. Commented Jun 22 at 16:17
  • 1
    @RayWallace Okay, I made it so that the textContent only updates every 5 frames rather than every single frame, and it helps a little, but completely removing it still makes the controls a lot smoother, and making it update less than every 5 frames would be too slow for what I want to do. Commented Jun 22 at 16:36
  • Could you implement your text label as a sprite with a canvas texture instead? That would completely remove the need to update the DOM. I doubt we can fix the issue on engine side since the stutter probably happens with plain PointerLock API usage as well. So you should check out different ways for implementing your text. Commented Jun 23 at 9:51
  • @Mugen87 Hello :) Unfortunately not. The text exists as a UI element. Commented Jun 23 at 12:38
Related questions
2369
Retrieve the position (X,Y) of an HTML element
1683
How do I find out which DOM element has the focus?
2018
How can I set the default value for an HTML <select> element?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.