After implementing the Raycaster from Three js to detect collision following a MouseMove event, I encountered an error:
Cannot read properties of undefined (reading 'camera')
Here is the code snippet causing the issue:
bindIFrameMousemove(iframe){
iframe.contentWindow.addEventListener('mousemove', function(event) {
const mouse = new Vector2();
var clRect = iframe.getBoundingClientRect();
var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});
const clientX = (window.TouchEvent && event instanceof TouchEvent) ?
event.changedTouches[0].clientX : event.clientX;
const clientY = (window.TouchEvent && event instanceof TouchEvent) ?
event.changedTouches[0].clientY : event.clientY;
const x = ( clientX / window.innerWidth ) * 2 - 1;
const y = - ( clientY / window.innerHeight ) * 2 + 1;
iframe.dispatchEvent(evt);
event.preventDefault();
mouse.x= ( clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( clientY / window.innerHeight ) * 2 + 1;
Raycaster.setFromCamera( mouse, this.context.camera );
const intersects = Raycaster.getIntersectObjects(this.scene.children ,true );
console.log(intersects)
if (intersects.length > 0) {
console.log("intersects !!");
}
});
};