制作日

2021年11月2日

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

・webpack
・Typescript
・gsap（ScrollTrigger）
・three.js
・GLTFLoader

制作について

今回の制作の目的は「サイトを参考にデモサイトを作成すること」です。

次のデモサイト作成のため、awwwards.で参考を探していたら飛行機にぴったりのサイトを見つけました。

ちょうど昨日飛行機のモデルを作成していたので簡単に作ってみようと思います。

背景の空はSky.jsを使用しています。

雲はテクスチャを読み込み、パーティクルとして実装しています。

途中でcanvasがウィンドウサイズの横幅から飛び出す事象が発生しました。

そちらは下記を参考に解決しました。

ScrollTriggerでスクロールに連動させ、テキストを入れて完成です。

参考