Raycaster is off center or scaled based on window size

[maximus123123]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
OnClick events and the raycaster will give the wrong scaling of the model depending on the size of the screen resulting in missing the target when it should hit or hitting the target when it should miss.
If the current behavior is a bug, please provide the steps to reproduce.
add a mouse down event in the basic example then click next the torus knot or just above/below it

	function mousedown( event ) {
		var raycaster = new THREE.Raycaster();
		var mouse = new THREE.Vector2();
		mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
		mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1
		event.stopPropagation(); 
		raycaster.setFromCamera( mouse, camera );
		var intersects =raycaster.intersectObjects([mesh],true);
		console.log(intersects);
		if (intersects.length>0) {
			alert("clicked");
		}
	}
	window.addEventListener( 'mousedown', mousedown, false );

Please mention other relevant information such as the browser version, Operating System and Device Name
Chrome on PC and Phone
What is the expected behavior?
Accurate mousedown events causing the correct
If this is a feature request, what is motivation or use case for changing the behavior?

[kalwalt]

Hi @maximus123123 , thank you! Does it happens also with the other examples?

[maximus123123]

Hi @maximus123123 , thank you! Does it happens also with the other examples?

I believe so. Heres another person with the same issue: jeromeetienne/AR.js#584

The issue, I think,
It's either the camera:
The camera view perhaps is different as you need to change the example's camera from new THREE.Camera to THREE.PerspectiveCamera.

Or the canvas size isn't updating correctly the size correctly for the calculation thus giving the wrong calculation. I have tried using vector3 as well but it didn't help

[kalwalt]

Thank you @maximus123123, we also need to know which version of Ar.js are you using, at the moment we have ar.js and ar-nft.js because they use different version of jsartoolkit5: the first the oldest the last the newest version with NFT. Maybe this bug occur the oldest but not the newest version? Please tell me exactly you setup. 🙂

[maximus123123]

It occurs in the old and new version.
Both "basic" setups make the issue occur and the issue has existed for a while.
Resizing the window will make it better then worse again depending on how far you resize.

I am currently using the new basic version:
https://github.com/AR-js-org/AR.js/blob/master/three.js/examples/basic.html

[kalwalt]

Ok thank you so much! We will see how to fix this, i have not a clear idea how to solve now.

[maximus123123]

Are you able to reproduce the error?

[kalwalt]

Are you able to reproduce the error?

i will try later if i have time. 😄

[kalwalt]

@maximus123123 with the basic example i got this error:

three.min.js:869 THREE.Raycaster: Unsupported camera type.
setFromCamera @ three.min.js:869
mousedown @ basic.html:151
basic.html:153 []

i tested only on Desktop (Ubuntu 18.04.03)

[kalwalt]

I will look deeper into it when i have time, maybe it's not a bug, probably needs the right setup. 😄

[maximus123123]

Right, you need to change THREE.Camera to THREE.PerspectiveCamera

[XiaNi]

@maximus123123 , try to replace this part:

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1

with this:

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1
mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1

[Andraz89]

I am using ar.js with aframe and have similar problem. If I am not using embedded on the a-scene images and videos are distorted and clicks accurate but when I use embedded ratios of elements (images, video) are correct but clicks are off target big time.

[riggitynick]

Same issues here. The targets are off, and they're off in different ways depending on if its a mobile sized screen or a regular desktop/laptop.

Here's a link to my codepen with the issue: https://codepen.io/riggitynick/pen/MWaOOeb?editors=1010

There are 3D shapes, and when you click on them, they should vanish, the targets are off a bit(and in really strange ways-weather I open it on my phone or laptop).