在three.js中倾斜摄影机时，光线投影器会置换对象交点

Question

我创建了一个光线投射器，允许我用鼠标从场景中拾取一个对象，如下所示：

this.raycaster = new THREE.Raycaster()

// then in onMouseDown event
this.raycaster.setFromCamera(this.mouse, this.camera)
let intersects = this.raycaster.intersectObjects(this.scene.children)

当我平移相机和偏航相机时，它会按预期工作，但是，一旦我对相机进行倾斜，光线投射器就会与对象相交，远离屏幕上渲染对象的位置。如果我看对象的上方，光线投射器与渲染的上方的对象相交。如果我观察对象的下方，光线投射器会在渲染对象的下方与其相交。

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
}

我试着禁用除音调之外的所有转换，但问题仍然存在。我认为问题可能出在光线投射器上，而不是对象本身，因为对象在一个位置渲染而在另一个位置相交是没有意义的。

我做错了什么？是不是光线投射器在旋转后没有从相机的原点投射？

Answer 1

当我将相机指向对象上方时，光线投射器正在检测交叉点，因为mouse.y坐标没有正确标准化。

// Incorrect
this.mouse.y = (e.clientY / window.innerHeight) * 2 - 1
// Correct
this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1

通过排除否定，我的mouse.y位置在场景中得到了有效的镜像。因此，如果我单击场景最顶部的点，光线投射器将被镜像以检测场景最底部的交叉点。

当没有投球时，这不是一个问题，因为我是在与相机水平放置的盒子几何上进行测试的。因此，由于几何体是对称的，因此在光线投射器上执行的任何镜像仍将检测到碰撞。