Three.jsでWeb3D(WebGL) ~バンプ マップ、ディスプレイスメント マップを使う[bumpMap,displacementMap]

Three.jsで「バンプ マップ(bumpMap)」「ディスプレイスメント マップ(displacementMap)」を使う(Three.js[r145]を使用)

マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に2本指を触れてなぞるとカメラの移動、ピンチイン/アウトで拡大縮小できます。

(左)バンプ マップ
ライトに関連して知覚される深度にマッピングされ、ライティングのみに影響します。(物体の形状は変わらない)
(右)ディスプレイスメント マップ
メッシュの頂点座標を移動させます。移動された頂点は影を落としたり影が落ちたりします。(物体の形状が変わる)
以下のチェック画像を「バンプ マップ」「ディスプレイスメント マップ」で適用しています。
チェックのpng画像

ソースコード

//バンプ マップ、ディスプレイメント マップ用画像のロード
let Texture=new THREE.TextureLoader().load('./three_r145/img/flag.png');
Texture.wrapS=THREE.RepeatWrapping;
Texture.wrapT=THREE.RepeatWrapping;
//テクスチャの繰り返し回数を指定する
Texture.repeat.set(1,1);

//バンプ マップ、ディスプレイメント マップ用ジオメトリ作成(横、縦、横分割数、縦分割数)
let Geometry=new THREE.PlaneGeometry(10,10,50,50);

//バンプ マップの表面マテリアル
let BumpMaterial=new THREE.MeshLambertMaterial({
  color:0x66ee66,
  side:THREE.FrontSide,//表面を表示する設定
  transparent:false, opacity:1.0,
  wireframe:false, wireframeLinewidth:0,
  bumpMap:Texture,
  bumpScale:1
});
//バンプ マップ用表面メッシュ作成
let BumpMesh=new THREE.Mesh(Geometry,BumpMaterial);
BumpMesh.position.set(-6,0,0);
BumpMesh.rotation.set(-Math.PI/8*3,0,0);
BumpMesh.castShadow=true;
BumpMesh.receiveShadow=true;
scene.add(BumpMesh);

//ディスプレイスメント マップ用表面マテリアル
let DisplacementMaterial=new THREE.MeshLambertMaterial({
  color:0x6699ee,
  side:THREE.FrontSide,//表面を表示する設定
  transparent:false, opacity:1.0,
  wireframe:false, wireframeLinewidth:0,
  displacementMap:Texture,
  displacementScale:1
});
//ディスプレイスメント マップ用表面メッシュ作成
let DisplacementMesh=new THREE.Mesh(Geometry,DisplacementMaterial);
DisplacementMesh.position.set(6,0,0);
DisplacementMesh.rotation.set(-Math.PI/8*3,0,0);
DisplacementMesh.castShadow=true;
DisplacementMesh.receiveShadow=true;
scene.add(DisplacementMesh);