Skip to content

206. 综合实战:开放世界(七)

Published:

开放世界里,可以控制玩家行走,自然也可以开车。

而且可以玩家走到车附近,按 E 上车,之后切换为车辆驾驶模式。

比如这个开源项目:

https://github.com/swift502/Sketchbook

它就是基于 three.js 和 cannon.js 制作的第三人称游戏

image.png

你可以点开试一下:

https://jblaha.art/sketchbook/0.4/

可以控制玩家在这个开放世界里行走。

2025-12-14 18.54.41.gif

也可以上车:

2025-12-14 18.52.15.gif

之后切换为开车模式:

2025-12-14 18.59.21.gif

怎么实现呢?

其实也不难。

想一下,我们是怎么实现镜头跟随玩家移动的?

2025-12-14 18.28.08.gif

就是把相机加到玩家下作为子对象就可以了。

车自然也一样,没区别。

我们只要上车后,把相机加到车上,之后加上鼠标、键盘控制车移动就行了。

人走到车附近,可以按 E 上车。

当然,这个上车需要一个动画,我们还没有这个动画,所以直接切换到车的视角就可以了,把人从世界中删掉。

还可以按 E 下车,下车后把人加回来,之后键盘开始控制人移动。

键盘控制人和控制车的方式是一样的,只不过车不能跳,车的速度更快。

我们可以加一个变量来控制模式,在开车模式和人行走的模式下,做不同的处理。

我们找一个车的模型:

https://github.com/QuarkGluonPlasma/threejs-course-code/blob/main/car-config/public/car.glb

下载,放 public 目录下:

image.png

代码里加载下:

创建 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;

引入下:

image.png

2025-12-14 19.26.27.gif

现在,汽车就渲染出来了。

但只是视觉上的,物理世界还没有这辆车。

案例代码上传了小册仓库

总结

这节分析了下开放世界里开车的实现思路:

控制人行走、控制车行驶,本质上的思路都是一样的,都是相机跟随 + 鼠标控制移动。

我们在开放世界里加了一辆车,下届来实现驾驶车辆的功能。

评论