Issues with Next.js template and large GLB

Hi all,

I’m working on moving my project to Vercel, and am getting an issue where, as best as I can tell, the THREE render loop is getting called before my scene GLB is being loaded (the error is “Cannot read properties of undefined (reading ‘updateMatrix’)”).

I can replicate by just placing my sceneRoot.glb in the Next template—it goes from working to the same error. The GLB is not crazy large (3.8 MB), but I suspect that might be part of it.

Thanks,
Brett

Original Post on Discord

by user 762750243346710568

Hi, do you have a link to your project and/or some more information? The render loop runs during loading which is no problem - component callbacks are called when the GLB Is loaded and ready so it must be something else in your project.

What did you use for your project before? Vite?

I can post a bit later, no problem! I did use Vite before. I’ve rebuilt using your template, and have tried 1) a minimal port (moving just the necessary files & fixing up my Vite configs), 2) a clean setup from the template, rebuilding from Unity, and 3) just dropping the GLB into the template without doing anything else. For all, running locally in dev works, but building and running prod has this error locally and on Vercel. For now, here’s the live link: https://et-cycladic.vercel.app/

by user 762750243346710568

the error in the console suggests that something breaks when compression is applied.

Did you previously (with vite) do a production build?

My guess is that it has nothing to do with next or vite and is related to compression. in which case it would be good to get a bugreport of your scene.

@marcel :cactus: bug report is here! Let me know if there’s anything else I can try. Dropbox - Bugreport-Cycladic-231126-032421_uw.zip - Simplify your life

by user 762750243346710568

Can you use our bugreporter please? thank you

That’s what that is!

by user 762750243346710568

(Apologies, my org’s network settings won’t let me upload the report via your script)

by user 762750243346710568

One more for you! I started completely from scratch (pasting next.js sample into ExportInfo, etc), and am having the same results. Dropbox - Bugreport-Cycladic_Refactor-231127-101126_uw.zip - Simplify your life

by user 762750243346710568

Have you tried my previous question? I mean do you get the same error with vite?

I just rebuilt as Vite, and am not seeing the same issue

by user 762750243346710568

ok interesting, thank you

Happy to try anything! Thx so much for exploring with me. I’m looking into deploying the Vite template to Vercel instead, if the next. js part isn’t possible

by user 762750243346710568

No prob, we’ll figure it out :wink:

Hi @robotconscience can you try removing the MeshCollider on your button objects? That seems to be causing the issue. Im still investigating why it happens (or what happens) but without those I dont get the error

image.png

I removed them on both objects

Yep, same for me! Good find.

by user 762750243346710568

I’ll say—the error is still popping up (?) but the content is displaying alright. Is it the same for you?

by user 762750243346710568

It seems to be related to an error in rapier resulting in NaN values being applied to the threejs objects and subsequently bubbling throught the hierarchy. I’m working on it and added some safe guards altough I have yet to find a fix for the root cause. I have some ideas tho