初めてのThree.js 第2版

―WebGLのためのJavaScript 3Dライブラリ

[cover photo]
TOPICS
Web , JavaScript
発行年月日
PRINT LENGTH
416
ISBN
978-4-87311-770-6
原書
Learning Three.js, 2nd Edition
FORMAT
Print PDF EPUB
Ebook
4,400円
Ebookを購入する
Print
4,400円

JavaScript 3DライブラリThree.jsの解説書。実用的なサンプルを例示しながら、Three.jsによるウェブ3Dコンテンツ作成のすべての側面を解説します。対象読者は、初中級のウェブ開発者。JavaScriptとHTMLの基礎知識があれば数学やWebGLに詳しくなくてもかまいません。本書では、光源や影、マテリアル、ジオメトリ、パーティクルなど3Dシーンの作成に必須の基本的な内容から、カスタムシェーダーや物理エンジン、立体音響の利用といった応用的な内容までをわかりやすく丁寧に解説します。日本語版では、モバイルVRアプリの開発と、MikuMikuDanceモデルデータをブラウザ上で扱う方法についての解説を巻末付録として収録しました。

本書のサンプル

関連ファイル

目次

訳者まえがき
まえがき

1章 初めての3Dシーン作成
    1.1 Three.jsを使用する要件
    1.2 ソースコードの取得
        1.2.1 Gitコマンドを使用してリポジトリをクローン
        1.2.2 アーカイブをダウンロードして展開
        1.2.3 サンプルの確認
    1.3 HTML のスケルトン作成
    1.4 3D オブジェクトの表示
    1.5 マテリアル、ライト、影の追加
    1.6 初めてのシーンをアニメーションするように拡張
        1.6.1 requestAnimationFrameの導入
        1.6.2 立方体を回転
        1.6.3 ボールを移動
    1.7 実験をもっと簡単にするためにdat.GUIを利用
    1.8 ブラウザサイズが変更されたら出力を自動的にリサイズ
    1.9 まとめ

2章 シーンの基本要素
    2.1 シーンの作成
        2.1.1 シーンの基本機能
        2.1.2 シーンにフォグを追加
        2.1.3 overrideMaterialプロパティの利用
    2.2 ジオメトリとメッシュ
        2.2.1 ジオメトリのプロパティと関数
        2.2.2 メッシュの関数とプロパティ
    2.3 タイプの異なる2つのカメラ
        2.3.1 平行投影カメラと透視投影カメラ
        2.3.2 特定の点を注視
    2.4 まとめ

3章 光源
    3.1 Three.jsで利用可能なライティング
    3.2 基本的なライト
        3.2.1 THREE.PointLight
        3.2.2 THREE.AmbientLight
        3.2.3 THREE.SpotLight
        3.2.4 THREE.DirectionalLight
    3.3 特殊なライト
        3.3.1 THREE.HemisphereLight
    3.3.2 THREE.LensFlare
    3.4 まとめ

4章 マテリアル
    4.1 マテリアルの共通プロパティ
        4.1.1 基本的なプロパティ
        4.1.2 ブレンディングプロパティ
        4.1.3 高度なプロパティ
    4.2 単純なマテリアル
        4.2.1 THREE.MeshBasicMaterial
        4.2.2 THREE.MeshDepthMaterial
        4.2.3 マテリアルの組み合わせ
        4.2.4 THREE.MeshNormalMaterial
        4.2.5 THREE.MultiMaterial
    4.3 高度なマテリアル
        4.3.1 THREE.MeshLambertMaterial
        4.3.2 THREE.MeshPhongMaterial
        4.3.3 THREE.MeshStandardMaterial
        4.3.4 THREE.ShaderMaterialを使用した独自シェーダーの作成
    4.4 ラインジオメトリで利用できるマテリアル
        4.4.1 THREE.LineBasicMaterial
    4.4.2 THREE.LineDashedMaterial
    4.5 まとめ

5章 ジオメトリ
    5.1 基本的なジオメトリ
        5.1.1 2次元のジオメトリ
        5.1.2 3次元のジオメトリ
    5.2 まとめ

6章 高度なジオメトリとブーリアン演算
    6.1 THREE.ConvexGeometry
    6.2 THREE.LatheGeometry
        6.2.1 押し出してジオメトリを作成
    6.33D テキスト作成
        6.3.1 テキストの描画
        6.3.2 独自フォントの追加
    6.4 ブーリアン演算を使用したメッシュの結合
        6.4.1 subtract関数
        6.4.2 intersect関数
        6.4.3 union関数
    6.5 まとめ

7章 パーティクル、スプライト、ポイントクラウド
    7.1 パーティクルを理解
    7.2 パーティクル、THREE.Points、THREE.PointsMaterial
    7.3 canvas要素を使用してパーティクルの見た目を変更
        7.3.1THREE.CanvasRendererでcanvas要素を使用
        7.3.2 WebGLRendererでcanvas要素を使用
    7.4 テクスチャを使用してパーティクルの見た目を変更
    7.5 スプライトマップの利用
    7.6 高度なジオメトリからTHREE.Pointsを作成
    7.7 まとめ

8章 高度なメッシュとジオメトリ
    8.1 ジオメトリのグループ化とマージ
        8.1.1 複数のオブジェクトをまとめてグループ化
        8.1.2 複数のメッシュをひとつのメッシュにマージ
        8.1.3 外部リソースからのジオメトリの読み込み
        8.1.4 Three.jsのJSONフォーマットの保存と読み込み
        8.1.5 Blenderの利用
        8.1.6 3Dファイルフォーマットからのインポート
    8.2 まとめ

9章 アニメーションとカメラの移動
    9.1 基本的なアニメーション
        9.1.1 単純なアニメーション
        9.1.2 オブジェクトの選択
        9.1.3T ween.jsを使用したアニメーション
    9.2 カメラの使用
        9.2.1 THREE.TrackballControls
        9.2.2 THREE.FlyControls
    9.2.3 THREE.FirstPersonControls
        9.2.4 THREE.OrbitControl
    9.3 モーフィングとスケルタルアニメーション
        9.3.1 モーフターゲットを使用したアニメーション
        9.3.2 ボーンとスキンを使用したアニメーション
    9.4 外部モデルを使用したアニメーション
        9.4.1 Blenderアニメーション
        9.4.2 Colladaモデルのアニメーション
        9.4.3 MD2モデルのアニメーション
    9.5 まとめ

10章 テクスチャ
    10.1 マテリアルでテクスチャを利用
        10.1.1 テクスチャを読み込んでメッシュに適用
        10.1.2 バンプマップを使用した皺
        10.1.3 法線マップを使用したより詳細な凹凸と皺
        10.1.4 ライトマップを使用した擬似シャドウ
        10.1.5 環境マップを使用した擬似環境反射
        10.1.6 スペキュラマップ
    10.2 テクスチャの高度な利用
        10.2.1 独自UVマップ
        10.2.2 ラッピングの繰り返し
        10.2.3 canvas要素をテクスチャとして使用
        10.2.4 video要素をテクスチャとして使用
    10.3 まとめ

11章 カスタムシェーダーとポストプロセス
    11.1 ポストプロセッシングに必要な設定
        11.1.1 THREE.EffectComposerの作成
    11.2 ポストプロセッシングパス
        11.2.1 単純なポストプロセッシングパス
        11.2.2 THREE.FilmPassを使用してテレビのようなエフェクトを作成
        11.2.3 EffectComposerにマスクを設定
        11.2.4 THREE.ShaderPassを使用して独自エフェクトを作成
    11.3 独自ポストプロセッシングシェーダー
        11.3.1 独自グレースケールシェーダー
        11.3.2 独自ビットシェーダーの作成
    11.4 まとめ

12章 物理演算と立体音響
    12.1 基本的なThree.jsシーンの作成
    12.2 マテリアルのプロパティ
    12.3 サポートされている基本形状
    12.4 制約を使用してオブジェクトの動きを制限
        12.4.1 PointConstraintを使用して2点間の動きを制限
        12.4.2 HingeConstraintでドアのように動きを制限
        12.4.3 SliderConstraintでひとつの軸方向に動きを制限
        12.4.4 ConeTwistConstraintで玉継手のように動きを制限
        12.4.5 DOFConstraintで制限を細かく制御
        12.4.6 シーンに音源を追加
    12.5 まとめ

付録A Google Cardboardを使用したモバイルVR
    A.1 Google Cardboardについて
    A.2 サンプルVRアプリの概要
    A.3 立体視
    A.4 ヘッドトラッキング
    A.5 オブジェクトの選択と操作
    A.6 まとめ

付録B THREE.MMDLoaderによる3Dモデルの制御
    B.1 MMDとTHREE.MMDLoader
        B.1.1 THREE.MMDLoaderとは
        B.1.2 MMDとは
        B.1.3 THREE.MMDLoaderで扱えるMMDのデータ
        B.1.4 ライセンスの諸注意
    B.2 THREE.MMDLoaderの使い方
        B.2.1 説明の方針
        B.2.2 説明の流れ
        B.2.3 使用するデータ
        B.2.4 THREE.MMDLoaderとTHREE.MMDHelper
        B.2.5 モデルの表示
        B.2.6 モデルのポーズと表情を変更する
        B.2.7 ダンスをさせる
        B.2.8 音楽に合わせてダンスをさせる
    B.3 おわりに

索引