今天郭先生说一说使用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就很复杂了,可以在我的例子中手动调试。下面我们还是通过案例代码来学习这两个类。

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物理引擎之制作拥有物理特性的汽车的更多相关文章

  1. three.js cannon.js物理引擎之ConvexPolyhedron多边形

    年后第一天上班,郭先生来说一说cannon.js的ConvexPolyhedron(多边形),cannon.js是一个物理引擎,内部通过连续的计算得到各个时间点的数据的状态,three.js的模型可以 ...

  2. three.js cannon.js物理引擎制作一个保龄球游戏

    关于cannon.js我们已经学习了一些知识,今天郭先生就使用已学的cannon.js物理引擎的知识配合three基础知识来做一个保龄球小游戏,效果如下图,在线案例请点击博客原文. 我们需要掌握的技能 ...

  3. three.js cannon.js物理引擎之齿轮动画

    郭先生今天继续说一说cannon.js物理引擎,并用之前已经学习过的知识实现一个小动画,知识点包括ConvexPolyhedron多边形.Shape几何体.Body刚体.HingeConstraint ...

  4. three.js cannon.js物理引擎地形生成器和使用指针锁定控件

    今天郭先生说一说使用cannon.js物理引擎绘制地形和使用指针锁定控件.效果如下图.线案例请点击博客原文. 这里面的生成地形的插件和指针锁定控件也是cannon.js的作者schteppe封装的,当 ...

  5. three.js cannon.js物理引擎之Heightfield

    今天郭先生说一说cannon.js物理引擎之Heightfield高度场,学过场论的朋友都知道物理学中把某个物理量在空间的一个区域内的分布称为场,高度场就是与高度相关的场,而cannon.js物理引擎 ...

  6. three.js cannon.js物理引擎之约束

    今天郭先生继续说cannon.js,主演内容就是点对点约束和2D坐标转3D坐标.仍然以一个案例为例,场景由一个地面.若干网格组成的约束体和一些拥有初速度的球体组成,如下图.线案例请点击博客原文. 下面 ...

  7. three.js cannon.js物理引擎之约束(二)

    今天郭先生继续讲cannon.js的物理约束,之前的一篇文章曾简单的提及过PointToPointConstraint约束,那么今天详细的说一说cannon.js的约束和使用方法.在线案例请点击博客原 ...

  8. 基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘

    计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测 ...

  9. 造个海洋球池来学习物理引擎【Three.js系列】

    github地址:https://github.com/hua1995116/Fly-Three.js 大家好,我是秋风.继上一篇<Three.js系列:   游戏中的第一/三人称视角>今 ...

随机推荐

  1. [leetcode]168. Excel Sheet Column Title表格列名编码(十进制和多进制相互转换)

    其实就是一道,十进制转多进制的题 十进制转多进制就是从后边一位一位地取数. 这种题的做法是,每次用n%进制,相当于留下了最后一位,然后把这位添加到结果最前边.结果需要转为进制的符号. 下一次循环的n变 ...

  2. Docker之1---介绍和安装

    Docker介绍 Docker是一个开源项目,让应用程序布署在软件货柜下的工作可以自动化进行,借此在Linux操作系统上,提供一个额外的软件抽象层,以及操作系统层虚拟化的自动管理机制. Docker利 ...

  3. CentOS 7 最小化安装及优化

    CentOS 7 最小化安装及优化 目录 CentOS 7 最小化安装及优化 一.下载镜像文件 官方网站 国内镜像源 一.VMware 配置虚拟网络 二.VMware 新建虚拟机 三.CentOS 7 ...

  4. python安装库报错的处理方法

    在安装python map库时遇到了还多问题,找了好的方法都没有安装成功,最后改安装basemap库参考了了:https://www.jb51.net/article/147780.htm一文操作,最 ...

  5. 一个轻量级的.Net Core微服务快速开发的轮子

    前言     Adnc是一个轻量级的.Net Core微服务快速开发框架,同时也可以应用于单体架构系统的开发.框架基于JWT认证授权.集成了一系列微服务配套组件,代码简洁.易上手.学习成本低.开箱即用 ...

  6. ES6 对象拓展方法

    一,ES6 对象拓展方法 ES6为对象提供了一些拓展方法,下面列举几个比较常见的对象拓展方法.

  7. 日常ie兼容问题(持续整理)

    1.关于new Date()格式为何要转成y/m/d格式 IE不会识别时间状态为"y-m-d"的形式,如果获取的new Date("2020-05-01") 那 ...

  8. VMware 安装 Centos7 超详细过程

    https://www.runoob.com/w3cnote/vmware-install-centos7.html centos7安装参考文档 VMware 安装 Centos7 超详细过程 分类  ...

  9. .NET 云原生架构师训练营(模块二 基础巩固 RabbitMQ Masstransit 详解)--学习笔记

    2.6.7 RabbitMQ -- Masstransit 详解 Consumer 消费者 Producer 生产者 Request-Response 请求-响应 Consumer 消费者 在 Mas ...

  10. 原生javascript制作省市区三级联动详细教程

    多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...