easy-three
Eng日本語

postprocessing.bloom

postprocessing.bloom(props : Object) : Object

props - 設定オブジェクト。
  • exposure (Number) : 曝光度 (デフォルト : 1)。
  • background (Color) : 背景色 (デフォルト : 0x000000)。
  • threshold (Number) : 閾値 (デフォルト : 0)。
  • strength (Number) : ブルームの強さ (デフォルト : 1)。
  • radius (Number) : ブラー半径 (デフォルト : 0.5)。

Bloomエフェクトを追加します。
曝光度、背景色、閾値、強さ、半径を設定できます。
戻り値は、bloom のみのオブジェクトです。
戻り値の bloom は、animate の中で呼び出すことでエフェクトを適用します。
animate の第2引数を false にしてください。

Bloomエフェクトは、画面の全ての明るい部分をぼかして輝かせるエフェクトです。
そのため、背景画像に対しても効果があります。
もし個別のオブジェクトにだけBloomエフェクトを適用したい場合は、selectedBloomを使用してください。

コードの例

ブルームエフェクト

const { camera, create, animate, postprocessing } = init()

camera.position.set(0, 0, 2)

create.ambientLight()
create.directionalLight()

const cube = create.cube()

const { bloom } = postprocessing.bloom()

animate(({ delta }) => {
  cube.rotation.x += delta
  cube.rotation.y += delta
  bloom()
}, false)

時間とともに輝度を変更する

const { camera, create, animate, postprocessing } = init()

camera.position.set(0, 0, 2)

create.ambientLight()
create.directionalLight()

const cube = create.cube()

const { bloom } = postprocessing.bloom()

animate(({ delta, time }) => {
  cube.rotation.x += delta
  cube.rotation.y += delta
  bloom({
    strength: 2 * Math.abs(Math.sin(time))
  })
}, false)