typescript - 如何“居中” FirstPersonControls？

Question

我是 3D 的初学者。我想使用 FirstPersonControls，但似乎基于“中心”的“中心”位于浏览器的左上角。

这很难解释，所以这里是一个GIF：https ://gifyu.com/image/hu8x

如您所见，它可以在左右放置鼠标时旋转，但我不能上下旋转。

这是对应的实际代码（我使用的是 TypeScript）：

相机.ts

import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls'

var camera: new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )

/* Positions are for testing */
camera.position.z = 400
camera.position.y = -900
camera.rotation.x = -200

var controls = new FirstPersonControls(camera, Renderer.domElement)

export { camera as Camera, controls as Controls }

main.ts

import { Camera, Controls } from './Camera'
...

let clock = new THREE.Clock()
clock.start()

...

function animate() {
  requestAnimationFrame(animate)
  Controls.update(clock.getDelta())
  render()
}

// Sets up resize, append to container..
setup()
// Generates the cubes..
App.run()
// Animate function
animate()

我试图混合我找到的许多新旧示例，但我仍然无法让它工作..

这里有什么我不明白的吗？

解释表示赞赏！

编辑：我已经尝试了一些东西，看起来我没有使用 PointerLock 。尝试了一些东西，但没有任何东西可以正常工作！有人有我可以在 Electron 上试用的例子吗？

标签： typescriptthree.jselectroncontrols