飞机的尾部火焰-源代码示例 运行 重置

                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
    <script src='./templates/bmgl-header.js'></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    #toolbar {
        position: absolute;
    }
</style>

<body>
    <div id="container"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
</body>
<script>

    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    // var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.googlemap-satellite' });

    var viewer = new bmgl.Viewer("container", {
        shouldAnimate: true,
    });
    var planePosition = bmgl.Cartesian3.fromDegrees(
        -75.59777,
        40.03883,
        800.0
    );
    var particlesOffset = new bmgl.Cartesian3(
        -8.950115473940969,
        34.852766731753945,
        -30.235411095432937
    );
    var cameraLocation = bmgl.Cartesian3.add(
        planePosition,
        particlesOffset,
        new bmgl.Cartesian3()
    );
    var resetCamera = function () {
        viewer.camera.lookAt(
            cameraLocation,
            new bmgl.Cartesian3(-450, -300, 200)
        );
    };
    resetCamera();

    // Draw particle image to a canvas
    var particleCanvas;
    function getImage() {
        if (!bmgl.defined(particleCanvas)) {
            particleCanvas = document.createElement("canvas");
            particleCanvas.width = 20;
            particleCanvas.height = 20;
            var context2D = particleCanvas.getContext("2d");
            context2D.beginPath();
            context2D.arc(8, 8, 8, 0, bmgl.Math.TWO_PI, true);
            context2D.closePath();
            context2D.fillStyle = "rgb(255, 255, 255)";
            context2D.fill();
        }
        return particleCanvas;
    }

    // Add plane to scene
    var hpr = new bmgl.HeadingPitchRoll(
        0.0,
        bmgl.Math.PI_OVER_TWO,
        0.0
    );
    var orientation = bmgl.Transforms.headingPitchRollQuaternion(
        planePosition,
        hpr
    );
    var entity = viewer.entities.add({
        model: {
            uri: "/templates/glb/bmgl_Air.glb",
            scale: 3.5,
        },
        position: planePosition,
        orientation: orientation,
    });

    // creating particles model matrix
    var translationOffset = bmgl.Matrix4.fromTranslation(
        particlesOffset,
        new bmgl.Matrix4()
    );
    var translationOfPlane = bmgl.Matrix4.fromTranslation(
        planePosition,
        new bmgl.Matrix4()
    );
    var particlesModelMatrix = bmgl.Matrix4.multiplyTransformation(
        translationOfPlane,
        translationOffset,
        new bmgl.Matrix4()
    );

    // creating the particle systems
    var rocketOptions = {
        numberOfSystems: 50.0,
        iterationOffset: 0.1,
        cartographicStep: 0.000001,
        baseRadius: 0.0005,

        colorOptions: [
            {
                minimumRed: 1.0,
                green: 0.5,
                minimumBlue: 0.05,
                alpha: 1.0,
            },
            {
                red: 0.9,
                minimumGreen: 0.6,
                minimumBlue: 0.01,
                alpha: 1.0,
            },
            {
                red: 0.8,
                green: 0.05,
                minimumBlue: 0.09,
                alpha: 1.0,
            },
            {
                minimumRed: 1,
                minimumGreen: 0.05,
                blue: 0.09,
                alpha: 1.0,
            },
        ],
    };

    var cometOptions = {
        numberOfSystems: 100.0,
        iterationOffset: 0.003,
        cartographicStep: 0.0000001,
        baseRadius: 0.0005,

        colorOptions: [
            {
                red: 0.6,
                green: 0.6,
                blue: 0.6,
                alpha: 1.0,
            },
            {
                red: 0.6,
                green: 0.6,
                blue: 0.9,
                alpha: 0.9,
            },
            {
                red: 0.5,
                green: 0.5,
                blue: 0.7,
                alpha: 0.5,
            },
        ],
    };

    var scratchCartesian3 = new bmgl.Cartesian3();
    var scratchCartographic = new bmgl.Cartographic();
    var forceFunction = function (options, iteration) {
        return function (particle, dt) {
            dt = bmgl.Math.clamp(dt, 0.0, 0.05);

            scratchCartesian3 = bmgl.Cartesian3.normalize(
                particle.position,
                new bmgl.Cartesian3()
            );
            scratchCartesian3 = bmgl.Cartesian3.multiplyByScalar(
                scratchCartesian3,
                -40.0 * dt,
                scratchCartesian3
            );

            scratchCartesian3 = bmgl.Cartesian3.add(
                particle.position,
                scratchCartesian3,
                scratchCartesian3
            );

            scratchCartographic = bmgl.Cartographic.fromCartesian(
                scratchCartesian3,
                bmgl.Ellipsoid.WGS84,
                scratchCartographic
            );

            var angle =
                (bmgl.Math.PI * 2.0 * iteration) / options.numberOfSystems;
            iteration += options.iterationOffset;
            scratchCartographic.longitude +=
                Math.cos(angle) * options.cartographicStep * 30.0 * dt;
            scratchCartographic.latitude +=
                Math.sin(angle) * options.cartographicStep * 30.0 * dt;

            particle.position = bmgl.Cartographic.toCartesian(
                scratchCartographic
            );
        };
    };

    var matrix4Scratch = new bmgl.Matrix4();
    var scratchAngleForOffset = 0.0;
    var scratchOffset = new bmgl.Cartesian3();
    var imageSize = new bmgl.Cartesian2(15.0, 15.0);
    function createParticleSystems(options, systemsArray) {
        var length = options.numberOfSystems;
        for (var i = 0; i < length; ++i) {
            scratchAngleForOffset =
                (Math.PI * 2.0 * i) / options.numberOfSystems;
            scratchOffset.x +=
                options.baseRadius * Math.cos(scratchAngleForOffset);
            scratchOffset.y +=
                options.baseRadius * Math.sin(scratchAngleForOffset);

            var emitterModelMatrix = bmgl.Matrix4.fromTranslation(
                scratchOffset,
                matrix4Scratch
            );
            var color = bmgl.Color.fromRandom(
                options.colorOptions[i % options.colorOptions.length]
            );
            var force = forceFunction(options, i);

            var item = viewer.scene.primitives.add(
                new bmgl.ParticleSystem({
                    image: getImage(),
                    startColor: color,
                    endColor: color.withAlpha(0.0),
                    particleLife: 3.5,
                    speed: 0.00005,
                    imageSize: imageSize,
                    emissionRate: 30.0,
                    emitter: new bmgl.CircleEmitter(0.1),
                    lifetime: 0.1,
                    updateCallback: force,
                    modelMatrix: particlesModelMatrix,
                    emitterModelMatrix: emitterModelMatrix,
                })
            );
            systemsArray.push(item);
        }
    }

    var rocketSystems = [];
    var cometSystems = [];
    createParticleSystems(rocketOptions, rocketSystems);
    createParticleSystems(cometOptions, cometSystems);

    // toolbar elements
    function showAll(systemsArray, show) {
        var length = systemsArray.length;
        for (var i = 0; i < length; ++i) {
            systemsArray[i].show = show;
        }
    }

    var options = [
        {
            text: "Comet Tail",
            onselect: function () {
                showAll(rocketSystems, false);
                showAll(cometSystems, true);
                resetCamera();
            },
        },
        {
            text: "Rocket Thruster",
            onselect: function () {
                showAll(cometSystems, false);
                showAll(rocketSystems, true);
                resetCamera();
            },
        },
    ];
    Sandcastle.addToolbarMenu(options);

</script>

</html>                                                        
源码