Updating THREE.js breaks "overlay" transforms

[forerunrun]

I'm currently trying to use react-three-map with the latest version of three.js, however, updating to any version of three.js above r165 breaks the "overlay" transformations of the overlaid r3f objects,

I've made a live example here to demonstrate the issue, it's currently setup to reproduce the error using r166 but the difference can be seen by reverting three.js to r165 or removing the overlay flag from the Canvas eg...

<Canvas latitude={51} longitude={0} /*overlay={true}*/>

I'm wondering what could have possibly changed from three.js r165 and r166 to cause this break and where I'd need to look in the react-three-map repo to try to find and propose a fix for this? three's migration changelog from 165-166 has no obvious clues as to what changed under the hood...

@RodrigoHamuy let me know if you have any ideas why this might be happening or if you happen to realize what'd need to be updated this side to get this working with the latest versions of three it'd be great to hear from you!

[RodrigoHamuy]

Was not aware of this, is clearly is a bug, thanks for reporting!

I'm a bit tight on time atm so PRs are welcomed, otherwise will try to make time to investigate, but can't promise much.

[forerunrun]

@RodrigoHamuy comparing changes in three.module.js between r165 and r166 there have been updates to the Object3D.updateMatrixWorld method, giving direct comparisons below...

r165:
https://github.com/mrdoob/three.js/blob/r165/build/three.module.js#L7718

	updateMatrixWorld( force ) {

		if ( this.matrixAutoUpdate ) this.updateMatrix();

		if ( this.matrixWorldNeedsUpdate || force ) {

			if ( this.parent === null ) {

				this.matrixWorld.copy( this.matrix );

			} else {

				this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );

			}

			this.matrixWorldNeedsUpdate = false;

			force = true;

		}
                ...

r166:
https://github.com/mrdoob/three.js/blob/r166/build/three.module.js#L7734

	updateMatrixWorld( force ) {

		if ( this.matrixAutoUpdate ) this.updateMatrix();

		if ( this.matrixWorldNeedsUpdate || force ) {

			if ( this.matrixWorldAutoUpdate === true ) { // <--- this check has been added to r166

				if ( this.parent === null ) {

					this.matrixWorld.copy( this.matrix );

				} else {

					this.matrixWorld.multiplyMatrices( this.parent.matrixWorld, this.matrix );

				}

			}

			this.matrixWorldNeedsUpdate = false;

			force = true;

		}
		...

these changes among others seem consistent up to the latest three.js version r174 where Object3D is now being imported from three.core.js into three.module.js...

r174:
https://github.com/mrdoob/three.js/blob/r174/build/three.core.js#L11787

I'm hopeful this is the culprit but not yet sure how this affects matrix transformations in react-three-map, I'm looking into it... Would you happen to know if "overlay" is true, is matrixWorldAutoUpdate also being implicitly set somewhere?

EDIT:

to answer the above question...

if "overlay" is true, is matrixWorldAutoUpdate also being implicitly set somewhere?

matrixWorldAutoUpdate is being set to false in sync-camera-fc.tsx

https://github.com/RodrigoHamuy/react-three-map/blob/main/src/core/canvas-overlay/sync-camera-fc.tsx#L94

I'll give a test with this set to true to see if this resolves being able to update three.js but let me know if this was intentionally set to false and if there would be any negative implications behind this...

[3dpk-interactive]

@RodrigoHamuy I made a PR for this...

#144

the only change made here is setting the cameras matrixAutoUpdate and matrixWorldAutoUpdate to true in canvas-portal.tsx

https://github.com/RodrigoHamuy/react-three-map/blob/Overlay-Fix-matrixAutoUpdate/src/core/canvas-overlay/canvas-portal.tsx#L32-L35

    camera={{
      matrixAutoUpdate: true,
      matrixWorldAutoUpdate: true,
    }}

Note: this has not yet been backward compatibility tested for use with three.js r165! there's also the possibility that you had set these flags to false for good reason, will this have any concerning side effects for on-demand rendering or such?