初学WebGL引擎-BabylonJS：第7篇-粒子效果，环境与高处的地图

【playground】-particles（粒子效果）

源码

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

    // Setup environment
    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, true);

    // Fountain object
    var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene);

    // Ground
    var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
    ground.position = new BABYLON.Vector3(0, -10, 0);
    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);

    ground.material = new BABYLON.StandardMaterial("groundMat", scene);
    ground.material.backFaceCulling = false;
    ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);

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

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

    // Where the particles come from
    particleSystem.emitter = fountain; // the starting object, the emitter
    particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // Starting all from
    particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 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.5;

    // Life time of each particle (random between...
    particleSystem.minLifeTime = 0.3;
    particleSystem.maxLifeTime = 1.5;

    // 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(-7, 8, 3);
    particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

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

    // Speed
    particleSystem.minEmitPower = 1;
    particleSystem.maxEmitPower = 3;
    particleSystem.updateSpeed = 0.005;

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

    // Fountain's animation
    var keys = [];
    var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    // At the animation key 0, the value of scaling is "1"
    keys.push({
        frame: 0,
        value: 0
    });

    // At the animation key 50, the value of scaling is "0.2"
    keys.push({
        frame: 50,
        value: Math.PI
    });

    // At the animation key 100, the value of scaling is "1"
    keys.push({
        frame: 100,
        value: 0
    });

    // Launch animation
    animation.setKeys(keys);
    fountain.animations.push(animation);
    scene.beginAnimation(fountain, 0, 100, true);

    return scene;
}

View Code

效果

喷的到处都是

话说忘了引图，成了这么一个东西

到处喷射粉红色马赛克

好了言归正传，简单翻译后如下

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

            // 点光源
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
            //电弧相机
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            // 箱子
            var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene);

            // 平面
            var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
            ground.position = new BABYLON.Vector3(0, -10, 0);
            ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
            // 平面材质
            ground.material = new BABYLON.StandardMaterial("groundMat", scene);
            ground.material.backFaceCulling = false;
            ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);

            // 创建一个粒子系统(2000是指粒子数)
            var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

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

            // 粒子的来源
            particleSystem.emitter = fountain; // 从箱子那发射
            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //最小发射
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //最大发射(基于轴的延伸，建议改这里的数值体验)

            // 粒子颜色
            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.5;

            // 粒子寿命
            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            // 发射率
            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(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            // 角速度，弧度
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            // 速度
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            // 开始粒子系统
            particleSystem.start();

            // 喷射的动画
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            // At the animation key 0, the value of scaling is "1"
            keys.push({
                frame: 0,
                value: 0
            });

            // At the animation key 50, the value of scaling is "0.2"
            keys.push({
                frame: 50,
                value: Math.PI
            });

            // At the animation key 100, the value of scaling is "1"
            keys.push({
                frame: 100,
                value: 0
            });

            // 附加动画参数
            animation.setKeys(keys);
            // 动画作用于箱子
            fountain.animations.push(animation);
            scene.beginAnimation(fountain, 0, 100, true);

            return scene;
        }

这里准备做一个旋转的喷射炮出来（春节放的鞭炮类似）

先来一个圆桶

            //炮
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 0.5, 0.5, 9, 0.2, scene, false);
            cylinder.position = new BABYLON.Vector3(7, 0, 0);
            cylinder.rotation.x=4.75;

然后我们注释掉箱子和他的动画

接着我们做一个粒子系统出来

代码

//喷射炮的粒子系统开始
            var particleSystem = new BABYLON.ParticleSystem("particles", 3000, scene);
            //粒子的纹理
            particleSystem.particleTexture = new BABYLON.Texture("map/flare.png", scene);
            //粒子的来源
            particleSystem.emitter = cylinder; // 从箱子那发射
            particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //最小发射
            particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //最大发射(基于轴的延伸，建议改这里的数值体验)

            //粒子颜色
            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 = 1;
            //粒子寿命
            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.0;
            //发射率
            particleSystem.emitRate = 1500;

            //混合模式 : BLENDMODE_ONEONE(基于某地的混合模式), or BLENDMODE_STANDARD(标准的混合模式)
            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
            //粒子重力(注意：此处降低重力体现漂浮感)
            particleSystem.gravity = new BABYLON.Vector3(0, -3.81, 0);
            // 粒子喷射方向
            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            // 角速度，弧度
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            // 速度
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            // 开始粒子系统
            particleSystem.start();

            //喷射炮的粒子系统结束

 

效果

接着需要达到几点。

1.喷射点前移

2.炮身旋转

3.喷射点旋转

 

先完成喷射点前移

效果如下

代码如下

            particleSystem.emitter = cylinder; // 从箱子那发射
            particleSystem.minEmitBox = new BABYLON.Vector3(-0.1, 0.7, 0); //最小发射
            particleSystem.maxEmitBox = new BABYLON.Vector3(0.1, 0.7, 0); //最大发射(基于轴的延伸，建议改这里的数值体验)

 

接着我们让炮身产生旋转的动画

效果如下

代码如下

//炮身旋转动画
            // 喷射的动画
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            keys.push({
                frame: 0,
                value: 0
            });

            keys.push({
                frame: 50,
                value: 3
            });

            keys.push({
                frame: 100,
                value: 6
            });

            // 附加动画参数
            animation.setKeys(keys);
            // 动画作用于箱子
            cylinder.animations.push(animation);
            scene.beginAnimation(cylinder, 0, 100, true);

 

看来引擎比我想象的智能的多。当炮在移动的时候，相对喷射点也跟着进行了移动

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!-- link to the last version of babylon -->
    <script src="js/babylon.2.2.max.js"></script>
</head>
<style>
    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

    #renderCanvas {
        width   : 100%;
        height  : 100%;
        touch-action: none;
    }
</style>

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        //获取画布对象
       var canvas = document.getElementById('renderCanvas');
       //加载巴比伦3D引擎
       var engine = new BABYLON.Engine(canvas, true);
       //创建场景
       var createScene = function () {
            var scene = new BABYLON.Scene(engine);

            // 点光源
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
            //电弧相机
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            // 箱子
            // var fountain = BABYLON.Mesh.CreateBox("foutain", 1.0, scene);
            // fountain.position = new BABYLON.Vector3(-2, 0, 0);

            //炮
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 1, 0.5, 0.5, 9, 0.2, scene, false);
            cylinder.position = new BABYLON.Vector3(0, 0, 0);
            cylinder.rotation.x=4.75;


            // 平面
            var ground = BABYLON.Mesh.CreatePlane("ground", 50.0, scene);
            ground.position = new BABYLON.Vector3(0, -10, 0);
            ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
            // 平面材质
            ground.material = new BABYLON.StandardMaterial("groundMat", scene);
            ground.material.backFaceCulling = false;
            ground.material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);

            //喷射炮的粒子系统开始
            var particleSystem = new BABYLON.ParticleSystem("particles", 3000, scene);
            //粒子的纹理
            particleSystem.particleTexture = new BABYLON.Texture("map/flare.png", scene);
            //粒子的来源
            particleSystem.emitter = cylinder; // 从箱子那发射
            particleSystem.minEmitBox = new BABYLON.Vector3(-0.1, 0.7, 0); //最小发射
            particleSystem.maxEmitBox = new BABYLON.Vector3(0.1, 0.7, 0); //最大发射(基于轴的延伸，建议改这里的数值体验)

            //粒子颜色
            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 = 1;
            //粒子寿命
            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.0;
            //发射率
            particleSystem.emitRate = 1500;

            //混合模式 : BLENDMODE_ONEONE(基于某地的混合模式), or BLENDMODE_STANDARD(标准的混合模式)
            particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
            //粒子重力(注意：此处降低重力体现漂浮感)
            particleSystem.gravity = new BABYLON.Vector3(0, -3.81, 0);
            // 粒子喷射方向
            particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
            particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            // 角速度，弧度
            particleSystem.minAngularSpeed = 0;
            particleSystem.maxAngularSpeed = Math.PI;

            // 速度
            particleSystem.minEmitPower = 1;
            particleSystem.maxEmitPower = 3;
            particleSystem.updateSpeed = 0.005;

            // 开始粒子系统
            particleSystem.start();

            //喷射炮的粒子系统结束


            //炮身旋转动画
            // 喷射的动画
            var keys = [];
            var animation = new BABYLON.Animation("animation", "rotation.z", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
                                                                            BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            
            keys.push({
                frame: 0,
                value: 0
            });

            keys.push({
                frame: 50,
                value: 3
            });

            keys.push({
                frame: 100,
                value: 6
            });

            // 附加动画参数
            animation.setKeys(keys);
            // 动画作用于箱子
            cylinder.animations.push(animation);
            scene.beginAnimation(cylinder, 0, 100, true);


            // // 创建一个粒子系统(2000是指粒子数)
            // var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

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

            // // 粒子的来源
            // particleSystem.emitter = fountain; // 从箱子那发射
            // particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); //最小发射
            // particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); //最大发射(基于轴的延伸，建议改这里的数值体验)

            // // 粒子颜色
            // 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.5;

            // // 粒子寿命
            // particleSystem.minLifeTime = 0.3;
            // particleSystem.maxLifeTime = 1.5;

            // // 发射率
            // 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(-7, 8, 3);
            // particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);

            // // 角速度，弧度
            // particleSystem.minAngularSpeed = 0;
            // particleSystem.maxAngularSpeed = Math.PI;

            // // 速度
            // particleSystem.minEmitPower = 1;
            // particleSystem.maxEmitPower = 3;
            // particleSystem.updateSpeed = 0.005;

            // // 开始粒子系统
            // particleSystem.start();

            // // 喷射的动画
            // var keys = [];
            // var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
            //                                                                 BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
            // // At the animation key 0, the value of scaling is "1"
            // keys.push({
            //     frame: 0,
            //     value: 0
            // });

            // // At the animation key 50, the value of scaling is "0.2"
            // keys.push({
            //     frame: 50,
            //     value: Math.PI
            // });

            // // At the animation key 100, the value of scaling is "1"
            // keys.push({
            //     frame: 100,
            //     value: 0
            // });

            // // 附加动画参数
            // animation.setKeys(keys);
            // // 动画作用于箱子
            // fountain.animations.push(animation);
            // scene.beginAnimation(fountain, 0, 100, true);

            return scene;
        }



        //赋予该场景于变量
        var scene = createScene();
        //在引擎中循环运行这个场景
        engine.runRenderLoop(function(){
            scene.render();
        });
        //追加事件：帆布与大小调整程序
        window.addEventListener('resize', function(){
            engine.resize();
        });
    });
    

</script>
</body>
</html>

View Code

 

 

【playground】-environment（环境）

源码

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

    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 50, 50), scene);
    var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);

    camera.attachControl(canvas, true);

    var material1 = new BABYLON.StandardMaterial("mat1", scene);
    material1.diffuseColor = new BABYLON.Color3(1, 1, 0);

    for (var i = 0; i < 10; i++) {
        var box = BABYLON.Mesh.CreateBox("Box", 1.0, scene);
        box.material = material1;
        box.position = new BABYLON.Vector3(-i * 5, 0, 0);
    }

    // Fog
    scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
    //BABYLON.Scene.FOGMODE_NONE;
    //BABYLON.Scene.FOGMODE_EXP;
    //BABYLON.Scene.FOGMODE_EXP2;
    //BABYLON.Scene.FOGMODE_LINEAR;

    scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
    scene.fogDensity = 0.01;

    //Only if LINEAR
    //scene.fogStart = 20.0;
    //scene.fogEnd = 60.0;

    // Skybox
    var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.disableLighting = true;
    skybox.material = skyboxMaterial;

    var alpha = 0;
    scene.registerBeforeRender(function () {

        scene.fogDensity = Math.cos(alpha) / 10;
        alpha += 0.02;

    });

    return scene;
};

View Code

效果