three.js 之cannon.js物理引擎
今天郭先生说的是一个物理引擎，它十分小巧并且操作简单，没错他就是cannon.js。这些优点都源自于他是基于js编写的，对于js使用者来说cannon.js拥有其他物理引擎没有的纯粹性。从学习成本来看，cannon.js的学习成本比较低，对于新手来说比较友好，因为它有相对完善的api，学习cannon.js之前我们不妨来看看cannon.js的官方网站以及他的API，对于js学习者来说这是十分必要的。官网上面有一些example，他们十分典型并囊括了大多数的知识点，配合api一起学习是个不错的选择。在线案例请点击博客原文。效果如下图，接下来以一个小案例，简单的介绍一下cannon.js。
1. 初始化three场景
创建three场景（或者说three世界）来作为物理世界的载体，这一步很简单，主要就是添加渲染器、场景、相机和网格等three元素，没必要多说。
scene = new THREE.Scene();//step 1 创建场景 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.y = 30; camera.position.z = 20; camera.lookAt(0,5,0); scene.add( camera ); //step 2 场景中添加相机 scene.add(new THREE.AmbientLight(0x888888)); const light = new THREE.DirectionalLight(0xbbbbbb, 1); light.position.set(6, 30, 6); scene.add(light); //step 3 场景中添加另种光源 renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMap.enabled = true; renderer.setClearColor(0xbfd1e5); this.$refs.box.appendChild(renderer.domElement); //step 4 dom中添加渲染器 let groundGeom = new THREE.BoxBufferGeometry(40, 0.2, 40); let groundMate = new THREE.MeshPhongMaterial({color: 0xdddddd, map: texture}) ground = new THREE.Mesh(groundGeom, groundMate); ground.position.y = -0.1; ground.receiveShadow = true; scene.add(ground); //step 5 添加地面网格
2. 初始化物理世界
这里是初始化物理世界，我们详细的讲一下他们的用法。
initCannon() { world = new CANNON.World(); //该方法初始化物理世界，里面包含着物理世界的相关数据（如刚体数据，世界中所受外力等等） world.gravity.set(0,-9.8,0); //设置物理世界的重力为沿y轴向上-9.8米每二次方秒 world.broadphase = new CANNON.NaiveBroadphase();//NaiveBroadphase是默认的碰撞检测方式，该碰撞检测速度比较高 world.solver.iterations = 5;//解算器的迭代次数，更高的迭代次数意味着更加精确同时性能将会降低 bodyGround = new CANNON.Body({ //创建一个刚体（物理世界的刚体数据） mass: 0, //刚体的质量，这里单位为kg position: new CANNON.Vec3(0, -0.1, 0), //刚体的位置，单位是米 shape: new CANNON.Box(new CANNON.Vec3(20, 0.1, 20)), //刚体的形状（这里是立方体，立方体的参数是一个包含半长、半宽、半高的三维向量，具体我们以后会说） material: new CANNON.Material({friction: 0.05, restitution: 0}) //材质数据，里面规定了摩擦系数和弹性系数 }); ground.userData = bodyGround; //将刚体的数据赋值给地面网格的userData属性 world.addBody(bodyGround); //物理世界添加地面刚体 },
3. 向场景中添加网格并向物理世界中添加刚体数据
这里我们通过setInterval函数我们定时向场景中添加网格并向物理世界中添加刚体数据，
interval = setInterval(() => { this.createBox(); //创建网格和刚体的方法 }, 200);
下面是具体的方法
createBox() { let x = Math.random() * 10 - 5; let z = Math.random() * 10 - 5; let box = new THREE.Mesh( geometry, this.createRandomMaterial() ); //createRandomMaterial创建随机颜色的材质 box.position.set(x, 20, z); scene.add( box ); //创建box，并添加到场景 let bodyBox = new CANNON.Body({ mass: 1, position: new CANNON.Vec3(x, 20, z), shape: new CANNON.Box(new CANNON.Vec3(1,1,1)), material: new CANNON.Material({friction: 0.1, restitution: 0}) });//创建一个质量为1kg，位置为（x,20,z），形状为halfSize为1,1,1的正方形刚体，材质中摩擦系数为0.1，弹性系数为0。 box.userData = bodyBox;//给box的userData属性添加刚体数据 world.addBody(bodyBox);//在物理世界中添加该刚体 setTimeout(() => { //10秒钟之后在场景中移除box，并在物理世界中移除该刚体 scene.remove(box); box.material.dispose(); box.geometry.dispose(); world.removeBody(bodyBox); }, 10000) },
4. 根据物理引擎的数据更新three网格数据
这一步我们逐帧根据物理引擎的数据渲染three场景
animation() { //requestAnimationFrame动画中调用render方法
this.globalID = requestAnimationFrame(this.animation);
this.render();
},
render() { //更新性能插件，根据物理引擎数据更新网格数据，最后渲染场景
stats.update();
this.updatePhysics();
renderer.render( scene, camera );
},
updatePhysics() { // world.step
world.step(timeStep); //第一个参数是以固定步长更新物理世界参数（详情请看api）
scene.children.forEach(d => {//遍历场景中的子对象，如果对象的isMesh属性为true，我们就将更新改对象的position和quaternion属性（他们对应的刚体数据存在对应的userData中）。
if(d.isMesh == true) {
d.position.copy(d.userData.position);
d.quaternion.copy(d.userData.quaternion);
}
})
}
这样我们就将cannon.js物理引擎应用到了three中。不出意外的话，接下来我会讲解一下官方的examples。
转载请注明地址：郭先生的博客
