caterpi11ar's blog

210. 综合实战：开放世界（十一）

Published:

上节实现了上车、下车：

2025-12-20 18.56.56.gif

这节优化一下细节。

上车后，人物模型应该从场景中删掉。

下车后人物应该出现在车辆左边。

首先，上车后把人物模型隐藏：

image.png

characterModel.visible = false;

试一下：

2025-12-20 19.09.31.gif

然后按 x 下车后，人物应该出现在车门左边：

image.png

if (carModel && characterModel && carBody && playerBody) {
    carModel.remove(camera);

    // 显示人物模型
    characterModel.visible = true;

    // 将人物放置在车辆左边
    const carPosition = carBody.position;

    // 获取车辆的前进方向
    const forward = new THREE.Vector3();
    carModel.getWorldDirection(forward);
    forward.y = 0;
    forward.normalize();

    // 计算车辆左侧方向（前进方向顺时针旋转90度）
    const left = new THREE.Vector3(forward.z, 0, -forward.x);

    // 计算车辆左侧的位置（距离车辆2米）
    const leftOffset = 2;
    const leftX = carPosition.x + left.x * leftOffset;
    const leftZ = carPosition.z + left.z * leftOffset;

    // 更新人物物理体和模型位置
    playerBody.position.set(leftX, playerHeight / 2, leftZ);
    playerBody.velocity.set(0, 0, 0);
    characterModel.position.copy(playerBody.position);
    characterModel.position.y -= playerHeight / 2;

    characterModel.add(camera);
    // 恢复为人物行走时的相机设置
    camera.position.set(0, 1.5, 2.5);
    camera.rotation.set(0, 0, 0);
    camera.up.set(0, 1, 0);
    
    // 设置人物朝向与车辆一致
    characterModel.rotation.y = carModel.rotation.y;
}

这个就是显示人物模型，改一下位置就可以了。

只不过这个车的左边需要根据相机方向来确定。

试下效果：

2025-12-20 19.13.38.gif

这样，下车就完成了。

案例代码上传了小册仓库

总结

这节我们优化了一些细节。

上车之后把人从场景中隐藏，切换到开车视角。

下车后人在车左边出现，切换到人行走的视角。

现在玩家从走到车附近、上车，开车在场景中形式，下车，控制人物在场景中行走的流程就完成了。

评论