scrolling with .glb

[Mattes]

Hello everyone,

I am trying in vain to achieve a scroll animation with a .glb file using Three.js. Unfortunately, an error message always appears in the console which I cannot properly identify. The error must be related to the embedded file logo.glb because the script works perfectly with another file. My question to you now is, how do I find out what exactly the error is? The following error appears in the console:

 

gsap.min.js:10 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_gsap')
    at $ (gsap.min.js:10:1075)
    at new Tween (gsap.min.js:10:33788)
    at Na (gsap.min.js:10:4866)
    at Timeline.to (gsap.min.js:10:21617)
    at camera.position.z (script-gsap.js:110:6)
    at GLTFLoader.js:129:7
    at GLTFLoader.js:2051:6

 

 

Does anyone have an idea what the problem might be?

Thank you very much

See the Pen pomaZja by mattes007 (@mattes007) on CodePen

[akapowl]

Hello Mattes.

That sounds more like a Three.js question.

For the future please keep in mind, that this forum is intended for questions about GSAP and not intended for general debugging.

The line marked in the picture below shows the file the error occurs in - in dev-tools you can usually click on those links in the braces and it will take you to the line of the file causing the malfunction. In your case it is in script-gsap.js ...


... and this is the line causing problems:

...

.to(model.children.map(child => child.material), { duration: 1, opacity: 1, ease: 'power2.inOut' }, 0);

...

If you log out the material for each direct child of that model (of which there is only one), you will realize that it returns undefined - That's the cause of your problem.

If you log out the child itself, you will realize that it has another child - which does have a material. And if you target that instead ( I just tried with child.children[0].material ) things should already work for you.

I hope this will help. Good luck with the project.

[Mattes]

Hi akapowl,

 

thank you for your response. Unfortunately, I wasn't sure where this error was coming from - GSAP, Three, or the .glb file. So, is this ultimately an issue with the structure of the .glb file? Is there a guide somewhere on how such a file should be structured?

[akapowl]

12 minutes ago, Mattes said:

So, is this ultimately an issue with the structure of the .glb file? Is there a guide somewhere on how such a file should be structured?

While the issue is releated to the structure of the .glb file, it's not ultimately an issue with the structure of the .glb file itself - it is more an issue with how you are targetting the wrong things in that structure.

Maybe it is sloppy work by the designer of that file to have the actual model nested deeper than once - maybe it isn't, but actually intended instead.

Just like in HTML/CSS structures, to achieve specific layouts or effects, things might need to be nested in specific ways - That's why you can not expect every file to be structured the same. And you might just not be able to use the same code you copied from one example for every other scenario.

So I also don't think there is an ultimate guide for how to structure every .glb file - because different scenarios might need different approaches.

This probably isn't even related to Three.js but more to asset creation via any type of 3D modelling software in combination with that - but nonetheless you'll likely be more succesful getting answers to questions about best practices with that regard in the Three.js forum.

https://discourse.threejs.org/