I’m using ThreeJS with MindAR, and I’m trying to put an object in the place where I clicked with 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 also other codes related to adding this object to the group of anchor (AR term), etc.

The result is shown below. In both pictures, I’m clicking on the very bottom of the pizza dough.

when you look at the object from top view, it places the topping (object) at the exact location of mouse click:

But when you look at it from angle, it places the topping with some offset: