上节画了飞机的模型，定义了物理世界的刚体：
这节来做开飞机的功能。
之前这个飞机模型太大了，需要缩小很多倍来用，我们换个飞机模型：
https://sketchfab.com/3d-models/toy-plane-8e07cd514f1148269ca715b8e726ace2#download
改下代码：
改下刚体大小，去掉放缩。
看下效果：
去掉可视化的盒子：
然后实现下上下飞机功能：
首先加个变量记录当前是不是飞机视角：
然后加一个走近飞机的判断：
和走到车附近的判断逻辑一样。
提示文案也更新下：
现在是按 C 上下飞机，shift 和空格来升降飞机。
首先，走到飞机附近，按 c 可以上飞机：
也就是把相机加到飞机的 group，调一下相机位置。
已经在飞机上，按 c 下飞机：
这些逻辑和之前汽车的时候一模一样。
都是拿到飞机的方向，计算下左侧的位置，然后把人物模型放到哪里，把相机也加到人物模型下就好了。
import './style.css';
import * as THREE from 'three';
import {
OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import mesh, { characterModel, playerBody, playerHeight } from './mesh.js';
import car, { carModel, carBody } from './car.js';
import plane, { planeModel, planeBody } from './plane.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);
scene.add(mesh);
scene.add(car);
scene.add(plane);
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const sun = new THREE.DirectionalLight(0xffffff, 0.8);
sun.position.set(20, 30, 10);
sun.castShadow = true;
sun.shadow.camera.left = -30;
sun.shadow.camera.right = 30;
sun.shadow.camera.top = 30;
sun.shadow.camera.bottom = -30;
sun.shadow.mapSize.width = 2048;
sun.shadow.mapSize.height = 2048;
scene.add(sun);
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 200);
camera.position.set(0, 1.6, 5);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height)
renderer.shadowMap.enabled = true;
document.body.append(renderer.domElement);
// const controls = new OrbitControls(camera, renderer.domElement);
// 车辆视角切换
export let isCarView = false;
// 飞机视角切换
export let isPlaneView = false;
// 检查人物是否在车辆附近
function isNearCar() {
if (!characterModel || !carBody) return false;
const characterPos = characterModel.position;
const carPos = carBody.position;
const distance = Math.sqrt(
Math.pow(characterPos.x - carPos.x, 2) +
Math.pow(characterPos.z - carPos.z, 2)
);
return distance < 3; // 3米范围内
}
// 检查人物是否在飞机附近
function isNearPlane() {
if (!characterModel || !planeBody) return false;
const characterPos = characterModel.position;
const planePos = planeBody.position;
const distance = Math.sqrt(
Math.pow(characterPos.x - planePos.x, 2) +
Math.pow(characterPos.z - planePos.z, 2)
);
return distance < 3; // 3米范围内
}
// 更新提示文本
function updateViewTip() {
const tipElement = document.getElementById('viewTip');
if (!tipElement) return;
if (isCarView) {
tipElement.textContent = '按 X 下车';
} else if (isPlaneView) {
// 检查飞机是否在地面
if (planeBody) {
const planeHeight = planeBody.position.y;
const groundHeight = 1.15;
if (planeHeight > groundHeight + 1) {
tipElement.textContent = '空格键上升 | Shift键下降 | 请先降落再按 C 下飞机';
} else {
tipElement.textContent = '空格键上升 | Shift键下降 | 按 C 下飞机';
}
} else {
tipElement.textContent = '按 C 下飞机';
}
} else if (isNearCar()) {
tipElement.textContent = '按 X 上车';
} else if (isNearPlane()) {
tipElement.textContent = '按 C 上飞机';
} else {
tipElement.textContent = '靠近车辆按 X 上车 | 靠近飞机按 C 上飞机';
}
}
// 渲染循环
function render() {
renderer.render(scene, camera);
updateViewTip();
requestAnimationFrame(render);
}
render();
// 监听键盘事件
window.addEventListener('keydown', (event) => {
if (event.key === 'x' || event.key === 'X') {
if (isCarView) {
// 在车辆视角时，可以随时下车
isCarView = false;
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.rotation.y = carModel.rotation.y;
characterModel.add(camera);
// 恢复为人物行走时的相机设置
camera.position.set(0, 1.5, 2.5);
camera.rotation.set(0, 0, 0);
camera.up.set(0, 1, 0);
}
} else if (isNearCar()) {
// 只有在车辆附近才能上车
isCarView = true;
if (carModel && characterModel) {
characterModel.remove(camera);
// 隐藏人物模型
characterModel.visible = false;
carModel.add(camera);
// 相机在车后面，看向车辆前进方向
camera.position.set(0, 3, -6);
camera.rotation.set(-0.1, Math.PI, 0); // 稍微向下看约6度，主要朝向前方
}
}
} else if (event.key === 'c' || event.key === 'C') {
if (isPlaneView) {
// 在飞机视角时，需要先降落再下飞机
if (planeModel && characterModel && planeBody && playerBody) {
const planeHeight = planeBody.position.y;
const groundHeight = 1.15; // 飞机在地面时的高度
// 如果飞机在空中（高于地面1米以上），提示需要先降落
if (planeHeight > groundHeight + 1) {
return;
}
// 飞机在地面或接近地面时，可以下飞机
isPlaneView = false;
planeModel.remove(camera);
// 显示人物模型
characterModel.visible = true;
// 将人物放置在飞机左边
const planePosition = planeBody.position;
// 获取飞机的前进方向
const forward = new THREE.Vector3();
planeModel.getWorldDirection(forward);
forward.y = 0;
forward.normalize();
// 计算飞机左侧方向（前进方向顺时针旋转90度）
const left = new THREE.Vector3(forward.z, 0, -forward.x);
// 计算飞机左侧的位置（距离飞机2米）
const leftOffset = 2;
const leftX = planePosition.x + left.x * leftOffset;
const leftZ = planePosition.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.rotation.y = planeModel.rotation.y;
characterModel.add(camera);
// 恢复为人物行走时的相机设置
camera.position.set(0, 1.5, 2.5);
camera.rotation.set(0, 0, 0);
camera.up.set(0, 1, 0);
}
} else if (isNearPlane()) {
// 只有在飞机附近才能上飞机
isPlaneView = true;
if (planeModel && characterModel) {
characterModel.remove(camera);
// 隐藏人物模型
characterModel.visible = false;
planeModel.add(camera);
// 相机在飞机后面，看向飞机前进方向
camera.position.set(0, 3, -6);
camera.rotation.set(-0.1, Math.PI, 0); // 稍微向下看约6度，主要朝向前方
}
}
}
});
export { camera }试一下：
这样，上下飞机就完成了。
案例代码上传了小册仓库
总结
这节我们实现了上下飞机的功能。
其实和汽车的时候一样，都是靠近之后按某个键，把人物隐藏，相机加到飞机的 group。
在飞机上的时候，按某个键，把人物加到飞机附近，然后相机移到人物的 group。
不管是飞机、汽车，这些逻辑都是一样的。
只不过飞行控制逻辑有点不太一样，我们下节来实现。