I am facing a challenge with using a raycast to locate objects under the mouse cursor. The issue arises when the objects are not positioned at (0, 0, 0) as they cannot be detected by the raycast. Once I move the object to any other position, it no longer registers with the raycast.
Below is the custom class I have created for the object in question:
export default class CameraPole extends Group {
public pole: Mesh;
constructor() {
super();
this.name = 'CameraPole';
this.pole = new Mesh(
new CylinderGeometry(.25, .25, 5, 32),
new MeshPhongMaterial({color: 0xffffff})
);
// The object is not detected by the raycast if the position is set here
this.position.set(-34, 5, 17.8);
this.add(this.pole);
}
}
I instantiate and add it to the scene as follows:
const cameraPole = new CameraPole();
scene.add(cameraPole);
Here is the mousemove event where the raycast operation is performed:
document.addEventListener('mousemove', (e) => {
const ray = new Raycaster();
ray.setFromCamera({
x: (e.clientX / window.innerWidth) * 2 - 1,
y: (e.clientY / window.innerHeight) * 2 - 1
}, camera);
console.log(ray.intersectObject(cameraPole, true));
});
Edit: I attempted setting the position to (0,0,0) using this.position.set(0, 0, 0); to test if the .set function was causing the issue. However, the object still did not register with the raycast.
I then considered whether the object was moving while the collision box remained static. Upon setting the position to this.position.set(-34, 5, 17.8);, the object was not detected when the mouse hovered over the origin point where it would be located if at (0,0,0).
Edit 2: I explored using updateMatrix and updateMatrixWorld, but none of the combinations yielded any results.
this.position.set(-34, 5, 17.8);
this.updateMatrixWorld();
this.updateMatrix();
this.pole.updateMatrixWorld();
this.pole.updateMatrix();