初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

10章テクスチャ

Three.jsで利用できるさまざまなマテリアルを「4章 マテリアル」で紹介しましたが、メッシュにテクスチャを適用する方法については触れませんでした。この章ではテクスチャについて説明します。具体的には、次のトピックについて説明します。

• テクスチャの読み込みとメッシュへの適用
• バンプマップと法線マップを使用したメッシュの奥行きや詳細の表現
• ライトマップを使用した擬似シャドウの作成
• 環境マップを使用したマテリアルへの詳細な反射の追加
• スペキュラマップを使用したメッシュの特定の場所への光沢の追加
• メッシュのUVマップの調整とカスタマイズ
• テクスチャの入力としてのcanvas要素とvideo要素の利用

まず基本的なサンプルを使用してテクスチャの読み込み方法と適用方法を紹介することから始めましょう。

10.1　マテリアルでテクスチャを利用

Three.jsでテクスチャが利用される場面はいくつかあります。メッシュの色を定義するためにも利用できますが、他にも光沢、凹凸、反射を定義するために利用できます。とはいえ初めに紹介するサンプルではもっとも基本的な目的のため、つまりメッシュのピクセルに個別の色を定義するためにテクスチャを使用します。

10.1.1　テクスチャを読み込んでメッシュに適用

マテリアルのmapプロパティの値として使用するのがテクスチャのもっとも基本的な用途です。このマテリアルを使用してメッシュを作成すると指定したテクスチャに基づいてメッシュ表面の色が設定されます。

テクスチャを読み込みメッシュ上でそれを利用するコードは次のようになります。

function createMesh(geom, imageFile) { var textureLoader = new ...