のぐそんブログ

暗いおじさんがシコシコ書くブログです。

THREE.jsのテクスチャについて調べる

基本的なテクスチャの貼り方

一番シンプルな貼り方は下記になります。

let textuerLoader = new THREE.TextureLoader();
let mat = new THREE.MeshPhongMaterial();
let geom = new THREE.BoxGeometry(3, 3, 3);

textuerLoader.load('images/n.jpg', function (textuer) {
    mat.map = textuer;
    let mesh = new THREE.Mesh(geom, mat);
    scene.add(mesh);
});

テクスチャに利用する画像サイズは「256 x 256、512 x 512、1024 x 1024」 2の累乗を適切になります。

テクスチャの拡大縮小用のフィルタ

テクスチャをどう拡大するかにつていは、magFilterで設定、縮小するかについてはminFilterプロパティで設定できます。

フィルタ 説明
THREE.NearestFilter もっとも近くにあるピクセルの色を使用する。拡大した場合はブロックノイズは生じ、縮小時に使用するとディティールが大幅に失われる。
THREE.LinearFilter NearestFilterより高度なフィルタで、縮小時にはディティールが失われるが、拡大時はブロックノイズが少なくなる

THREE.NearestFilter

THREE.LinearFilter

let textuerLoader = new THREE.TextureLoader();
let mat = new THREE.MeshPhongMaterial();
let geom = new THREE.BoxGeometry(3, 3, 3);

textuerLoader.load('images/n.jpg', function (textuer) {
    textuer.magFilter = THREE.NearestFilter;
    textuer.minFilter = THREE.NearestFilter;
    mat.map = textuer;
    let mesh = new THREE.Mesh(geom, mat);
    scene.add(mesh);
});

バンプマップ

バンプマップはテクスチャに奥行きを出すために使います。 バンプマップを使用する場合は、テクスチャ画像を2つ用意します。

コードは下のようになります。

let textuerLoader = new THREE.TextureLoader();
let mat = new THREE.MeshPhongMaterial();
let geom = new THREE.BoxGeometry(3, 3, 3);

let textuer = textuerLoader.load('images/tile.png');
mat.map = textuer;

let bump = textuerLoader.load('images/bump.png');
mat.bumpMap = bump;
mat.bumpScale = 0.2;

let mesh = new THREE.Mesh(geom, mat);

scene.add(mesh);

左がバンプマップなしで、右がバンプマップを使用した例です。

まとめ

他にも法線バンプマップなどもあるのですが、効果てきなテクスチャの作り方がわかりませんでした。