easy-three
Eng日本語

postprocessing.selectedBloom

postprocessing.selectedBloom(props : Object) : Object

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

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

コードの例

選択的ブルームエフェクト

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

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

create.ambientLight()
create.directionalLight()

const cube1 = create.cube({
  size: 0.5,
  position: [-0.7, 0, 0]
})
const cube2 = create.cube({
  size: 0.5,
  position: [0.7, 0, 0]
})
const sphere = create.sphere({
  size: 0.3,
  position: [0, 0.8, 0]
})

// use selectedBloom
const { selectedBloom, addSelectedBloom } = postprocessing.selectedBloom()
// add Object3D to selectedBloom
addSelectedBloom(cube1, sphere)

animate(({ delta }) => {
  cube1.rotation.x += delta
  cube1.rotation.y += delta
  cube2.rotation.x += delta
  cube2.rotation.y += delta

  // render
  selectedBloom()
}, false)

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

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

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

create.ambientLight()
create.directionalLight()

const cube1 = create.cube({
  size: 0.5,
  position: [-0.7, 0, 0]
})
const cube2 = create.cube({
  size: 0.5,
  position: [0.7, 0, 0]
})
const sphere = create.sphere({
  size: 0.3,
  position: [0, 0.8, 0]
})

const { selectedBloom, addSelectedBloom } = postprocessing.selectedBloom()
addSelectedBloom(cube1, sphere)

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