Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

ダウンロード sample.zip (335.2 KB)

 「HTML5」+「JavaScript」+「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ(Box Comic)」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、集中線やフキダシや箱人形の作成、そしてそれらをまとめて、オブジェクトや部品をマウスで操作するサンプルを作成して解説します。

目次

はじめに

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

 前回は、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ページ

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

集中線の表示

集中線の表示
集中線の表示

 集中線は球を利用して作成します。どう利用するかというと、球を細長くしたものを1本の線と見立てて、その線を放射状に配置して集中線とします。ここで球を使うのは、ペンの入りと抜きを再現するためです。

 「three.js」には、球を作るジオメトリ「SphereGeometry」が存在します。このジオメトリで作った球の「scale.x」「scale.z」を小さくして、「scale.y」を大きくすることで、線状に変形させます。描画位置は「Math.cos」「Math.sin」を使って求めます。後は、放射状になるように回転させれば完成です。

 ポイントは、集中線はオブジェクトが多いので、グループに登録してまとめて扱えるようにすることです。すると、後で集中線の位置を移動したり、角度を変えたりする際に、グループの属性を変更するだけでよくなります。中の線を1本ずつ変更するのは大変です。グループ化をうまく使い、階層構造を持ったオブジェクトを作るのがコツです。

 以下、集中線を作成して表示する「crocro.bc.viewFlash.js」を掲載します。

「crocro.bc.viewFlash.js」
//= サンプル:集中線の表示

//== 集中線の表示
crocro.bc.viewFlash = function() {
    // 変数の初期化
    var d3 = crocro.bc.d3;    // 3D格納用
    var flsh;

    // 要素の作成と格納
    flsh = crocro.bc.mkFlash(0x000000);
    d3.scene.add(flsh);

    crocro.bc.render();
};

//== 集中線の作成
crocro.bc.mkFlash = function(col) {
    // マテリアルの作成
    var material = new THREE.MeshBasicMaterial({color: col});

    // グループの作成
    var group = new THREE.Object3D();

    // 集中線設定の初期化
    var rMax = Math.PI * 2;
    var rStp = Math.PI / 32;
    var mvY = 300;

    // 集中線の作成
    for (var r = 0; r < rMax; r += rStp) {
        // メッシュの作成
        var mesh = new THREE.Mesh(
            new THREE.SphereGeometry(1, 32, 32),
            material
        );

        // サイズを縦長に
        mesh.scale.x = 2;
        mesh.scale.y = 200;
        mesh.scale.z = 2;

        // 描画位置の移動
        mesh.position.x =   mvY * Math.cos(r);
        mesh.position.y = - mvY * Math.sin(r);

        // 回転
        mesh.rotation.z = Math.PI / 2 - r;

        // グループにメッシュを追加
        group.add(mesh);
    }

    // グループを戻して終了
    return group;
};

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

著者プロフィール

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

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

バックナンバー

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