threejs 仿抖音漂移停车特效

最近刷到了抖音的漂移停车2的视频，感觉还蛮有趣的

乍一看，实现这个漂移停车的效果需要一些东西：

• 一辆一直往前开的小车和一个停车点，这里就做成一个小车库吧
• 漂移停车逻辑。这个小游戏是通过往左往右触屏滑动来刹车，附带了转向
• 和车库的碰撞处理
• 停车后的计分逻辑

之前的文章实现了基于threejs的3d场景和一辆麻雀虽小五脏俱全的小车，咱们拿来接着用一下

行车物理模拟

其实之前自己实现的自车行驶超级简单，加减速、转弯都做的比较粗糙，这里引入物理库 cannon-es（cannon.js 的增强版）来帮忙做这块逻辑。物理库的作用其实就是模拟一些真实的物理效果，比如行车、物理碰撞、重力等。具体api文档 戳这里，不过只有英文文档

npm install cannon-es

先初始化一个物理世界，其实和 threejs 场景的初始化有点像，之后也是需要将物理世界的物体和 threejs 的物体一一对应地关联起来，比如这里的地面、小车和车库，这样后面物理库做计算后，再将作用后的物体的位置信息赋值到 threejs 对应物体的属性上，最后通过循环渲染（animate）就能模拟行车场景了

import * as CANNON from "cannon-es";
// ...
const world = new CANNON.World();
// 物理世界预处理，这个可以快速排除明显不发生碰撞的物体对，提高模拟效率

world.broadphase = new CANNON.SAPBroadphase(world);
// 物理世界的重力向量

world.gravity.set(0, -9.8, 0);
// 刚体之间接触面的默认摩擦系数

world.defaultContactMaterial.friction = 0;

小车对象

cannon-es 的 RaycastVehicle 类可以辅助我们管理物理世界的小车对象，它提供了很多蛮好用的api，不仅可以帮助我们更好地管理车轮，而且能很好地根据地形运动

物理世界物体的基本要素有形状（常见的有Box长方体/Plane平面/Sphere球体）、材质 Material 和刚体 Body，类比 threejs 中的几何体、材质和 Mesh。创建刚体后别忘了将它添加到物理世界里，和 threejs 将物体添加到 scene 场景里类似

 // 创建小车底盘形状，这里就是一个长方体
const chassisShape = new CANNON.Box(new CANNON.Vec3(1, 0.3, 2));
// 创建质量为150kg的小车刚体。物理世界的质量单位是kg
const chassisBody = new CANNON.Body({ mass: 150 });
// 关联刚体和形状

chassisBody.addShape(chassisShape);
// 设定刚体位置

chassisBody.position.set(0, 0.4, 0);
// 基于小车底盘创建小车对象
const vehicle = new CANNON.RaycastVehicle({

  chassisBody,
// 定义车辆的方向轴(0:x轴,1:y轴,2:z轴)，让它符合右手坐标系
// 车辆右侧

  indexRightAxis: 0,
// 车辆上方

  indexUpAxis: 1,
// 车辆前进方向

  indexForwardAxis: 2,

});
// 将小车添加到物理世界里，类比 threejs 的 scene.add()

vehicle.addToWorld(world);

四个车轮

接下来定义下车轮对象，用到了 Cylinder 这种圆柱体的形状，然后要注意做好旋转值 Quaternion 的调整。这部分会稍微复杂些，可以耐心看下注释：

 // 车轮配置，详情配置参考 
const options = {

  radius: 0.4, // 轮子半径

  directionLocal: new CANNON.Vec3(0, -1, 0), // 轮子方向向量，指轮子从中心点出发的旋转方向

  suspensionStiffness: 45,

  suspensionRestLength: 0.4,

  frictionSlip: 5, // 滑动摩擦系数

  dampingRelaxation: 2.3,

  dampingCompression: 4.5,

  maxSuspensionForce: 200000,

  rollInfluence: 0.01,

  axleLocal: new CANNON.Vec3(-1, 0, 0),

  chassisConnectionPointLocal: new CANNON.Vec3(1, 1, 0),

  maxSuspensionTravel: 0.25,

  customSlidingRotationalSpeed: -30,

  useCustomSlidingRotationalSpeed: true,
};
const axlewidth = 0.7;
// 设置第一个车轮的连接点位置
options.chassisConnectionPointLocal.set(axlewidth, 0, -1);
// 按指定配置给小车添加第一个车轮，其他车轮类似
vehicle.addWheel(options);
options.chassisConnectionPointLocal.set(-axlewidth, 0, -1);
vehicle.addWheel(options);
options.chassisConnectionPointLocal.set(axlewidth, 0, 1);
vehicle.addWheel(options);
options.chassisConnectionPointLocal.set(-axlewidth, 0, 1);
vehicle.addWheel(options);
// 四个车轮
const wheelBodies: CANNON.Body[] = [];
const wheelVisuals: THREE.Mesh[] = [];
vehicle.wheelInfos.forEach(function (wheel) {
const shape = new CANNON.Cylinder(
wheel.radius,
wheel.radius,
wheel.radius / 2,
20
);
const body = new CANNON.Body({ mass: 1, material: wheelMaterial });
// 刚体可以是动态（DYNAMIC）、静态（STATIC）或运动学（KINEMATIC）
body.type = CANNON.Body.KINEMATIC;
// 0表示这个刚体将与所有其他未设置特定过滤组的刚体进行碰撞检测
body.collisionFilterGr0up = 0;
// 使用setFromEuler方法将欧拉角转换为四元数，欧拉角的值为-Math.PI / 2（即-90度或-π/2弧度）
const quaternion = new CANNON.Quaternion().setFromEuler(
-Math.PI / 2,
0,
0
);
body.addShape(shape, new CANNON.Vec3(), quaternion);
wheelBodies.push(body);
// 创建3d世界的车轮对象
const geometry = new THREE.CylinderGeometry(
wheel.radius,
wheel.radius,
0.4,
32
);
const material = new THREE.MeshPhongMaterial({

    color: 0xd0901d,

    emissive: 0xaa0000,

    flatShading: true,

    side: THREE.DoubleSide,
});
const cylinder = new THREE.Mesh(geometry, material);
cylinder.geometry.rotateZ(Math.PI / 2);
wheelVisuals.push(cylinder);
scene.add(cylinder);
});

这一步很关键，需要在每次物理模拟计算结束后 （postStep事件的回调函数） 更新车轮的位置和转角

// ...

world.addEventListener("postStep", function () {
for (let i = 0; i < vehicle.wheelInfos.length; i++) {

    vehicle.updateWheelTransform(i);
const t = vehicle.wheelInfos[i].worldTransform;
// 更新物理世界车轮对象的属性

    wheelBodies[i].position.copy(t.position);

    wheelBodies[i].quaternion.copy(t.quaternion);
// 更新3d世界车轮对象的属性

    wheelVisuals[i].position.copy(t.position);

    wheelVisuals[i].quaternion.copy(t.quaternion);

  }

});

车辆行驶和转向

监听键盘事件，按下上下方向键给一个前后的引擎动力，按下左右方向键给车轮一个转角值

// 引擎动力值
const engineForce = 3000;
// 转角值
const maxSteerVal = 0.7;
// 刹车作用力
const brakeForce = 20;
// ...
// 刹车
function brakeVehicle() {
// 四个车轮全部加刹车作用力

  vehicle.setBrake(brakeForce, 0);

  vehicle.setBrake(brakeForce, 1);

  vehicle.setBrake(brakeForce, 2);

  vehicle.setBrake(brakeForce, 3);

}
function handleNavigate(e: any) {
if (e.type != "keydown" && e.type != "keyup") {
return;

  }
const isKeyup = e.type === "keyup";
switch (e.key) {
case "ArrowUp":
// 给第2/3个车轮加引擎动力

      vehicle.applyEngineForce(isKeyup ? 0 : engineForce, 2);

      vehicle.applyEngineForce(isKeyup ? 0 : engineForce, 3);
break;
case "ArrowDown":

      vehicle.applyEngineForce(isKeyup ? 0 : -engineForce, 2);

      vehicle.applyEngineForce(isKeyup ? 0 : -engineForce, 3);
break;
case "ArrowLeft":
// 设置车轮转角

      vehicle.setSteeringValue(isKeyup ? 0 : -maxSteerVal, 2);

      vehicle.setSteeringValue(isKeyup ? 0 : -maxSteerVal, 3);
break;
case "ArrowRight":

      vehicle.setSteeringValue(isKeyup ? 0 : maxSteerVal, 2);

      vehicle.setSteeringValue(isKeyup ? 0 : maxSteerVal, 3);
break;

  }
brakeVehicle();

}
window.addEventListener("keydown", handleNavigate);
window.addEventListener("keyup", handleNavigate);

然后在每一帧里重新计算物体的物理值，并赋值给 3d 世界的小车属性，就可以实现行车效果

function updatePhysics() {

  world.step(1 / 60);

  egoCar.position.copy(chassisBody.position);

  egoCar.quaternion.copy(chassisBody.quaternion);

}
// ...
const animate = () => {

  stats.begin();
// ...
updatePhysics();
// ...

  stats.end();
requestAnimationFrame(animate);

};
animate();

地面优化

地面看起来太光滑，显得有点假，咱们先给地面加上有磨砂质感的纹理贴图，同时隐藏掉辅助网格

// ...
// 加载纹理贴图

textureLoader.load("/gta/floor.jpg", (texture) => {
const planeMaterial = new THREE.MeshLambertMaterial({
// 将贴图对象赋值给材质

    map: texture,

    side: THREE.DoubleSide,

  });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 地面接受阴影

  plane.receiveShadow = true;

  plane.rotation.x = Math.PI / 2;

  scene.add(plane);

});

加载完贴图，生成3d场景的地面对象后，别忘了创建地面刚体并关联。这里还要定义地面刚体的物理材质，类比 threejs 的材质，会影响不同刚体之间摩擦和反弹的效果

// ...
// 定义地板的物理材质
const groundMaterial = new CANNON.Material("groundMaterial");
// 定义车轮的物理材质，其实之前代码用过了，可以留意下
const wheelMaterial = new CANNON.Material("wheelMaterial");
// 定义车轮和地板之间接触面的物理关联，在这里定义摩擦反弹等系数
const wheelGroundContactMaterial = new CANNON.ContactMaterial(

  wheelMaterial,

  groundMaterial,

  {
// 摩擦系数

    friction: 0.5,
// 反弹系数，0表示没有反弹

    restitution: 0,

  }

);

world.addContactMaterial(wheelGroundContactMaterial);
// ...

textureLoader.load("/gta/floor.jpg", (texture) => {
// ...
// 地面刚体
const q = plane.quaternion;
const planeBody = new CANNON.Body({
// 0说明物体是静止的，发生物理碰撞时不会相互移动

    mass: 0,
// 应用接触面材质

    material: groundMaterial,

    shape: new CANNON.Plane(),
// 和3d场景的旋转值保持一致。在Cannon.js中，刚体的旋转可以通过四元数来表示，而不是传统的欧拉角或轴角表示法

    quaternion: new CANNON.Quaternion(-q._x, q._y, q._z, q._w),

  });

  world.addBody(planeBody);

});

这回开起来可顺畅许多了，场景和自车旋转也变得更自然一些，感谢开源 ~

搭建车库

咱就搭个棚，一个背景墙、两个侧边墙、加一个屋顶和地板，其实都是些立方体，拼装成网格对象 Mesh 后，按照一定的位置和旋转拼在一起组成小车库，参考代码：

createParkingHouse() {
if (!this.scene || !this.world) return;
// 创建背景墙
const background = new THREE.Mesh(
new THREE.BoxGeometry(3, 4, 0.1),
new THREE.MeshBasicMaterial({ color: 0xcccccc })

    );

    background.position.set(0, 0, -53);
this.scene.add(background);
// 创建侧墙
const sider1 = new THREE.Mesh(
new THREE.BoxGeometry(6, 4, 0.3),
new THREE.MeshBasicMaterial({ color: 0xcccccc })

    );

    sider1.rotation.y = Math.PI / 2;

    sider1.position.set(-1.5, 0.1, -50);
this.scene.add(sider1);
const sider2 = new THREE.Mesh(
new THREE.BoxGeometry(6, 4, 0.3),
new THREE.MeshBasicMaterial({ color: 0xcccccc })

    );

    sider2.rotation.y = Math.PI / 2;

    sider2.position.set(1.5, 0.1, -50);
this.scene.add(sider2);
// 创建屋顶
const roof = new THREE.Mesh(
new THREE.BoxGeometry(3, 6, 0.1),
new THREE.MeshBasicMaterial({

        color: 0xcccccc,
// 注意：这个值不为true的话，设置opacity是没用的

        transparent: true,

        opacity: 0.8,

      })

    );

    roof.rotation.x = Math.PI / 2;

    roof.position.set(0, 2, -50);
this.scene.add(roof);
// 创建地板
const floor = new THREE.Mesh(
new THREE.BoxGeometry(3, 6, 0.1),
new THREE.MeshBasicMaterial({ color: 0x666666 })

    );

    floor.rotation.x = Math.PI / 2;

    floor.position.set(0, 0.1, -50);
this.scene.add(floor);

  }

好了，一个稍微有点模样的小车库就大功告成

创建车库刚体

先加个背景墙的物理刚体

createParkingHouse() {
if (!this.scene || !this.world) return;
// 创建背景墙
const background = new THREE.Mesh(
new THREE.BoxGeometry(3, 4, 0.1),
new THREE.MeshBasicMaterial({ color: 0xcccccc })

    );

    background.position.set(0, 0, -53);
this.scene.add(background);
// 创建侧墙
// ...
// physic
const houseShape = new CANNON.Box(new CANNON.Vec3(1.5, 4, 0.1));
const houseBody = new CANNON.Body({ mass: 0 });

    houseBody.addShape(houseShape);

    houseBody.position.set(0, 0, -53);
this.world.addBody(houseBody);

}
// ...

其他的墙体类似的处理，屋顶先不管吧，小车应该也够不着。来，先撞一下试试

漂移停车

其实达到一定速度，通过方向键就能做一个甩尾漂移倒车入库

// ...
animate();
setTimeout(() => {
// 给后轮上点动力
vehicle.applyEngineForce(2000, 2);
vehicle.applyEngineForce(2000, 3);

}, 100);

2. 电脑端根据方向键触发漂移，这里注意要消除后轮的动力