RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

Three.jsとGSAPを組み合わせてボックスを回転させるだけ

GSAPとThree.jsを組み合わせられると聞いてどういうことかを確かめるために基礎的なことをやってみました。

GSAPとThree.jsを組み合わせる場合、Three.jsでオブジェクトを配置したりして、それをGSAPのタイムラインなどを使って動かせるようです。GSAPを使うことでアニメーションのコードの見通しが良くなります。

今回はチュートリアルであるようなボックスを配置して、それをGSAPでくるくる回すというだけです。また、初期表示で若干scaleで大きくなるような動きもしています。実際の動作やコードは以下をみてください。

See the Pen Three + GSAP Sample by misumi (@mismith0227) on CodePen.

本当に基礎的なものですが、Three.jsとGSAPの組み合わせがどういうものかイメージできました。組み合わせて何かおもしろいアニメーション作ってみたいです。