Three.jsでScene背景にグラデーションを設定したい

Three.jsでアプリ開発とかしてます。

その時、こんな問題にぶつかりました。

  • Sceneの背景色は単色だったら簡単
  • でもグラデーションさせるには・・・?

ググっても中々出てこなくて困ります。

ただやっとその方法を見つけたので、
Scene背景色をグラデーションさせる方法を紹介。

単色は WebGLRenderersetClearColor で設定できるが...

Scene背景色に単色を設定する場合。

次のメソッドで簡単に設定できます。

▼ WebGLRenderer.setClearColor について

.setClearColor ( color : Color, alpha : Float ) : null
Sets the clear color and opacity.

引用元 : https://threejs.org/docs/#api/en/renderers/WebGLRenderer

▼ 背景を黒色にするコード例

上コードのように単純に renderer.setClearColor(0x000000, 1);  を呼び出すだけ。ちなみ第2引数にはアルファ(すなわち透過色)なんかも渡せます。

ただグラデーションは不可能。

そうするには少し工夫が必要です。

Scene背景をグラデーションさせる手順

その手順はこういう感じ

1.まず WebGLRenderer でalpha有効にする

まずはレンダラ―で透過色を有効に

▼ たとえばこのような初期化コード

このように alpha: true  とすればOK

その他の設定は構う必要なしです。

2.canvas要素をCSSでグラデーションさせる

次にcanvas要素自体をグラデーションさせます。

グラデーションさせるCSSは次の通り

▼ 白から灰色にグラデさせるCSS例

上コードのように background-image: radial-gradient(#ffffff, #888888);  とすれば放射状に #ffffff から #888888 にグラデーションします。

ちなみに線形なグラデーションをさせたいなら linear-gradient  を使えばOK。たとえば linear-gradient(#fff, #888);  とすれば左から右にグラデーションします。(参考記事 : https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

グラデーションの具体的コードと表示例

実際に書いてみたコードがコチラ

▼ Sceneにグラデーション背景を設定させる

▼ 実際の動作は次のCodePen参照

See the Pen
【Three.js】Scene背景色にグラデーションを設定
by ぴー助 (@pisuke-code)
on CodePen.

以上、Three.jsで背景グラデさせる方法でした。

もし問題点などあればコメントから指摘ください。

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください