BLOG

JavaScript経験者におすすめ!ウェブサイトに3Dグラフィックを描画できるthree.js(WebGL)を使ってみよう

更新日:2022/05/18

3Dグラフィックでの表現を用いたウェブサイトが増えてきたなあ、と思う方も多いのではないでしょうか。このグラフィックの表現は、もちろんHTMLとCSSだけでは不可能です。WebGL(Webグラフィックライブラリ)という、ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングするために使用されるJavaScriptAPIが使われています。

そんなWebGLを簡単に扱うことができるライブラリ「three.js」というものがあるので、本記事ではthree.jsを用いた3Dグラフィックの作成について紹介しようと思います。

JavaScriptをある程度触ったことのある方であれば、比較的簡単に導入することができると思うので、ぜひ一読してみてください。この記事を通して、以下のようなオブジェクトをブラウザに表示できるようになります。

表示のデモはこちら

WebGLとは

3DグラフィックをHTML5のCanvas要素に描画できるJavaScript APIです。
ほかの3Dグラフィックに対応しているFlash PlayerやUnity Web Playerといったものは、プラグインをインストールしないと表示することが不可能でしたが、WebGLはプラグインが必要ないため、プラグイン未搭載のパソコンやスマートフォンでも対応可能になっています。

WebGLの対応ブラウザ

2021年現在、iOSやAndroidを含めた主要ブラウザ全てで対応可能となっています。

WebGL – 3D Canvas graphics(Can I use ___?)

WebGLのライブラリ「three.js」

three.jsはWebGLをJavaScriptで扱うことができ、3Dオブジェクトをブラウザに表示できるライブラリです。three.jsを用いることで、本格的な3Dをプラグイン無しで簡単に作ることができます。

Three.js – JavaScript 3D Library(three.js公式サイト)

公式サイトにはサンプルが載っています。

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

3Dオブジェクトを表示しよう

それでは実際に、three.jsを用いて3Dオブジェクトを作成してみましょう。

HTMLファイルを用意する

three.jsはHTMLのcanvas要素が必要になります。canvas要素は図形やアニメーションを描くために使われるHTML要素です。three.js側で呼び出すために必要なので、canvas要素には任意のid(今回は”canvas”)を指定しておきます。

また、three.jsを表示させるためにjsの読み込みが必要ですが、今回はCDNを使っています。こちらは公式サイトの左メニューCode>Downloadからダウンロードできます。

Three.js – JavaScript 3D Library(three.js公式サイト)

three.jsの公式JavaScriptとは別に、今回のはcommon.jsというファイルにthree.js動作用のJavaScriptを書いていきます。

作業用JavaScriptファイルの準備

先ほど作成したcommon.jsを開き、以下を記述してください。

widthとheightにて、canvas要素のブラウザの横・縦の長さを指定しています。
pxでの指定も可能ですが、今回はブラウザ内いっぱいになるようにしています。

three.jsで3Dオブジェクトをブラウザに表示させるためには、シーン・カメラ・レンダラーといったものが必要になります。流れは以下のような感じですが、必要な要素さえあれば順番通りにやらなくても問題はありません。

1シーンを作る


3D空間になる「シーン」を作ります。

2カメラを作る


シーン内にあるオブジェクトを投影するための「カメラ」を作り、位置を指定します。

3レンダラーを作る


WebGLを生成(レンダリング)するための「レンダラー」を作ります。

4ライトを作る

ライトが無いと3D空間が真っ暗になるため、光源を置いてあげます。今回指定しているAmbientLightは空間全体に均等に光を当てるので、一律に明るくなるライトです。
他のライトについての詳細は、記事の下の方にまとめました。

53Dオブジェクトを作る

3Dオブジェクトには、

  • 形や大きさなど形状を表す「ジオメトリ」
  • 色や質感をつけるための「マテリアル」
  • ジオメトリを受け取りマテリアルに適用する「メッシュ」

という概念があります。以下のように記載し、各要素を指定していきます。

ジオメトリとマテリアルについては記事の下のほうにまとめています。

63D空間を描画する

最後に、シーンとカメラをレンダリングすることで、ブラウザ上に3Dオブジェクトを描画できます。

こちらがブラウザに表示されたら成功です。
今回、ライトは「DirectionalLight(平行光源)」、ジオメトリは「SphereGeometry(球体)」、マテリアルは「MeshNormalMaterial(RGBカラー)」にしています。

全体のソース

全体のソースはこちらです。

表示のデモはこちら

ライト一覧

three.jsで使えるライトについて、以下にまとめました。

AmbientLight 環境光源

  • 空間全体へ均等に光を当て、一律に明るくなる
  • 光が直接当たっていない箇所も照らされる

DirectionalLight 並行光源

  • 特定の方向に放射される光が平行になる
  • 照らされる面や影の方向は一定になる

HemisphereLight 半球光源

  • 上からと下からの色を分けて光を当てられる


上からは黄緑(0x93C54B)、下からは紺(0x0000FF)というライトにして、X・Y軸はそれぞれ500ずつ移動しています。

PointLight 点光源

  • 単一点から全方向へ光るライト

SpotLight スポットライト光源

  • 特定の方向(点座標)に向けて光を当てられる

ジオメトリ一覧

three.jsで使えるジオメトリについて、以下にまとめました。

SphereGeometry 球体
BoxGeometry 立方体

※わかりやすいように少し回転させています
PlaneGeometry 平面

※わかりやすいように少し回転させています
ConeGeometry 三角錐
CylinderGeometry 円柱
DodecahedronGeometry 正十二面体

※詳細(detail)のデフォルトは0ですが、0より大きい値に設定すると頂点が追加され、十二面体ではなくなります。
IcosahedronGeometry 正二十面体

※詳細(detail)のデフォルトは0ですが、0より大きい値に設定すると頂点が追加され、二十面体ではなくなります。
TorusGeometry ドーナツ

マテリアル一覧

three.jsで使えるマテリアルについて、以下にまとめました。

MeshNormalMaterial

  • RGBカラーにする
  • このマテリアルのみ、ライトがなくても目視できる

MeshBasicMaterial

  • 塗りつぶし(色指定がないと白になる)

MeshLambertMaterial

  • 光沢のない質感

MeshPhongMaterial

  • 光沢のある質感

MeshToonMaterial

  • アニメ(カートゥーン)調の質感

MeshStandardMaterial

  • 光の反射などを現実の物理ベースでレンダリングする

まとめ

本記事ではthree.jsの触りの部分を紹介しました。
より高度な開発ができるようになれば、以下のサイトのように部屋の中の各要素などさまざまなオブジェクトをつくることができます。それにより、ウェブサイトの表現の幅が広がったり、オリジナルのゲームを作れたりするようになったり、できること広がると思うので、この機会にぜひthree.jsに挑戦してみてはいかがでしょうか。
The ultimate Three.js course(three.js journey)

参考サイト
シーンの作成 – three.js docs(three.js公式ドキュメント)
簡単なThree.jsのサンプルを試そう(ics.media)
最新版で学ぶThree.js入門 手軽にWebGLを扱える3Dライブラリ(ics.media)
Three.jsをかじる本(Zenn)
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>(HTML5 Experts.jp)

応用編はこちら

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

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

FOLLOW US