【threejs教程8】threejs添加3D场景键盘控制

【完整效果代码位于文章末】

目录

准备工作

目标

步骤1:初始化按键状态对象

步骤2:监听键盘事件

步骤3:编写事件处理函数

步骤4:更新相机移动方向

总结

完整代码如下

在3D应用开发中,用户交互是一个关键环节,特别是对于游戏和虚拟现实体验来说,能够通过键盘控制相机移动是提升沉浸感的重要手段。本文将指导你如何利用简单的代码,实现对THREE.js 3D场景中相机的键盘控制功能。

准备工作

确保你的项目中已经集成了THREE.js库,这是创建3D场景的基础。本文不涉及THREE.js的安装和基本使用,假设你已有相关基础。查看3D场景创建基础看查看往期文章:

【threejs教程1】threejs基础开发示例

【threejs教程2】threejs物体点击交互事件

【threejs教程3】threejs物体轮廓发光

【threejs教程4】threejs添加跳动标注

【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));
  }
复制代码
相关推荐
baiduopenmap3 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish11 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull15 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i23 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_26 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun32 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜35 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html