Three.jsとは？　概要から3Dモデルの表示手順・おすすめの学習素材まで紹介

目次

Three.jsとは

Three.jsは、Webブラウザ上で3DCGを簡単に表示できるJavaScriptライブラリです。JavaScriptの基本的な知識があれば、Three.jsを用いてWebブラウザ上に3Dモデルや3Dアニメーションを簡単に表示できるようになります。

もともと、Webブラウザ上で3DCGを扱う技術に「WebGL」というものがありました。これは「Flash Player」のような外部プラグインを用いずに3DCGや2DCGを描画できる、マルチプラットフォームのJavaScript APIです。WebGLもJavaScriptを使うことに変わりはないのですが、WebGLを扱うには3DCGに関する専門知識やスキルが必要となり、気軽に始められるものではありませんでした。

WebGLで必要となる3DCGの専門知識を上手く抽象化し、「オブジェクトを置く」「ライトを置く」「カメラを置く」といった、直感的でわかりやすい表現でコーディングできるようにしたものがThree.jsです。

Three.jsの特徴としては、次のものが挙げられます。

• 軽量で使いやすい
• 豊富な機能
• 活発なコミュニティ

「軽量で使いやすい」という特徴により、Three.jsはWebブラウザ上でスムーズに動作します。プラグインなどを必要としないため、Webブラウザが動くデバイスであればパソコンでもスマホでも実行環境を問わないところが大きな利点です。また、初心者でも比較的簡単に3DCG表示までたどり着けるので、モチベーションを保ちながら学習を進めていくことができます。

「豊富な機能」について、Three.jsは3DCG表現に必要な様さまざまな機能を備えています。さまざまな形式の3Dモデル読み込み、テクスチャなどのマテリアル表現、カメラ操作、アニメーション作成、インタラクション実装など、幅広い用途に3DCG表現を活用できる機能が揃っています。

「活発なコミュニティ」について、Three.jsは2010年4月に公開され、現在も開発が進められている活発なライブラリです。その間、数多くのチュートリアルやサンプルコードが公開され、フォーラムなどでも多くの情報が蓄積されてきました。学習リソースが豊富に存在しているのも大きな特徴といえるでしょう。

【関連記事】

必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力

エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。

Three.jsを使用した事例

Three.jsはWebブラウザ上で3DCGを表現するためのJavaScriptライブラリです。3D表現はさまざまなコンテンツにおいて、視覚的な効果を高めてくれるでしょう。ここでは、代表的な使用例をいくつか紹介します。

• 3Dモデルの展示
• 3Dアニメーション効果
• 3Dゲーム
• 3Dグラフ
• 3D地図
• VR/AR

「3Dモデルの展示」では、Three.jsを使って3Dモデルをインタラクティブに展示できます。ユーザーは、モデルを回転させたり、拡大・縮小したりと、さまざまな角度から見ることができます。

「3Dアニメーション効果」は、Webサイトに動きのあるコンテンツを付与します。マウスカーソルの動きやページスクロールに合わせて3Dアニメーション効果を加えることで、ユーザーの視覚的な訴求を高められます。

「3Dゲーム」は、Webブラウザ上で動く3Dゲームです。「3Dグラフ」は、Three.jsを用いてグラフの3D化を行います。複雑なデータを視覚的にわかりやすくすることで、データ分析の手助けになります。

「3D地図」では、建物の高さや地形が3Dで表現されることで、地理情報をわかりやすく表示できます。

「VR/AR」では、スマホやヘッドセットを使用して仮想空間に入り込んだような体験を得られます。「VR/AR」コンテンツの3DCG表示をThree.jsで作成することができます。

具体的な使用事例は、「Three.js公式サイト」のトップページから、Three.jsが使用されている各々のWebサイトへ飛ぶことで閲覧ができます。

Three.jsを使用して3Dモデルを表示する手順

ここからは、Three.jsを用いて3DモデルをWebブラウザに表示するまでの手順を紹介していきます。ここでの説明では、Windows PCと統合開発環境のVisuaStudio Code（以下、VS Code）を用いた環境を例に用います。

Three.jsを使用するための環境構築

Three.jsを使用するための環境構築、つまりライブラリのインストールは次の2通りのいずれかの方法で行うのが一般的です。

• npmでインストール
• CDNでインストール

「npmでインストール」は、「Node.js」環境へnpmを用いてインストールする方法です。本格的な開発を進めるのに適していますが、Node.jsに慣れていないと環境を構築するまでが少し大変です。

「CDNでインストール」は、CDN（Content Delivery Network）を用いて、実行のたびにその都度ライブラリをダウンロードして組み込む方法です。事前の準備が不要なので、気軽に開発をスタートできます。

上記の方法以外ではライブラリを手動で丸ごとコピーする方法もあります。

ここでは、手軽に始められるCDNを用いた方法で進めていきます。

VS CodeでWebサーバーの導入と下準備

JavaScriptで開発を始めるにあたって、まずはVS Codeで下準備を行います。

1.Three.jsはWebサーバー上で実行するのが望ましいので、VS Code用の簡易的なWebサーバーを拡張機能から組み込んでおきます。VS Code左端のアイコンメニューから拡張機能を選択し、検索ボックスに「Live Server」と入力してLive Serverを探し出し、インストールを実行します。

2.続いてプロジェクトの準備です。VS Code左端のアイコンメニューからエクスプローラを選択し、「フォルダーを開く」をクリック、JavaScriptのプロジェクトを作成する任意のフォルダーを作成して開きます。今回は 「threejs_test」というフォルダー名で作成しました。

初回はセキュリティ上の確認ダイアログが表示されることもありますが、その場合は「はい、作成者を信頼します」をクリックして進みましょう。

3.先ほど作成したフォルダーの中に、下記2つのテキストファイルを新規作成しておきます。

• index.html
• main.js

4.以上でコーディングを開始する準備が整いました。

index.htmlの記述

Webブラウザに読み込む index.html には、以下の内容を記述します。

【index.html】

上記のタグで、CDNからライブラリをダウンロードします。ライブラリはThree.js本体部分とアドオン部分の2つに分けてダウンロードしており、3Dモデルローダーやカメラ制御などの有用な機能の多くは、アドオン部分にも含まれています。

なお、CDNのURLに含まれる「0.162.0」はバージョン番号になります。新しいライブラリを使いたい場合は、ここの数字を変更してください。

上記のタグの位置に3DCGを描写するキャンバスが挿入されます。

main.jsの記述

JavaScriptでコーディングする main.js には、下記のコードを記述します。ライブラリ側で用意されているプリミティブ形状のオブジェクトを回転させながら描写するスクリプトになります。

【main.js】

上から順に「シーンやカメラ、レンダラーを準備して、シーンにライトやオブジェクトを配置、あとはオブジェクトの位置や向きを変化させながらレンダリングを繰り返す」と、わかりやすい記述でコーディングできることが確認できます。

上記では背景透過有り、アンチエイリアス有りでレンダラーを作成しています。

また、色指定の「color: 0x55ffff」は16進数のカラーコードで、先頭から2桁ずつ順番に赤色、緑色、青色の明るさを示す数値になります。いろいろと変更して試してみてください。

実行結果の確認

次の手順でJavaScriptの実行結果を確認できます。

1.index.html、main.js をそれぞれを保存したのち、VS Codeで index.html のエディター画面を表示して、エディター画面の余白部分で右クリックメニューから「Open with Live Server」を選択します。

2.Webブラウザが起動して index.html が表示されます。問題なくできていれば、回転する3DオブジェクトがWebブラウザ上に表示されているはずです。

3DモデルをWeb上に公開する方法

今回の例のように、CDNでライブラリをインストールしている場合は 、index.html と main.js をWebサーバーにアップロードするだけで簡単にWeb公開できます。

その他、かなり強引な方法ではあるものの、WordPressで作成しているWebサイトの記事中に埋め込んで公開することもできます。今回は手順を紹介していきます。

1.main.js の修正を行います。下記のようにすることで、描画サイズがウィンドウ一杯ではなく、固定サイズになります。

【描画サイズ固定に変更】

2.WordPressを動かしているWebサーバーのルートディレクトリ（一般的には Public_html ） へ、修正した main.js をFTPなどでアップロードします。

3.WordPressの記事編集画面で、本文末尾に「カスタムHTMLブロック」を追加します。

4.追加されたカスタムHTMLブロックに、次のコードを記述します。

【本文末尾のカスタムHTMLブロックに記述】

もともと index.html 内にあったライブラリの読み込み部分とほぼ同じです。

main.js の先頭に「/（スラッシュ）」が追加されている点に注意してください。ルートディレクトリを示しています。もしルートディレクトリに .js ファイルを置きたくない場合は、ルートディレクトリの下に「/javascript」といったフォルダを作り、そこに main.js をアップロードし、下記のような呼び方にしても問題ありません。

5.続いて、WordPressの記事編集画面で、記事中の3DCG表示を埋め込みたい部分にカスタムHTMLブロックを追加し、次の一文を記述します。

【記事本文中のカスタムHTMLブロックに記述】

6.以上の編集を行って記事を公開すると、 記事中にThree.jsの3DCG表示が埋め込まれているのを確認できます。

Three.jsのおすすめ学習素材

「Three.js入門サイト」は、入門～応用まで多くの情報が整っており、何より日本語で学習できるおすすめのWebサイトです。

また、「Three.js公式サイト」の中にある「documentation」もチェックしておきたいものの1つです。チュートリアルもある程度日本語訳が進んでいるので、読み進めていくといろいろな発見があることでしょう。

同サイト内の「examples」は、Three.jsでどんなことができるのか知るのにピッタリの内容です。各サンプルページ右下のボタンから、ソースコードの閲覧も行えます。

Three.jsを使えばユーザーを惹きつけるWebサイトも作りやすくなる

Three.jsはパソコンやスマホなどのデバイスによらず、Webブラウザさえあれば比較的簡単に3Dコンテンツを表示することのできるJavaScriptライブラリです。Three.jsを活用することで視覚的に楽しい効果を生み出し、ユーザーを惹きつけるWebサイトも作りやすくなるでしょう。

参考になるサンプルが豊富にあるのも、十数年の積み重ねがあるThree.jsの強みです。気になる方は、より深くThree.jsの世界に触れていってみてください。