Hi,
Having the following two pieces of code, I’d expect the raycaster point to be the same as mouse client point in scene, but for some reason it isn’t.
let vec = new THREE.Vector3();
let pos = new THREE.Vector3();
vec.set(( event.clientX / window.innerWidth ) * 2 - 1,- ( event.clientY / window.innerHeight ) * 2 + 1,0.5 );
vec.unproject( context.camera );
vec.sub( context.camera.position ).normalize();
let distance = - context.camera.position.z / vec.z;
pos.copy( context.camera.position ).add( vec.multiplyScalar( distance ) );
console.log(`point in scene: ${pos.x},${pos.y}`)
result: 12.312808298078027,138.93123571655028
context.mouse.x = (event.clientX / context.domElement.clientWidth) * 2 - 1;
context.mouse.y = -(event.clientY / context.domElement.clientHeight) * 2 + 1;
context.raycaster.setFromCamera(context.mouse, context.camera);
const clothRoot = context.scene.getObjectByName(context.sceneName);
let intersects = context.raycaster.intersectObjects(clothRoot.children, true);
if (intersects.length) {
console.log(`raycaster: ${intersects[0].point.x},${intersects[0].point.y}`)
}
result: 11.935445926766405,137.79472716697592
this code is located in my mousemove event
I am trying to rotate an image inside a mesh with the mouse
and calculate the angle ( anchor in the top left corner)
Thank you