Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。WebGLだけで3D表現をするためには、立方体一つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。

もともと2000年代後半のFlashの時代から、ウェブの3D表現が人気を集めてきました。今では標準技術としてのWebGLが、ゲームやビジュアライゼーションなどの多くの場面で採用されています。本記事でThree.jsによってどのような表現が可能なのか、実際にコードをどのように書き始めていくかを学んでいきましょう

事例紹介

実際にThree.jsがどのような事例で使用されているのか紹介します。

HexGL

ブラウザで遊べるF-ZEROのようなレーシングゲーム。ブラウザで動いているとは思えないほどのクオリティーの高さです。一度遊んでみてください。


株式会社ホムンクルス

株式会社ホムンクルスのコーポレートサイト。クールな3Dアニメーションが冒頭から始まり、サイト全体をリッチに飾っています。


Dynamic procedural terrain

Three.jsを使ったアニメーションデモ。地上の質感やぼかしのような表現など、さまざまな工夫がされており、幻想的な世界を味わえます。


準備しよう!

事例を見て、Three.jsでどんな表現が可能なのかイメージができたかと思います。ここからはThree.jsを使って3Dコンテンツを作る準備をしていきましょう

ダウンロード

公式サイトの左メニューの「download」リンクからライブラリをダウンロードします。ダウンロードしたthree.js-master.zipを展開すると以下のような構成になっているので、three.jsファイルを自分の作業フォルダーにコピーします。

download_file

作業用JavaScriptファイルの作成

作業用ディレクトリにindex.jsという名前で、以下のコードが書かれたJavaScriptファイルを作成します。

window.addEventListener('DOMContentLoaded', init);

function init() {
  // ここに処理を追加していきます
}

init()関数の中にThree.jsを使用するためのコードを追記していきます。

HTMLファイルの作成

作業用ディレクトリにindex.htmlという名前で、以下のコードが書かれたHTMLファイルを用意します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <!-- three.jsを読み込む -->
  <script src="three.js"></script>
  <!-- index.jsを読み込む -->
  <script src="index.js"></script>
</head>
<body>
</body>
</html>

ここまでで準備は完了です。次のページから実際にJavaScriptのコードを書いていきます。