生成AI×Three.js｜普通の商店街を「異世界へ変化するWeb」にしてみた

最近、生成AIで作った画像を「見るだけ」で終わらせず、Web上で実際に触って楽しめる作品を制作しています。

今回作っているのは、日本の商店街を舞台にしたインタラクティブWeb作品です。

最初に表示されるのは、ごく普通の雨の日の商店街。

しかし画面をクリックすると、商店街のアーケード屋根が七色に発光。

さらにクリックすると、商店街の奥に鳥居が出現し、少しずつ現実とは違う世界へ変化していきます。

画像制作には生成AIを活用していますが、今回特に面白いと感じたのが、元画像の構図を維持しながら、一部分だけを編集する方法です。

例えば、

「商店街はそのままで屋根だけ七色にする」

「建物や道路は変えず、奥に鳥居だけを出現させる」

といった差分画像を作り、それをWeb側で組み合わせています。

１　普通の商店街画像

クリックするとthree.jsのカメラ奥行が進み七色の屋根に変化。

もう一度クリックすると鳥居が出現！

Web実装には React / Three.js / GSAP / GLSL Shader などを使用。

画像を単純に切り替えるだけではなく、マウス操作によるわずかな奥行き、雨や光のパーティクル、カメラ移動、画像変化のアニメーションなども加えています。

今後は鳥居をクリックするとカメラが商店街の奥へ進み、その先の別世界へ移動する演出も実装してみる予定です。

生成AIというと「画像や動画を作るもの」という印象が強いですが、プログラミングと組み合わせることで、

生成AIで世界を作る

↓

Web上でその世界を動かす

↓

ユーザー自身が触って変化させる

という表現もできます。

Webサイト制作でも、通常の企業サイトやLPだけでなく、商品・サービスの世界観を伝える体験型Webサイトやプロモーションサイトにも応用できそうです。

まだ開発途中ですが、完成したら改めて紹介したいと思います。

今回のスクショも記事の途中に1枚入れた方がいい。かなり「何を作ってるのか」が伝わる。

あとココナラで仕事につなげるなら最後に、

「生成AIを活用した映像制作・Web制作・インタラクティブ表現についてもご相談いただけます。」

を一文入れておくと営業臭が強すぎず、ちゃんと導線になる。

今回の記事は、これまでのAI映像系とは違って**「AI＋プログラミングもできる」ことを見せられる記事**になるのがいいところ。