Three.jsMeshBasicMaterialマテリアルとMeshPhongMaterialマテリアル
Three Js Meshbasicmaterial Material
この材料は、非物理ベースのBlinn-Phongモデルを使用して、反射係数を計算します。 THREE.MeshPhongMaterialを使用すると、光沢のある素材を作成できます。 MeshLambertMaterialで使用されるランバートモデルとは異なり、ハイライト（漆塗りの木材など）で光沢のある表面をシミュレートできます。
1.MeshPhongMaterial属性
| 属性名 | 説明 | 備考 |
|---|---|---|
| 色 | マテリアルの色。デフォルトは白です。 | 一般的に使用される |
| 光沢 | 滑らかさ、ハイライト部分の明るさを指定します。デフォルト値は30です。 | 一般的に使用される |
| 鏡面反射 | マテリアルのハイライト部分の色。デフォルト値は0x111111ダークグレーです。色を同じ色に設定すると、金属のような素材になります。プラスチックのように見えるように灰色に設定します | |
| アンビエント | これは、マテリアルの周囲色です。これは、前の章で説明した周囲光源と一緒に使用されます。この色は、周囲の光源によって提供される色で乗算されます。デフォルト値は白です | |
| 放出性 | これは、マテリアルによって放出される色です。それは実際には光源になりたくはありませんが、他の光の影響を受けない純粋な色です。デフォルト値は黒です。 | |
| 金属 | このプロパティがtrueに設定されている場合、Three.jsは、オブジェクトを金属のように見せるために、わずかに異なる方法でピクセルの色を計算します。この影響は非常に小さいことに注意してください | |
| 包み込む | このプロパティがtrueに設定されている場合、セミランバート照明技術が開始されます。これにより、光はより微妙に落ちます。グリッドに粗くて暗い領域がある場合、この属性を有効にすると、シャドウが柔らかくなり、より均等に分散されます。 | |
| wrapRGB | wrapAroundプロパティがtrueに設定されている場合、THREE.Vector3を使用して光の落下速度を制御できます。 |
2.MeshPhongMaterialの使用
const sphereGeometry = new THREE.SphereGeometry(50, 50, 50) const sphereMaterial = new THREE.MeshPhongMaterial({color: 0x836DED}) sphereMaterial.shininess = 100 sphere = new THREE.Mesh(sphereGeometry, sphereMaterial) sphere.castShadow = true scene.add(sphere)