ただただ Plane 並べただけでも工夫次第でここまでできる！ Ameen Abdullah さんの Labs サイト
Plane だけでもこれだけできる
今回ご紹介するのは Ameen Abdullah さんというクリエイティブデベロッパーさんが公開されているウェブサイトです。
実は今回のサイトの URL から /labs という文字を削除した、つまりドメインのルートにアクセスすると過去に当サイトで紹介したことがあるポートフォリオサイトが出てきます。
おそらく、過去にポートフォリオを公開してから時間が経ち、新しく Labs サイトを追加したという感じなのかなと思います。
リンク：
Labs — Three.js & WebGPU Experiments
Plane だけと言いつつも
今回のサイトは先述したとおり、一種のポートフォリオサイトの下層ページみたいなものです。
この Labs サイトだけをあえて紹介しようと思ったのは、公開されている実装が非常にシンプルなアイデアをベースに作られていて、多くの人にとって参考になりそうだなと思ったからです。
というのも、わたしが運営している WebGL のスクールでは、Plane と Raycaster を使ってなにか作ってみましょうみたいな課題を出すことがあるのですが、今回のサイトはまさに Plane を活用して作られているんですよね。
ただサイトの入口はもうちょっと凝っていて、なかなか変わった仕掛けです。
おもむろに「門」という文字があり、その周囲には点線でサークルが配置されています。ページを訪れたユーザーは、その点線をなぞるように円の模様を描くとサイトに入れるという仕組みになっています。
だいぶ手が込んでいますよね……
たぶん、日本のカルチャーがすごく好きなクリエイターさんらしく、今回の演出に登場する「門」というのも、文字通り日本語の門という漢字のイメージから考案されたものなんでしょうね。
門を開いて、あるいはくぐり抜けて先へ進むと、Plane が円筒形に並べられたようなシーンが出てきます。
各 Plane をクリックしてやれば、この上のスクリーンショットにあるように詳細を確認することもできます。すりガラスのような表現がなんともおもしろいですよね。
また静止画ではちょっと伝わりにくいですが、床には桜の花びらのようなものがたくさん散らばっており、カーソルで撫でてやるとそれらが風に吹かれたように舞い上がったりもします。
Plane と Raycaster を使った作品を考えてみましょう、みたいなのってそれだけをテキストとして読むとすごくシンプルな課題のようにも思えますよね。
でも実際にこういった課題をスクールの受講者さんたちに出すと、本当にいろいろなアイデアの作品が出てきます。
今回紹介したサイトも、ある程度俯瞰して見てみると実は Plane をクリックするだけの構造になっていて、それをいろいろ拡張したり装飾したりしているだけなんですよね。
こういうサイトを見ると、テーマがどんなにシンプルでも、いくらでも個性やアイデアを発揮できるものなんだなとあらためて感じます。
ぜひチェックしてみてください。
