javascript - 如何在 JavaScript 中使用 Three.js 构建 FPS 控件？

Question

目前我正在尝试使用 Three.js 构建一个小型 3D FPS 游戏。但我需要一些控制方面的帮助。

为了解释我想要做什么，这个视频将准确地向您展示我想要的结果(只是控件，而不是世界): https://www.youtube.com/watch?v=WDDJDTeTBc4

我找不到任何有关此控件的开源示例或教程，因此我在这里寻求一些帮助。我到底需要做什么？

我考虑过类似以下的事情，但也许这不是最好的(快速)方法:- 指针锁定鼠标(如何更改相机“旋转”？)，移动鼠标=观察周围- 按键控制(W、A、S、D 移动)- 相机后面的 Angular 色(只是一个简单的球体几何形状)

这是正确的方法吗？像《我的世界》中一样进行控制， Angular 色位于相机后面。有任何想法吗？我很高兴每一条对我有帮助的评论。

Answer 1

如果您想使用相机移动对象(您的 Angular 色)，只需将对象添加到相机或将相机添加到您的对象即可...

所以类似:

var character = ...

var camera.add(character);

var controls = new THREE.PointerLockControls(camera);

这尚未经过测试，但您已经明白了。

您可以看到the source code of your example了解其他详细信息。