Three.jsとは？主な機能と実例を紹介

はじめまして、エンジニアスタイル編集部です！

コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！
本記事が、皆様の参考になれば幸いです。

経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。

エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。Three.jsのフリーランス・副業案件一覧をご覧いただけますのであわせてご確認ください。

はじめに

3Dグラフィックスの需要が高まる中、その制作に不可欠なツール「Three.js」が注目を集めています。

Three.jsは、WebGLを基にしたJavaScriptライブラリで、ウェブブラウザ上で3Dグラフィックスを簡単に実装できるツールです。

この記事では、Three.jsの基本概念、主な機能、そしてその利用例までを網羅的に解説します。

最後までお読みいただければ、Three.jsの全体像を理解し、その応用方法を学ぶことができるでしょう。

<この記事を読むとわかること>

• Three.jsの基本概念とその特徴
• 主要な機能（メッシュ、マテリアル、アニメーションなど）
• Three.jsを使った実践的なクラスとライブラリ
• Three.jsを用いた著名なデザイナーや企業の事例

Three.jsを理解する上で知っておきたい用語

Three.js（スリージェイエス）について説明をする前に、いくつか用語の整理をしておきましょう。

以下に紹介する専門用語は、Three.jsを理解する上で非常に重要になってくるので、あらかじめ説明しておきます。

3次元コンピュータグラフィックス(3DCG)

3次元コンピュータグラフィックス(3DCG)は、コンピュータを使用して作成される3Dの視覚的表現です。

2次元（2D）グラフィックスとは異なり、深さの次元を加えることで、物体やシーンをより現実的かつ立体的に表現します。

映画、ビデオゲーム、アーキテクチャ、工業デザイン、バーチャルリアリティなど、さまざまな分野で広く使用されている技術です。

WebGL

WebGL（Web Graphics Library）は、ウェブブラウザでインタラクティブ（双方向的）な2Dおよび3DグラフィックスをレンダリングするためのJavaScript APIです。

レンダリングとは、3次元モデルから最終的な画像や映像を生成するプロセスで、APIとは、異なるソフトウェアやプログラムの情報を交換するためのインターフェースです。

WebGLは、OpenGL ES（Embedded SystemsのためのOpenGL）に基づいており、WebGLを使用することで、ユーザーは追加のプラグインをインストールせずに、ブラウザ上で直接、高性能のグラフィックスを体験することができます。

また、GPU（画像処理ユニット）に直接アクセスするので、高度なグラフィックス効果と3D描画機能を可能にするAPIです。

これにより、ウェブベースのアプリケーションにおいて、従来の2Dグラフィックスよりもはるかに高いレベルのビジュアル表現を可能にします。

OpenGL ES

OpenGL ES（OpenGL for Embedded Systems）は、組み込みシステム（モバイルデバイス、ゲーム機、その他のポータブルデバイスなど）向けに最適化された、クロスプラットフォームのAPIです。

2Dおよび3Dグラフィックスのレンダリングを行うために使用され、OpenGLの軽量版として設計されています。

OpenGL ESは、リソースが限られたデバイスで高効率かつ高性能なグラフィックス処理を可能にするため、特にモバイルアプリケーションやゲームで広く利用されているAPIです。

Three.jsとは？

一昔前までは、3Dグラフィックス（3DCG）を作成するには専門的な知識やスキルが必要で、お世辞にも「学びやすい」とはいえませんでした。

しかし、3Dグラフィックスを作成するためのツールも多くリリースされ始め、それと同時にThree.jsも注目を集めることとなりました。

ここでは、そんな注目のThree.jsについて、基本的な情報をご説明します。

Three.jsの概要

Three.jsは、ウェブブラウザで3Dコンピュータグラフィックスを作成し表示するためのJavaScriptライブラリです。

WebGLを基にしており、開発者が簡単に3Dシーンを作成し、アニメーションやインタラクティブなビジュアルをウェブページに統合できるように設計されています。

Three.jsを使用することで、低ポリゴンの地球モデルや惑星のアニメーション、ロゴの3Dビジュアライゼーションなど、多様な3Dグラフィックスがウェブ環境で実現可能です。

その使いやすさと広範なアプリケーションにより、ウェブベースの3Dコンテンツ開発における主要なツールの一つとなっています。

Three.jsの特徴

Three.jsの特徴は数多くありますが、主に以下の2つに分類できます。

WebGLの抽象化

Three.jsの特徴の一つである「WebGLの抽象化」は、WebGLの複雑さを緩和し、よりシンプルで直感的なインターフェースを提供することにあります。

WebGLは、ウェブブラウザで3Dグラフィックスをレンダリングするための低レベルなAPIです。

これに対してThree.jsは、開発者が3Dシーン、カメラ、ライト、テクスチャなどを容易に制御できるように、これらの要素をより扱いやすい形で提供します。

結果として、Three.jsを使用すると、複雑な3Dグラフィックスも簡単なコードで実装でき、ウェブベースの3Dアプリケーション開発を大幅に簡易にすることが可能です。

JavaScriptでの開発が可能

Three.jsのもう一つの大きな特徴は、「JavaScriptでの開発が可能」という点です。

JavaScriptは、ウェブ開発言語として広く普及しているプログラミング言語です。

通常、3Dグラフィックスの開発には特化したプログラミング言語や複雑なツールが必要ですが、Three.jsでは、馴染み深いJavaScript言語を使って3Dシーンを作成し、操作することができます。

これにより、ウェブベースの3Dアプリケーション開発の敷居が大きく下がり、より多くの開発者が3Dグラフィックスの制作にトライできるようになるのです。

Three.jsの主要となる機能とは

ここまで、Three.jsについて基本的な概要や特徴を解説してきました。

以降では、もう少し具体的に主要となる機能についてさらに深掘りしていきましょう。

メッシュ

Three.jsにおける「メッシュ」は、3Dオブジェクトの形状と外観を定義する主要な機能です。

メッシュは、ジオメトリ（3D形状を形成する頂点の集まり）とマテリアル（オブジェクトの表面の見た目や質感を定義する材料）の組み合わせで構成されています。

例えば、立方体や球体のようなシンプルな形状から、より複雑なカスタム形状まで、さまざまなジオメトリをメッシュに適用することが可能です。

そして、色、テクスチャ、光沢などの異なる特性を持つマテリアルを使って、これらの形状の見た目をカスタマイズします。

このように、メッシュはThree.jsで3Dモデルを作成し、視覚化する上で中心的な役割を果たす機能です。

マテリアル

Three.jsにおける「マテリアル」は、3Dオブジェクトの表面の見た目や質感を定義するための重要な機能です。

マテリアルは、オブジェクトがどのように光を反射または吸収するか、その色やテクスチャは何か、そしてその表面はどれだけ光沢があるかなど、視覚的な特性を指定します。

Three.jsでは、さまざまな種類のマテリアルが提供されており、これを使って開発者はオブジェクトにリアルな外観を与えたり、意図した芸術的な効果を表現することが可能です。

例えば、鏡面反射のある金属、透明なガラス、粗い石の質感など、多岐にわたる表面効果をシミュレートできます。

テクスチャ

Three.jsにおける「テクスチャ」とは、3Dオブジェクトの表面に適用される画像やパターンのことです。

テクスチャは、オブジェクトにリアルな外観を与えたり、特定の詳細を加えるために使用されます。

例えば、木材の質感、石の表面、布の模様など、さまざまなリアルな素材やパターンを3Dオブジェクトに適用することが可能です。

テクスチャは、単純な色やマテリアルだけでは表現できない細かいディテールを3Dモデルに付加するため、Three.jsでの3Dビジュアライゼーションにおいて重要な役割を果たします。

スキン（スキニング）

Three.jsでの「スキン（スキニング）」は、主にアニメーションされたキャラクターやオブジェクトに適用される機能です。

3Dモデルのメッシュ（表面の形状）を骨格構造に結びつけ、その骨格の動きに従ってメッシュが変形していきます。

これにより、リアルなキャラクターアニメーションや、複雑な動きを持つオブジェクトのシミュレーションが可能です。

Three.jsでは、このスキン（スキニング）機能を利用して、リアルタイムでの動的な3Dキャラクターやオブジェクトのアニメーションを実現できます。

スケルトン

Three.jsにおける「スケルトン」は、3Dモデル内の骨格構造を表す機能です。

スケルトンは複数の骨（ボーン）で構成され、これらのボーンがモデルの各部分に関連付けられています。

アニメーションの際には、これらのボーンを動かすことでモデル全体が連動して動くようになります。

例えば、キャラクターの腕を動かす場合、腕に関連付けられたボーンを動かすことで、自然な動きを実現可能です。

スケルトンは特にキャラクターアニメーションや複雑な動きを持つオブジェクトにおいて重要で、このスケルトン構造を用いて詳細なアニメーションを作成していくことになります。

アニメーション

Three.jsにおける「アニメーション」機能は、3Dオブジェクトやモデルに動きや変化を与えることができる重要な機能です。

この機能を利用すると、開発者はオブジェクトの位置、回転、スケールなどの属性を時間の経過に応じて変更することができます。

また、より複雑なアニメーションでは、キーフレームベースのアニメーションやスケルトンとスキニングに基づくキャラクターアニメーションを作成可能です。

これにより、リアルな動きや表現豊かなビジュアルエフェクトをウェブページ上で実現することが可能になります。

ライト

Three.jsにおける「ライト」は、3Dシーンにおける照明の役割を果たす重要な機能です。

ライトを使用することで、オブジェクトに陰影をつけたり、シーンに深みやリアル感を加えたりすることができます。

Three.jsでは、さまざまな種類のライトを提供しており、例えば点光源、方向光源、環境光などを標準で使用することが可能です。

これらの異なるタイプのライトを組み合わせることで、シーンの見た目を大きく変えることができます。

ライトの設定には、位置、色、強度などのパラメータがあり、これらを調整することで照明の効果を細かくコントロールして、より現実のオブジェクトに近づけていくのです。

カメラ

Three.jsにおける「カメラ」は、3Dシーンをどのように見るかを定義する機能です。

カメラはユーザーの視点で設定されており、どの部分のシーンが画面に表示されるかを決定します。

Three.jsでは複数のカメラタイプが提供されており、最も一般的なのは透視投影カメラ（PerspectiveCamera）です。

これは、現実世界の視覚と似た方法でオブジェクトを表示し、遠くのオブジェクトが徐々に小さくなる効果（遠近法）を持ちます。

カメラの位置、向き、視野などを設定することで、ユーザーがシーンをどのように見るかをコントロールしていき、よりリアルなグラフィックスを作成していくのです。

Three.jsの便利なクラスとライブラリ

Three.jsをうまく使いこなすには、さまざまな「クラス」と「ライブラリ」を使用することになります。

「クラス」とはオブジェクトの設計図であり、「ライブラリ」は再利用可能なコードの集合です。

現在では、非常に多くのクラスやライブラリが存在しますが、その中でも便利なものをいくつかご紹介します。

OrbitControls

「OrbitControls」は、カメラを操作して3Dシーンを回転、ズーム、パン（水平移動）するための便利なコントロールクラスです。

このコントロールを使用することで、ユーザーはマウスやタッチスクリーン操作によってシーンを自由に観察できます。

例えば、マウスドラッグでシーンの周りを回転させたり、スクロールホイールやピンチジェスチャーでズームイン・アウトしたりできます。

OrbitControlsの詳細はこちらのリンクから

FontLoader

「FontLoader」は、カスタムフォントの読み込みとテキストの3Dオブジェクトとしての表示を可能にするクラスです。

専用のローダーを使用して、外部からフォントファイルを読み込み、そのフォントを使用してテキストベースの3Dオブジェクトを生成できます。

これにより、3Dシーン内でカスタムテキストを描画することが可能になり、アートワーク、ロゴ、UIエレメントなど多岐にわたる用途に使用できます。

FontLoaderは、3Dグラフィックスにおけるテキスト表現を豊かにするために重要なツールといえるでしょう。

FontLoaderの詳細はこちらのリンクから

CubeTextureLoader

「CubeTextureLoader」は、キューブマップテクスチャを読み込むためのクラスです。

キューブマップテクスチャとは、立方体の各面に異なる画像をマッピングすることで、環境マッピングやスカイボックスの作成に利用されます。

このローダーを使用することで、6つの異なる画像（通常は立方体の各面に対応する）を一度に読み込み、それらを組み合わせて一つの3D環境テクスチャを作成できます。

CubeTextureLoaderは、リアリスティックな環境反射や背景の作成において重要な役割を担うクラスです。

CubeTextureLoaderの詳細はこちらのリンクから

dat.GUI

dat.GUIは、主に開発者がデバッグやデモンストレーション目的で使用するライブラリです。

このライブラリを利用すると、スライダー、チェックボックス、色選択器などの要素を含むGUIを簡単にウェブページに追加できます。

例えば、Three.jsで3Dシーンを作成する際、dat.GUIを使ってオブジェクトの位置、回転、スケール、マテリアルの属性などをリアルタイムで調整するインターフェースを作成することが可能です。

dat.GUIを使用することで、プログラムを実行しながらパラメータを変更し、その影響を直接観察することが可能になります。

dat.GUIの詳細はこちらのリンクから

Three.jsで有名なデザイナーと企業の実例

Three.jsを使うと、どのような3Dグラフィックスが作成できるのでしょうか。

現在では、さまざまな3Dグラフィックスツールがリリースされていますが、それぞれのツールで再現できるグラフィックはかなり変わってきます。

言葉では説明しづらい部分でもあるので、以下にThree.jsの有名デザイナーや企業の作品を例にとって詳しくみていきましょう。

Bruno Simon

Bruno Simonはフランス出身のクリエイティブデベロッパーで、Three.jsの専門家です。

ウェブ開発とWebGLに7年以上携わり、「Madbox」、「Chartogne Taillet」、「Scout」、「Orano experience」、「Prior」といったウェブサイトに同氏の作品が採用されてました。

Brunoは、自身のポートフォリオを楽しいゲームのような体験に変えることが得意で、総計40万人以上のユーザーが彼のポートフォリオを閲覧しています。

その功績から、Awwwardsでの受賞も果たしました。

彼の作品は、技術と創造性が存分に表現されたもので、特にゲーム要素を取り入れたウェブ体験が特徴です。

Bruno Simon氏のポートフォリオはこちらのリンクから確認

Takuya Matsuyama

Takuya Matsuyama氏は、日本を拠点に活動するアプリ開発者です。

大阪出身で、奈良先端科学技術大学院大学情報科学研究科で修士課程を修了し、Yahoo! Japanでの勤務を経て、2012年からフリーランスとして活動しています。

「Inkdrop」というプラグインもリリースしており、これに関するコンテンツマーケティングも行っています。

また、18万人以上の登録者を持つYouTubeチャンネル「DevasLife」を運営し、プログラミングや製品開発に関する内容を発信しています。

Three.jsを使った作品は、Takuya Matsuyama氏の公式WEBサイトより確認できるので、気になる方は一度確認してみてください。

Takuya Matsuyama氏のポートフォリオはこちらのリンクから確認

MADBOX

MADBOXは、モバイルゲーム開発に特化した急成長中の企業です。

オンラインゲームプラットフォームを開発しており、そのプラットフォームは、カジュアルゲームからアイドルゲーム、それほどカジュアルではないゲームまで、幅広い種類のモバイルゲームを提供しています。

同社のHPでは、WebGLを利用してデフォルメされた可愛らしい3Dグラフィックスを確認することが可能です。

使用しているツールはThree.jsだけでなく、3dsmax, Z-Brush、 After Effects、 Pencil、 Realflow、 FumeFX、 Adobe Photoshopなど、さまざまなツールを使用しています。

MADBOXのポートフォリオはこちらのリンクから確認

Jesse Zhou

カナダで活躍するJesse Zhou氏は、ウェブ上での3D体験を創出することが専門のソフトウェアエンジニアです。

マネジメントコンサルタントからソフトウェアエンジニアに転身し、Three.jsを使用したポートフォリオをオンラインに公開することで、複数のウェブデザイン賞を受賞し、さまざまな企業からオファーを受けています。

現在は、Moment社で3Dのテクニカルプロダクトリードとして働き、3Dアーティストやエンジニアのチームと共に没入型3D世界の創出に力を入れています。

同氏が運営するWebサイト「Jesse’s Ramen」では、Three.jsを利用して作成したポートフォリオを閲覧可能です。

Jesse Zhou氏のポートフォリオはこちらのリンクから確認

まとめ

本記事では、Three.jsの基本的な概念、主要な機能、実用的なクラスとライブラリ、そしてその実例について詳しく解説しました。

Three.jsは、3Dコンピュータグラフィックスの分野において、WebGLの複雑さを抽象化し、JavaScriptでの開発を容易にする重要なツールです。

仮想現実（VR）や拡張現実（AR）などの分野への適応も進んでおり、これらの技術の普及に伴い、Three.jsの重要性はさらに高まるでしょう。

総じて、Three.jsは今後もウェブと3Dグラフィックスの分野で中心的な役割を果たし続けると考えられます。

SNSシェア

• X
• facebook
• hatebu
• LINE
• pocket

CATEGORY

学習

TAGS

JavaScript Three.js