My latest development involves a raycaster that enables me to select objects within the scene using my mouse. The process is initiated like this:
this.raycaster = new THREE.Raycaster()
// then in onMouseDown event
this.raycaster.setFromCamera(this.mouse, this.camera)
let intersects = this.raycaster.intersectObjects(this.scene.children)
Everything functions correctly when I move the camera horizontally and rotate it around its axis. However, issues arise when I tilt the camera vertically. In such cases, the raycaster seems to intersect the object at a location different from where it appears on the screen. When looking above the object, the intersection point is also higher than the rendered position, while looking below results in an intersection point lower than expected.
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 attempted to eliminate all transformations except for the vertical pitch, but the issue persisted. My suspicion is that the problem lies within the behavior of the raycaster rather than with the objects themselves, as it would be illogical for objects to render one way yet intersect differently.
Where could I have gone wrong? Could it be that the raycaster fails to cast from the camera's original position post-rotation?