let orbitcam;

​

function setup() {

  renderer = createCanvas(600, 600, WEBGL);

  output = createDiv();

  orbitcam = createCamera();

  Object.assign(output.elt.style, {

    display: 'inline-grid',

    gridAutoFlow: 'column',

    gridTemplateRows: '1fr 1fr 1fr 1fr',

    justifyItems: 'end',

    gridGap: '0 0.5em'

  });

}

​

function draw() {

  background(255);

  orbitControl();

  scale(10);

  scale(1, -1, 1);

  push();

  noStroke();

  fill(234);

  translate(0,1,0);

  rotateX(PI/2);

  plane(2);

  pop();

  line(-1,-1,-1, -1,-1,+1);

  // line(-1,+1,-1, -1,+1,+1);

  line(+1,-1,-1, +1,-1,+1);

  // line(+1,+1,-1, +1,+1,+1);

  line(-1,-1,-1, -1,+1,-1);

  line(-1,-1,+1, -1,+1,+1);

  line(+1,-1,-1, +1,+1,-1);

  line(+1,-1,+1, +1,+1,+1);

  line(-1,-1,-1, +1,-1,-1);

  line(-1,-1,+1, +1,-1,+1);

  // line(-1,+1,-1, +1,+1,-1);

  // line(-1,+1,+1, +1,+1,+1);

  let p = createVector(2*mouseX/width - 1,1 - 2*mouseY/height, -0.5);

  // point(p);

  let M = renderer.uModelMatrix.copy();

  // let M = p5.Matrix.identity();

  M.mult(orbitcam.cameraMatrix);

  M.mult(orbitcam.projMatrix);

  M.invert(M);

  let v = M.multiplyAndNormalizePoint(p);

  point(v);

​

  // output.elt.innerHTML = `${[...M.mat4].map(x => `<div>${x.toFixed(3)}</div>`).join('')}`;

  output.elt.innerHTML = `${[v.x,v.y,v.z].map(x => `<div>${x.toFixed(3)}</div>`).join('')}`;

}