【完整效果代码位于文章末】
目录
在3D应用开发中,用户交互是一个关键环节,特别是对于游戏和虚拟现实体验来说,能够通过键盘控制相机移动是提升沉浸感的重要手段。本文将指导你如何利用简单的代码,实现对THREE.js 3D场景中相机的键盘控制功能。
准备工作
确保你的项目中已经集成了THREE.js库,这是创建3D场景的基础。本文不涉及THREE.js的安装和基本使用,假设你已有相关基础。查看3D场景创建基础看查看往期文章:
【threejs教程5】threejs添加文字标注,且始终面向屏幕
【threejs教程6】threejs加载glb模型文件(小米su7)
【threejs教程7】threejs聚光灯、摄影机灯和汽车运动效果
目标
我们将实现当按下键盘上的W、S、A、D键时,3D场景中的相机分别向前、后、左、右平移。这个过程分为三步:监听键盘事件、管理按键状态、根据按键状态更新相机移动方向。
步骤1:初始化按键状态对象
首先,我们需要一个对象来记录键盘按键的状态(按下或抬起)。这将帮助我们判断何时以及如何改变相机的移动方向。
javascript
const keyState = {
KeyW: false,
KeyS: false,
KeyA: false,
KeyD: false,
};
步骤2:监听键盘事件
接下来,我们需要在文档级别监听键盘的keydown和keyup事件,以便在用户按下或释放特定按键时触发相应的处理函数。
javascript
document.addEventListener('keydown', onDocumentKeyDown, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
步骤3:编写事件处理函数
- keydown事件处理:当按键被按下时,更新keyState中对应按键的状态为true,并调用updateMoveDirection()更新相机移动方向。
javascript
function onDocumentKeyDown(event) {
keyState[event.code] = true;
updateMoveDirection();
}
- keyup事件处理:当按键被释放时,将其状态设回false,同样调用updateMoveDirection()确保移动状态正确反映按键情况。
javascript
function onDocumentKeyUp(event) {
keyState[event.code] = false;
updateMoveDirection();
}
步骤4:更新相机移动方向
最后,定义updateMoveDirection()函数,根据当前按键状态计算相机的移动方向,并应用到相机位置上。
javascript
// 定义键盘控制速度(可根据需要调整)
const moveSpeed = 0.5
function updateMoveDirection() {
const direction = new THREE.Vector3(); // 存储相机前方方向
const moveDirection = new THREE.Vector3(); // 计算移动向量
const upVector = new THREE.Vector3(0, 1, 0); // 作为旋转轴辅助计算
// 获取相机面向的方向
camera.getWorldDirection(direction);
// 根据按键状态调整移动向量
if (keyState['KeyW']) moveDirection.add(direction);
if (keyState['KeyS']) moveDirection.sub(direction);
if (keyState['KeyA']) moveDirection.add(upVector.clone().cross(direction)); // 左转
if (keyState['KeyD']) moveDirection.sub(upVector.clone().cross(direction)); // 右转
// 确保移动向量有明确的方向,避免无效移动
moveDirection.normalize();
// 应用移动,乘以速度常量控制速度
camera.position.add(moveDirection.multiplyScalar(moveSpeed));
}
总结
至此,你已成功为3D场景中的相机添加了基本的键盘控制功能。通过监听键盘事件、维护按键状态、并据此更新相机的移动方向,你的用户现在可以使用WASD键自由探索你创造的3D世界。记得调整moveSpeed常量以获得理想的移动速度,并根据需要进一步优化和扩展控制逻辑,如添加更多按键控制或平滑移动效果等。
完整代码如下
javascript
// 用于跟踪按键状态的对象
const keyState = {
KeyW: false,
KeyS: false,
KeyA: false,
KeyD: false,
};
// 监听键盘按键按下和抬起事件
document.addEventListener('keydown', onDocumentKeyDown, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
// 按键按下事件处理函数
function onDocumentKeyDown(event) {
// 设置对应按键的状态为按下
keyState[event.code] = true;
updateMoveDirection();
}
// 按键抬起事件处理函数
function onDocumentKeyUp(event) {
// 设置对应按键的状态为抬起
keyState[event.code] = false;
updateMoveDirection();
}
// 定义键盘控制速度(可根据需要调整)
const moveSpeed = 0.5
// 更新移动方向的函数
function updateMoveDirection() {
const direction = new THREE.Vector3(); // 用于存储相机的视线方向
const moveDirection = new THREE.Vector3(); // 用于计算移动向量
// 获取相机的全局前方方向
camera.getWorldDirection(direction);
const upVector = new THREE.Vector3(0, 1, 0); // 用于计算旋转轴
// 根据按键状态调整移动向量
if (keyState['KeyW']) moveDirection.add(direction);
if (keyState['KeyS']) moveDirection.sub(direction);
if (keyState['KeyA']) moveDirection.add(upVector.clone().cross(direction));
if (keyState['KeyD']) moveDirection.sub(upVector.clone().cross(direction));
// 规范化移动向量
moveDirection.normalize();
// 应用移动
camera.position.add(moveDirection.multiplyScalar(moveSpeed));
}