画像をテクスチャとして読み込み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オブジェクトの操作や選択について解説していきます。
