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

【制作物共有】3D Plane ②

制作日

2021年11月2日


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

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


制作について

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

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

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

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

スクリーンショット 2021-11-02 10.47.20

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

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

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

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


参考


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