FirstPersonControls 是 Three.js 中的一种控制器,允许用户以第一人称视角进行三维场景的浏览。使用这个控制器时,用户可以通过鼠标或键盘来控制视角,类似于第一人称射击游戏中的操作方式。
注意:在使用 FirstPersonControls 时当lookSpeed 为0.1 为旋转角度,movementSpeed为20 为移动速度,控制的是鼠标上下左右移动时的速度与角度,角度大速度小时会有移动延时,在测试API时发现鼠标移动到场景时使用 键盘 上下左右才会生效并且很灵敏
FirstPersonControls 有十三个属性三个方法
FirstPersonControls( object : Camera, domElement : HTMLDOMElement ) object: 被控制的摄像机。 domElement: 用于事件监听的HTML元素。(可选) 创建一个新的 FirstPersonControls 实例。
// 设置相机位置
camera.position.y = 2; // 抬高相机高度,以模拟人眼视角
// 添加一个立方体和地面来观察效果
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1, -5); // 将立方体放置在相机前方
scene.add(cube);
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x808080, side: THREE.DoubleSide });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = - Math.PI / 2; // 旋转使其成为地面
scene.add(ground);
// 设置 FirstPersonControls
const controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10; // 控制相机移动速度
controls.lookSpeed = 0.01; // 控制鼠标视角变化速度
controls.constrainVertical = true; // 启用垂直角度限制
controls.verticalMin = Math.PI / 4; // 向下旋转最小角度
controls.verticalMax = Math.PI / 2; // 向上旋转最大角度
controls.activeLook = true; // 启用鼠标控制视角
// 动画循环
const clock = new THREE.Clock();
// 渲染循环
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
controls.update(delta);
renderer.render(scene, camera);
}
animate();
属性
- activeLook : Boolean 是否能够环视四周。默认为 true。
- autoForward : Boolean 摄像机是否自动向前移动。默认为 false。
- constrainVertical : Boolean 垂直环视是否约束在[.verticalMin, .verticalMax]之间。默认值为 false。constrainVertical 是 FirstPersonControls 中的一个布尔属性,用于限制相机在垂直方向上的视角范围。当 constrainVertical 设置为 true 时,相机的垂直视角旋转会被限制在指定的范围内。这对于防止相机视角上下移动过大,导致视觉上产生不自然的效果非常有用,比如在第一人称视角中避免相机完全抬头或低头。
- heightCoef : Number 当Y坐标接近.heightMax时摄像机的移动速度。默认值为 1。
- heightMax : Number 用于调节移动速度的摄像机最大高度限制。默认值为 1。
- heightMin : Number 用于调节移动速度的摄像机最低高度限制。默认值为 0。
- heightSpeed : Boolean 摄像机的高度是否影响向前移动的速度。默认值为 false。 使用属性 .heightCoef、 .heightMin 和 .heightMax 来进行配置。
- lookVertical : Boolean 是否能够垂直环视。默认为 true。
- lookSpeed : Number 环视速度。默认为 0.005。
- mouseDragOn : Boolean 鼠标是否被按下。只读属性。
- movementSpeed : Number 移动速度。默认为 1。
- verticalMax : Number 你能够垂直环视角度的上限。范围在 0 到 Math.PI 弧度之间。默认为 Math.PI。
- verticalMin : Number 你能够垂直环视角度的下限。范围在 0 到 Math.PI 弧度之间。默认为 0。
方法
- handleResize () : undefined 若应用程序窗口大小发生改变,则应当调用此函数。
- lookAt ( vector : Vector3 ) : FirstPersonControls vector - 一个表示目标位置的向量。 或者,世界空间位置的x、y、z分量。 确保控制器将相机方向朝向到所传入的目标的位置。
- lookAt ( x : Float, y : Float, z : Float ) : FirstPersonControls vector - 一个表示目标位置的向量。 或者,世界空间位置的x、y、z分量。 确保控制器将相机方向朝向到所传入的目标的位置。