バンプマップとディスプレイスメントマップ ～Webサイトで3Dコンテンツ(Three.js)デザイン

• ホーム
• JavascriptのWebGLコンテキストで3Dコンテンツを作る(three.jsを使用)
• バンプマップとディスプレイスメントマップ ～Webサイトで3Dコンテンツ(Three.js)デザイン

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

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

（左）バンプ マップ

ライトに関連して知覚される深度にマッピングされ、ライティングのみに影響します。（物体の形状は変わらない）

（右）ディスプレイスメント マップ

メッシュの頂点座標を移動させます。移動された頂点は影を落としたり影が落ちたりします。（物体の形状が変わる）

ソースコード

//バンプ マップ、ディスプレイメント マップ用画像のロード
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);