「three.js」でつくるお手軽3Dマンガ作成ソフト - 中編

はじめに

　「マンガで分かる Java入門講座」を作る際に、「箱人形マンガ（Box Comic）」というWebアプリを開発しました。このアプリは「HTML5」＋「JavaScript」＋「WebGL」で作られています。このアプリで利用しているライブラリ「three.js」を、サンプルコードとともに解説していく短期連載です。今回は第2回。

　前回は、立方体と板ポリゴンの表示、そして画像や「Canvas」をテクスチャとして利用する方法を紹介しました。今回は、3Dオブジェクトをマウスで操作する方法について触れていきます。

「マンガで分かる Java入門講座」

「箱人形マンガ（Box Comic）」

• マンガで分かる Java入門講座
• 箱人形マンガ（Box Comic）

対象読者

　以下の読者を対象にしています。

• JavaScriptでプログラミングを書ける人。
• jQueryを使ったプログラムを書いたことがある人。
• HTML5のCanvasを使ったプログラムを書いたことがある人。

必要な環境

　「Google Chrome」や「Mozilla Firefox」といった、WebGLに対応したブラウザが必要です。「Internet Explorer」は、WebGLが利用できませんので、実行環境として適していません。

• Google Chrome
• Mozilla Firefox

記事の構成

　本連載では、以下の内容を、コードを示しながら解説していき、最後にマンガのコマとして、すべてのプログラムを統合したサンプルを作成します。

　また、サンプルはテクスチャを読み込む関係上、ローカルでは動作しません。そこで、サーバー上にもサンプルをアップロードしておきました。どういった内容か、以下からご確認ください。

• 「箱人形マンガ（BoxComic）」記事サンプル

　それでは、コードを示して解説していきます。