code.js
// ...
this.width = 2000
this.height = 2000
// ...
this.camera = new THREE.OrthographicCamera(this.width / -2, this.width / 2, this.height / 2, this.height / -2, 1, 1000 );
this.camera.position.z = 100;
this.camera.position.x = 600;
this.camera.position.y = -900;
this.raycaster = new THREE.Raycaster();
// ...
this.renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
// ...
this.mouse.x = ( event.clientX / this.renderer.domElement.width) * 2 - 1;
this.mouse.y = - ( event.clientY / this.renderer.domElement.height ) * 2 + 1;
// ...
this.raycaster.setFromCamera( this.mouse, this.camera );
this.intersects = this.raycaster.intersectObjects( this.allElements );
if (this.intersects.length == 0) {
// TODO: how to obtain real world position if no mesh is on cursor?
JavaScript returns real pixel position, while this.mouse returns local position in the range of -1 to 1. How can I obtain the real world position (like x: 250, y: 250) and not the normalized coordinates if there is no mesh on the cursor using camera offset. I have tried using: mouse.x - cameraPos.x, mouse.y + cameraPos.y and the position returned is incorrect.
p.s. Apologies for the poor English.