Three.js で始めるテクスチャですよ！

無機質なマテリアルよりは、
やっぱりテクスチャを貼ると見え方が全然違いますね〜。

ちゃんと3D空間に、色のある世界が産まれたようだ。

Three.js では、勿論簡単にテクスチャを扱うクラスが用意されているので、
基本的な手順を書いておきます。

テクスチャ

テクスチャとは、3Dオブジェクトの表面に画像を貼ること。

テクスチャを使うには、TextureLoaderで画像を読み込み。
マテリアルのマッププロパティに設定するだけ。

 new THREE.TextureLoader().load('path/to/texture', (texture) => {
    let geometry = new THREE.BoxGeometry(3, 3, 3);
    let material = new THREE.MeshPhongMaterial();

    material.map = texture; // 読み込んだテクスチャをmapプロパティに設定する。

    let cube = new THREE.Mesh(geometry, material);
    .
    .
});

バンプマップ

一般的にはエンボス画像を使って設定するみたいだが、
Three.jsでは、テクスチャと同じものを設定しておけば、
自動でよろしくエンボス画像を作ってバンプマップとして扱ってくれるようだ。

オブジェクトの法線を歪ませる事で
単なるテクスチャに立体感が生まれる。

material.bumpMap      = texture; // テクスチャと同じものを設定するだけでOK
material.bumpMapScale = 0.2;

スケールはつけ過ぎるとガビガビな見た目になるので、程よい値を探す。

PreloadJSを使う

大量のテクスチャ画像を読み込む必要がある時に、
用意されているTextureLoaderでは扱い難いので、PreloadJSというライブラリを利用すると便利だ。

PreloadJS Getting Started

// ローダーのインスタンス
let loadQueue = new createjs.LoadQueue();

// 読み込むテクスチャーリスト
let manifest = [
    {id: 'floor-wood', src: './assets/img/floor-wood.jpg'},
    {id: 'stone',      src: './assets/img/stone.jpg'     },
    {id: 'brick-wall', src: './assets/img/brick-wall.jpg'},
];

function getTexture(name: string): THREE.Texture {
    let image           = loadQueue.getResult(name);
    let texture         = new THREE.Texture(image);
    texture.needsUpdate = true;
    return texture;
}

// 読み込みが完了したら、呼ばれるハンドラ
loadQueue.on('complete', () => {
    let geometry = new THREE.BoxGeometry(3, 3, 3);
    let material = new THREE.MeshPhongMaterial();

    let texture        = getTexture('stone');
    material.map       = texture;
    material.bumpMap   = texture;
    material.bumpScale = 0.05;

    let cube = new THREE.Mesh(geometry, material);
    .
    .

});

// Preloadjsによる読み込み開始
loadQueue.loadManifest(manifest);

おしまい

以下にサンプル用のテクスチャ画像が置いてあるので、いろんなテクスチャを試して貼ってみると良いだろう。

https://github.com/josdirksen/learning-threejs