Scroll x Three.js

画面中央の3Dモデルは常に固定されたまま、スクロールに合わせて位置・大きさ・回転が変化します。 BlenderからエクスポートしたGLBを読み込んで、GSAP ScrollTriggerで制御しています。

下にスクロールしてみてください。

Position & Scale

このセクションでは、スクロールに応じてモデルの位置が上方向・奥方向にスライドし、 スケールも大きくなります。3D自体はfixedなので、画面からは消えません。

Rotation

最後のセクションまでスクロールすると、モデルがゆっくり回転していきます。 ScrollTriggerの scrub を使っているので、スクロール位置とアニメーションがぴったり同期します。