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);