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

 

官網還有很多粒子系統的精彩示例，感興趣的同學可以深入研究：