用Physijs在场景中添加物理效果

Posted 2020-09-17 Heavi的博客

1.创建可用Physijs的基本Three.js场景

    创建一个可用Physijs的Three.js场景非常简单，只要几个步骤即可。首先我们要包含正确的文件， 需要引入physi.js文件。实际模拟物理场景时非常耗费CPU的，如果我么能在render线程中做的话，场景的帧频会受到严重的影响。为了弥补这一点，Physijs选择在后台线程中执行计算。这里的后台是有Web workers（网页线程）规范定义的额，现在大多数浏览器都实现了该功能。

    对Physijs来说也就意味着我们需要配置一个带有执行任务的JavaScipt文件，并告诉Physijs在哪里可以找到用来模拟场景的ammo.js文件。所以需要添加以下代码：

Physijs.scripts.worker = "../libs/physijs_worker.js";
        Physijs.scripts.ammo = "../libs/ammo.js";

    Physijs在Three.js的普通场景外又提供了一个包装器，所以我们代码可以想这样创建场景：

scene = new Physijs.Scene();
            scene.setGravity(new THREE.Vector3(0, -50, 0));

    在模拟物理效果之前，我们需要在场景中添加一些对象。为此，我们可以使用Three.js的普通方法来定义对象，但必须用一个特定的Physijs对象将这些对象包裹起来：

var stoneGeom = new THREE.BoxGeometry(0.6, 6, 2);
                        var stone = new Physijs.BoxMesh(stoneGeom, Physijs.createMaterial(new THREE.MeshPhongMaterial({
                            color: scale(Math.random()).hex(),
                            transparent: true,
                            opacity: 0.8
                        })));
                       ...
                        scene.add(stone);

    我们第一个Physijs场景中的各个部分都有了。剩下要做的就是告诉Physijs模拟物理效果，并更新场景中各对象的位置和角色。为此，我们可以调用创建的场景的simulate方法。修改基础render循环代码：

render = function(){
            requestAnimationFrame(render);
            renderer.render(scene, camera);
            render_stats.update();

            scene.simulate(undefined, 1);
        }

    假设我们要实现下面图片中放倒多米若骨牌的效果。

    下面是实现功能的一段核心代码，points是所有多米诺骨牌的点集合。遍历每个骨牌的顶点，创建一个类型为BoxMesh对象（多米诺骨牌）。这里需要注意的是通过stone.lookAt()函数设置了对象的旋转角度，在手动更新了Physijs包装的对象的角度（或位置）之后，我们必须告诉Physijs有什么东西改变了。对于角度，我么可以将__dirtRotation设置为true；对于位置，我们可以将__dirtyPosition设置为true。

this.resetScene = function(){
                    scene.setGravity(new THREE.Vector3(controls.gravityX, controls.gravityY, controls.gravityZ));
                    stones.forEach(function(st){
                        scene.remove(st);
                    });
                    stones = [];

                    points.forEach(function(point){
                        var stoneGeom = new THREE.BoxGeometry(0.6, 6, 2);
                        var stone = new Physijs.BoxMesh(stoneGeom, Physijs.createMaterial(new THREE.MeshPhongMaterial({
                            color: scale(Math.random()).hex(),
                            transparent: true,
                            opacity: 0.8
                        })))
                        //console.log(stone.position);
                        stone.position.copy(point);
                        stone.lookAt(scene.position);
                        stone.__dirtyRotation = true;
                        stone.position.y = 3.5;

                        scene.add(stone);
                        stones.push(stone);
                    });

                    stones[0].rotation.x = 0.2;
                    stones[0].__dirtyRotation = true;
                }

2.材质属性

    Physijs中材质对象最重要的两个属性分别是restitution和firction。restitution设置材质弹性，值越大，弹性越强；值越小弹性越弱。而restitution设置摩擦系数，值越小，摩擦就越小，物体越容易移动；值越大，摩擦越大，物体越难移动。

    假如我们要实现下图的效果。地板一直都在左右旋转，球体也会跟着地板一起移动。这里我们主要看下球体的实现代码如何。

    下面的代码是圆球的实现代码。首先生成了一个随机颜色colorSphere，每次我们批量创建五个球体。创建球体对象使用Physijs.SphereMesh类创建。这里主要看下如何创建材质。创建材质和我们普通的方法不同，必须使用Physijs.createMaterial函数创建。第三个参数friction用来设置摩擦系数，范围0到1。第四个参数restitution设置弹性，范围0到1。只要我们修改这两个参数，我们就能看到球体落到地板时以及移动时的效果区别。

this.addSpheres = function () {
                    var colorSphere = scale(Math.random()).hex();
                    for(var i = 0; i < 5; i++){
                        box = new Physijs.SphereMesh(
                                new THREE.SphereGeometry(2, 20),
                                Physijs.createMaterial(
                                        new THREE.MeshPhongMaterial({
                                            color: colorSphere,
                                            opacity: 0.8,
                                            transparent: true
                                        }),
                                        controls.sphereFriction,
                                        controls.sphereRestitution
                                )
                        );
                        box.position.set(
                                Math.random() * 50 - 25,
                                20 + Math.random() * 5,
                                Math.random() * 50 - 25
                        );
                        meshes.push(box);
                        scene.add(box);
                    }
                };

3.基础图形

    Physijs提供了一些可以用来包装几何体的图形类。使用这些几何体唯一要做的就是讲THREE.Mesh的构造函数替换成这些网格对象的构造函数。下表是Physijs中所有网格对象的概览：

    Physijs.PlaneMesh/这个网格可以用来创建一个厚度为0的平面。这样的平面也可以用BoxMesh对象包装一个高度很低的THREE.CubeGeometry来表示

    Physijs.BoxMesh/如果是类似方块的几何体，你可以使用这个网格。例如，它的属性跟THREE.CubeGeometry的属性很相配

    Physijs.SphereMesh/对于球形可以使用这个网格。它跟THREE.SphereGeometry的属性很相配

    Physijs.CylinderMesh/通过设置THREE.Cylinder的属性你可以创建出各种柱状图形。Physijs为各种柱性提供了不同网格。Physijs.CylinderMesh可以用于一般的、上下一致的圆柱形

    Physijs.ConeMesh/如果顶部的半径为0，底部的半径值大于0，那么你可以用THREE.Cylinder创建一个圆锥体。如果你想在这样一个对象上应用物理效果，那么可以使用的、最相匹配的网格类就是ConeMesh

    Physijs.CapsuleMesh(胶囊网格)/跟THREE.Cylinder属性很相似，但其底部和底部是圆的

    Physijs.ConvexMesh(凸包网格)/Physijs.ConvexMesh是一种比较粗略的图形，可用于多数复杂退行。它可以创建一个模拟复杂图形的凸包

    Physijs.ConcaveMesh/ConvexMesh是一个比较粗略的图形，而ConcaveMesh则可以对负责图形进行比较细致的表现。需要注意的是使用ConcaveMesh对效率的影响比较大

    Physijs.HeightfieldMesh(高度场网格)/这是一种非常特别的网格。通过该网格你可以从一个THREE.PlaneGeometry对象创建出一个高度场。

4.使用约束限制对象移动

    我们已经了解到各种图形如何对重力、摩擦和弹性做出反应。并影响碰撞。Physijs还提供了一些高级对象，让i可以限制对象的移动。在Physijs里，这些对象呗称作约束。下表是Physijs中可用约束概览：

    PointConstraint/通过这个约束，你可以将一个对象与另一个对象之间的位置固定下来。例如一个对象动了，另一个对象也会随着移动，它们之间的距离和方向保持不变

    HingeConstraint/通过活页约束，你可以限制一个对象只能像活页一样移动，例如门

    SliderConstraint/将对象的移动限制在一个轴上。例如移门

    ConeTwistConstraint/通过这个约束，你可以用一个对象限制另一个对象的旋转和移动。这个约束的功能类似于一个球削式关节。例如，胳膊在肩关节中的活动

    DOFConstraint/通过自由度约束，你可以限制对象在任意轴上的活动，你可以设置对象活动的额最小、最大角度。这是最灵活的约束方式

5.用PointConstraint限制亮点间的移动

    实现代码如下，我们在这段代码里可以看到，我们使用特定的Physijs网格创建对象，然后将它们添加到场景中。我们使用Physijs.PointConstraint构造函数创建约束。

function createPointToPoint() {
            var obj1 = new THREE.SphereGeometry(2);
            var obj2 = new THREE.SphereGeometry(2);

            var objectOne = new Physijs.SphereMesh(obj1, Physijs.createMaterial(
                    new THREE.MeshPhongMaterial({color: 0xff4444, transparent: true, opacity: 0.7}), 0, 0));
            objectOne.position.z = -18;
            objectOne.position.x = -10;
            objectOne.position.y = 2;
            objectOne.castShadow = true;
            scene.add(objectOne);

            var objectTwo = new Physijs.SphereMesh(obj2, Physijs.createMaterial(
                    new THREE.MeshPhongMaterial({color: 0xff4444, transparent: true, opacity: 0.7}), 0, 0));
            objectTwo.position.z = -5;
            objectTwo.position.x = -20;
            objectTwo.position.y = 2;
            objectTwo.castShadow = true;
            scene.add(objectTwo);

            // if no position two, its fixed to a position. Else fixed to objectTwo and both will move
            var constraint = new Physijs.PointConstraint(objectOne, objectTwo, objectTwo.position);
            scene.addConstraint(constraint);
        }

    构造函数有三个参数。前两个参数指定要连接的两个对象。第三个参数指定约束绑定的位置。一般来说，如果你指向将两个对象连在一起，那么你最好将这个位置设置在第二个对象的位置上。如果你不想将一个对象绑定到另一个对象，而绑定到场景中某个固定的点，那么你可以忽略第二个参数。这样第一个对象就会跟着你指定的位置保持固定距离。

6.用HingeConstraint创建类似们的约束

    顾名思义，通过HingeConstraint你可以创建一个行为类似活页的对象。它可以绕固定的轴旋转，并可限制在一定角度内。假如我们现在要实现下图中框选部分的活页门效果，白色长条随着右边的小方块旋转。

    实现代码如下，HingeConstraint构造函数包含四个参数，定义为new Physijs.HingeConstraint(mesh_a, mesh_b, position, axis)。mesh_a第一个对象是将要被约束的对象；mesh_b指定mesh_a受哪个对象约束。这里flipperLeft受flipperLetPivot小方块影响；position约束应用的点。在本例中这个点就是Mesh_a绕着旋转的点；axis活页绕着旋转的轴。在本例中我们将活页设置在水平方向（0， 1， 0）。最后我们还需要设置约束对象的属性，为此我们调用setLimits函数。该函数包含四个参数，分别是low（指定旋转的最下弧度）、high（指定旋转的最大弧度）、bias_factor（该属性指定处于错误位置时，约束进行纠正的速度）、relaxation_factor（改属性指定约束以什么样的比例改变速度）。如果该属性的值越高，哪儿对象在达到最小或最大角度时会被弹回来。

function createLeftFlipper() {
            var flipperLeft = new Physijs.BoxMesh(
                    new THREE.BoxGeometry(12, 2, 2), Physijs.createMaterial(new THREE.MeshPhongMaterial(
                            {opacity: 0.6, transparent: true}
                    )), 0.3
            );
            flipperLeft.position.x = -6;
            flipperLeft.position.y = 2;
            flipperLeft.position.z = 0;
            flipperLeft.castShadow = true;
            scene.add(flipperLeft);
            var flipperLeftPivot = new Physijs.SphereMesh(
                    new THREE.BoxGeometry(1, 1, 1), ground_material, 0);

            flipperLeftPivot.position.y = 1;
            flipperLeftPivot.position.x = -15;
            flipperLeftPivot.position.z = 0;
            flipperLeftPivot.rotation.y = 1.4;
            flipperLeftPivot.castShadow = true;

            scene.add(flipperLeftPivot);

            // when looking at the axis, the axis of object two are used.
            // so as long as that one is the same as the scene, no problems
            // rotation and axis are relative to object2. If position == cube2.position it works as expected
            var constraint = new Physijs.HingeConstraint(flipperLeft, flipperLeftPivot, flipperLeftPivot.position, new THREE.Vector3(0, 1, 0));
            scene.addConstraint(constraint);

            constraint.setLimits(
                    -2.2, // minimum angle of motion, in radians, from the point object 1 starts (going back)
                    -0.6, // maximum angle of motion, in radians, from the point object 1 starts (going forward)
                    0.1, // applied as a factor to constraint error, how big the kantelpunt is moved when a constraint is hit
                    0 // controls bounce at limit (0.0 == no bounce)
            );

            return constraint;
        }

7.用SliderConstraint将移动限制到一个轴

    通过SliderConstraint约束，你可以将某个对象的移动限制到某个轴上。用代码 创建这些约束非常简单：

var constraint = new Physijs.SliderConstraint(sliderMesh, new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0));

            scene.addConstraint(constraint);
            constraint.setLimits(-10, 10, 0, 0);
            constraint.setRestitution(0.1, 0.1);

    该约束对象接收三个参数（或者四个，如果想将一个对象约束到另外一个对象）。构造函数定义为new Physijs.SliderConstraint(mesh_a, mesh_b, position, axis)。这些参数和HingeConstraint的参数相似。我么还需要通过constraint.setLimits函数限定滑块能滑多远：constriant.setLimits(-10, 10, 0, 0)。参数依次为linear_lower指定对象的线性下限；linear_upper该属性指定对象的线性上限；anguar_lower该属性指定对象的角度下限；angular_higher该属性指定对象的角度上限。

8.用ConeTwistConstraint创建类似球削的约束

    通过ConeTwistConstraint可以创建出一个移动受一系列角度限制的约束。我们可以指定一个对象绕着另一个对象转动时在x、y、z轴上的最小角度和最大角度。理解ConeTwistConstraint最好的方法就是看看创建约束的代码：

function createConeTwist() {
            var baseMesh = new THREE.SphereGeometry(1);
            var armMesh = new THREE.BoxGeometry(2, 12, 3);

            var objectOne = new Physijs.BoxMesh(baseMesh, Physijs.createMaterial(
                    new THREE.MeshPhongMaterial({color: 0x4444ff, transparent: true, opacity: 0.7}), 0, 0), 0);
            objectOne.position.z = 0;
            objectOne.position.x = 20;
            objectOne.position.y = 15.5;
            objectOne.castShadow = true;
            scene.add(objectOne);


            var objectTwo = new Physijs.SphereMesh(armMesh, Physijs.createMaterial(
                    new THREE.MeshPhongMaterial({color: 0x4444ff, transparent: true, opacity: 0.7}), 0, 0), 10);
            objectTwo.position.z = 0;
            objectTwo.position.x = 20;
            objectTwo.position.y = 7.5;
            scene.add(objectTwo);

            objectTwo.castShadow = true;

            //position is the position of the axis, relative to the ref, based on the current position
            var constraint = new Physijs.ConeTwistConstraint(objectOne, objectTwo, objectOne.position);

            scene.addConstraint(constraint);
            // set limit to quarter circle for each axis
            constraint.setLimit(0.5 * Math.PI, 0.5 * Math.PI, 0.5 * Math.PI);
            constraint.setMaxMotorImpulse(1);
            constraint.setMotorTarget(new THREE.Vector3(0, 0, 0)); // desired rotation

            return constraint;
        }

    我们先是创建出几个用约束连接起来的对象：ojectOne(球）和objectTwo（盒子）。ConeTwistConstraint的第一个参数是要约束的对象，第二个参数是第一个参数要约束到的对象，最后一个参数是约束应用的位置（在本例中，这个位置就是objectOne绕着旋转的位置）。将约束添加到场景中之后，我们就可以通过setLimts函数设置它的限制。setLimit函数接收三个弧度值，表示对象绕每个轴旋转的最大角度。