「three.jsによるHTML5グラフィックス上【改定版】」 出版決定（発売日：2016年7月10日）
文責：遠藤 理平 （2016年6月21日）
カテゴリ：OpenGL入門(27)
three.jsによるHTML5グラフィックス上 【改定版】
ブラウザで実現するOpenGL（WebGL）の世界
著者 遠藤 理平
出版社 株式会社カットシステム
判型 B5変型、432頁
本体価格 4,200円（税込 4,536円）
ダウンロードサービス：学習に使えるサンプルファイル
ISBN 978-4-87783-323-7
はじめに
HTML5の登場により、ブラウザで動いているとはとても思えないようなハイクオリティな3Dグラフィックスを、特殊な環境を必要とせずに、ブラウザとテキストエディタのみで、ネイティブアプリケーション並みなハイパフォーマンスで実装できる時代が到来しました。これを可能としたのが、HTML5で初めて登場したWebGLという新しい規格です。しかしながら、WebGLは非常に精密なグラフィクスを制作できる反面、難解で非常に敷居が高いと言われており、WebGLを簡単に取り扱えるライブラリが望まれていました。そこで登場したのが、本書で取り扱うthree.jsです。本書は、HTML5で3Dグラフィックスを実現するthree.jsの使い方を、コンピュータグラフィクス未経験者でも理解できる手順で、豊富なサンプルを用いて実践的に学んでいくことを目的としています。
ウェブページ作成用の記述言語であるHTMLは、通信技術の飛躍的発展や、ウェブブラウザの機能拡充に伴い、テキストがメインであったHTML4から、プラグインなしにインタラクティブなアプリケーション作成が可能なHTML5へ、劇的な進化を遂げました。グラフィクスを取り扱う要素も、画像をあくまでサブ的な情報と位置づけていたHTML4ではimg要素のみだったのに対して、HTML5では、canvas、video、svgといった要素が一挙に増えました。発展目覚ましいグラフィック要素の中でも、本書ではタイトルの通り3Dグラフィックスを作成するcanvas要素に絞ります。このcanvas要素を使って3Dグラフィックスを実行するのが、WebGLというOpenGL（Open Graphic Library）のウェブブラウザ版です。
OpenGLは、グラフィックスの演算・出力に特化したGPU（Graphics Processing Unit）を用いてグラフィックスを出力するための新規格です。描画演算にGPUを使うおかげで、ハードウェアの真の力を引き出し高速かつ高性能な描画が可能である点が最大の強みです。これまでもGPUは、リアリティが要求されるゲームや映画等のエンターテインメント分野において先行して使われてきましたが、これまでウェブブラウザでは利用が不可能でした。人々の要求が高まるにつれ、ブラウザはGPUの機能を最大限に引き出そうと進化を遂げ、それが、WebGLの登場につながりました。2016年、ウェブブラウザで最大シェアを誇るIE（InternetExplorer）の最新バージョン（IE11）を含め、主要ウェブブラウザのすべてでWebGLが実行可能となり、いよいよ普及期に入ってきました。
そんなWebGLだけでなく Canvas 2D Context やSVG、CSS3といったHTML5で利用できるグラフィクス要素を統一的に取り扱うことが可能なライブラリとしてデファクトスタンダードとしての地位を確立してきたthree.js。近年注目を集めている様々なセンサーと組み合わせることで実現することのできる仮想現実（VR）や拡張現実（AR）といった３次元グラフィックスの新たな利用方法にも対応していることから、three.jsは今後ますます利用する機会も増えてくると考えています。
本書は2013年6月出版した「three.jsによるHTML5グラフィックス上」の改訂版として、すべてのプログラムソースを最新のリビジョン75で動作するように修正したことに加え、新しく登場したクラスの紹介など、大幅に加筆修正を行いました。three.jsを用いたHTML5による３次元グラフィクスを理解する一助として、本書がお役に立てれば幸いです。なお、筆者の勉強不足のために、プログラムやクラスのプロパティ、メソッドの説明に間違いが有るかもしれません。その際はお手数ですが、ご指摘いただければ幸いです。
最後に、本書の執筆の機会を頂きました株式会社カットシステムの石塚勝敏さん、製作作業にあたられた同社編集部の皆さん、また、日常的に議論に付き合って頂いている特定非営利活動法人natural science の皆さんには、深く感謝申し上げます。
2016年6月
遠藤理平
目次
- 第１章 HTML5グラフィックス
- 1.1 HTMLとグラフィックス
- 1.1.1 HTML4からHTML5への進化
- 1.1.2 Canvas 2D ContexとWebGL Context
- 1.1.3 WebGL利用上の注意点
- 1.2 HTML5文書の基本形
- 1.2.1 はじめてのHTML5文書
- 1.2.2 HTMLの文法チェック
- 1.2.3 img要素による三角形の描画
- 1.3 動的な三角形の描画（DHTML）
- 1.3.1 DHTMLとは
- 1.3.2 CSSによるボックス領域の確保
- 1.3.3 JavaScriptによるHTML要素の生成
- 1.4 Canvas 2D Contextによる三角形の描画
- 1.5 WebGL Contextによる三角形の描画
- 1.6 SVGによる三角形の描画
- 1.7 canvas要素に描画されたグラフィックスの画像として保存する方法
- 1.1 HTMLとグラフィックス
- 第２章 three.jsの基礎
- 2.1 three.jsの準備
- 2.1.1 three.jsの特徴
- 2.1.2 three.jsによる「Canvas 2D Context」
- 2.1.3 ダウンロードと環境設定
- 2.2 three.jsの基本形
- 2.2.1 軸オブジェクトの描画プログラムソース
- 2.2.2 HTML文書の準備（AxisHelper.html）
- 2.2.3 three.jsスタート関数の定義
- 2.2.4 three.js初期化関数の定義
- 2.2.5 カメラ初期化関数の定義
- 2.2.6 オブジェクト初期化関数の定義
- 2.2.7 描画関数の定義
- 2.3 レンダラーオブジェクトとシーンオブジェクト
- 2.3.1 WebGLRendererクラス
- 2.3.2 Sceneクラス
- 2.3.3 CanvasRendererクラス
- 2.3.4 Projectorクラス
- 2.4 軸オブジェクトと矢印オブジェクト
- 2.4.1 AxisHelperクラス
- 2.4.2 ArrowHelperクラス
- 2.4.3 GridHelperクラス
- 2.5 透視投影カメラと正投影カメラ
- 2.5.1 Cameraクラス
- 2.5.2 PerspectiveCameraクラス
- 2.5.3 OrthographicCameraクラス
- 2.5.4 Frustumクラス
- 2.1 three.jsの準備
- 第３章 3次元オブジェクトの描画
- 3.1 立方体オブジェクトの描画方法
- 3.1.1 形状オブジェクトと材質オブジェクト
- 3.1.2 立方体オブジェクトの描画
- 3.1.3 CubeGeometryクラス
- 3.1.4 MeshNormalMaterialクラス
- 3.1.5 Meshクラス
- 3.2 様々な形状オブジェクト
- 3.2.1 PlaneGeometryクラス
- 3.2.2 CircleGeometryクラス
- 3.2.3 SphereGeometryクラス
- 3.2.4 CylinderGeometryクラス
- 3.2.5 TorusGeometryクラス
- 3.2.6 PolyhedronGeometryクラス
- 3.2.7 LatheGeometryクラス
- 3.2.8 TetrahedronGeometryクラス
- 3.2.9 OctahedronGeometryクラス
- 3.2.10 DodecahedronGeometryクラス
- 3.2.11 IcosahedronGeometryクラス
- 3.2.12 TorusKnotGeometryクラス
- 3.2.13 ParametricGeometryクラス
- 3.2.14 TubeGeometryクラス
- 3.2.15 ShapeGeometryクラス
- 3.2.16 ExtrudeGeometryクラス
- 3.2.17 TextGeometryクラス
- 3.2.18 RingGeometryクラス
- 3.2.19 ConvexGeometryクラス
- 3.2.20 TeapotBufferGeometryクラス
- 3.3 材質オブジェクトの基底クラス
- 3.3.1 Materialクラス
- 3.3.2 MeshBasicMaterialクラス
- 3.3.3 MeshDepthMaterialクラス
- 3.3.4 Colorクラス
- 3.4 形状オブジェクトの基底クラス
- 3.4.1 Geometryクラス
- 3.4.2 Face3クラス
- 3.4.3 Pathクラス
- 3.4.4 Shapeクラス
- 3.4.5 Fontクラス
- 3.4.6 FontLoaderクラス
- 3.5 点オブジェクト
- 3.5.1 点オブジェクトの生成方法（WebGL）
- 3.5.2 PointsMaterialクラス
- 3.5.3 Pointsクラス
- 3.5.4 異なる色点の描画
- 3.5.5 点オブジェクトの生成方法（Canvas2D）
- 3.5.6 SpriteMaterialクラス
- 3.5.7 Spriteクラス
- 3.5.8 任意の形状の点オブジェクト（Canvas2Dレンダラー）
- 3.5.9 SpriteCanvasMaterialクラス
- 3.6 線オブジェクト
- 3.6.1 線オブジェクトの生成方法（WebGL）
- 3.6.2 LineBasicMaterialクラス
- 3.6.3 Lineクラス
- 3.6.4 LineSegmentsクラス
- 3.6.5 色補完直線の描画
- 3.6.6 破線の描画
- 3.6.7 LineDashedMaterialクラス
- 3.7 三角形オブジェクト
- 3.7.1 三角形オブジェクトの生成方法
- 3.7.2 色補間三角形の描画手順
- 3.7.3 Face4クラスによる四角形オブジェクトの描画
- 3.8 その他のオブジェクト
- 3.8.1 LODオブジェクト
- 3.8.2 LODクラス
- 3.8.3 マルチ材質による直方体オブジェクト
- 3.8.4 MultiMaterialクラス
- 3.8.5 ３次元オブジェクト概形可視化用オブジェクト
- 3.8.6 WireframeGeometryクラス
- 3.8.7 EdgesGeometryクラス
- 3.9 形状オブジェクト可視化用補助クラス
- 3.9.1 重要サンプルの紹介
- 3.9.2 FaceNormalsHelperクラス
- 3.9.3 VertexNormalsHelperクラス
- 3.9.4 BoundingBoxHelperクラス
- 3.9.5 BoxHelperクラス
- 3.9.6 WireframeHelperクラス
- 3.9.7 EdgesHelperクラス
- 3.1 立方体オブジェクトの描画方法
- 第４章 3次元オブジェクトの制御
- 4.1 様々な数学クラス
- 4.1.1 Vector2クラス
- 4.1.2 Vector3クラス
- 4.1.3 Vector4クラス
- 4.1.4 Matrix3クラス
- 4.1.5 Matrix4クラス
- 4.1.6 Quaternionクラス
- 4.1.7 Eulerクラス
- 4.1.8 Box2クラス
- 4.1.9 Box3クラス
- 4.1.10 Line3クラス
- 4.1.11 Triangleクラス
- 4.1.12 Planeクラス
- 4.1.13 Sphereクラス
- 4.1.14 Sphericalクラス
- 4.1.15 Mathユーティリティ
- 4.2 移動・回転・拡大
- 4.2.1 Object3Dクラス
- 4.2.2 位置座標の指定
- 4.2.3 オイラー角による回転角の指定
- 4.2.4 クオータニオンによる回転角の指定
- 4.2.5 3次元オブジェクトの拡大と縮小
- 4.3 three.jsによるアニメーション
- 4.3.1 JavaScriptによるアニメーション
- 4.3.2 アニメーション実行のための構成
- 4.3.3 カメラ移動のアニメーション
- 4.4 マウスによるカメラ操作
- 4.4.1 トラックボールコントロール
- 4.4.2 TrackballControlsクラス
- 4.4.3 OrthographicTrackballControls
- 4.4.4 フライコントロール
- 4.4.5 FlyControlsクラス
- 4.4.6 ポインタロックコントロール
- 4.4.7 ポインタロックコントロール＆キーボードによるカメラコントロール
- 4.4.8 PointerLockControlsクラス
- 4.4.9 OrbitControlsクラス
- 4.4.10 FirstPersonControlsクラス
- 4.5 マウスによるオブジェクト操作
- 4.5.1 DragControlsクラスによるオブジェクトの実装
- 4.5.2 DragControlsクラス
- 4.5.3 平行移動・回転・拡大／縮小のコントロール
- 4.5.4 TransformControlsクラス
- 4.5.5 TransformControlsクラスとDragControlsクラスの合わせ技
- 4.6 光線による３次元オブジェクト情報の取得と操作
- 4.6.1 マウスポインタによるオブジェクトの選択
- 4.6.2 Raycasterクラス
- 4.6.3 Rayクラス
- 4.6.4 マウスドラックによるオブジェクトの移動
- 4.6.5 マウスドラックによるオブジェクトの移動＋トラックボールコントロール
- 4.1 様々な数学クラス
- 第５章 シェーディング
- 5.1 シェーディングの基本
- 5.1.1 シェーディングの必要性
- 5.1.2 光源の設定
- 5.1.3 反射材質の設定
- 5.1.4 法線の設定
- 5.2 平行光源オブジェクトの準備
- 5.2.1 平行光源とは
- 5.2.2 Lightクラス
- 5.2.3 DirectionalLightクラス
- 5.2.4 DirectionalLightHelperクラス
- 5.3 反射材質オブジェクトの準備
- 5.3.1 反射材質とは
- 5.3.2 ランバート反射材質
- 5.3.3 MeshLambertMaterialクラス
- 5.3.4 フォン反射材質
- 5.3.5 MeshPhongMaterialクラス
- 5.3.6 標準反射材質
- 5.3.7 MeshStandardMaterialクラス
- 5.4 法線の設定
- 5.4.1 メソッドによる自動計算
- 5.4.2 Face3クラスのプロパティへの手動設定１
- 5.4.3 Face3クラスのプロパティへの手動設定２
- 5.1 シェーディングの基本
- 第６章 ライティングとシャドーイング
- 6.1 点光源
- 6.1.1 点光源とは
- 6.1.2 点光源とポリゴン数
- 6.1.3 PointLightクラス
- 6.1.4 PointLightHelperクラス
- 6.1.5 点光源の移動サンプル
- 6.2 スポットライト光源
- 6.2.1 スポットライト光源とは
- 6.2.2 スポットライト光源のパラメータ
- 6.2.3 SpotLightクラス
- 6.2.4 SpotLightHelperクラス
- 6.2.5 スポットライト光源のターゲットの設定
- 6.3 環境光源
- 6.3.1 環境光源とは
- 6.3.2 環境光源を実装する際の注意点
- 6.3.3 AmbientLightクラス
- 6.4 半球光源オブジェクト
- 6.4.1 半球光源とは
- 6.4.2 HemisphereLightクラス
- 6.4.3 HemisphereLightHelperクラス
- 6.1 点光源
- 第７章 シャドーイング
- 7.1 シャドーイングの実装方法
- 7.1.1 影の必要性
- 7.1.2 影描画の手法と実装手順
- 7.1.3 castShadowプロパティとreceiveShadowプロパティ
- 7.1.4 WebGLShadowMapクラス
- 7.1.5 LightShadowクラス
- 7.2 シャドーイング関連パラメータ
- 7.2.1 シャドーカメラとは
- 7.2.2 シャドーカメラの可視化
- 7.2.3 CameraHelperクラス
- 7.2.4 影の高精密化
- 7.2.5 シャドーマップのフィルタリング
- 7.3 スポットライト光源と点光源によるシャドーイング
- 7.3.1 スポットライト光源によるシャドーイング
- 7.3.2 スポットライト光源のシャドーカメラの可視化
- 7.3.3 点光源によるシャドーイング
- 7.3.4 点光源のシャドーカメラの可視化
- 7.2.5 シャドーマップのフィルタリング
- 7.4 シャドーマップの可視化方法
- 7.4.1 シャドーマップ可視化オブジェクトの生成
- 7.4.2 ShadowMapViewerクラス
- 7.4.3 シャドーオブジェクトの生成
- 7.4.4 ShadowMeshクラス
- 7.1 シャドーイングの実装方法
- 第８章 様々レンダリング
- 8.1 SVGレンダリング
- 8.1.1 SVGレンダリングとは
- 8.1.2 SVGRendererクラス
- 8.1.3 SVGObjectクラス
- 8.2 ソフトウェアレンダリング
- 8.2.1 ソフトウェアレンダリングとは
- 8.2.2 SoftwareRendererクラス
- 8.2.3 各種レンダリングの比較
- 8.3 CSS2Dレンダリング
- 8.3.1 CSS2DRendererクラス
- 8.3.2 CSS2Dobjectクラス
- 8.3.3 CSS2Dレンダリングの例
- 8.4 CSS3Dレンダリング
- 8.4.1 CSS3DRendererクラス
- 8.4.2 CSS3Dobjectクラス
- 8.4.3 CSS3Dレンダリングの例
- 8.5 CSS3Dステレオレンダリング
- 8.5.1 ステレオレンダリングとは
- 8.5.2 CSS3DStereoRendererクラス
- 8.5.3 CSS3Dobjectクラス
- 8.6 レイトレーシングレンダリング
- 8.6.1 レイトレーシングレンダリングとは
- 8.6.2 RaytracingRendererクラス
- 8.1 SVGレンダリング
付属サンプルプログラム一覧
本書で取り扱ったすべての題材にはサンプルプログラムが用意されています。
| 章 | ファイル名 | 説明 |
| 1.2.1 | HTML5_hajimete.html | はじめてのHTML文書。 |
| 1.2.3 | img_triangle.html | img要素によるグラフィックス。 |
| 1.3.2 | HTML5_CSS.html | CSSによる領域解除。 |
| 1.3.3 | DHTML_triangle.html | DHTMLによる三角形の描画。 |
| 1.3.3 | DHTML_triangle2.html | DHTMLによる三角形の描画（loadイベント無し）。 |
| 1.3.3 | DHTML_triangle_color.html | DHTMLによる三角形の描画（グラデーション）。 |
| 1.4 | Canvas_triangle.html | Canvas2Dによる三角形の描画。 |
| 1.5 | WebGL_triangle.html | WebGLによる三角形の描画。 |
| 1.6 | SVG_triangle.html | SVSによる三角形の描画。 |
| ― | Threejs_triangle.html | three.jsを用いた三角形の描画。 |
| 2.2 | HelloWorld.html | three.jsの基本形。 |
| ― | HelloWorld_SVG.html | three.jsの基本形（SVG）。 |
| 2.4.1 | AxisHelper.html | 軸オブジェクトの描画。 |
| 2.4.2 | ArrowHelper.html | 矢印オブジェクトの描画。 |
| 2.4.3 | GridHelper.html | グリッドオブジェクトの描画。 |
| 3.1.2 | BoxGeometry.html | 直方体オブジェクトの描画。 |
| 3.1.2 | BoxGeometry_canvas.html | Canvasレンダラーによる直方体オブジェクトの描画 |
| 3.1.4 | BoxGeometry_wire.html | 直方体オブジェクト（ワイヤーフレーム）の描画。 |
| 3.1.4 | BoxGeometry_canvas_wire.html | Canvasレンダラーによる直方体オブジェクト（ワイヤーフレーム）の描画。 |
| 3.2.1 | PlaneGeometry.html | 平面オブジェクトの描画。 |
| 3.2.1 | PlaneGeometry_canvas.html | Canvasレンダラーによる平面オブジェクト（ワイヤーフレーム）の描画。 |
| 3.2.2 | CircleGeometry.html | 円オブジェクトの描画。 |
| 3.2.2 | CircleGeometry_canvas.html | Canvasレンダラーによる円オブジェクト（ワイヤーフレーム）の描画。 |
| 3.2.3 | SphereGeometry.html | 球オブジェクトの描画。 |
| 3.2.3 | SphereGeometry_canvas.html | Canvasレンダラーによる球オブジェクト（ワイヤーフレーム）の描画。 |
| 3.2.3 | SphereGeometry_FlatShading.html | フラット化した球オブジェクトの描画。 |
| 3.2.4 | CylinderGeometry.html | 円柱オブジェクトの描画。 |
| 3.2.4 | CylinderGeometry_openEnded.html | 円柱オブジェクトのsideプロパティの有無の比較。 |
| 3.2.4 | CylinderGeometry_FlatShading.html | フラット化した円柱オブジェクトの描画。 |
| 3.2.5 | TorusGeometry.html | トーラスオブジェクトの描画。 |
| 3.2.6 | PolyhedronGeometry.html | 球面上ポリゴンオブジェクトの描画。 |
| 3.2.7 | LatheGeometry.html | 回転体オブジェクトの描画。 |
| 3.2.8 | TetrahedronGeometry.html | 正四面体オブジェクトの描画。 |
| 3.2.9 | OctahedronGeometry.html | 正八面体オブジェクトの描画。 |
| 3.2.10 | DodecahedronGeometry.html | 正十二面体オブジェクトの描画。 |
| 3.2.11 | IcosahedronGeometry.html | 正二十面体オブジェクトの描画。 |
| 3.2.12 | TorusKnotGeometry.html | トーラスノット型オブジェクトの描画。 |
| 3.2.13 | ParametricGeometry.html | パラメトリックオブジェクトの描画。 |
| 3.2.14 | TubeGeometry.html | チューブオブジェクトの描画。 |
| 3.2.15 | ShapeGeometry.html | 任意の２次元平面形状に対するオブジェクトの描画。 |
| 3.2.16 | ExtrudeGeometry.html | 任意の２次元平面形状パスに対する押出オブジェクトの描画。 |
| 3.2.17 | TextGeometry.html | テキストオブジェクトの描画。 |
| 3.2.18 | RingGeometry.html | リングオブジェクトの描画。 |
| 3.2.19 | ConvexGeometry.html | 凸型オブジェクトの描画。 |
| 3.2.19 | ConvexGeometry2.html | ランダム凸型オブジェクトの描画。 |
| 3.2.20 | TeapotBufferGeometry.html | ティーポットオブジェクトの描画。 |
| 3.3.1 | BoxGeometry_transparent.html | 半透明な直方体オブジェクトの描画。 |
| 3.3.2 | CircleGeometry_MeshBasicMaterial.html | 発光材質の円オブジェクトの描画。 |
| 3.3.2 | BoxGeometry_MeshBasicMaterial.html | 発光材質の直方体オブジェクトの描画。 |
| 3.3.3 | SphereGeometry_DepthMaterial.html | デプス材質の球オブジェクトの描画。 |
| 3.4.5 | Font.html | フォントオブジェクトの使用例。 |
| 3.5.1 | Points.html | 点オブジェクトの描画。 |
| 3.5.2 | Points_colors.html | 異なる色の点オブジェクトの描画。 |
| 3.5.5 | Sprite_canvas.html | Canvasレンダラーによるスプライトオブジェクトの描画。 |
| 3.5.7 | Sprite.html | スプライトオブジェクトの描画。 |
| 3.5.8 | SpriteCanvasMaterial.html | Canvas材質における点オブジェクトの描画。 |
| 3.5.8 | SpriteCanvasMaterial2.html | Canvas材質における点オブジェクトの描画２。 |
| 3.6.1 | Line.html | 線オブジェクトの描画。 |
| 3.6.1 | Line_canvas.html | Canvasレンダラーによる線オブジェクトの描画。 |
| 3.6.4 | LineSegments.html | 線分オブジェクトの描画。 |
| 3.6.5 | Line_colors.html | 色補完線オブジェクトの描画。 |
| 3.6.5 | Line_colors_canvas.html | Canvasレンダラーによる色補完線オブジェクトの描画（意図通り動作しない）。 |
| 3.6.6 | Line_LineDashedMaterial.html | 破線オブジェクトの描画。 |
| 3.6.6 | Line_LineDashedMaterial_canvas.html | Canvasレンダラーによる破線オブジェクトの描画。 |
| 3.7.1 | Triangle_Face3_BasicMaterial.html | 発光材質の三角形オブジェクトの描画。 |
| 3.7.1 | Triangle_Face3_MeshNormalMaterial.html | 法線材質の三角形オブジェクトの描画。 |
| 3.7.2 | Triangle_Face3_BasicMaterial_colors.html | 色補完三角形オブジェクトの描画。 |
| 3.7.3 | Square_Face3_BasicMaterial.html | 発光材質の四角形オブジェクトの描画。 |
| 3.7.3 | Square_Face3_BasicMaterial_colors.html | 発光材質の色補間四角形オブジェクトの描画。 |
| 3.8.1 | LOD.html | LODオブジェクトの描画。 |
| 3.8.3 | BoxGeometry_MultiMaterial.html | マルチ材質の直方体オブジェクトの描画。 |
| 3.8.5 | EdgesGeometry.html | エッジオブジェクトの描画。 |
| 3.8.5 | WireframeGeometry.html | ワイヤーフレームオブジェクトの描画。 |
| 3.9.2 | FaceNormalsHelper.html | 面法線ベクトル可視化オブジェクトの描画。 |
| 3.9.3 | VertexNormalsHelper.html | 頂点法線ベクトル可視化オブジェクトの描画。 |
| 3.9.6 | BoundingBoxHelper.html | バウンディングボックス可視化オブジェクトの描画。 |
| 3.9.5 | BoxHelper.html | バウンディングボックス可視化オブジェクトの描画。 |
| 3.9.6 | WireframeHelper.html | ワイヤーフレーム可視化オブジェクトの描画。 |
| 3.9.7 | EdgesHelper.html | エッジ可視化オブジェクトの描画。 |
| 4.2.2 | Arrows.html | 3軸オブジェクトの描画。 |
| 4.2.3 | Arrows_position.html | 3軸オブジェクトの平行移動。 |
| 4.2.3 | Arrows_rotation.html | 3軸オブジェクトの回転（オイラー角）。 |
| 4.2.4 | Arrows_rotation_quaternion.html | 3軸オブジェクトの回転（クォータニオン）。 |
| 4.2.5 | Arrows_scale.html | 3軸オブジェクトのスケール変換。 |
| 4.3.2 | Boxes_rotation.html | 直方体回転アニメーション。 |
| 4.3.3 | Boxes_cameraMove.html | カメラ移動アニメーション。 |
| 4.4.1 | Controls_trackball.html | トラックボールコントロールの実装例。 |
| 4.4.3 | Controls_OrthographicTrackball.html | 正投影カメラ用トラックボールコントロールの実装例。 |
| 4.4.4 | Controls_fly.html | フライコントロールの実装例。 |
| 4.4.6 | Controls_PointerLock.html | ポインタロックコントロールの実装例。 |
| 4.4.7 | Controls_PointerLock2.html | ポインタロックコントロールの実装例（キーボードイベントの追加）。 |
| 4.5.1 | Boxes_DragControls.html | ドラックコントロールの実装例。 |
| 4.5.1 | Boxes_TransformControls.html | ドラックコントロールの実装例。 |
| 4.5.5 | Boxes_TransformControls_DragControls.html | トランスフォームコントロール＋ドラックコントロールの実装例。 |
| 4.6.1 | Boxes_Raycaster.html | マウスクリックによる３次元オブジェクトの判定。 |
| 4.6.4 | Boxes_Raycaster_draggableBoxes.html | マウスドラックによる３次元オブジェクトの移動の実装例。 |
| 4.6.5 | Boxes_Raycaster_draggableBoxes_tracball.html | マウスドラックによるオブジェクトの移動＋トラックボールコントロールの実装例。 |
| 5.2.1 | BoxGeometry_LambertMaterial.html | ランバート反射材質による直方体オブジェクトの描画。 |
| 5.2.4 | DirectionalLightHelper.html | 平行光源可視化オブジェクトの描画。 |
| 5.3.2 | PlaneGeometry_LambertMaterial.html | ランバート反射材質よる平面オブジェクトの描画。 |
| 5.3.4 | PlaneGeometry_PhongMaterial.html | フォン反射材質よる平面オブジェクトの描画。 |
| 5.3.6 | PlaneGeometry_StandardMaterial.html | 標準反射材質よる平面オブジェクトの描画。 |
| 5.4.1 | Triangle_Face3_LambertMaterial_error.html | 法線ベクトルが未設定の場合。 |
| 5.4.2 | Triangle_Face3_LambertMaterial.html | ランバート反射材質を実装した三角形オブジェクトの描画。 |
| 5.4.2 | Triangle_Face3_PhongMaterial.html | フォン反射材質を実装した三角形オブジェクトの描画。 |
| 5.4.3 | Triangle_Face3_LambertMaterial_normals.html | 法線ベクトルを配列で指定した三角形オブジェクトの描画（ランバート反射材質）。 |
| 5.4.3 | Triangle_Face3_PhongMaterial_normals.html | 法線ベクトルを配列で指定した三角形オブジェクトの描画（フォン反射材質）。 |
| 6.1.1 | PointLight_PlaneGeometry.html | 点光源による平面オブジェクトのライティング実装例。 |
| 6.1.5 | PointLight_animation.html | 点光源のアニメーション。 |
| 6.2.1 | SpotLight_PlaneGeometry.html | スポットライト光源による平面オブジェクトのライティング実装例。 |
| 6.2.5 | SpotLight_animation.html | スポットライト光源のアニメーション。 |
| 6.3.2 | AmbientLight_BoxGeometry.html | 環境光源による直方体オブジェクトのライティング実装例。 |
| 6.4.1 | HemisphereLight_PlaneGeometry.html | 半球光源による平面オブジェクトのライティング実装例。 |
| 6.4.1 | HemisphereLight_TorusGeometry.html | 半球光源によるトーラスオブジェクトのライティング実装例。 |
| 7.1.1 | test_shadow.html | 影描画の必要性の説明用。 |
| 7.1.2 | DirectionalLight_shadow.html | 平行光源に対するシャドーイングの実装例。 |
| 7.1.3 | DirectionalLight_shadow2.html | 影の生成元と影の描画。 |
| 7.2.2 | DirectionalLight_shadow_camera.html | 平行光源のシャドーカメラの可視化。 |
| 7.2.4 | DirectionalLight_shadow_mapsize.html | シャドーマップのサイズの指定方法。 |
| 7.2.5 | DirectionalLight_shadow_type.html | シャドーマップのフィルタリングの指定方法。 |
| 7.3.1 | SpotlLight_shadow.html | スポットライト光源に対するシャドーイングの実装例。 |
| 7.3.2 | SpotlLight_shadow_camera.html | スポットライト光源のシャドーカメラの可視化。 |
| 7.3.3 | PointLight_shadow.html | 点光源に対するシャドーイングの実装例。 |
| 7.3.4 | PointLight_shadow_camera.html | 点光源のシャドーカメラの可視化。 |
| 7.4.1 | ShadowMapViewer.html | シャドーマップ可視化オブジェクトの実装例。 |
| 7.4.3 | ShadowMesh.html | シャドーオブジェクトの描画。 |
| 8.1.1 | SVGRenderer.html | SVGレンダリングの実装例。 |
| 8.2.1 | SoftwareRenderer.html | ソフトウェアレンダリングの実装例。 |
| 8.3.1 | CSS2DRenderer.html | CSS2Dレンダリングの実装例。 |
| 8.4.1 | CSS3DRenderer.html | CSS3Dレンダリングの実装例。 |
