トップへ(mam-mam.net/)

フォグ(fog,霧)機能で遠くをぼかす ~Webサイトで3Dコンテンツ(Three.js)デザイン

検索:

Three.jsでフォグ(fog,霧)機能を使う(Three.js[r145]を使用)

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

ソース

フォグ(霧)は視点から遠ざかるほど、指定色にする機能です。
フォグを使うには、scene.fogにTHREE.Fogのインスタンスを与えるだけになります。

    //■シーンを作成
    scene = new THREE.Scene();
    //フォグを設定 new THREE.Fog(色, 視点からの開始距離, 視点からの終点距離);
    scene.fog = new THREE.Fog(0xffffff, 260, 400);