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

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

WebGLからPNGを出力

WebGLからPNGを出力

　WebGLからPNGを出力するのは簡単です。「toDataURL」を使うことで、画像データをBase64文字列化した状態で取得できます。

　注意しなければならない点は、画像のテクスチャを読み込む際、レンダリングが行われ、画像が表示される前に「toDataURL」を使っても、意図した画像は出力できないということです。そういった場合は、すべての画像が読み込まれるのを待つか、ユーザーに表示を確認してもらい、ボタン等で出力処理を行うようにする必要があります。

　以下、WebGLからPNGを出力する「crocro.bc.outputPng.js」を掲載します。

「crocro.bc.outputPng.js」

    //= サンプル：WebGLからPNGを出力

    //== WebGLからPNGを出力
    crocro.bc.outputPng = function() {
        // 変数の初期化
        var d3 = crocro.bc.d3;    // 3D格納用
        var plt;

        // 要素の作成と格納
        plt = crocro.bc.mkCnvsTxtr();
        d3.scene.add(plt);

        crocro.bc.render();

        // PNGの出力
        var png = crocro.bc.getPng();
        window.open(png, "_blank");
    };

    //== PNGの取得
    crocro.bc.getPng = function() {
        return crocro.bc.d3.renderer.domElement.toDataURL('image/png');
    };

まとめ

まとめ

　これまで作成した各部品を合成して、1コマだけの簡易コマ表示を行います。また、集中線やフキダシ、箱人形の腕や足の部品を操作対象にして、移動、回転、拡縮の操作もできるようにします。そして、作成したコマをPNGで出力するボタンも付けます。

　以下、まとめ部分のソースコード「crocro.bc.viewCompo.js」を掲載します。そして次ページでは、いくつかポイントを解説します。

「crocro.bc.viewCompo.js」

//= サンプル：まとめ

//== まとめ
crocro.bc.viewCompo = function() {
    // 変数の初期化
    var d3 = crocro.bc.d3;    // 3D格納用
    var obj;
    var bgPth = "./img/bg.jpg";

    d3.tgts = [];
    d3.nms = [
        "背景", "フキダシ", "集中線",
        "キャラ全体", "頭", "胴", "右腕", "左腕", "右足", "左足"
    ];
    d3.rttTyp = [
        0, 0, 0,
        0, 0, 0, 1, 1, 1, 1
    ];

    //========================================
    // 要素の作成と格納

    // 背景
    obj = crocro.bc.mkImgTxtr1(bgPth, true);
    obj.scale.x = 2.2;
    obj.scale.y = 2.2;
    obj.position.z = -200;
    d3.scene.add(obj);    // シーンに追加
    d3.tgts.push(obj);    // 背景に追加

    // フキダシ
    obj = crocro.bc.mkFukidasi(false);
    obj.position.x = -220;
    obj.position.y = 200;
    obj.position.z = 100;
    obj.scale.x = 1.3;
    obj.scale.y = 1.3;
    d3.scene.add(obj);    // シーンに追加
    d3.tgts.push(obj);    // 操作対象に追加

    // 集中線
    obj = crocro.bc.mkFlash(0x000000);
    obj.position.x = 200;
    obj.scale.x = 2;
    obj.scale.y = 2;
    d3.scene.add(obj);    // シーンに追加
    d3.tgts.push(obj);    // 操作対象に追加

    // 箱人形キャラ
    obj = crocro.bc.mkBoxChar();
    obj.position.x = 200;
    obj.position.y = -100;
    d3.scene.add(obj);    // シーンに追加
    d3.tgts.push(obj);    // 操作対象に追加
    d3.tgts = d3.tgts.concat(obj.children);    // 子要素を操作対象に追加

    crocro.bc.render();

    //========================================
    // マウスUIの作成
    crocro.bc.useMouse_mkUI();

    // マウス操作の作成
    crocro.bc.useMouse_setMouse();

    // 操作対象UIの作成
    crocro.bc.viewCompo_mkUI();

    // 先頭を選択
    d3.tgt = d3.tgts[0];

    // 終了処理
    crocro.bc.setFinalize(function() {
        var d3 = crocro.bc.d3;    // 3D格納用
        d3.tgt  = null;
        d3.tgts = null;
        d3.nms  = null;
        d3.rttTyp = null;
    })
};

//== 操作対象UIの作成
crocro.bc.viewCompo_mkUI = function() {
    // 変数の初期化
    var d3 = crocro.bc.d3;    // 3D格納用

    //========================================
    // UIの作成
    var ui = crocro.bc.ui;
    ui.append("<br>");
    for (var i = 0; i < d3.tgts.length; i ++) {
        // ラジオボタンを作成
        var rdo = $('<input type="radio">')
            .attr("name",  "uiTgtPrts")
            .attr("id",    "uiTgtPrts_i" + i)
            .attr("value", i);

        // 先頭を選択
        if (i == 0) {
            rdo.attr("checked", true)
        }

        // UIに追加
        ui.append(rdo);

        // ラベルを作成
        ui.append(
            $('<label>')
            .attr("for", "uiTgtPrts_i" + i)
            .text(d3.nms[i])
        );
    }

    // 変更時のイベントを追加
    $('input[name="uiTgtPrts"]:radio').change( function() {
        var tgtNo = $(this).val();
        crocro.bc.d3.tgt = d3.tgts[tgtNo];

        // 回転操作の変更
        if (d3.rttTyp[tgtNo] == 0) {
            crocro.bc.changeRtt = crocro.bc.changeRttBasic;
        } else {
            crocro.bc.changeRtt = crocro.bc.changeRttPole;
        }
    });

    //========================================
    // 出力ボタンを作成
    ui
    .append("<br>")
    .append(
        $('<input type="button">')
        .val("PNG出力")
        .click(function() {
            var png = crocro.bc.getPng();
            window.open(png, "_blank");
        })
    );
};

//== 基本の回転操作
crocro.bc.changeRttBasic = function(tgt, difX, difY) {
    tgt.rotation.y += difX / 100;
    tgt.rotation.x += difY / 100;
}

//== 棒状の物体の回転操作
crocro.bc.changeRttPole = function(tgt, difX, difY) {
    tgt.rotation.z += difX / 100;
    tgt.rotation.x += difY / 100;
}