「three.js」でつくるお手軽3Dマンガ作成ソフト - 中編
JavaScriptとWebGLによるはじめての3Dプログラミング（2）
ダウンロード サンプル (335.2 KB)
「HTML5」＋「JavaScript」＋「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ（Box Comic）」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、3Dオブジェクトをマウスで操作する方法について触れていきます。
はじめに
「マンガで分かる Java入門講座」を作る際に、「箱人形マンガ（Box Comic）」というWebアプリを開発しました。このアプリは「HTML5」＋「JavaScript」＋「WebGL」で作られています。このアプリで利用しているライブラリ「three.js」を、サンプルコードとともに解説していく短期連載です。今回は第2回。
前回は、立方体と板ポリゴンの表示、そして画像や「Canvas」をテクスチャとして利用する方法を紹介しました。今回は、3Dオブジェクトをマウスで操作する方法について触れていきます。
対象読者
以下の読者を対象にしています。
- JavaScriptでプログラミングを書ける人。
- jQueryを使ったプログラムを書いたことがある人。
- HTML5のCanvasを使ったプログラムを書いたことがある人。
必要な環境
「Google Chrome」や「Mozilla Firefox」といった、WebGLに対応したブラウザが必要です。「Internet Explorer」は、WebGLが利用できませんので、実行環境として適していません。
記事の構成
本連載では、以下の内容を、コードを示しながら解説していき、最後にマンガのコマとして、すべてのプログラムを統合したサンプルを作成します。
また、サンプルはテクスチャを読み込む関係上、ローカルでは動作しません。そこで、サーバー上にもサンプルをアップロードしておきました。どういった内容か、以下からご確認ください。
| 内容 | ページ |
| シーンとカメラとレンダラーの準備 | 3ページ |
| 立方体の表示 | 4ページ |
| 色付き板ポリゴンの表示 | 5ページ |
| 画像をテクスチャとして読み込み1 | 5ページ |
| 画像をテクスチャとして読み込み2 | 6ページ |
| Canvasをテクスチャとして読み込み | 6ページ |
| 内容 | ページ |
| マウスによる移動、回転、拡縮操作 | 2ページ |
| レイキャスターを利用した選択と移動1 | 3ページ |
| レイキャスターを利用した選択と移動2 | 4ページ |
| クォータニオンによる回転 | 5ページ |
| 内容 | ページ |
| 集中線の表示 | 1ページ |
| フキダシの表示 | 2ページ |
| 箱人形の表示 | 3ページ |
| WebGLからPNGを出力 | 4ページ |
| まとめ | 4～5ページ |
それでは、コードを示して解説していきます。
この記事は参考になりましたか？
- JavaScriptとWebGLによるはじめての3Dプログラミング連載記事一覧
-
- 「three.js」でつくるお手軽3Dマンガ作成ソフト - 後編
- 「three.js」でつくるお手軽3Dマンガ作成ソフト - 中編
- 「three.js」でつくるお手軽3Dマンガ作成ソフト - 前編
- この記事の著者
-
柳井 政和（ヤナイ マサカズ）
クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています（『裏切りのプログラム』他）。面白いことなら何でもOKのさすらいの企画屋です。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
