easy-three
Eng日本語

postprocessing.bokeh

postprocessing.bokeh(delta : Number, props : Object) : Object

delta - 経過時間。
props - 設定オブジェクト。
  • focus (Number) : フォーカス距離 (デフォルト : 1)。
  • aperture (Number) : 絞り値 (デフォルト : 0.01)。
  • maxblur (Number) : 最大ブラー (デフォルト : 0.01)。
ぼかしエフェクトを追加します。
戻り値は、bokeh のみのオブジェクトです。
戻り値の bokeh は、animate の中で呼び出すことでエフェクトを適用します。
animate の第2引数を false にしてください。

コードの例

ぼかしエフェクト

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

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

create.ambientLight();
create.directionalLight();
scene.background = color(0xffffff);

const cubes = [];
for (let i = 0; i < 5; i++) {
  cubes.push(
    create.cube({
      size: 0.5,
      position: [i - 2, 0, 0.5 * (i - 2)],
    })
  );
}

const { bokeh } = postprocessing.bokeh({
  focus: camera.position.distanceTo(cubes[2].position),
  aperture: 0.04,
  maxblur: 0.03,
});

animate(({ delta }) => {
  bokeh(delta);
  cubes.forEach((cube) => {
    cube.rotation.x += delta;
    cube.rotation.y += delta;
  })
}, false);

焦点の移動

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

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

create.ambientLight();
create.directionalLight();
scene.background = color(0xffffff);

const cubes = [];
for (let i = 0; i < 5; i++) {
  cubes.push(
    create.cube({
      size: 0.5,
      position: [i - 2, 0, 0.5 * (i - 2)],
    })
  );
}

const { bokeh } = postprocessing.bokeh();

animate(({ delta, time }) => {
  bokeh(delta, {
    focus:
      camera.position.distanceTo(cubes[2].position) + 2 * Math.sin(time),
    aperture: 0.01,
    maxblur: 0.03,
  });
}, false);