GSAPでThree.js（React Three Fiber）のオブジェクトが動かないときの対処法

あまりにもやりがちな凡ミスだったので備忘録として。

悪い例

gsap.to(box,{x:10,duration:5});
//boxにはThreeのオブジェクトが入っているものとする

良い例

//Three.jsの場合
gsap.to(box.position,{x:10,duration:5});
//React Three Fiber（useRefを使用）の場合
gsap.to(box.current.position,{x:10,duration:5});

要はThree.jsのオブジェクトをGSAPで動かす場合、動かす対象はオブジェクトそのものではなく、オブジェクトに内包されているpositionやrotationプロパティであることを忘れないように。