Hi everyone!
I am learning and analyzing examples of three.js site. Im looking at this (three.js examples) example. The red box appears with function named “onPointerMove”, and the cube places not in the middle of cursore. Why is that?
I added blue cubу for comparison, and it’s location is really in the middle
Is it true, that real coordinates of raycaster’s intersection is higher and to the right of the end of cursor’s arrow?
perhaps your canvas has some padding that isn’t being taken into account when setting up the raycaster.
(its not just offset by some amount. it is correct when set up correctly. i.e. the centerpoint of the box should be at the tip of the arrow cursor.)
it is not my code, it is threejs’example, i pointed earlier. Code from site with commented 140 row
if to be talking about canvas padding, there is no canvas initially, we create it with
appendChild(render.domElement) … 
renderer.domElement IS the canvas. By default, css pads the canvas in the window, so if you’re computing raycaster mouse position off of 0 to window.innerWidth/Height you’ll have an offset…
you may need renderer.domElement.getClientRect in there..
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseMove(event) {
const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
// Example: intersect with scene objects
const intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
console.log('Hit:', intersects[0].object);
}
}
window.addEventListener('mousemove', onMouseMove, false);
(from gpt^)
If it’s not that.. then I’m not sure what it is.
