three.js cannon.js物理引擎之约束
今天郭先生继续说cannon.js，主演内容就是点对点约束和2D坐标转3D坐标。仍然以一个案例为例，场景由一个地面、若干网格组成的约束体和一些拥有初速度的球体组成，如下图。线案例请点击博客原文。
下面来说说如何使用约束来完成一个这样的物理场景。
1. 创建three场景
这一步是基础工作，对于有一定three基础的同学都不会陌生，我就直接上代码了。
initThree() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.x = 40; camera.position.y = 52; camera.position.z = 78; scene.add( camera ); scene.add(new THREE.AxesHelper(40)); scene.add(new THREE.AmbientLight(0x888888)); const light = new THREE.DirectionalLight(0xbbbbbb, 1); light.position.set(0, 50, 50); const distance = 200; let texture = new THREE.TextureLoader().load('/static/images/base/ground.png'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.copy(new THREE.Vector2(40, 40)); let groundGeom = new THREE.BoxBufferGeometry(100, 0.2, 100); 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); geometry = new THREE.BoxGeometry( 2, 2, 2 ); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMap.enabled = true; renderer.setClearColor(0xbfd1e5); controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 10, 0); camera.lookAt(0,10,0); this.$refs.box.appendChild( renderer.domElement ); stats = new Stats(); this.$refs.box.appendChild(stats.dom); },
这里面主要进行初始化场景、相机、渲染器、灯光和地面等操作。
2. 初始化物理世界
这里面包括创建CANNON.World，创建地面刚体，每块需要被约束的刚体和设置点对点约束（在给定的偏移点连接两个实体），接下来我们仍以代码注释的形式详细的讲解对于物理世界的创建。
initCannon() { world = new CANNON.World(); world.gravity.set(0, -9.8, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; bodyGround = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(0, -0.1, 0), shape: new CANNON.Box(new CANNON.Vec3(50, 0.1, 50)), material: new CANNON.Material({friction: 0.05, restitution: params.restitution}) }); ground.userData = bodyGround; world.addBody(bodyGround); //上面的代码意义上一节已经讲过了，我就不多言，主要看下面的代码。 //这里设置了一些变量，N表示组成约束体刚体的数量，space表示相邻两个刚体直接的距离间隔，mass为刚体的质量变量，width表示刚体半宽度，height表示刚体半高度，last表示上一个相连的刚体。 var N = 20, space = 0.1, mass = 0, width = 10, hHeight = 1, last; var halfVec = new CANNON.Vec3(width, hHeight, 0.2);//刚体的长宽高的halfSize向量 var boxShape = new CANNON.Box(halfVec);//定义一个长方体数据 var boxGeometry = new THREE.BoxBufferGeometry(halfVec.x * 2, halfVec.y * 2, halfVec.z * 2);//定义一个长方几何体 var boxMaterial = new THREE.MeshLambertMaterial( { color: 0xffaa00 } );//定义几何体材质 for(var i=0; i<N; i++) {//遍历N次，从上到下创建长方体网格和刚体，位置逐渐变低，质量逐渐变小。 var boxBody = new CANNON.Body({mass: mass, material: new CANNON.Material({friction: 0.05, restitution: params.restitution})});//创建刚体，第一个刚体的质量设置成0（即为不动的刚体），定义材质，并设置摩擦系数和弹性系数 boxBody.addShape(boxShape);//为刚体添加形状 var boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);//创建three世界的网格 boxBody.position.set(0, (N - i + 5) * (hHeight * 2 + space * 2), 0);//这里设置刚体的位置，是由上倒下的顺序 boxBody.linearDamping = 0.01;//设置线性阻尼 boxBody.angularDamping = 0.01;//设置旋转阻尼 world.addBody(boxBody);//将刚体添加到物理世界中 scene.add(boxMesh);//将网格添加到three场景中 boxes.push(boxBody);//将刚体添加到数组中 boxMeshes.push(boxMesh);//将网格添加到数组中，这两步可以在更新物理世界中找到他们的对应关系，也可以添加到Mesh的userData属性中去，具体可以参见上一篇文章 if(i == 0) { //当i=0时，也就是第一个刚体，在刚体创建完毕后，我们将mass变量设置成1 mass = 1; } else {//从第二个刚体往后都会创建两个点对点的约束，点对点约束我们下面讲 var ptp1 = new CANNON.PointToPointConstraint(boxBody, new CANNON.Vec3(-width, hHeight + space, 0), last, new CANNON.Vec3(-width, -hHeight - space, 0), (N - i) / 4); var ptp2 = new CANNON.PointToPointConstraint(boxBody, new CANNON.Vec3(width, hHeight + space, 0), last, new CANNON.Vec3(width, -hHeight - space, 0), (N - i) / 4); world.addConstraint(ptp1);//将约束添加到物理世界 world.addConstraint(ptp2);//将约束添加到物理世界 } last = boxBody;//这里将本次创建的刚体赋值给last变量，一遍下一个循环使用 } },
我们来说说这个点对点约束，他时由5个参数组成
PointToPointConstraint （ bodyA pivotA bodyB pivotB maxForce ）
- bodyA – 刚体A
- pivotA – 相对于刚体A质心的点，刚体A被约束到该点。
- bodyB – 将被约束到与刚体A相同的点的主体。因此，我们将获得刚体A和刚体B之间的链接。如果未指定，刚体A将被约束到一个静态点。
- pivotB – 相对于刚体B质心的点，刚体B被约束到该点。
- maxForce – 约束物体应施加的最大力（如果施加的力过大，刚体A和刚体B之间的链接就会被拉长）
下面就是我们设置链接点的示意图，这样我们就可以清楚上面的代码了
3. 根据鼠标点击，发射一个刚体球
这里就要应用到2D坐标转3D坐标的一些知识了，这里网上已经有很多相关的知识了，可以看threejs 世界坐标与屏幕坐标相互转换，这里我就直接上代码了
document.addEventListener('click', event => { //点击鼠标
event.preventDefault();//阻止默认事件
let x = (event.clientX / window.innerWidth) * 2 - 1;//将鼠标点击的x值转换成[-1, 1]
let y = - (event.clientY / window.innerHeight) * 2 + 1;//将鼠标点击的y值转换成[-1, 1]
let p = new THREE.Vector3(x, y, -1).unproject(camera);//通过unproject方法，使用所传入的摄像机来反投影（projects）该向量，得到鼠标对应三维空间点
let v = p.sub(camera.position).normalize();//用鼠标对应的三维空间点减去相机的位置向量，然后归一化得到小球的射出方向的单位向量
this.createSphere(v, camera.position);//把需要的两个向量传入创建小球的方法中
})
createSphere(v, c) {
//创建小球的方法和上一篇很相似，我就不赘述了
const speed = 50;
var geometry = new THREE.SphereBufferGeometry(1.5, 32, 16);
let sphere = new THREE.Mesh( geometry, this.createRandomMaterial());
sphere.position.copy(c);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add( sphere );
ballMeshes.push(sphere);
let sphereBody = new CANNON.Body({
mass: params.mass,
position: new CANNON.Vec3(c.x, c.y, c.z),
shape: new CANNON.Sphere(1.5),
material: new CANNON.Material({friction: 0.1, restitution: params.restitution})
});
sphereBody.collisionResponse = 0.01;
sphereBody.velocity.set(v.x * speed, v.y * speed, v.z * speed);//这里要注意velocity属性可以刚体带有出速度
world.addBody(sphereBody);
balls.push(sphereBody)
setTimeout(() => {
scene.remove(sphere);
sphere.material.dispose();
sphere.geometry.dispose();
world.removeBody(sphereBody);
balls.shift();
ballMeshes.shift();
}, 60000)
}
createRandomMaterial() {
color.setHSL(Math.random(), 1.0, 0.5);
return new THREE.MeshPhongMaterial({color: color});
}
这样就完成了点对点约束的物理效果，让原本虚拟的three世界变得更加真实。
转载请注明地址：郭先生的博客
