Three.js Pointerlock控件沿y轴拍摄答案

【问题标题】：Three.js Pointerlockcontrols shooting along y-axisThree.js Pointerlock控件沿y轴拍摄
【发布时间】：2015-03-27 23:38:55
【问题描述】：

目前我正在开发一个带有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 轴（垂直于任何方向）拍摄？目前子弹正沿着一条直线前进。

提前感谢您的帮助。

【问题讨论】：

标签： javascript three.js pointerlock

【解决方案1】：

如果你使用PointerLockControls，并且你想设置一个raycaster，你可以使用这个模式：

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

【讨论】：

感谢您的帮助韦斯特兰利。我无法让您的工作方法，可能是因为控件是孩子的孩子并且没有更新（我认为）。我还是个菜鸟，我知道我有时没有以正确的方式实现事情。我想出了一个可行的解决方法。我会将其发布为答案。
你这样做了吗：scene.add( controls.getObject() ); ?
现在我这样做controls = new THREE.PointerLockControls(this.game.camera.object); new_user.root.add(controls.getObject());那么你的建议还需要吗？
如果你想做一些不同于我建议的事情，那是你的事。但如果你选择这样做，我很难帮助你。
我不是那个意思，感谢您的帮助 :) 如果控件已经像 new_user.root.add 这样添加，我是否还需要将 controls.getObject() 添加到场景中(controls.getObject()) ?

【解决方案2】：

对此进行了更多调查，我终于自己想出了一个解决方法。这可能不是做到这一点的完美方式，但它确实有效。

它现在是这样工作的：我得到了基本的网格旋转并应用了欧拉，然后我添加了俯仰旋转。通过这种方式，我将水平和垂直旋转传递给光线投射器。

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);

仍然欢迎大家对此发表评论或提出更优雅的解决方案。

【讨论】：