babylon.js 学习笔记(10)

今天来学习下车床(lathe)建型及粒子系统，babylon.js有一个很强大的函数CreateLathe，可以将一段路径经过旋转后，形成1个shape，这么说有点抽象，比如下面这张图：

其中的关键点坐标为：

const fountainProfile = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(10, 4, 0),
    new BABYLON.Vector3(8, 4, 0),
    new BABYLON.Vector3(8, 1, 0),
    new BABYLON.Vector3(1, 2, 0),
    new BABYLON.Vector3(1, 15, 0),
    new BABYLON.Vector3(3, 17, 0)
];

调用CreateLathe后：

const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);

再给几个示例：

const fountainProfile = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(10, 4, 0),
    new BABYLON.Vector3(8, 4, 0),
    new BABYLON.Vector3(8, 1, 0),
    new BABYLON.Vector3(1, 2, 0),
    new BABYLON.Vector3(1, 15, 0),
    new BABYLON.Vector3(3, 17, 0)
];

const myShape = [
    new BABYLON.Vector3(3, 0, 0),
    new BABYLON.Vector3(10, 5, 0),
    new BABYLON.Vector3(5, 10, 0),
    new BABYLON.Vector3(12, 15, 0),
    new BABYLON.Vector3(3, 20, 0)
];

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

    const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 70, BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0));

    //Create lathe1
    const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);

    //Create lathe2
    const lathe1 = BABYLON.MeshBuilder.CreateLathe("lathe1", { shape: myShape, sideOrientation: BABYLON.Mesh.DOUBLESIDE });
    lathe1.position.x = -30;
    lathe1.scaling = new BABYLON.Vector3(0.75, 0.75, 0.75);

    //Create lathe3
    const lathe2 = BABYLON.MeshBuilder.CreateLathe("lathe2", { shape: myShape, closed: false, arc: 0.75, sideOrientation: BABYLON.Mesh.DOUBLESIDE });
    lathe2.position.x = 30;
    lathe2.scaling = new BABYLON.Vector3(0.75, 0.75, 0.75);

    showAxis(24, scene);
    return scene;
}

最右侧的残缺效果，主要是 closed: false, arc: 0.75 这2个参数起了作用。

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

接下来看看粒子系统，直接上代码，建议大家调整下这里面的参数，感受不同的效果：

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

    const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 70, BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0));

    // 创建粒子系统
    var particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);

    //粒子的纹理图片
    particleSystem.particleTexture = new BABYLON.Texture("../assets/img/flare.png", scene);

    //粒子的发射距离
    particleSystem.emitter = new BABYLON.Vector3(0, 5, 0); // the starting object, the emitter
    particleSystem.minEmitBox = new BABYLON.Vector3(-1, -5, 0); // Starting all from
    particleSystem.maxEmitBox = new BABYLON.Vector3(1, -5, 0); // To...

    //粒子颜色
    particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
    particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

    //粒子大小
    particleSystem.minSize = 0.1;
    particleSystem.maxSize = 0.6;

    //粒子存在的生命周期(时长）
    particleSystem.minLifeTime = 2;
    particleSystem.maxLifeTime = 3.8;

    //发射速率
    particleSystem.emitRate = 1500;

    //混合模式 : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
    particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

    //重力值
    particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

    //发射方向
    particleSystem.direction1 = new BABYLON.Vector3(-3, 8, 3);
    particleSystem.direction2 = new BABYLON.Vector3(3, 8, -3);

    //角度、半径
    particleSystem.minAngularSpeed = 0;
    particleSystem.maxAngularSpeed = Math.PI;

    //速度及力度大小
    particleSystem.minEmitPower = 1;
    particleSystem.maxEmitPower = 2.2;
    particleSystem.updateSpeed = 0.025;

    //开喷
    particleSystem.start();

    return scene;
}

其中flare.jpg长这样：

上面这段代码跑出来，效果是这样的：

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/02.html

把今天学到的2个知识点，结合一下，就变成这样：

const fountainProfile = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(10, 4, 0),
    new BABYLON.Vector3(8, 4, 0),
    new BABYLON.Vector3(8, 1, 0),
    new BABYLON.Vector3(1, 2, 0),
    new BABYLON.Vector3(1, 15, 0),
    new BABYLON.Vector3(3, 17, 0)
];

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

    const camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 70, BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0));

    const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", { shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);
    fountain.position.y = -15;

    // Create a particle system
    var particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);

    //Texture of each particle
    particleSystem.particleTexture = new BABYLON.Texture("../assets/img/flare.png", scene);

    // Where the particles come from
    particleSystem.emitter = new BABYLON.Vector3(0, 5, 0); // the starting object, the emitter
    particleSystem.minEmitBox = new BABYLON.Vector3(-1, -5, 0); // Starting all from
    particleSystem.maxEmitBox = new BABYLON.Vector3(1, -5, 0); // To...

    // Colors of all particles
    particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
    particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

    // Size of each particle (random between...
    particleSystem.minSize = 0.1;
    particleSystem.maxSize = 0.6;

    // Life time of each particle (random between...
    particleSystem.minLifeTime = 2;
    particleSystem.maxLifeTime = 3.8;

    // Emission rate
    particleSystem.emitRate = 1500;

    // Blend mode : BLENDMODE_ONEONE, or BLENDMODE_STANDARD
    particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;

    // Set the gravity of all particles
    particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

    // Direction of each particle after it has been emitted
    particleSystem.direction1 = new BABYLON.Vector3(-3, 8, 3);
    particleSystem.direction2 = new BABYLON.Vector3(3, 8, -3);

    // Angular speed, in radians
    particleSystem.minAngularSpeed = 0;
    particleSystem.maxAngularSpeed = Math.PI;

    // Speed
    particleSystem.minEmitPower = 1;
    particleSystem.maxEmitPower = 2.2;
    particleSystem.updateSpeed = 0.025;

    // Start the particle system
    particleSystem.start();

    return scene;
}

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

还可以给这个喷泉加点交互，鼠标点击到喷泉时，切换喷发

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

官网还有很多粒子系统的精彩示例，感兴趣的同学可以深入研究：

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

在线地址：https://yjmyzz.github.io/babylon_js_study/day10/06.html

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