three.js物理引擎cannon.js之弹跳的小球

一、简介

目前在 Github 上搜索到的 3D 物理引擎库有 Cannon.js、Oimo.js、Ammo.js、Energy.js、Physijs 等等，大部分都已许久没有更新迭代了（长达好几年），项目的 Star 数量和 Issues 数量也不多，我们该如何选择？

Energy.js ：使用 C++ 编写转 JavaScript 的 3D 物理引擎，源码不可读，目前 Github 比较冷清。

Oimo.js ：一款轻量级的 3D 物理引擎，文件大小 153 KB。

Physijs：号称专为threejs开发的物理引擎，但是git上从15年就已经不再更新了。并且我已经测试过在最新的three.js 101dev 中已经无法正常使用了。

Cannon.js ：完全使用 JavaScript 编写的优秀 3D 物理引擎，包含简单的碰撞检测、各种形状的摩擦力、弹力、约束等功能。

从综合性来看，我更偏向于 Cannon.js ，因为这个我也测试了。^_^ ，虽然也是多年没有更新。但是它可以在最新版的three.js中正常使用。所以下面主要讲讲 Cannon.js。

二、正文

查看官方demo点击这里

首先建立世界,当然你要先把cannon.js 引入到你的文件里。

// 建立物理世界
world = new CANNON.World()

// 設定重力場為 y 軸 -9.8 m/s²
world.gravity.set(0, -9.8, 0)

// 碰撞偵測
world.broadphase = new CANNON.NaiveBroadphase()

首先需建立一個 CANNON.World 物件，用它作为物理世界的容器来管理世界中的刚体与模型行为，在这里简单设定物理世界的重力为 y 轴向下 9.8 m/s²，Cannon.js 提供了 Broadphase、NaiveBroadphase 两种碰撞检测阶段，默认是 NaiveBroadphase。

建立动态球形刚体

            //创建球形刚体
            var sphereShape = new CANNON.Sphere(1); // 形状
            var sphere_cm = new CANNON.Material();  // 材质
            sphereBody = new CANNON.Body({ // 刚体
                mass: 5,    //质量
                position: new CANNON.Vec3(0, 10, 0),    // 位置
                shape: sphereShape, 
                material: sphere_cm
            })

            world.add(sphereBody)</