So i am trying to insert this motion path pen: https://codepen.io/uiunicorn/pen/zYZoYpV
into my pen: https://codepen.io/uiunicorn/pen/abJmVwo
so the model character just “walks” the path however i am getting these errors:
Uncaught TypeError: Cannot read property ‘position’ of undefined
line: 163
Uncaught TypeError: setX is not a function
line: 168
Am i missing something? the second error is from gsap
oh im using es6 module!
/cc
I’m not sure I fully understand your code but the above runtime error is caused since you access the model before it is actually loaded. By moving the GSAP setup in the onLoad() callback of GLTFLoader, the errors go away.
https://jsfiddle.net/zbk15gyw/
However, it seems a different error is now reported in the browser console. Maybe related to the used version of GSAP?
I’m using the gsap-core.js that is the esm folder of gsap which i downloaded yesterday so i assume it’s the latest
I changed the versions to the versions that are in the common js demo that works and still it has the same outcome for some reason
It seems you have not use the code from the original codepen correctly: https://jsfiddle.net/oajf87g1/
Sorry but I’m not familiar with that kind of usage of GSAP. So I can’t explain the motivation behind using a proxy object.
i’ve updated the pen from what i can gather the proxy is for auto rotating now it just bounces around doing werid stuff:
So after posting on gsap forums apparently the motion path plugin doesn’t really work well with three.js so i’ll leave this comment i got on gsap for anyone who has the same problem and wants an alternative solution:
The MotionPathPlugin isn’t really designed to work with three.js at the moment. That might come at later date.
Using that proxy method just isn’t going to be accurate because the plugin really only handles position and rotation in 2d.
Using constructs that three.js already provides would be a much better option.
Three.js object moving along a path / Roger Veciana i Rovira | Observable
That doesn’t mean you can’t control it with gsap. Like here, the tubePerc is being animated with gsap, which controls the movement along the path.