Three.jsの６種のマテリアル（材質）について(Three.js[r145]を使用)
マウス左ドラッグで回転、右ドラッグで移動、ホイールで拡大縮小できます。
THREE.MeshBasicMaterial（左から１つ目）
ベーシック材質（光源の影響を受けないベタ塗材質）
//球体ジオメトリの作成(半径[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（左から２つ目）
ノーマル材質（[色の指定無効]光源の影響を受けない奥行き感を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（左から３つ目）
ランバートシェーディング材質（光源の影響を受ける光沢の無い材質）
//球体ジオメトリの作成(半径[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（左から４つ目）
フォンシェーディング材質（光源の影響を受ける光沢のある材質）
//球体ジオメトリの作成(半径[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（左から５つ目）
トゥーン材質（トゥーン［アニメ］調の質感を実現できる材質）
//球体ジオメトリの作成(半径[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（左から６つ目）
標準的な物理ベースの材質
//球体ジオメトリの作成(半径[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);
