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