babylon.js 学习笔记(6)

接上回继续，今天继续捣腾动画，上一节咱们让汽车的轮子动了起来，回顾一下核心代码：

//轮子转动
const wheelAnimation = (scene, wheels) => {
    //定义一个动画，每秒30帧，绕y轴转动
    const animWheel = new BABYLON.Animation("wheelAnimation", "rotation.y",
        30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    //动画关键帧
    const wheelKeys = [];

    //起始帧
    wheelKeys.push({
        frame: 0,
        value: 0
    });

    //截止帧(即：第30帧，转到360度)
    wheelKeys.push({
        frame: 30,
        value: 2 * Math.PI
    });

    //设置关键帧
    animWheel.setKeys(wheelKeys);

    let result = [];

    for (let i = 0; i < wheels.length; i++) {
        //将wheel与动画关联
        wheels[i].animations = [];
        wheels[i].animations.push(animWheel);

        //开始动画,最后的true表示循环播放
        result.push(scene.beginAnimation(wheels[i], 0, 30, true));
    }

    return result;
}

可能有朋友要问了，这里返回的result有啥用？先卖个关子，后面再讲。

模仿这段代码，略做修改，我们就能让汽车在屏幕上动起来：

//car运动
const carAnimation = (scene, car) => {
    const animCar = new BABYLON.Animation("carAnimation", "position.x",
        30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    //动画关键帧
    const carKeys = [];

    //起始帧
    carKeys.push({
        frame: 0,
        value: -1
    });

    carKeys.push({
        frame: 30,
        value: -0.9
    });

    //截止帧(即：第120帧，走到x=8)
    carKeys.push({
        frame: 120,
        value: 0.9
    });

    carKeys.push({
        frame: 150,
        value: 1
    });

    //设置关键帧
    animCar.setKeys(carKeys);

    car.animations = [];
    car.animations.push(animCar);

    //开始动画
    return scene.beginAnimation(car, 0, 150, true);

}

一、如何控制动画暂停/播放？

接下来说说scene.beginAnimation 返回值有啥用？根据官方文档描述，这个返回对象Animatable提供了几个有用的方法：

• pause()
• restart()
• stop()
• reset()

利用这些方法，接下来加点鼠标互动：

• ALT+鼠标单击，暂停/继续播放 汽车运动；
• SHIFT+鼠标单击，暂停/继续播放 车轮转动

//声明2个变量，方便控制动画
let wheelAnimatables, carAnimatable;

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    ...

    wheelAnimatables = wheelAnimation(scene, wheels);
    carAnimatable = carAnimation(scene, car);

    ...

    return scene;
}

...
window.addEventListener("click", (e) => {
    if (e.altKey) {
        if (carAnimatable._paused) {
            carAnimatable.restart();
        }
        else {
            carAnimatable.pause();
        }
    }

    if (e.shiftKey) {
        let first = wheelAnimatables[0];
        if (first._paused) {
            wheelAnimatables.forEach(element => {
                element.restart();
            });
        }
        else {
            wheelAnimatables.forEach(element => {
                element.pause();
            });
        }
    }
});

在线地址：https://yjmyzz.github.io/babylon_js_study/day06/01.html

为了方便后面复用这个小汽车，我们把它在playground上导出为babylon文件（参考前文提到的做法），核心代码如下:

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 2, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    const car = buildCar();
    const wheels = buildWheels(car);
    car.rotation.x = -Math.PI / 2;
    wheelAnimation(scene, wheels);

    return scene;
}

const buildCar = () => {
    //base
    const outline = [
        new BABYLON.Vector3(-0.3, 0, -0.1),
        new BABYLON.Vector3(0.2, 0, -0.1),
    ]

    //curved front
    for (let i = 0; i < 20; i++) {
        outline.push(new BABYLON.Vector3(0.2 * Math.cos(i * Math.PI / 40), 0, 0.2 * Math.sin(i * Math.PI / 40) - 0.1));
    }

    //top
    outline.push(new BABYLON.Vector3(0, 0, 0.1));
    outline.push(new BABYLON.Vector3(-0.3, 0, 0.1));

    //car face UVs
    const faceUV = [];
    faceUV[0] = new BABYLON.Vector4(0, 0.5, 0.38, 1);
    faceUV[1] = new BABYLON.Vector4(0, 0, 1, 0.5);
    faceUV[2] = new BABYLON.Vector4(0.38, 1, 0, 0.5);

    //car material
    const carMat = new BABYLON.StandardMaterial("carMat");
    carMat.diffuseTexture = new BABYLON.Texture("https://yjmyzz.github.io/babylon_js_study/assets/img/car.png");

    //back formed automatically
    const car = BABYLON.MeshBuilder.ExtrudePolygon("car", { shape: outline, depth: 0.2, faceUV: faceUV, wrap: true });
    car.material = carMat;

    return car;
}

const buildWheels = (car) => {
    //wheel face UVs
    const wheelUV = [];
    wheelUV[0] = new BABYLON.Vector4(0, 0, 1, 1);
    wheelUV[1] = new BABYLON.Vector4(0, 0.5, 0, 0.5);
    wheelUV[2] = new BABYLON.Vector4(0, 0, 1, 1);

    //car material
    const wheelMat = new BABYLON.StandardMaterial("wheelMat");
    wheelMat.diffuseTexture = new BABYLON.Texture("https://yjmyzz.github.io/babylon_js_study/assets/img/wheel.png");

    const wheelRB = BABYLON.MeshBuilder.CreateCylinder("wheelRB", { diameter: 0.125, height: 0.05, faceUV: wheelUV })
    wheelRB.material = wheelMat;

    wheelRB.parent = car;
    wheelRB.position.z = -0.1;
    wheelRB.position.x = -0.2;
    wheelRB.position.y = 0.035;

    const wheelRF = wheelRB.clone("wheelRF");
    wheelRF.position.x = 0.1;

    const wheelLB = wheelRB.clone("wheelLB");
    wheelLB.position.y = -0.2 - 0.035;

    const wheelLF = wheelRF.clone("wheelLF");
    wheelLF.position.y = -0.2 - 0.035;

    const wheels = [];
    wheels.push(wheelRB);
    wheels.push(wheelRF);
    wheels.push(wheelLB);
    wheels.push(wheelLF);

    return wheels;
}

//轮子转动
const wheelAnimation = (scene, wheels) => {
    //定义一个动画，每秒30帧，绕y轴转动
    const animWheel = new BABYLON.Animation("wheelAnimation", "rotation.y",
        30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    //动画关键帧
    const wheelKeys = [];

    //起始帧
    wheelKeys.push({
        frame: 0,
        value: 0
    });

    //截止帧(即：第30帧，转到360度)
    wheelKeys.push({
        frame: 30,
        value: 2 * Math.PI
    });

    //设置关键帧
    animWheel.setKeys(wheelKeys);

    for (let i = 0; i < wheels.length; i++) {
        //将wheel与动画关联
        wheels[i].animations = [];
        wheels[i].animations.push(animWheel);

        //开始动画,最后的true表示循环播放
        scene.beginAnimation(wheels[i], 0, 30, true);
    }
}

结合先前画的房屋，可以让小汽车在房屋之间动起来：

在线地址：https://yjmyzz.github.io/babylon_js_study/day06/02.html （加载的资源比较多，网页首次打开可能比较慢）

二、如何实现复杂的运动轨迹？

2.1 理解movePOV

babylon.js提供了movePOV(rightSpeed, upSpeed, forwardSpeed)方法，可以让对象 朝右(x轴负方向)、朝上(z轴正方向)、朝前(z轴负方向) 运动。

下面分别演示一下，基本代码如下：

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    BABYLON.SceneLoader.ImportMeshAsync("him", "../assets/glb/", "dude.babylon").then((result) => {
        var dude = result.meshes[0];
        dude.scaling = new BABYLON.Vector3(0.02, 0.02, 0.02);
        scene.beginAnimation(result.skeletons[0], 0, 100, true, 1.0);

        //向前运动
        const rightSpeed = 0, upSpeed = 0, forwardSpeed = 0.01;
        let distance = 0;

        //控制下一帧的行为
        scene.onBeforeRenderObservable.add(() => {
            //让人物动起来
            dude.movePOV(rightSpeed, upSpeed, forwardSpeed);
            distance += 0.002;
            if (distance > 1) {
                //走的距离>1地，复位
                distance = 0;
                dude.position = BABYLON.Vector3.Zero();
            }

        });
    });

    showAxis(4, scene);
    return scene;
}

向前(z轴负方向)：

注：此处的向前，是从人物自身的视角来看的，从观察者（即电脑前的我们）角度来看，即为向我们走来。

向右(x轴负方向)：

//向右运动
const rightSpeed = 0.01, upSpeed = 0, forwardSpeed = 0.00;

注：由于人物动画走路朝向的设计原因，仅设置rightSpeed有值，会让人横向移动(类似螃蟹)，有点奇怪（马上会讲到rotate方法，可以解决这个问题）

向上(Y轴正方向）：

//向上运动
const rightSpeed = 0, upSpeed = 0.01, forwardSpeed = 0.00;

2.2 理解rotate

前进过程中如何转向呢？回想下开汽车时，我们用方向盘来转向，babylon.js中自然也有类似方法，即：rotate方法

BABYLON.SceneLoader.ImportMeshAsync("him", "../assets/glb/", "dude.babylon").then((result) => {
    var dude = result.meshes[0];
    dude.scaling = new BABYLON.Vector3(0.02, 0.02, 0.02);
    scene.beginAnimation(result.skeletons[0], 0, 100, true, 1.0);

    //向前运动
    const rightSpeed = 0, upSpeed = 0, forwardSpeed = 0.01;

    let distance = 0, turnFlag = false;

    //控制下一帧的行为
    scene.onBeforeRenderObservable.add(() => {
        //让人物动起来
        dude.movePOV(rightSpeed, upSpeed, forwardSpeed);
        distance += 0.002;

        //走到0.5距离时，右转90度
        if (!turnFlag && Math.abs(distance - 0.5) <= 0.000001) {
            dude.rotate(BABYLON.Axis.Y, Math.PI / 2, BABYLON.Space.LOCAL);
            turnFlag = true;
        }

        if (distance > 1) {
            //走的距离>1地，复位
            distance = 0;
            dude.position = BABYLON.Vector3.Zero();
            dude.rotation = BABYLON.Vector3.Zero();
            turnFlag = false;
        }

    });
});

在线地址 ：https://yjmyzz.github.io/babylon_js_study/day06/03.html

3 生成复杂运动轨迹

结合movePOV 以及rotate，就能实现相对较为复杂的运动轨迹

const createScene = () => {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    //画1个正方形(辅助观察人物运动路径)
    const squarePoints = [new BABYLON.Vector3(-2, 0, 2),
    new BABYLON.Vector3(2, 0, 2),
    new BABYLON.Vector3(2, 0, -2),
    new BABYLON.Vector3(-2, 0, -2),
    new BABYLON.Vector3(-2, 0, 2)];
    const square = BABYLON.MeshBuilder.CreateLines("square", { points: squarePoints });

    //走距离dist后，转方向trun(角度)
    const trunPoint = function (turn, dist) {
        this.turn = turn;
        this.dist = dist;
    }

    //运动轨迹(关键转向点)
    //注：因本例中的人物原型太大，加载后缩小处理了，所以这里的距离也要回应缩小（即：*0.2)
    const track = [
        new trunPoint(Math.PI / 2, 4 * 0.2),
        new trunPoint(Math.PI / 2, 8 * 0.2),
        new trunPoint(Math.PI / 2, 12 * 0.2),
        new trunPoint(Math.PI / 2, 16 * 0.2)
    ]

    BABYLON.SceneLoader.ImportMeshAsync("him", "../assets/glb/", "dude.babylon").then((result) => {
        var dude = result.meshes[0];
        dude.scaling = new BABYLON.Vector3(0.02, 0.02, 0.02);
        dude.position = new BABYLON.Vector3(2, 0, 2);
        scene.beginAnimation(result.skeletons[0], 0, 100, true, 1.0);

        //向前运动
        const rightSpeed = 0.00, upSpeed = 0.00, forwardSpeed = 0.01;

        //distance记录走过的距离，p为track中转向点的下标(即：第几个转向点)
        let distance = 0, p = 0;

        //控制下一帧的行为
        scene.onBeforeRenderObservable.add(() => {
            //让人物动起来
            dude.movePOV(rightSpeed, upSpeed, forwardSpeed);
            distance += 0.002;
            //判断关键转向点
            console.log(distance);
            if (distance > track[p].dist) {
                dude.rotate(BABYLON.Axis.Y, track[p].turn, BABYLON.Space.LOCAL);
                p += 1;
                p %= track.length;

                if (p === 0) {
                    //走到最开始的位置时，复位
                    distance = 0;
                    dude.position = new BABYLON.Vector3(2, 0, 2);
                    dude.rotation = BABYLON.Vector3.Zero();
                }
            }
        });
    });

    showAxis(4, scene);
    return scene;
}

在线地址：https://yjmyzz.github.io/babylon_js_study/day06/04.html

4、碰撞检测 

每个mesh对象在babylon.js中实际占据着一块矩形立体空间

当2个对象碰撞到时，只要这2个立体空间有重叠即为发生了碰撞，对应的方法为 intersectsMesh，下面给1个简单的演示：

BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "car.babylon").then((result) => {
    var car1 = scene.getMeshByName("car");
    car1.position = new BABYLON.Vector3(-6, 0, 0);
    car1.scaling = new BABYLON.Vector3(4, 4, 4);

    const wheelRB = scene.getMeshByName("wheelRB");
    const wheelRF = scene.getMeshByName("wheelRF");
    const wheelLB = scene.getMeshByName("wheelLB");
    const wheelLF = scene.getMeshByName("wheelLF");
    let wheels = [wheelRB, wheelRF, wheelLB, wheelLF];
    let wheelAnimatables = [];
    for (let i = 0; i < wheels.length; i++) {
        wheelAnimatables.push(scene.beginAnimation(wheels[i], 0, 30, true));
    }

    const animCar = new BABYLON.Animation("carAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    const carKeys = [];
    carKeys.push({
        frame: 0,
        value: -6
    });
    carKeys.push({
        frame: 120,
        value: 6
    });

    animCar.setKeys(carKeys);

    car1.animations = [];
    car1.animations.push(animCar);

    let carAnimable = scene.beginAnimation(car1, 0, 120, true);

    //复制出第2辆车，挡在路上
    var car2 = car1.clone("car2");
    car2.position = new BABYLON.Vector3(2, 0, 0.4);
    car2.rotation.y = Math.PI;
    car2.scaling = car1.scaling;

    //注：第2辆车刚复制出来的瞬间，位置与第1辆车就重合了，会导致一出场就碰了，因此要借助ready把首次碰排除掉
    let ready = false;

    //控制下一帧的行为
    scene.onBeforeRenderObservable.add(() => {
        //发生碰撞
        if (car1.intersectsMesh(car2)) {
            if (!ready) {
                ready = true;
                return;
            }

            if (ready){
                //停止动画
                carAnimable.stop();
                //模拟第1辆车，被撞飞
                car1.rotate(BABYLON.Axis.Y, Math.PI*0.4, BABYLON.Space.LOCAL);
                car1.position.x -= 0.2;
                car1.position.y += 0.5;
                return;

            }

        }

    });
});

在线地址 ： https://yjmyzz.github.io/babylon_js_study/day06/05.html

参考文档：

https://doc.babylonjs.com/features/introductionToFeatures/chap3/walkpath

https://doc.babylonjs.com/features/introductionToFeatures/chap4/mesh_intersect