I created a raycaster that allows me to pick an object from the scene with my mouse like such:
this.raycaster = new THREE.Raycaster()
// then in onMouseDown event
this.raycaster.setFromCamera(this.mouse, this.camera)
let intersects = this.raycaster.intersectObjects(this.scene.children)
It works as expected when I translate the camera and when I yaw the camera, however, once I pitch the camera, the raycaster intersects the object away from where the object is rendered on screen. If I look above the object, the raycaster intersects the object above where it is rendered. If I look below the object, the raycaster intersects the object below where it is rendered.
this.yaw = new THREE.Object3D()
this.pitch = new THREE.Object3D()
this.camera = new THREE.PerspectiveCamera(70, this.width / this.height, 0.01, 50)
this.yaw.add(this.pitch.add(this.camera))
this.scene = new THREE.Scene().add(this.yaw)
// then in onMouseMove event
if (this.state === this.STATE.PAN) {
this.yaw.translateX(-this.mouseDelta.x)
this.yaw.translateZ(-this.mouseDelta.y)
}
if (this.state === this.STATE.ROTATE) {
this.yaw.rotation.y -= this.mouseDelta.x
this.pitch.rotation.x -= this.mouseDelta.y
}
I tried disabling all transformations except the pitch and the problem still persists. I think the problem may be with the raycaster and not the objects themselves, as it wouldn't make sense for the objects to render in one location but be intersected in another.
What am I doing wrong? Is the raycaster maybe not casting from the camera's origin after rotating?
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)