javascript - How to click objects behind a fog of PointsMaterial three js

Question

I'd like to know if there is some property to make objects behind a fog of multiple Points clickable, that means, when the fog appears I could click the objects that are in (or behind) the fog.

I have the following code to create the fog and animate it:

const loadFogEffect = () => {
  const geometry = new THREE.Geometry();
  const particleCount = 50;
  const texture = new THREE.TextureLoader().load('fog.png');
  let material = new THREE.PointsMaterial({
    size: 5,
    map: texture,
    // blending: THREE.AdditiveBlending,
    depthWrite: false,
    transparent: true,
    sizeAttenuation: true,
    color: 'rgb(30,30,30)',
  });

  const range = 1;
  for (let i = 0; i < particleCount; i++) {
    const x = THREE.Math.randInt(-range, range);
    const y = THREE.Math.randInt(-range, range);
    const z = THREE.Math.randInt(-range, range);
    const point = new THREE.Vector3(x, y, z);
    point.velocityX = THREE.Math.randFloat(0.008, -0.035);
    point.velocityY = THREE.Math.randFloat(0.008, -0.035);
    point.velocityZ = THREE.Math.randFloat(0.008, -0.035);
    geometry.vertices.push(point);
  }

  points = new THREE.Points(geometry, material);
  points.layers.set(noReflectionLayer);
  scene.add(points);
};

const animateFog = () => {
  points.geometry.vertices.forEach((v) => {
    v.y = v.y + v.velocityY;
    v.z = v.z + v.velocityZ;
    // v.x = v.x - v.velocityX;

    if (v.z >= 2 && v.y === 0) {
      v.x = THREE.Math.randInt(0.001, -0.001);
      v.y = THREE.Math.randInt(0.001, -0.001);
      v.z = 2;
    }
  });

  points.geometry.verticesNeedUpdate = true;
};

Thanks for your help!

Answer 1

I got this with this for anyones interest:

const fogLayer = 2;
...
camera.layers.enable(fogLayer);

and then setting the points in the new layer before adding them to the scene:

points.layers.set(fogLayer);

So that the points are invisible for the raycaster.