1

I'm trying to implement a Depth of Field (DOF) effect in a Three.js scene that includes a point cloud rendered using THREE.Points. I've based my implementation on these official examples:

These examples work well for standard 3D meshes like spheres or cubes. However, when I apply the DOF effect to a point cloud, the points remain uniformly blurry, regardless of their depth.

I've tried tweaking the focus, aperture, and maxblur values, but they don't seem to have any visible effect on the point cloud.

const bokehPass = new BokehPass(
  scene,
  camera,
  {
    focus: 1.0,
    aperture: 0.025,
    maxblur: 0.01,
  }
);

I also tested the setup by adding a regular 3D sphere at the same position as the point cloud. The DOF effect works correctly on the sphere, but the point cloud remains unaffected.

How can I get DOF to work correctly?

2
  • This is not trivial problem... especially, when you expect it should works correctly.... Any chance for working example? Commented Sep 30 at 5:47
  • Photographer and three.js user here. I checked the first example you linked and it uses a focus: 500, an aperture of 5 (which is quite a reasonable aperture for modern day medium to high end lenses, especially if focus: 500 means 500mm) and a maxblur: 0.01 aswell. If the focus actually represents mm, your lens would be just a few sheets of paper long, and extremely wide. Can you try how something like 20-500mm of focus and an aperture of somewhere between 1-10 looks like in your scene? If that doesn't help, a minimal scene setup where this issue is present would help Commented Sep 30 at 19:08

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.