Three.jsでWeb3D(WebGL) ~6種のMaterialの使い方

Three.jsの6種のマテリアル(材質)について(Three.js[r145]を使用)

マウス左ドラッグで回転、右ドラッグで移動、ホイールで拡大縮小できます。

THREE.MeshBasicMaterial(左から1つ目)

ベーシック材質(光源の影響を受けないベタ塗材質)
//球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//ベーシック材質(光源の影響を受けないベタ塗材質)の作成
let mat1=new THREE.MeshBasicMaterial({color:0x6699FF, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
//球体ジオメトリと材質からメッシュの作成(ジオメトリ, 材質)
let mesh1=new THREE.Mesh(sphereGeo,mat1);
mesh1.receiveShadow=true;//影を表示する
mesh1.castShadow=true;//影を落とす設定
//メッシュの配置座標を設定(x→, y↑, z手前)
mesh1.position.set(-125,0,0);
//メッシュを表示できるようにシーンに追加する
scene.add(mesh1);

MeshNormalMaterial(左から2つ目)

ノーマル材質([色の指定無効]光源の影響を受けない奥行き感をRGBで表現する材質)
//球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//ノーマル材質([色の指定無効]光源の影響を受けない奥行き感をRGBで表現する材質)の作成
let mat2=new THREE.MeshNormalMaterial({side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
//球体ジオメトリと材質からメッシュの作成(ジオメトリ, 材質)
let mesh2=new THREE.Mesh(sphereGeo,mat2);
mesh2.receiveShadow=true;//影を表示する
mesh2.castShadow=true;//影を落とす設定
//メッシュの配置座標を設定(x→, y↑, z手前)
mesh2.position.set(-75,0,0);
//メッシュを表示できるようにシーンに追加する
scene.add(mesh2);

THREE.MeshLambertMaterial(左から3つ目)

ランバートシェーディング材質(光源の影響を受ける光沢の無い材質)
//球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//ランバートシェーディング材質(光源の影響を受ける光沢の無い材質)の作成
let mat3=new THREE.MeshLambertMaterial({color:0x6699FF, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
//球体ジオメトリと材質からメッシュの作成(ジオメトリ, 材質)
let mesh3=new THREE.Mesh(sphereGeo,mat3);
mesh3.receiveShadow=true;//影を表示する
mesh3.castShadow=true;//影を落とす設定
//メッシュの配置座標を設定(x→, y↑, z手前)
mesh3.position.set(-25,0,0);
//メッシュを表示できるようにシーンに追加する
scene.add(mesh3);

THREE.MeshPhongMaterial(左から4つ目)

フォンシェーディング材質(光源の影響を受ける光沢のある材質)
//球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//フォンシェーディング材質(光源の影響を受ける光沢のある材質)の作成
let mat4=new THREE.MeshPhongMaterial({color:0x6699FF, specular: 0x885555, shininess: 10, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
//球体ジオメトリと材質からメッシュの作成(ジオメトリ, 材質)
let mesh4=new THREE.Mesh(sphereGeo,mat4);
mesh4.receiveShadow=true;//影を表示する
mesh4.castShadow=true;//影を落とす設定
//メッシュの配置座標を設定(x→, y↑, z手前)
mesh4.position.set(25,0,0);
//メッシュを表示できるようにシーンに追加する
scene.add(mesh4);

THREE.MeshToonMaterial(左から5つ目)

トゥーン材質(トゥーン[アニメ]調の質感を実現できる材質)
//球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//■トゥーン(アニメ)風の質感を実現できる材質の作成
let mat5=new THREE.MeshToonMaterial({color:0x6699FF, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
//球体ジオメトリと材質からメッシュの作成(ジオメトリ, 材質)
let mesh5=new THREE.Mesh(sphereGeo,mat5);
//メッシュの配置座標を設定(x→, y↑, z手前)
mesh5.position.set(75,0,0);
mesh5.receiveShadow=true;//影を表示する
mesh5.castShadow=true;//影を落とす設定
//メッシュを表示できるようにシーンに追加する
scene.add(mesh5);

THREE.MeshStandardMaterial(左から6つ目)

標準的な物理ベースの材質
//球体ジオメトリの作成(半径[1], 水平分割数幅[32], 垂直分割数[16], 水平方向開始角度[0], 垂直方向開始角度[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);

//■標準的な物理ベースの材質の作成
//(metalness[0.0:非金属~さびた金属~1.0:金属],roughness[0.0:完全ミラー反射~1.0:完全拡散],emissive[放射光の色],emissiveIntensity[1.0 放射光の強度])
let mat6=new THREE.MeshStandardMaterial({
  color:0x6699FF, metalness:0.8, roughness:0.8, flatShading:false,
  emissive:0x6699FF ,emissiveIntensity:0.5,
  side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1
});
//球体ジオメトリと材質からメッシュの作成(ジオメトリ, 材質)
let mesh6=new THREE.Mesh(sphereGeo,mat6);
//メッシュの配置座標を設定(x→, y↑, z手前)
mesh6.position.set(125,0,0);
mesh6.receiveShadow=true;//影を表示する
mesh6.castShadow=true;//影を落とす設定
//メッシュを表示できるようにシーンに追加する
scene.add(mesh6);