はじめに
「マンガで分かる Java入門講座」を作る際に、「箱人形マンガ（Box Comic）」というWebアプリを開発しました。このアプリは「HTML5」＋「JavaScript」＋「WebGL」で作られています。このアプリで利用しているライブラリ「three.js」を、サンプルコードとともに解説していく短期連載です。今回は第2回。
前回は、立方体と板ポリゴンの表示、そして画像や「Canvas」をテクスチャとして利用する方法を紹介しました。今回は、3Dオブジェクトをマウスで操作する方法について触れていきます。
「マンガで分かる Java入門講座」
「箱人形マンガ（Box Comic）」
対象読者
以下の読者を対象にしています。
- JavaScriptでプログラミングを書ける人。
- jQueryを使ったプログラムを書いたことがある人。
- HTML5のCanvasを使ったプログラムを書いたことがある人。
必要な環境
「Google Chrome」や「Mozilla Firefox」といった、WebGLに対応したブラウザが必要です。「Internet Explorer」は、WebGLが利用できませんので、実行環境として適していません。
記事の構成
本連載では、以下の内容を、コードを示しながら解説していき、最後にマンガのコマとして、すべてのプログラムを統合したサンプルを作成します。
また、サンプルはテクスチャを読み込む関係上、ローカルでは動作しません。そこで、サーバー上にもサンプルをアップロードしておきました。どういった内容か、以下からご確認ください。
記事の構成 - 第1回
| 内容 | ページ |
| シーンとカメラとレンダラーの準備 | 3ページ |
| 立方体の表示 | 4ページ |
| 色付き板ポリゴンの表示 | 5ページ |
| 画像をテクスチャとして読み込み1 | 5ページ |
| 画像をテクスチャとして読み込み2 | 6ページ |
| Canvasをテクスチャとして読み込み | 6ページ |
記事の構成 - 第2回
| 内容 | ページ |
| マウスによる移動、回転、拡縮操作 | 2ページ |
| レイキャスターを利用した選択と移動1 | 3ページ |
| レイキャスターを利用した選択と移動2 | 4ページ |
| クォータニオンによる回転 | 5ページ |
記事の構成 - 第3回
| 内容 | ページ |
| 集中線の表示 | 1ページ |
| フキダシの表示 | 2ページ |
| 箱人形の表示 | 3ページ |
| WebGLからPNGを出力 | 4ページ |
| まとめ | 4～5ページ |
それでは、コードを示して解説していきます。
