Three.js入門
Three.jsは、3次元コンピュータグラフィックス（CG）を描画する、手軽なJavaScriptライブラリです。HTML5の規格に従っており、WebGLに詳しくなくても、ウェブブラウザ上で簡単に3次元グラフィックスの描画が可能です。
ここでは、入門知識や使用方法に加えて、さらに理解を深める学習方法を解説していきます。
【参考】：three.js
Three.jsを使ってみる
Three.jsを使用すると、簡単に3次元コンピュータグラフィックスが作成できるとよく言われますが、実際に使ってみるにはどのようにすれば良いか迷う方も多いでしょう。ここでは、公式サイトのサンプルを実際に動作させて、理解を深めていきましょう。
【参考】：GitHub three.js
jsファイルの作成
GitHub公式サイトの「Usage」に表示されているプログラムは、JavaScriptのサンプルコードです。このコードを、「.js」ファイルとして保存して使用することができます。
実際のHTMLでの呼び出し方法は、”<script></script>”のタグで括って使用するか、”<script src=".jsファイル名"></script>”として外部呼出しします。
HTMLファイルの作成
HTMLファイルを作成することで、ウェブブラウザからThree.jsの3D出力を描画させることができます。ここでは、Three.jsのライブラリをCDNから読み込んでいます。jsファイルは、以下の例の通り直接記述するか、外部ファイルを呼び出して使用します。
<head>と<body＞は、コードに用途に応じて使い分けが可能です。日本語表示のために、charsetを"utf-8"に設定しておきましょう。
<html>
<head>
<meta charset="utf-8" />
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
// ここに必要なコードを記述します。
// 公式サイトのサンプルコードをここに転記することもできます。
</script>
</head>
<body>
</body>
</html>
Three.jsで必要な3つの要素
先ほど作成した、HTMLファイルにThree.jsのコードを入れ込んだら完成です。Three.jsで最初に何かを表示するには、シーン（scene）、カメラ（camera）、レンダー（renderer）の3つが必要です。
・シーン（scene） シーンは、状況が描写されている映像のオブジェクトで、”THREE.Scene()”を使います。サンプルコードでは、以下のように使用しています。
const scene = new THREE.Scene();
・カメラ（camera） カメラは、シーンを描画するときに、何が見えるか決定する仮想のカメラで、”THREE.PerspectiveCamera()”などいくつかの種類があります。サンプルコードでは、以下のように使用しています。
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
・レンダー（renderer） レンダーは、カメラのアングルに基づいて演算処理し描画するもので、”THREE.WebGLRenderer()”を使います。サンプルコードでは、以下のように使用しています。
const renderer = new THREE.WebGLRenderer( { antialias: true } );
【参考】：Three.js Creating a scene 【参考】：Three.jsの基礎知識
サンプルコードを完成させる
公式サイトで紹介されている、サンプルコードは3次元描画に必要な要素があらかじめ設定されており、そのまま用いることができます。サンプルコードにHTMLのコードを追記するだけで、ウェブブラウザで表示できるコードが完成します。
先のHTMLでは、JavaScriptを直接入力する使い方でしたが、jsファイルを読み込んで使う場合は、次のように記述します。ここでのファイル名は実際のjsファイル名を指定します。
<script src=".jsファイル名"></script>
上手く表示できたら、編集サイト「JSFiddle」でオリジナルのコードが確認できますので、比べてみましょう。なお、JavaScriptのコードを外部ファイルから呼び出す場合は、オリジン間リソース共有（CORS）のエラーを回避するために、ウェブサーバ経由でHTMLファイルを表示させると良いでしょう。
【参考】：GitHub three.js Usage 【参考】：JSFiddle サンプルの編集と表示 【参考】：Mozilla mdm オリジン間リソース共有 (CORS)
jsコードをさらに記述する
Three.jsの基本要素を学んだら、canvasを設定したり、サイズを指定したりすることができます。また、カメラアングルの変更や物体の形状を変更するなど、柔軟にコードを記述することができます。CSSスタイルシートを組み合わせて全体の調整が可能です。
【参考】：Three.jsの基礎知識 【参考】：Three.js の概要 Installation 【参考】：Mozilla mdm <canvas>: グラフィックキャンバス要素
Three.jsの学習方法
3次元コンピュータグラフィックスは、コンピュータの技法としてさらに多くのことを学ぶことで、より効果的な3D描画に活用することができます。Three.jsを学ぶとともに、関連知識を吸収すると良いでしょう。ここでは、Three.jsをさらに学習するための方法について解説していきます。
公式サイトのドキュメントを確認する
Three.jsの公式サイトには、多くのドキュメントが掲載されています。日本語化が順次行われていますので、できれば最初に目を通しましょう。Three.jsの概要や基礎知識の全般について、豊富なドキュメントから知識を得ることができます。
【参考】：Three.jsの基礎知識 【参考】：Three.js の概要 Installation
サンプルコードを参考にする
自分でコードを1から作成するのは、大変な労力が必要です。プログラムの勘所を学ぶためにも、サンプルコードを眺めるのが良いでしょう。Three.jsでは、150以上のサンプルとコードをサイトに公開しています。どんなことができるのか、まずはサンプルの動作を見てみましょう。
公式サイトでは、関連してWebpackを使ったサンプルや、初心者向けサンプル集もリンクが掲載されていますので、必要に応じて参考にすると良いでしょう。
【参考】：Three.js exapmles 【参考】：Three Seed Official 【参考】：Three.js Examples
ウェブ情報から学ぶ
Three.jsは、ウェブから多くの情報が得られます。ここでおすすめするサイトから有益な情報が得られますので、活用しましょう。
・Beginning with 3D WebGL 公式サイトがおすすめする、チュートリアル情報の掲載サイトです。シーン、ジオメトリ、マテリアル、アニメーションの4つのパートに分けて丁寧に解説しています。
・Animating scenes with WebGL and three.js こちらも公式サイトがおすすめする、チュートリアル情報の掲載サイトです。実際のコードを例にCodepenで編集表示しながら、プログラミングの理解を進めています。
【参考】：Animating scenes with WebGL and three.js 【参考】：Codepen
・ICS MEDIA Three.js入門サイト ウェブデザイナー向けの情報サイト「ICS MEDIA」では、多くのThree.jsのコンテンツを掲載しています。最初の一歩からステップアップ情報までカバーしています。日本語サイトですので、すべての方におすすめします。
参考書を使う
メジャーな参考書は、英語で提供されます。以下におすすめする書籍は、共に同一の著者が作成しており、Three.jsの知識が広く得られます。最新版は「Learn Three.js - Fourth Edition」で、英語のみです。
日本語版は、「初めてのThree.js 第2版」という旧版のみですが、どうしても日本語の情報が必要でしたら手に取ってみましょう。
「Learn Three.js - Fourth Edition」 ▪著者：Jos Dirksen ▪ページ数：554ページ ▪出版社：Packt Publishing ▪発売日：2023/2/17 【参考】：Learn Three.js - Fourth Edition
「初めてのThree.js 第2版」 ▪著者：Jos Dirksen 著、あんどうやすし訳 ▪ページ数：416ページ ▪出版社：オライリージャパン ▪発売日：2016/7/23 【参考】：初めてのThree.js 第2版
有料サービスを受講する
短期間で深い知識を得るのであれば、有料サービスを受講することも検討してみましょう。無料のレッスンや割引の情報など、実際のサイトであわせて確認するのが良いでしょう。
・Three.js journey 公式サイトが推薦する学習サイトです。95USドルから始めることができます。7つのチャプター、54レッスン、72時間分の動画教材が提供されます。いくつかのレッスンは無料で公開されており、イントロダクションコースの多くは無料で提供されています。
【参考】：Three.js journey
・udemy Three.JSコース 日本語のコースが3種類、英語のコースが31種類あります。無料コースが7種類、有料コースが多言語含めて37種類あります。期間限定の割引セールも実施しています。
【参考】：udemy Three.JSコース
Three.jsは描画結果を見ながら理解を深めましょう
Three.jsは簡単とはいえ、HTML5やCSS、JavaScriptの知識が求められます。3次元描画APIであるWebGLの知識があれば、さらに理解が深まるでしょう。プログラミングでは、慣れるまではトライアンドエラーをしながら、進める場合もあります。
どのように描画されるか確認すると理解しやすく、実際にコードの動作を確認しながら進めることをおすすめします。
新着記事やエンジニアに役立つ情報をお届け！
日々のキャッチアップをお手伝いします！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
