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世界变得更加真实。

转载请注明地址：郭先生的博客