スクロールに連動したシーンの変化と DOM の構造を上手に組み合わせた Seabrook Studio のウェブサイト
重厚な雰囲気と 3D シーン
今回ご紹介するのは、チェコに拠点を置くスタジオ、Seabrook Studio のウェブサイトです。
最初、なんとなくアジアなテイストを感じたのですが、住所から見るとチェコが拠点のスタジオみたいです。
登場する 3D オブジェクトが鳳凰や狐なので、それがどこかアジアンテイストな雰囲気を生み出している要因なのかもしれません。
リンク：
シームレスにモデルが切り替わる瞬間は見事
今回のサイトでは、背景に 3D モデルが比較的大きく描かれます。
スクロールに連動してオブジェクトの状態が変化しますが、3D シーンだけでなく DOM とも上手に連動した表現が随所に見られ、奥行き感を上手に活用しています。
3D シーンは黒を基調にした暗めの色使いで、BGM の雰囲気も相まってどこか荘厳なかんじです。
おそらくですが、ゆっくりと光源が動いている感じかなと思うのですが、濃淡と言いますか明暗と言いますか、それがゆっくりと変化する様子はなんともかっこいいですね。
ページ冒頭部分で登場する鳳凰っぽい 3D モデルには、鳳凰らしく長い尾があるのですが、これが覆いかぶさるように画面全体を遮る瞬間があります。
そのままスクロールし続けると、この鳳凰の尾の部分がシームレスに狐の尾として描かれる状態になるんですよね。
どうやって実装しているのか、この切り替わりの瞬間がすごく自然で見事です。
ソースコードまで見ていないのでわからないですが、もしかしたら鳳凰の本体のほうを非表示にして、あたかも狐の尾の部分であるかのように見せているのかもしれません。
サイト内にはその他にも、3D だけではなく 2D で WebGL を活用しているインターフェースもいくつかあります。
演出そのものは近年では比較的よく見かけるような内容ではあるのですが、サイトの雰囲気を壊さない程度の程よいインタラクティブ性で、うまく取り入れられていると思います。
WebGL で 3D モデルをアニメーションさせること自体は、three.js などのライブラリを利用すればそこまで難しくはありません。
しかしスクロールに連動してうまくその姿勢やカメラ位置を制御するのは結構たいへんですし、今回のケースのようにちょっとしたトリックを仕込むとなると、工夫が必要です。
表現としてはかなりシンプルな内容ですが、うまく WebGL を活用している事例かなと感じました。
ぜひチェックしてみてください。
