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

昨今では、ゲームやビジュアライゼーションなどの多くのWeb3Dコンテンツで採用され始めています。本記事でThree.jsによってどのような表現が可能なのか、実際にコードをどのように書き始めていくかを学んでいきましょう。

事例紹介

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

▼ HexGL

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

example_2

▼ 株式会社ホムンクルス

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

example_1

▼ Dynamic procedural terrain

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

example_3

準備しよう！

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

ダウンロード

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

download_file

作業用JavaScriptファイルの作成

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

var init = function() {
    // ここに処理を追加していきます
}
window.addEventListener('DOMContentLoaded', init);

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

HTMLファイルの作成

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

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

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