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

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

画像をテクスチャとして読み込み2

画像をテクスチャとして読み込み2

　「three.js」では「THREE.ImageUtils.loadTexture」を使わなくても、テクスチャの画像を読み込めます。その際は、「Image」オブジェクトを利用します。

　注意する点としては、「Image」オブジェクトの読み込み後に、レンダリングを実行しなければならない点です。そのため「onload」に読み込み後の処理を指定して、レンダリングを実行します。

　以下、画像をテクスチャとして読み込み表示する「crocro.bc.viewImgTxtr2.js」を掲載します。

「crocro.bc.viewImgTxtr2.js」

//= サンプル：画像をテクスチャとして読み込み2

//== 画像をテクスチャとして読み込み2
crocro.bc.viewImgTxtr2 = function() {
    // 変数の初期化
    var d3 = crocro.bc.d3;    // 3D格納用
    var plt;
    var pth = "./img/yasumi_yuu/head_front.png";

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

//== 画像ポリゴンの作成
crocro.bc.mkImgTxtr2 = function(pth) {
    // Imageオブジェクトの作成
    var image = new Image();
    image.onload = function() {
        // 読み込み後のコールバックでレンダリング
        crocro.bc.render();
    }

    // テクスチャの作成
    var texture  = new THREE.Texture(image
        ,new THREE.UVMapping()
        ,THREE.ClampToEdgeWrapping
        ,THREE.ClampToEdgeWrapping
        ,THREE.NearestFilter    // アンチエイリアスなし
        ,THREE.NearestFilter    // アンチエイリアスなし
    );
    texture.needsUpdate = true;    // 画像読み込み後の更新を指定

    // マテリアルとメッシュの作成
    var material = new THREE.MeshBasicMaterial({map: texture});

    var mesh = new THREE.Mesh(
        new THREE.PlaneGeometry(500, 500, 4, 4),
        material
    );

    // 画像のパスを指定
    image.src = pth;

    // メッシュを戻して終了
    return mesh;
};

Canvasをテクスチャとして読み込み

Canvasをテクスチャとして読み込み

　「three.js」では画像以外に「Canvas」もテクスチャとして指定できます。そのため、生成した描画結果をテクスチャにしたり、画像を読み込んだ後に、加工してテクスチャにしたりできます。

　注意する点としては、テクスチャの「needsUpdate」属性に「true」を指定しなければならないことです。この値を付けなければ、テクスチャにCanvasの内容が表示されません。

　以下、Canvasをテクスチャとして読み込み表示する「crocro.bc.viewCnvsTxtr.js」を掲載します。

「crocro.bc.viewCnvsTxtr.js」

//= サンプル：Canvasをテクスチャとして読み込み

//== Canvasをテクスチャとして読み込み
crocro.bc.viewCnvsTxtr = function() {
    // 変数の初期化
    var d3 = crocro.bc.d3;    // 3D格納用
    var plt;

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

    crocro.bc.render();
};

//== 画像ポリゴンの作成
crocro.bc.mkCnvsTxtr = function() {
    // キャンバスの作成
    var w = 100;
    var h = 100;
    var cnvs = $('<canvas width=' + w + ' height=' + h + '>').get(0);
    var cntxt = cnvs.getContext("2d");

    // キャンバスへの描画
    cntxt.fillStyle = "#ff0000";
    cntxt.fillRect(0, 0, w, h);

    cntxt.strokeStyle = "#0000ff";
    cntxt.lineWidth = 5;

    cntxt.beginPath();
    cntxt.lineTo(0, 0);
    cntxt.lineTo(w, h);
    cntxt.stroke();

    cntxt.beginPath();
    cntxt.lineTo(w, 0);
    cntxt.lineTo(0, h);
    cntxt.stroke();

    // テクスチャの作成
    var texture  = new THREE.Texture(cnvs);
    texture.needsUpdate = true;    // 画像読み込み後の更新を指定

    // マテリアルとメッシュの作成
    var material = new THREE.MeshBasicMaterial({map: texture});

    var mesh = new THREE.Mesh(
        new THREE.PlaneGeometry(500, 500, 4, 4),
        material
    );

    // メッシュを戻して終了
    return mesh;
};

　今回の記事は以上です。次回は、マウスによる3dオブジェクトの操作や選択について解説していきます。

参考資料

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