Three.js 指针锁定控制沿 y 轴拍摄

Question

目前我正在用 three.js 和 pointerlockcontrols 开发 FPS。

使用下面的代码我可以向任何水平方向拍摄：

var direction = new THREE.Vector3( 0, 0, -1 );
var rotation = new THREE.Euler( 0, 0, 0, "XYZ" );
var cameraDirection = new THREE.Vector3(this.game.usermodel.root.children[0].position.x, this.game.usermodel.root.children[0].rotation._x, this.game.usermodel.root.children[0].position.z);
cameraDirection.copy( direction ).applyEuler( this.game.user.rotation );

var raycaster = new THREE.Raycaster(this.game.usermodel.root.children[0].position, cameraDirection);

但我的代码没有考虑 y 轴。下面的行包含俯仰旋转：

this.game.usermodel.root.children[0].rotation._x

如何应用此值以便我也可以沿 y 轴（垂直向任何方向）拍摄？目前子弹沿着直线前进。

在此先感谢您的帮助。

Answer 1

如果您正在使用 PointerLockControls 并且想要设置光线投射器，则可以使用此模式：

var direction = new THREE.Vector3();
var raycaster = new THREE.Raycaster(); // create once and reuse
...

controls.getDirection( direction );
raycater.set( controls.getObject().position, direction );

如果您正在使用 PointerLockControls，请勿直接设置相机位置或旋转。

three.js r.71

Answer 2

经过进一步调查，我终于想出了一个解决方法。这可能不是执行此操作的完美方法，但它确实有效。

它现在是这样工作的：我正在获取基本的网格旋转并应用欧拉，然后添加俯仰旋转。通过这种方式，我将水平和垂直旋转传递给 raycaster。

var direction = new THREE.Vector3( 0, 0, -1 );

direction.copy( direction ).applyEuler( this.game.user.rotation );
direction.y = this.game.usermodel.root.children[0].rotation._x;

var raycaster = new THREE.Raycaster(this.game.usermodel.root.children[0].position, direction);

还是欢迎大家对此发表评论或者提出更优雅的解决方案

Three.js 指针锁定控制沿 y 轴拍摄

Three.js Pointerlockcontrols shooting along y-axis

javascript

three.js

pointerlock