Cannon.js

详细内容请访问 Cannon.js 官方文档

关于 Cannon.js

Web的轻量级3D物理引擎
本身只有398KB

Cannon.js的制作者受three.js和ammo.js的启发,并由于缺乏支持浏览器的物理引擎,最终cannon.js出现了。Cannon.js物理引擎包括简单的碰撞检测,各种体形,接触,摩擦和约束。

Cannon.js是用于游戏的刚体模拟库。程序员可以使用它来使他们的游戏对象以真实的方式移动和交互。Cannon.js是用JavaScript编写的,可以与任何支持浏览器的渲染或游戏引擎一起使用。

Cannon.js的安装与使用与Physijs相比要更容易,只要在html中包含cannon.js或cannon.min.js,就可以完成:

<script src="./cannon.min.js"></script>

Hello Cannon.js!

示例
下面的示例代码创建了一个平面和一个球体,逐步执行模拟,并将球体模拟打印到控制台。注意,Cannon.js使用国际单位(m,kg,s,等)。

// 设置我们的世界
var world = new CANNON.World();
world.gravity.set(0, 0, -9.82); // m/s²

// 创建球体
var radius = 1; // m
var sphereBody = new CANNON.Body({
     
   mass: 5, // kg
   position: new CANNON.Vec3(0, 0, 10), // m
   shape: new CANNON.Sphere(radius)
});
world.addBody(sphereBody);

// 创建一个平面
var groundBody = new CANNON.Body({
     
    mass: 0 // mass == 0 makes the body static
});
var groundShape = new CANNON.Plane();
groundBody.addShape(groundShape);
world.addBody(groundBody);

var fixedTimeStep = 1.0 / 60.0; // seconds
var maxSubSteps = 3;

// 启动模拟循环
var lastTime;
(function simloop(time){
     
  requestAnimationFrame(simloop);
  if(lastTime !== undefined){
     
     var dt = (time - lastTime) / 1000;
     world.step(fixedTimeStep, dt, maxSubSteps);
  }
  console.log("Sphere z position: " + sphereBody.position.z);
  lastTime = time;
})();

注意: 以上代码所创建的物体无法在浏览器中被渲染, 需要配合three.js来使用


创建世界

每个Cannon.js应用程序都从创建一个CANNON.World对象开始。CANNON.World是管理对象和模拟的物理中心。创建Cannon.js世界很容易。首先,创建CANNON.World对象。然后,在Z轴的负方向设置重力为9.82 m/s²:

var world = new CANNON.World();
world.gravity.set(0,0,-9.82);

之后必须向全世界提供一个 BroadPhase 算法,这样它才能找到相撞的物体。这里使用默认的NAIVEBroadPhase
查看Broadphase Class

world.broadphase = new CANNON.NaiveBroadphase();

现在我们有了我们的物理世界,让我们开始为它添加一些东西。

关于物理引擎,碰撞检测一般分成三个部分,粗测阶段(BroadPhase),细测(NarrowPhase)和中间(MiddlePhase),所谓BroadPhase,就是对所有的Shape进行初步检测,具体做法是检测每两个Shape的包围盒是否相交,是则送入下一阶段处理。这里的包围盒一般是AABB,原因显然是它的性价比最好。下一步就是NarrowPhase了,这时,我们必须根据不同类型的Shape给出不同的算法。在物理引擎中,碰撞检测的工作并不是到找到哪些Shape相交就结束了。还有很多工作要做,我们要选取合适的碰撞点,对每个碰撞点要得到法线,相交深度等信息。


创建并添加实体

构建body实体

查看Body Class

使用以下步骤构建body实体:

  • 定义形状。
  • 使用所需的形状和其他物理属性定义刚体。
  • 把实体加到这个世界上。
var mass = 5, radius = 1;
var sphereShape = new CANNON.Sphere(radius); // Step 1
var sphereBody = new CANNON.Body({
     mass: mass, shape: sphereShape}); // Step 2
sphereBody.position.set(0,0,0);
world.add(sphereBody); // Step 3

在第一步中,我们创建了一个半径为1的球体形状。这只是一个球体的数学描述,在它可以移动和碰撞之前,它必须放入刚体中。在步骤二中,我们创建此RigidBody。如果将质量设置为零,则实体将变为静态,但在本例中,我们将质量设置为5千克,这将使球体处于动态状态。静态物体不与其他静态物体碰撞,动态物体与所有其他物体碰撞。对于第三步,我们将 sphereBody 实体添加到世界中。通过将它添加到世界中,它将根据它所受的力移动,并与其他物体碰撞。

创建一个静止的平面

第一步是创建平面形状,然后创建实体。设置物体质量为零,这将确保地面物体始终保持静止。默认情况下,平面的法向量是(0,0,1)。如果我们想让它朝向其他方向,我们必须改变实体的方向(参见Body.quaternion):

 groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2);

最后,将地面实体添加到场景中。
查看Plane Class

var groundShape = new CANNON.Plane();
var groundBody = new CANNON.Body({
      mass: 0, shape: groundShape });
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2);
world.add(groundBody);

不建议使用CANNON.Plane()创建地面,可以通过使用CANNON.Body来创建一个有一定厚度的平面

以上是用于初始化的内容。我们现在可以开始模拟了。

模拟世界

除了已经初始化了的静态地平面和动态球体,还有几个问题要考虑。cannon.js使用一种称为积分器(integrator)的计算算法。积分器在离散时间点处模拟物理方程(Integrators simulate the physics equations at discrete points of time)。这与传统的游戏循环是一致的,在传统的游戏循环中,我们的屏幕基本上如同一本活页移动的书。所以我们需要为Cannon.js选择一个时间步长。一般来说,游戏的物理引擎的一个时间步长,至少快到60赫兹或1/60秒(1/帧数)。虽然可以用更大的时间步长,但是在设置时必须格外小心。

var timeStep = 1.0 / 60.0; // seconds

除了积分器之外,Cannon.js还使用约束解算器。约束求解器(constraint solver)求解仿真中的所有约束。可以完美地解决单个约束。但是,当我们求解一个约束时,会影响其他约束。要获得好的解决方案,我们需要多次迭代所有约束。在此阶段中,解算器(solver)计算物体正确移动所需的脉冲。建议的Cannon.js迭代次数约为5次。您可以根据自己的喜好调整这个数字,但请记住,这需要在速度和准确性之间进行权衡。使用较少的迭代可以提高性能,但准确性会受到影响。同样,使用更多迭代会降低性能,但会提高模拟质量。对于这个简单的示例,我们不需要太多迭代。以下是我们选择的迭代计数。iterations=2;请注意,时间步长与迭代计数完全无关。迭代不是子步骤。一次求解器迭代是对时间步长内的所有约束进行一次遍历。您可以在单个时间步长内多次遍历约束。

现在我们准备开始模拟循环。在游戏中,模拟循环(simulation loop)可以与游戏循环(game loop)合并并在游戏循环的每个过程中调用 world.step(Timestep) 。根据您的帧率和物理时间步长,只调用一次通常就足够了。
Hello Cannon.js!程序设计得很简单,因此没有图形输出。代码只打印出动态体的位置。

以下是模拟循环,它在1秒的时间内模拟60个时间点。

for (var i = 0; i < 60; ++i){
     
  world.step(timeStep);
  console.log(sphereBody.position.x, sphereBody.position.y, sphereBody.position.z);
}

以下输出显示盒子在下落和着陆时的位置关系

0 0 4
0 0 3.99
0 0 3.98
...
0 0 1.25
0 0 1.13
0 0 1.01

CANNON.Demo框架

查看Demo Class

掌握了HelloWorld示例后,就应该开始研究Cannon.js的演示框架。CANNON.Demo是一个演示环境。以下是一些功能:

  • 平移和变焦相机
  • 场景数量可扩展
  • 用于选择场景[数字键],参数调整和调试图形选项的GUI
  • 暂停[p]和单步模拟[s]

该演示框架具有Cannon.js用法及其框架本身的许多示例。鼓励您在学习Cannon.js时探索CANNON.Demo。注意:测试平台是使用Three.js编写的。CANNON.Demo不属于Cannon.js库(build / cannon.demo.js)。Cannon.js库与渲染无关。如Hello world示例所示,您不需要渲染器即可使用Cannon.js。

如果您想学习如何将Cannon.js与Three.js连接起来,请改为查看examples /。

构造器

Demo(options)

参数

options Object

方法
  • addScene(title, initfunc)

向演示应用程序添加场景

title String 场景的标题
initfunc Function 接受一个参数app并初始化物理场景的函数。该函数运行app.setWorld(Body)、app.addVisual(Body)、app.removeVisual(Body)等。

  • restartCurrentScene()

重新启动当前场景


渲染 Cannon.js 场景

一个基本的示例
创建一个带有物理属性的立方体,基本可以分为两个部分:

  • 创建一个带有物理属性的刚体外框(通过cannon.js创建)
  • 在这个外框内放入有形状、颜色等可视化属性几何体(通过three.js创建)

这里附一张UE4创建人物角色的图片,帮助理解
Cannon.js_第1张图片胶囊体和人物

//带有物理属性的外框
const box = new CANNON.Body({
     
    mass: 1,
    shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1))
});
world.addBody(box);	//将创建好的立方体加入到世界中
//在这个外框内放入几何体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshLambertMaterial({
     
    color: 0xff0000
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

但是如何保证这个几何体始终在这个外框内,以及其旋转角度相同呢?

使用最方便的方法之一是启用四元数(Quaternions)。

mesh.useQuaternion = true;

注意:在最新版本的Three.js上,useQuaternion默认为true。

然后,将位置+方向(position+orientation)数据复制到Three.js网格变得非常简单:

mesh.position.x = body.position.x;
mesh.position.y = body.position.y;
mesh.position.z = body.position.z;
mesh.quaternion.x = body.quaternion.x;
mesh.quaternion.y = body.quaternion.y;
mesh.quaternion.z = body.quaternion.z;
mesh.quaternion.w = body.quaternion.w;

//或者将坐标从Cannon.js复制到Three.js
mesh.position.copy(box.position);
mesh.quaternion.copy(box.quaternion);

Cannon.js和Physijs的差异

这里说一下Cannon.js和Physijs两个的不同点,上面的内容我们知道Cannon.js是如何让物体具有物理属性的,而Physijs让物体具有物理属性的方法是在物体的材质(Material)和网格体(Mesh)上着手。

Physijs带有创建材质的方法,如下

// Physijs----Materials
const ground_material = Physijs.createMaterial(
	new THREE.MeshLambertMaterial({
     
		color: 0xffffff,
	}),
	.2, // 定义了材质的摩擦系数
	.4 // 定义了材质的弹性系数,
);

之后通过Physijs.BoxMesh创建网格体

const ground = new Physijs.BoxMesh(
    new THREE.BoxGeometry(200, 4, 200),
    ground_material,
    0 // mass
);

scene.add(ground);

你可能感兴趣的:(Cannon.js,javascript,html)