この記事ではこんな表現の実装方法を解説します｡
▼ GIF
[78332ee6...+]
▼ CodePen (0.5x を押すと見やすいです)
▼ 2021/7/26 追記 CodePen( 慣性ｽｸﾛｰﾙありﾊﾞｰｼﾞｮﾝ)
海外のﾃﾞｻﾞｲﾝｱﾜｰﾄﾞを受賞するようなﾘｯﾁなｻｲﾄで良く見る演出(個人的主観)です｡WebGLの汎用的な表現な気がしますが､その実装方法を解説する記事は(少なくとも日本語では)ほとんど見つけられなかったので､自分の勉強も兼ねて書くことにしました｡ちなみに技術記事を書くのは初めてに近いので暖かい目と心で読んでいただけます幸いです｡実装はThree.jsを用いています｡
Three.jsを触ってみたが､ｻｲﾄ制作に活かす術が分からない､同様の表現を良く見るけどどうやって実装しているか分からない､といった方を対象としています｡従って本記事では､Three.jsの基本的な描画手順などの解説は割愛させていただきますのでご了承ください｡
また､実装では少しだけｼｪｰﾀﾞｰを書きますので､ｼｪｰﾀﾞｰとはなんぞ､といったような知識が多少はあることが望ましいです｡
Three.jsの基本､及びThree.jsで扱うｼｪｰﾀﾞｰの基本については､この方の記事が分かりやすいのでご紹介させていただきます｡Three.jsやｼｪｰﾀﾞｰを触ったことがないという方は先にこちらで概要を掴んでいただくことをおすすめします｡
https://qiita.com/watabo_shi/items/bf9bcd4569b6d480c608
自分自身まだまだ初学者であり､実務でこの表現を使用した経験は無いので､本記事の実装がﾍﾞｽﾄﾌﾟﾗｸﾃｨｽである自信はあまりないです｡あくまで実装方法の一つとして参考にしていただければと思います｡もっとこうした方が良い､こういう実装方法の方が望ましい､などありましたらぜひご教示いただきたいです｡
開発の環境についてお話しします｡実装だけ見たいと
