开放世界里,可以控制玩家行走,自然也可以开车。
而且可以玩家走到车附近,按 E 上车,之后切换为车辆驾驶模式。
比如这个开源项目:
https://github.com/swift502/Sketchbook
它就是基于 three.js 和 cannon.js 制作的第三人称游戏

你可以点开试一下:
https://jblaha.art/sketchbook/0.4/
可以控制玩家在这个开放世界里行走。

也可以上车:

之后切换为开车模式:

怎么实现呢?
其实也不难。
想一下,我们是怎么实现镜头跟随玩家移动的?

就是把相机加到玩家下作为子对象就可以了。
车自然也一样,没区别。
我们只要上车后,把相机加到车上,之后加上鼠标、键盘控制车移动就行了。
人走到车附近,可以按 E 上车。
当然,这个上车需要一个动画,我们还没有这个动画,所以直接切换到车的视角就可以了,把人从世界中删掉。
还可以按 E 下车,下车后把人加回来,之后键盘开始控制人移动。
键盘控制人和控制车的方式是一样的,只不过车不能跳,车的速度更快。
我们可以加一个变量来控制模式,在开车模式和人行走的模式下,做不同的处理。
我们找一个车的模型:
https://github.com/QuarkGluonPlasma/threejs-course-code/blob/main/car-config/public/car.glb
下载,放 public 目录下:

代码里加载下:
创建 car.js
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
const group = new THREE.Group();
export const loadPromise = loader.loadAsync("./car.glb");
loadPromise.then(gltf => {
group.add(gltf.scene);
console.log(gltf);
gltf.scene.position.set(0, 0, 10);
})
export default group;
引入下:


现在,汽车就渲染出来了。
但只是视觉上的,物理世界还没有这辆车。
案例代码上传了小册仓库
总结
这节分析了下开放世界里开车的实现思路:
控制人行走、控制车行驶,本质上的思路都是一样的,都是相机跟随 + 鼠标控制移动。
我们在开放世界里加了一辆车,下届来实现驾驶车辆的功能。