色付き板ポリゴンの表示
色付きの板ポリゴンを作るのは簡単です。立方体の時には6つ作成したマテリアルは、「MeshBasicMaterial」1つだけ作成すればよいです。また、ジオメトリは「PlaneGeometry」で作成します。
ポリゴンの両面を利用する際は、「side」属性に「THREE.DoubleSide」を指定します。
ポリゴンが複数ある際に、前後関係を設定したい場合は「position.z」の値を変更して、奥行きの位置を指定します。
以下、色付き板ポリゴンを表示する「crocro.bc.viewColPlate.js」を掲載します。
//= サンプル：色付き板ポリゴンの表示
//== 色付き板ポリゴンの表示
crocro.bc.viewColPlate = function() {
// 変数の初期化
var d3 = crocro.bc.d3; // 3D格納用
var plt;
// 要素の作成と格納
plt = crocro.bc.mkColPlate(0xff0000);
plt.position.x = 30;
plt.position.y = 90;
plt.position.z = 2; // 手前
d3.scene.add(plt);
plt = crocro.bc.mkColPlate(0x0000ff);
plt.scale.x = 3;
plt.scale.y = 2;
d3.scene.add(plt);
plt = crocro.bc.mkColPlate(0x00ff00);
plt.position.x = -30;
plt.position.y = -90;
plt.position.z = -2; // 奥
d3.scene.add(plt);
crocro.bc.render();
};
//== 色板の作成
crocro.bc.mkColPlate = function(col) {
// マテリアルとメッシュの作成
var material = new THREE.MeshBasicMaterial({color: col});
material.side = THREE.DoubleSide; // 両面可能に
var mesh = new THREE.Mesh(
new THREE.PlaneGeometry(100, 100, 4, 4),
material
);
// メッシュを戻して終了
return mesh;
};
画像をテクスチャとして読み込み1
「three.js」では画像を読み込んで、ポリゴンのテクスチャに貼るための道具「THREE.ImageUtils.loadTexture」が存在します。
注意すべき点は、JavaScriptの画像の読み込みは非同期で行われることです。そのため、画像が読み込み終わった後に再描画を行う必要があります。「loadTexture」の第3引数は関数を指定できます。この関数は画像読み込み後のコールバック関数です。この関数を使い、レンダリングを行います。そうしなければ、画像の貼られていない真黒なポリゴンが表示されることになります。
読み込んだ画像をポリゴンに貼る際、ドットの間を補完して表示するか（滑らかな画像にするか）、補完せずに表示するか（ドット絵の状態にするか）を選べます。デフォルトでは補完が行われます。しかし、ドット絵風のゲームを作りたい場合など、補完を行いたくない場合もあります。その際は、テクスチャの「magFilter」「minFilter」に「THREE.NearestFilter」を指定しましょう。こうすると、ニアレストネイバー法（ドットを荒く拡大するアルゴリズム）で画像が表示されます。
以下、画像をテクスチャとして読み込み表示する「crocro.bc.viewImgTxtr1.js」を掲載します。
//= サンプル：画像をテクスチャとして読み込み1
//== 画像をテクスチャとして読み込み1
crocro.bc.viewImgTxtr1 = function() {
// 変数の初期化
var d3 = crocro.bc.d3; // 3D格納用
var plt;
var pth = "./img/yasumi_yuu/head_front.png";
// 要素の作成と格納
plt = crocro.bc.mkImgTxtr1(pth, true);
plt.position.x = 100;
plt.position.y = 100;
d3.scene.add(plt);
plt = crocro.bc.mkImgTxtr1(pth, false);
plt.position.x = -100;
plt.position.y = -100;
plt.position.z = 1;
d3.scene.add(plt);
};
//== 画像ポリゴンの作成
crocro.bc.mkImgTxtr1 = function(pth, isAntiAliasing) {
// テクスチャを自動読み込み
var texture = THREE.ImageUtils.loadTexture(
pth,
new THREE.UVMapping(),
function() {
// 読み込み後のコールバックでレンダリング
crocro.bc.render();
}
);
// アンチエイリアスの有無
if (! isAntiAliasing) {
// アンチエイリアスなし
texture.magFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
}
// マテリアルとメッシュの作成
var material = new THREE.MeshBasicMaterial({map: texture});
var mesh = new THREE.Mesh(
new THREE.PlaneGeometry(500, 500, 4, 4),
material
);
// メッシュを戻して終了
return mesh;
};
