【制作物共有】3D Plane
見出し画像

【制作物共有】3D Plane

制作日

2021年11月1日


使用しているプラグインなど

・webpack
・Typescript
・gsap(ScrollTrigger)
・three.js
・GLTFLoader


制作について

今回の制作の目的は「ScrollTriggerを使ってスクロールに連動したサイトを作ること」です。

前にも作成したことがありますが、あの時より綺麗なコードがかけると思うので再度やってみようと思いました。

まずは飛行機のモデルを作成します。

スクリーンショット 2021-11-01 8.52.43


大まかな形を作成したら、ミラーを使用して左右対称に作成します。

スクリーンショット 2021-11-01 8.53.43


羽を作成します。

スクリーンショット 2021-11-01 9.00.20

バランスを整えて

スクリーンショット 2021-11-01 9.09.12


ジェットエンジンも作成

スクリーンショット 2021-11-01 9.25.12

スクリーンショット 2021-11-01 10.16.36


スムースシェードとサブディビジョンサーフェスを加え、細部を少し整えて一旦完成です。

マテリアルは必要に応じて後で加えます。

スクリーンショット 2021-11-01 13.06.08


GLTFLoaderで読み込みます。

スクリーンショット 2021-11-01 14.24.47


GSAPのScrollTriggerでスクロールに応じたアニメーションを実装して完成です。

スクリーンショット 2021-11-01 18.30.45



参考


使用画像

https://pixabay.com/ja/

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
社会人3年目。Webプログラマー目指して勉強中。