• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

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

其他 郭先生的博客 2672次浏览 0个评论

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

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

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

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物理引擎之制作拥有物理特性的汽车

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上面下载的。

 

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


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明three.js cannon.js物理引擎之制作拥有物理特性的汽车
喜欢 (0)

您必须 登录 才能发表评论!

加载中……