193. 玩家漫游（二）

上节实现了按住 w 人物前进：

2025-09-21 09.42.36.gif

这节把后退、加速、减速也实现下。

减速比较简单，就是速度方向和加速的相反：

if(keyPressed.w) {
    const movePos = v.clone().multiplyScalar(deltaTime);
    mesh.position.add(movePos);
} else if(keyPressed.s) {
    const movePos = v.clone().multiplyScalar(-deltaTime);
    mesh.position.add(movePos);
}

试一下：

2025-09-21 11.30.04.gif

人物的速度其实也不是恒定的，刚开始会有一段加速过程，也就是有个加速度 a

也就是每次除了要算距离的增加量，还要算一下速度的增加量：

const a = 100;

const dir = new THREE.Vector3(0, 0, -1);
v.add(dir.multiplyScalar(a * deltaTime));
const movePos = v.clone().multiplyScalar(deltaTime);
mesh.position.add(movePos);

加速度设置为 100，也就是每次运动速度增加 100

然后基于这个速度来计算距离的增加量

试下效果：

2025-09-21 11.47.11.gif

可以看到，按下 w 后会有个加速的过程。

当然，也不能一直加速下去，我们要设置个速度上限：

if(v.length() < 400) {
  v.add(dir.multiplyScalar(a * deltaTime));
}

v.length 向量长度小于 400，也就是速度小于 400 就加速，否则匀速。

现在按 w 是逐渐加速的，但是松开 w 会立马停止。

我们把松开 w 键也改成逐渐减速的：

把计算移动的距离的这两行代码拿出来，也就是不按下 w 键也会运动。

但是加了一个阻力，速度每次减少 1%

const resistance = -0.01;

v.addScaledVector(v, resistance);

const movePos = v.clone().multiplyScalar(deltaTime);
mesh.position.add(movePos);

试一下：

2025-09-21 11.59.59.gif

可以看到，现在按下 w 键会逐渐加速，松开后人物依然会前进，但会逐渐减速，直到停止。

减速这个也改一下：

方向相反，然后判断速度上限也要注意下正负：

if(keyPressed.w) {
    const dir = new THREE.Vector3(0, 0, -1);

    if(v.length() > -400) {
      v.add(dir.multiplyScalar(a * deltaTime));
    }
} else if(keyPressed.s) {
    const dir = new THREE.Vector3(0, 0, 1);

    if(v.length() < 400) {
      v.add(dir.multiplyScalar(a * deltaTime));
    }
}

试下效果：

2025-09-21 12.03.16.gif

这样，前进后退的加速、松开后的减速，就都完成了。

案例代码上传了小册仓库

总结

这节我们加上了加速、减速的功能，并且实现了后退。

后退就是方向和前进的不一样，其他一样。

我们引入了加速度的概念，每次运动速度都会在之前的基础上增加。

松开后不是立马不运动，而是有一个阻力，每次减少 1% 的速度，直到静止。

这样，运动过程就更自然了。

193. 玩家漫游（二）

总结

评论