I am trying to implement dragging and dropping an element to the mouse position by synchronizing THREE.js space with the canvas size, where the coordinates {0,0} are located at the center of the screen. If my element has a width of 500px, dropping it at a mouse coordinate x = 500 should translate to the object's x coordinate being x = 250. Currently, I am using a PerspectiveCamera for this functionality.
To achieve this, I referred to a tutorial on understanding scale and the perspective camera and calculated the field of view (fov) based on the z position of the camera. The goal was to have the fov boundaries intersect the boundaries of the green line, which represents the canvas width in my case.
Here is the code snippet I have developed so far to calculate the fov based on the z position of the camera (employing Pythagorean theorem).
calculateFOV(z:number){
const b = z;
const a = this.width / 2;
const c = Math.sqrt((a**2) + (b**2));
const cosa = a / c;
let angle = (Math.acos(cosa) * (180 / Math.PI));
let resAngle = 180 - 90 - angle
return (resAngle * 2);
}
...
const zPosition = 40;
const fov = this.calculateFOV(zPosition);
this.camera = new THREE.PerspectiveCamera( fov, this.width / this.height, 10, zPosition);
However, the implementation is not functioning as expected. Any assistance or further details required would be greatly appreciated.