BLOG

手軽にリッチなサイトに変わる!3Dグラフィックを描画できるthree.js(WebGL)でサイトをアレンジしてみよう

更新日:2022/05/18


ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングできるWebGL(Webグラフィックライブラリ)。そのWebGLを簡単に扱えるライブラリ「three.js」というものを用い、ウェブサイトに3Dオブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと思います。

今回は、この記事を通して以下のような 見出しの後ろに十二面体のオブジェクトがあるウェブページ を作ってみます。JavaScriptをある程度触ったことのある方であれば、比較的簡単に導入することができると思うので、ぜひ一読してみてください。

表示のデモはこちら

記事内の画像はすべてフリー画像素材サイト Pixabayで取得しています。

前回のthree.jsの記事はこちら

1. HTMLとCSSで大枠を作成

今回は記事の見出しエリアをイメージして、HTMLとCSSでこのような見た目のページをコーディングをしました。

HTML

見出しの部分はsection.kv-blockで囲み、背景画像を設定する#kvエリアと、オブジェクトを表示するcanvasエリア、そして見出しテキスト用のh2.main-titleの3つエリアを用意しています。すべて#kvエリアの中に入れてもよかったのですが、背景画像とオブジェクトの透明度をバラバラにしたかったので、影響が出ないようエリアを分けました

余談ですが、見出しテキストには故スティーブ・ジョブズ氏の「Think different.」を引用しました。

CSS

今回作成したcssは上記の通りです。英語のフォントを少しかっこよくしたかったので、Google fontの’Readex Pro‘をつかっています。

テキストの上にマウスカーソルを載せた際、ポインタが変わらないようにしたかったので pointer-events: none; を指定しています。

2. three.jsの調整

HTMLとCSSを作成したら、今度はthree.jsの調整をおこないます。前回のthree.jsの記事「JavaScript経験者におすすめ!ウェブサイトに3Dグラフィックを描画できるthree.js(WebGL)を使ってみよう」を参考に、ベースとなるthree.js用のJavaScriptを用意しましょう。

JavaScript

3Dオブジェクトを作る箇所では、正十二面体(DodecahedronGeometry)を指定しています。#canvasのサイズは、今回は400px固定にしたかったので、const height = 400; と記載しました。

背景を透明にする

背景に任意の画像を反映させたいため、canvasの背景色をなくしておきます。WebGLRendererにalpha: trueと記載し、背景を透明します。

アンチエイリアス追加

WebGLRendererにantialias: trueと記載すると、物体の輪郭を滑らかにする「アンチエイリアス」を有効にできます。アンチエイリアスがあり・なしではこのように見た目が変わります。アンチエイリアスありの場合、フチのギザギザした感じが取れ、滑らかな見た目になっていることがわかるかと思います。

枠線の追加

画像同士が隣接する箇所は境界線がぼやっとしてしまいっていたため、境界線をはっきりさせるために、three.jsに用意されているLineSegmentsを用い、多面体の3Dオブジェクトに枠線を付けました。LineBasicMaterialにて色の指定ができます。meshに枠線用の変数(今回はline)を追加するのを忘れないようにしてください。

現時点でこのような見た目になりました。

マウスの動きを取得

マウスの動きを取得します。JavaScriptのmousemoveイベントを用いて、マウスが動いたときにマウスの位置を取得するようにしています。その下のファンクション animationStart にて、カメラの位置をマウスの動きに合わせて調整されるようになりました。

これでマウスを移動したほうへ多面体の向きが動くようになりました。

アニメーション

オブジェクトを回転させるために rotation を使います。多面体がフレームごとに回転するようになります。

現時点で、マウスを動かさなければ回転をし続け、マウスを動かすとその方向へ多面体が少し動く、というアニメーションになっています。

背景色の明度を少し落とす

CSS

3Dオブジェクトとの差がわかりやすいよう、背景色の明度を少しだけ下げるために、#kvの透明度を0.7にしました。bodyの背景色に黒色を指定しているため、画像が黒みを帯びたようになります。

ウインドウのリサイズ対応

このままでは、ウインドウの幅を変えても、ウインドウを読み込んだ際の位置に3Dオブジェクトが固定されてしまうため、ウインドウのリサイズ時に合わせてcanvas幅の調整をおこなうようにします。

これで、理想とするサイトが完成しました!


ここからさらにアレンジしていきます。

多面体画像の切り替え

せっかくなので、多面体の画像が4秒ごとに、各国の都市の写真へ自動で切り替わるようにしてみます。日本の秋葉原、アメリカのニューヨーク、フランスのローマ、オランダのアムステルダム、ドイツのミュンヘンの画像へ切り替わっていきます。
three.jsでは画像を読み込む際にはloader.load(‘画像へのパス’); と記述する必要があります。これで読み込んだ画像を配列「textures」に入れ、4秒ごとに画像のパスが変わるようにしています。

多面体のみ、画像が切り替わるようになりました。

KV画像の切り替え

多面体の画像と同様に、KVの画像を切り替えます。KVでは背景画像として設定しているため、背景画像(backgroundImage)のパスが4秒ごとに切り替わるようにしました。

これで、多面体と背景の画像が連動して動くようになりました。

フェードを少し付ける

画像が切り替わりが急なので、少しだけフェードを付けてみました。

JavaScript

CSS

切り替わる際、オブジェクトは0.5秒間で透明度が0.5から1になるように、背景画像は透明度が0.4から0.7(先ほど下げた値)にしています。背景を指定しているエリアとオブジェクトが親子関係になっていると、一括でアニメーションがあたってしまうため、分かれるように気を付けていただければと思います。

こちらでやっと完成です!

全体のソース

全体のソースはこちらから確認いただけます。

ソースの表示

表示のデモはこちら

応用1:サイトのトップページ風(英語)

このKVを応用し、サイトのトップページのようなデザインにすることもできるかと思います。

見出しエリアとして数字で高さを固定していた箇所を、ウインドウの縦の長さ(window.innerHeight)で取得するようにすると画面いっぱいに#canvasが広がるようになります。要素とテキストがより目立つので、メッセージ性の強い印象になるかと思います。

デモはこちら

応用2:サイトのトップページ風(日本語)

サイトのトップページの日本語サイトバージョンを作ってみました。

多面体自体をぼわっと光らせるためには、ほかのオブジェクトと組み合わせる必要がありそうだったため、CSSのグラデーションを使い、画面の端のほうへいくと暗くなるような雰囲気で調整しました。
国際的な取引のある会社などであれば、3Dオブジェクトを球体にし、地球の画像を貼るなどしてもよさそうです。

デモはこちら

応用3:環境マッピングを利用し、周りを反射しているように見せる

環境マッピングを用いて、オブジェクトの表面が鏡のように周りの風景を反射しているような表現にします。環境マッピングとは、オブジェクトの表面に周囲環境が映り込んでいるかのように見えるよう、擬似的に再現する方法です。そのため、実際に反射しているわけではありません。

今回は「キューブ環境マッピング」という四角形用の環境マッピングを利用します。画像を以下のようなキューブ環境マッピング用に切り出す必要があります。

画像の作成には以下のサイトを利用しました。1枚の画像から6面分の画像を抽出してくれるので、それを保存します。(本来はパノラマ画像から切り出すツールです。今回使っている画像はパノラマではないですが、6枚の画像が必要だったので利用させてもらいました)

【ツール】パノラマ画像→キューブマップ変換【JavaScript】

キューブマップ用の画像6枚のパスを配列の中に入れ、画像をロードするためのクラス「CubeTextureLoader」で読み込みます。そして、envMapで画像を指定し、反射の量を設定できる reflectivityで 1(最大)を指定します。0になるにつれ反射しなくなります。

デモはこちら

球体ではこのようになりました。

デモはこちら

まとめ

今回はthree.jsを用いて、実際にサイトをアレンジする方法をいくつかまとめました。応用1・2にあったように、ブラウザの高さ・横幅いっぱいにcanvasを置くことで、サイトのトップページにも流用できそうなデザインに仕上げることができるかと思います。また、応用3の鏡のように周りを反射しているように見える「キューブ環境マッピング」もなかなか面白い表現ですよね。

背景にも「キューブ環境マッピング」を使うことで、空間をドラッグするとオブジェクトの表面も変わっていくような表現ができるので、かなり面白いんじゃないかなと思います。

オリジナルのモチーフなどを作るには、数学的な知識が必要になってしまいますが、three.jsに最初から用意されている球体や多面体といったオブジェクトであれば簡単に導入することができると思うので、サイトの雰囲気やイメージに合うものがあればぜひ活用してみてはいかがでしょうか。

参考サイト
カメラ
Three.jsのカメラの制御(ics.media)


LineSegments(three.js 公式ドキュメント)

マウスの動きを取得
three.js
webgl – vertex colors(three.js examples)

three.js/examples/webgl_geometry_colors.html(GitHub)

環境マッピング
【Three.js】環境マッピングその2 – デザインおしゃれ手帳
CubeTextureLoader – three.js公式ドキュメント

関連記事

【three.js(WebGL)】背景に紙吹雪を舞わせてみよう!【デモ付き】

FOLLOW US