geometry.computeBoundingBox() gives different results when switching to another browser tab while loading

Questions
1

Hi there,
I’m working on a complex project in threejs.
Trying to cut the corner:
I have to load an obj, create some pivot point to use as parent of the mesh inside this obj, let the user move and rotate the pivots.
It takes somewhere about 10 to 15 seconds to load due to its complexity.
My problem is that it is working flawlessly if I load the page and don’t change the focus, but if I change the browser tab or collapse the browser window I got a very specific problem:

geometry.computeBoundingBox() gives different results.

Is there someone who can help me figure out what’s happening?

To help you better understand the situation: at loading time I have to rotate the obj to -90° on the X axis (inverting Y and Z as a consequence); I think it’s relevant because the boundingBox calculation somehow inverts Y and Z and changes its min and max also, but as I said only if I switch tab or collapse the browser.

Thank you in advance!

p.s. No matter the OS nor the browser. It’s a super consistent bug.

2

Do you have a window.resize function in place? If not you may need to update the camera.aspect, camera.projectionMatix, renderer.size and re render the scene once the resize has happened

3

Thank you forerunner,
I do have a window resize function:

	onWindowResize() {
		this.camera.aspect = this.container.clientWidth/this.container.clientHeight;
		this.camera.updateProjectionMatrix();
		this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
	}

My bug occurs when I switch the focus on another tab on the same browser window, though. I don’t think what you say is actually related to that.

1 Like
4

OK, it’s just a guess, can you provide a live example that demonstrates the issue we can debug?

1 Like
5

thank you forerunner,
I would like to, but it’s actually not that easy. I have to build something from scrath since at this moment I can’t share the project because it on a private server.

I’ll try for sure to replicate the same behaviour on a lighter and easier to share project.

6

Ok, I somehow solved the issue, but take it with a grain of salt:
the problem can be tracked back to the execution stack of javascript:
the first function computes the bounding box, the second uses this computation, but if the first function is somehow slower to execute, the second could not have what it needs.
What I did is to force javascript to execute functions in a given order and only when the previous is finished.
The problem occurred only when changing the tab because browsers optimize resources of non visible tabs, but the code I wrote was anyway too much entropic to work properly.

I hope what I found will be understandable and useful to someone else in future.

Thank yo for your time @Lawrence3DPK

1 Like
7

Ah, that makes a lot of sense now reviewing your question, this would have been practically impossible to debug without reference to a live example but yes this is the fundamental asynchronous behavior of js. Async await functions come in handy here, three js has a built in loading manager as part of the library that will load all resources first and call a manager.onLoad() function that executes after the initial load of external heavier resources. Be sure to keep track of longer processes, a shorter process will always return results quicker than a longer one meaning the approach you have taken in wrapping the quicker functions after the longer ones is a safe way to go.

1 Like