Calculate bob vector to a floor in 3D WEBGL

Hi I try to visualize:
Object (Red Sphere) can be dragged with the mouse in relation to a listeners head (White Sphere).
And there is a floor (Grey rotated rectangle)

The white lines indicate the direct sound wave to the listeners head and one mirrored sound wave which would need to be a vector line like a bob from the red sphere to the floor. and from the floor to the listener.

I hacked something here so I have the code structure, But I have no clue how to get that vector line from the sphere as a bob to the floor and from the exact coordinate at the floor level which I would use to draw a line back to the listeners (white sphere) head.

Like in this picture. The white lines is what I have got and the green lines how it should be.

Here is my code:

let x = 0;
let y = 0;
let z = 0;

function setup() {
  createCanvas(1000, 1000, WEBGL);

function draw() {
  let xm = mouseX;
  let ym = mouseY;
  camera(-700, -400, height / 2 / tan(PI / 6), 0, 0, 0, 0, 1, 0);

  translate(x, y);
  rect(0, 0, width / 1.5);

  let xOb = xm - width / 2;
  let yOb = ym - height / 2;
  let zOb = 200;

  translate(xOb, yOb, zOb);
  directionalLight(250, 250, 250, 2000, 2000, -1);
  ambientMaterial(180, 0, 0);
  sphere(width / 40);


  // listener
  let xList = 0;
  let yList = -117;
  let zList = 230;
  translate(xList, yList, zList);
  sphere(width / 40);
  line(xList, yList, zList, xOb, yOb, zOb);

  //reflection bob to floor and it should end at the floor??
  let xbob = xOb - 00;
  let ybob = yOb + 280;
  let zbob = zOb + 100;
  line(xOb, yOb, zOb, xbob, ybob, zbob);

  //reflection floor to listener
  line(xbob, ybob, zbob, xList, yList, zList);

ah damn I thought it to complicate I am solving it right now and will post here

As far as I can see the ‘floor’ lies in the XY plane i…e. Z=0.

If that is true and the red sphere is at [x,y.z] then nearest position on the floor is [x,y,0]. Effectively you are projecting the red spheres position along the plane normal onto the plane surface.