小编Gib*_*cia的帖子

在Three.js中倾斜摄像机时,Raycaster会移动对象相交

我创建了一个光线投射器,使我可以使用鼠标从场景中拾取一个对象,如下所示:

this.raycaster = new THREE.Raycaster()

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

当我平移相机和偏航相机时,它可以按预期工作,但是,一旦我倾斜相机,光线投射器就会将对象与远离屏幕上渲染对象的位置相交。如果我从对象上方看,光线投射器将在渲染对象的上方与对象相交。如果我在对象下面看,光线投射器将在渲染对象下与该对象相交。

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
}
Run Code Online (Sandbox Code Playgroud)

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

我究竟做错了什么?旋转后,光线投射器是否可能不从相机的原点投射?

javascript three.js

5
推荐指数
1
解决办法
176
查看次数

标签 统计

javascript ×1

three.js ×1