I am working with ThreeJS in conjunction with MindAR, attempting to position an object where I click on the screen using my mouse.
const mousePositionX = (e.clientX / window.innerWidth) * 2 - 1;
const mousePositionY = -(e.clientY / window.innerHeight) * 2 + 1;
const mouse = new THREE.Vector2(mousePositionX, mousePositionY);
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length === 0) return;
topping = obj1.clone();
topping.position.set(mouse.x, mouse.y, 0.25);
There are additional sections of code that involve adding this object to the anchor group (an AR term), etc.
The outcome is displayed below. In the two images provided, I am clicking at the very bottom of the pizza dough.
Viewing the object from a top-down perspective, it correctly positions the topping at the precise location of the mouse click: https://i.sstatic.net/pBsTj7vf.png
However, when viewed at an angle, the topping appears slightly offset: https://i.sstatic.net/f5ujVi86.png