BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

手軽にリッチなサイトに変わる!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