Three.js Fog(フォグ)

今回は、Three.jsの「Fog(フォグ)」についてまとめます。

「フォグ」というのは、遠くに行くほど物体が白く霞んでいく処理のことです。
これを使いますと、リアルな情景を表現できたり、遠くの景色をぼかすことができます。
(※こちらのサイトに詳しく書かれています。フォグ）

Three.jsのフォグには「Fog」と「FogExp2」の２種類あります。

違いを簡単にまとめますと、

• ①Fog・・・効果の出始めと終わりを明確に指定できる。制御が簡単。
• ②FogExp2・・・現実に近い効果ができる。制御が難しい。

「Fog」と「FogExp2」のコンストラクタはこれです。

//①Fog
Fog( color, near, far);

//②FogExp2
FogExp2( color, density);

①Fog

• color・・・色（16進数）,距離が離れるに従って物体の色がここで指定した色に近づいていきます。
• near・・・開始距離,ここで指定した距離から効果が出てきます。
• far ・・・終了距離,ここで指定した距離で完全にcolorの色になります。

②FogExp2

• color・・・色（16進数）,距離0から指数的にcolorで指定した色で変化していきます。
• density・・・フォグの濃さです。

「Fog」と「FogExp2」どちらも、距離が離れるに従って物体の色がcolorで指定した色に近付いていきます。

実際のソースコードです。
①Fogの場合

//color:0x990000, near:1000,far:2000
  scene.fog = new THREE.Fog(0x990000, 1000,2000);

②FogExp2の場合

//color:0x990000,density:0.00035
  scene.fog = new THREE.FogExp2(0x990000, 0.00035);

この１行を書くだけで追加できます。
sceneは、シーンオブジェクトです。

では、実際にフォグを使って実行した写真がコチラです。

フォグなしで、実行した写真がこちらです。

Fogを使ったものがコチラです。（color:0x990000, near:1000,far:2000）

FogExp2を使ったものがコチラです。（color:0x990000,density:0.00035）

１行書くだけで、フォグを追加できるというのは、便利ですね（笑）

---

これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました！