PR：この記事にはアフィリエイトリンクが含まれます。
ブラウザーで動く3D表現を始めるならThree.jsが有力な入り口です。シーンやカメラ、光をJavaScriptで組み立てる仕組みなので、TypeScriptで実装するときも本で基本を押さえると見通しが立ちます。
扱う世代や言語は本ごとに異なります。日本語で基礎を学ぶ本もあれば、英語で周辺技術まで扱う本もあり、モデル読込やシェーダーに重点を置いた一冊もあります。知りたいテーマに合う内容か、早めに確認しましょう。
価格や主な内容、TypeScriptとの距離を一覧にまとめました。出版年や対象リビジョンも手掛かりにすれば、実装に役立つ本を見つけやすくなります。
Three.js本一覧
日本語で基礎を固めるなら第2版、TypeScriptの例や周辺連携まで追うなら英語の第4版が有力です。応用寄りの2冊は、扱う分野がそれぞれ異なります。
| 書籍 | 参考価格 | 主な内容 | TypeScriptとの距離 |
|---|---|---|---|
 初めてのThree.js 第2版 | 4,400円（税込） | 基礎からVR、物理演算まで | JavaScript中心 |
 Learn Three.js, Fourth Edition | US$51.99 | モデル、アニメーション、VR・AR、React連携 | TypeScriptの統合例あり |
 three.jsによるHTML5 3Dグラフィックス［改訂版］下 | 4,400円（税込） | 外部モデル、シェーダー、アニメーション | JavaScript中心 |
 three.jsによるHTML5 3Dグラフィックス 新機能と応用 | 3,740円（税込） | BufferGeometry、描画効果、AR、グラフ | JavaScript中心 |
価格欄は公式の希望小売価格・定価を目安にしています。実売価格は時期や販売店によって変わります。英語版は為替や送料などで購入額が変わる場合もあります。
日本語版の3冊はいずれも2016年刊です。掲載されたAPIやコード例が今の開発環境と合わない場合もあります。概念を学ぶ本として読み、実装時には現行ドキュメントでAPIを確認しましょう。
TypeScriptの学習軸
TypeScriptにしても、Three.jsで立体を配置する流れは変わりません。シーンに物体を加え、カメラで見る範囲を決めて、レンダラーから画面へ描画する。まず、この流れを押さえましょう。
TypeScriptでは変数や関数に型を付けられるため、値の取り違えや存在しないプロパティへのアクセスを早めに見つけられます。カメラとライトを別々に扱えば、どの種類のオブジェクトを渡すのかもコードから追いやすくなります。
JavaScriptの本で学ぶシーン、ジオメトリ、マテリアル、アニメーションの考え方はTypeScriptにも引き継げます。ただし、型注釈やモジュールの設定方法は別に確認が必要です。コードを貼る前に処理の内容を読み取るのが近道でしょう。
今回の候補でTypeScriptとの統合例があるのは英語の第4版です。TypeScriptを中心に学ぶなら、本で基礎をつかみ、現行環境に合う型やインポート方法を公式ドキュメントで補うと実装に進みやすくなります。
初めてのThree.js
『初めてのThree.js 第2版』はJavaScriptとHTMLの基礎がある初中級者向けです。416ページで、シーン・ジオメトリ・カメラ・光源・マテリアルを順に学び、画面に立体を出す基本を押さえられます。
カメラ操作やアニメーション、モデルの読み込みも扱います。立体を置いたら、視点の移動やアニメーション、外部モデルの読み込みへと進められます。Web 3Dの基本的な実装を一通り学べる構成です。
応用テーマにはカスタムシェーダー・物理エンジン・立体音響・モバイルVR・MikuMikuDanceモデルの扱いも含まれます。基礎を終えた後に関心のある機能を読み返せるところも魅力ですね。
2016年刊で、解説はJavaScript中心です。TypeScript固有の型や設定は別の資料で補いましょう。参考価格は4,400円（税込）です。
英語第4版の実践
『Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL, Fourth Edition』は2023年刊で、全554ページの英語書籍です。今回の4冊では出版年が最も新しく、JavaScript開発者向けに幅広いテーマを扱います。
カメラ操作・光と影・マテリアル・テクスチャに加え、glTF・OBJ・STL・COLLADA形式のモデル読込も扱います。モーフターゲットやボーンを使ったアニメーションも含み、静止モデルから動きのある表現へ進みたい人に役立ちます。
TypeScriptとの統合例がある点は、この本の特徴です。シェーダー・物理演算・VR・ARに加えて、BlenderやReactとの連携も収録しています。Webページに3D表示を組み込みたい人には、参照できるテーマの幅が魅力でしょう。
本文は英語なので、専門用語を英語で読む負荷があります。日本語で順を追って学ぶ本とは使いどころが異なりますが、TypeScript例や連携テーマを一冊で参照したい人には有力です。参考価格はUS$51.99です。
下巻の読みどころ
『three.jsによるHTML5 3Dグラフィックス［改訂版］下』は2016年刊の400ページです。掲載ソースはThree.js revision 79向けに修正されています。基礎から先へ進み、外部データを使った表現を学びたい人におすすめです。
テクスチャや各種マッピング、シェーダー、外部データを使ったアニメーションを詳しく扱います。モデル形式はJSON・OBJ・STL・PLYに加えてVTK・AMF・CTM・PCDなど幅広く、複数の形式を表示につなげる知識も学べます。
アニメーションではAnimationMixer、JSONのモーフやスキンメッシュ、Colladaのキーフレームが登場します。既存モデルの動きをWeb上で再生する実装に関心があれば、調べる機能を見つけやすいでしょう。
学習用サンプルファイルをダウンロードできるため、コードと素材を見比べられます。対象リビジョンは現行環境と異なりますが、当時のAPIや既存コードを調べる人に適した内容です。参考価格は4,400円（税込）です。
応用編の強み
『three.jsによるHTML5 3Dグラフィックス 新機能と応用』は288ページの応用編で、上・下巻の続編です。BufferGeometryやインスタンシングなど、描画する形やデータの扱いを工夫するテーマへ進みます。
シェーダーアルゴリズムやポストプロセッシングも扱います。画面全体に効果を加えたり、頂点やピクセルの処理を調整したりする仕組みを知りたい人には、基本書から一歩進んだ題材になります。
画像・動画の生成やARに加え、2D・3Dグラフとカラーマップを描く自作クラスも登場します。データ可視化やブラウザー上の表現に関心がある人にも接点の多い内容です。
付録ではリビジョン58から73への変更点を扱います。2016年刊なので、最新APIの入門書というより、掲載されたアルゴリズムや当時の実装を学ぶ本と捉えるのが適切です。参考価格は3,740円（税込）です。
結論
日本語でThree.jsの基礎を学ぶなら、『初めてのThree.js 第2版』がおすすめです。モデル読込やアニメーション、VRなどへも進めるため、全体像をつかみたい初中級者に合います。
TypeScriptの統合例やBlender・React連携も重視し、英語を読めるなら第4版を選びましょう。扱うモデル形式や表現の幅も広く、実装テーマを横断して参照しやすい一冊です。
モデル読込やアニメーションの資料を求める人には下巻、特定の応用を学びたい人には『新機能と応用』をおすすめします。日本語版の3冊はいずれも2016年刊です。購入時には実売価格を確認し、実装では現行APIも合わせて確かめてください。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
