three.js cannon.js物理引擎之制作拥有物理特性的汽车

今天郭先生说一说使用cannon.js的车辆辅助类让我们的汽车模型拥有物理特性。效果图如下，在线案例请点击博客原文。

three.js cannon.js物理引擎之制作拥有物理特性的汽车-LMLPHP

下面我们说一下今天要使用的两个类，并简单的看看他们的物理意义

1. RaycastVehicle类

这是车辆辅助类，将光线从车轮位置投射到地面并施加力。它决定车的位置，角度，质量等信息。下面是它的构造函数

RaycastVehicle （ [options] ）

options一共有四个参数，并且比较好理解，

chassisBody – 表示车身的刚体
indexForwardAxis – 前轴索引0 = x，1 = y，2 = z
indexRightAxis – 前轴索引0 = x，1 = y，2 = z
indexUpAxis – 前轴索引0 = x，1 = y，2 = z

后面的三个参数要决定了车辆哪个方向是前面，，哪个是右面，哪个是上面。比如说我们在three.js中一般以y轴作为向上的方向，因此我们就要将indexUpAxis设置成1，indexRightAxis设置成2。如果有特别的要求，three.js的视图以z轴作为up的方向，这是我们就要将indexUpAxis设置成2，indexRightAxis设置成1（cannon的默认值就是将z轴的方向作为up的方向的）。RaycastVehicle就先说到这，它的一些属性和方向请查看文档。

2. WheelInfo类

这个是车轮类，里面包含了十分丰富的信息，包括车轮相对于车的位置，车轮半径，滚动影响，转弯滑动等等信息，下面我们看一下构造函数

WheelInfo （ [options] ）

这个options就很复杂了，可以在我的例子中手动调试。下面我们还是通过案例代码来学习这两个类。

three.js cannon.js物理引擎之制作拥有物理特性的汽车-LMLPHP

3. 案例代码

先看看物理引擎的部分

var carBodySize = new THREE.Vector3(4.52, 2.26, 1.08);
var wheelRadius = 0.5;
initCannon() {
        //初始物理里世界
    world = new CANNON.World();
    world.quatNormalizeSkip = 0;
    world.quatNormalizeFast = false;
    world.gravity.set(0, 0, -9.8);
    world.broadphase = new CANNON.NaiveBroadphase();
    world.solver.iterations = 10;
    world.defaultContactMaterial.friction = 0;
        //定义车体形状
    var chassisShape;
        //车体为一个矩形
    chassisShape = new CANNON.Box(new CANNON.Vec3(carBodySize.x/2, carBodySize.y/2, carBodySize.z/2));
        //定义车体刚体
    var chassisBody = new CANNON.Body({mass: 150, material: new CANNON.Material({friction: 0, restitution: 0})})
        //刚体中添加形状
    chassisBody.addShape(chassisShape);
        //初始化刚体的位置
    chassisBody.position.set(0, 0, 5);
        //设置一个初始的角速度
    chassisBody.angularVelocity.set(0, 0, 0.5);
        //初始化车辆引擎
    vehicle = new CANNON.RaycastVehicle({
        chassisBody: chassisBody, indexForwardAxis: 0, indexRightAxis: 1, indexUpAxis: 2
    });

    var options = {
        radius: wheelRadius,
        directionLocal: new CANNON.Vec3(0, 0, -wheelRadius * 2),
        suspensionStiffness: 30,
        suspensionRestLength: 0.3,
        frictionSlip: 5,
        dampingRelaxation: 2.3,
        dampingCompression: 4.4,
        maxSuspensionForce: 100000,
        rollInfluence:  0.01,
        axleLocal: new CANNON.Vec3(0, 1, 0),
        chassisConnectionPointLocal: new CANNON.Vec3(1, 1, 0),
        maxSuspensionTravel: 0.3,
        customSlidingRotationalSpeed: -30,
        useCustomSlidingRotationalSpeed: true
    };
    //设置第一个轮的位置，并将轮子信息添加到车辆类中
    options.chassisConnectionPointLocal.set(1.13, 0.95, -0.1);
    vehicle.addWheel(options);
        //设置第二个轮的位置，并将轮子信息添加到车辆类中
    options.chassisConnectionPointLocal.set(1.13, -0.95, -0.1);
    vehicle.addWheel(options);
        //设置第三个轮的位置，并将轮子信息添加到车辆类中
    options.chassisConnectionPointLocal.set(-1.47, 0.95, -0.05);
    vehicle.addWheel(options);
        //设置第四个轮的位置，并将轮子信息添加到车辆类中
    options.chassisConnectionPointLocal.set(-1.47, -0.95, -0.05);
    vehicle.addWheel(options);
        //通过addToWorld方法将将车辆及其约束添加到世界上。
    vehicle.addToWorld(world);
        //高度场的方法，上节已经了解了，不多说
    var matrix = [];
    for (var i = 0; i < size; i++) {
        matrix.push([]);
        for (var j = 0; j < size; j++) {
            var height = Math.cos(i / size * Math.PI * (size / 10)) * Math.cos(j / size * Math.PI * (size / 10)) / 2;
            matrix[i].push(height)
        }
    }
    var hfShape = new CANNON.Heightfield(matrix, {
        elementSize: 1
    });
    var hfBody = new CANNON.Body({ mass: 0, material: new CANNON.Material({friction: 0.5, restitution: 0})});
    hfBody.addShape(hfShape, new CANNON.Vec3(-size / 2, - size / 2, 0), new CANNON.Quaternion());
    world.addBody(hfBody);
},

接下来是操作小汽车的一些代码

document.onkeydown = this.handler;
document.onkeyup = this.handler;
handler(event) {
    var up = (event.type == 'keyup');
    if(!up && event.type !== 'keydown'){
        return;
    }

    vehicle.setBrake(0, 0);
    vehicle.setBrake(0, 1);
    vehicle.setBrake(0, 2);
    vehicle.setBrake(0, 3);

    switch(event.keyCode){
        case 38: // 按下向前键时，通过applyEngineForce方法，设置车轮力以在每个步骤中施加在后车轮上
            vehicle.applyEngineForce(up ? 0 : -params.maxForce, 2);
            vehicle.applyEngineForce(up ? 0 : -params.maxForce, 3);
            break;

        case 40: // 同上
            vehicle.applyEngineForce(up ? 0 : params.maxForce, 2);
            vehicle.applyEngineForce(up ? 0 : params.maxForce, 3);
            break;

        case 66: // 刹车键b，通过setBrake方法，设置四个车轮的制动力
            vehicle.setBrake(brakeForce, 0);
            vehicle.setBrake(brakeForce, 1);
            vehicle.setBrake(brakeForce, 2);
            vehicle.setBrake(brakeForce, 3);
            break;

        case 39: // 按下右键，通过setSteeringValue方法，设置前轮转向值
            vehicle.setSteeringValue(up ? 0 : -maxSteerVal, 0);
            vehicle.setSteeringValue(up ? 0 : -maxSteerVal, 1);
            break;

        case 37: // 同上
            vehicle.setSteeringValue(up ? 0 : maxSteerVal, 0);
            vehicle.setSteeringValue(up ? 0 : maxSteerVal, 1);
            break;
        }
},

好的这就是主要代码，小车是在THREE的官方demo上面下载的。

转载请注明地址：郭先生的博客

Vadim