Visionページの遊び方

Visionページの最初に出てくる、黒い空間と光る立体。

あれはただの背景ではなく、マウスやタッチに反応するインタラクティブなビジュアルとして作っています。

とはいえ、説明なしで置いているので、初めて見ると「これは何をすればいいの？」となるかもしれません。ここでは、簡単な操作方法をまとめておきます。

まずは中央に近づける

ページを開いて数秒待つと、中央のオブジェクトが動きはじめます。

まずは、中央の近くでマウスを動かしてみてください。光り方や揺れ方が、少しずつ変わります。

クリックしなくても、近づくだけで反応します。

中央のオブジェクトは、ドラッグできます。

つかんで少し引っぱってから離すと、バネのように反動がつきます。強く引っぱるほど、大きく揺れます。

まずはここを触るのが、一番分かりやすいと思います。

中央をクリックすると、オブジェクトがワイヤーフレーム表示に切り替わります。

もう一度クリックすると、元に戻ります。

中央ではなく、背景の方をクリックすると、奥にあるグリッドの表示をオン・オフできます。空間の骨組みを見たり、消したりできる感じです。

右下には、小さなスライダーを置いています。

ここは設定画面というより、シンセサイザーのつまみのようなものです。正解の数値はありません。

OBJECT は、中央の色や形の複雑さ。

GRID は、背景グリッドの色。

TIME は、動きの速さ。

DENSE / SPARSE は、形の密度。

GLASS / ROUGH は、表面の質感です。

少しずつ動かすと、空間の雰囲気が変わっていきます。

右側の細いバーは、画面の中にたまっていく「乱れ」のようなものです。

たくさん動かしたり、何度もドラッグしたりすると上がっていきます。一定以上になると、オブジェクトが一度壊れて、また戻ってくるような演出が起きます。

急に画面が変わっても、バグではありません。

スマホでは、PC版とは少し違う動きになります。

タップすると反応が強くなり、指でなぞると色や複雑さが変わります。しばらく触らないでいると、ゆっくり落ち着いた状態に戻ります。PC版が「つかむ」感じなら、スマホ版は「なぞる」感じです。

このインタラクティブなビジュアルは、React、Three.js、React Three Fiber、GLSLシェーダーを使って作っています。

Reactでマウスやタッチの状態を管理して、Three.jsで3D空間を描いています。シェーダーでは、表面の歪みや発光、色の変化を作っています。さらに、Chromatic Aberrationなどのエフェクトをいくつか重ねて、見え方に変化を与えています。

まずは、この順番で触ってみるのがおすすめです。

Visionページはただ眺めるだけでなく、インタラクティブな反応のあるページとして作っています。