Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

JavaScriptとWebGLによるはじめての3Dプログラミング(2)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/06/24 14:00

ダウンロード サンプル (335.2 KB)

 「HTML5」+「JavaScript」+「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ(Box Comic)」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、3Dオブジェクトをマウスで操作する方法について触れていきます。

目次

はじめに

 「マンガで分かる 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ページ

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

バックナンバー

連載:JavaScriptとWebGLによるはじめての3Dプログラミング
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5