Three.js:Fog(フォグ)を利用して、煙・霧を表現をする方法

こんにちはタクゾウです。
Three.js:Fog(フォグ)を利用して、煙・霧を表現をする方法について説明します。

Fog(フォグ)を利用して、煙・霧を表現したDEMO

実際に作ったものがこちらです。
ネット環境によってはモデルデータを表示するのに時間がかかるかもしれません。

参考 Three.js Fog

Fog(フォグ)について

フォグは、その名の通り「霧」を表す言葉で、シーン全体に霧が掛かったような効果を実現することができます。

three.jsでのフォグを使うための手順

  1. three.js ではシーンに対してフォグを適用する
  2. フォグには、開始位置、終了位置、そして色のパラメータを用いる
  3. シーンの fog プロパティに Fog インスタンスを設定する
  4. フォグが適用されるのはあくまでも 描画されるオブジェクトに対してのみ
  5. フォグの色を別の色に変えてみると、その効果がわかる
  6. 自然に見せるには背景色とフォグの色を揃えておくこと
注意
フォグの処理的には、オブジェクトのカラーを奥行きに合わせて変更しているだけなので、背景のリセットカラーと、フォグのカラーをそろえてあげる必要があります。

コード説明

フォグに対するパラメータ指定をする記述

色、開始位置、終了位置を指定します。処理を重くいないためにもなるべく、低い数値で実装するように心がけましょう。

javascript
//フォグに対するパラメータを指定
const SCENE_PARAM = {
  fogColor: 0xC9C9C9, // フォグの色
  fogNear: 1.0,       // フォグの掛かり始める距離
  fogFar: 20.0        // フォグが完全に掛かる距離
};

シーンの fog プロパティに Fog インスタンスを設定する

引数には、パラメータの値を入れてあげます。

javascript
//シーンのプロパティーに、THREE.Fogインスタンスを作成してあげる。
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(
  SCENE_PARAM.fogColor,
  SCENE_PARAM.fogNear,
  SCENE_PARAM.fogFar
);

まとめ

three.jsでは、比較的簡単にfogを指定することができますが、
オブジェクトの色を変えて霧がある様に見せてあげてるだけなので、
より、煙の様な演出をしたい場合は、パーティクルなどを使う必要があります。

WebGlを勉強している人の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Translate »