fireworks-源代码示例 运行 重置

                    <!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>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

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

    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer("container", {
        shouldAnimate: true,
    });

    var scene = viewer.scene;
    bmgl.Math.setRandomNumberSeed(315);

    var modelMatrix = bmgl.Transforms.eastNorthUpToFixedFrame(
        bmgl.Cartesian3.fromDegrees(-75.59777, 40.03883)
    );
    var emitterInitialLocation = new bmgl.Cartesian3(0.0, 0.0, 100.0);

    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;
    }

    var minimumExplosionSize = 30.0;
    var maximumExplosionSize = 100.0;
    var particlePixelSize = new bmgl.Cartesian2(7.0, 7.0);
    var burstSize = 400.0;
    var lifetime = 10.0;
    var numberOfFireworks = 20.0;

    var emitterModelMatrixScratch = new bmgl.Matrix4();

    function createFirework(offset, color, bursts) {
        var position = bmgl.Cartesian3.add(
            emitterInitialLocation,
            offset,
            new bmgl.Cartesian3()
        );
        var emitterModelMatrix = bmgl.Matrix4.fromTranslation(
            position,
            emitterModelMatrixScratch
        );
        var particleToWorld = bmgl.Matrix4.multiply(
            modelMatrix,
            emitterModelMatrix,
            new bmgl.Matrix4()
        );
        var worldToParticle = bmgl.Matrix4.inverseTransformation(
            particleToWorld,
            particleToWorld
        );

        var size = bmgl.Math.randomBetween(
            minimumExplosionSize,
            maximumExplosionSize
        );
        var particlePositionScratch = new bmgl.Cartesian3();
        var force = function (particle) {
            var position = bmgl.Matrix4.multiplyByPoint(
                worldToParticle,
                particle.position,
                particlePositionScratch
            );
            if (bmgl.Cartesian3.magnitudeSquared(position) >= size * size) {
                bmgl.Cartesian3.clone(
                    bmgl.Cartesian3.ZERO,
                    particle.velocity
                );
            }
        };

        var normalSize =
            (size - minimumExplosionSize) /
            (maximumExplosionSize - minimumExplosionSize);
        var minLife = 0.3;
        var maxLife = 1.0;
        var life = normalSize * (maxLife - minLife) + minLife;

        scene.primitives.add(
            new bmgl.ParticleSystem({
                image: getImage(),
                startColor: color,
                endColor: color.withAlpha(0.0),
                particleLife: life,
                speed: 100.0,
                imageSize: particlePixelSize,
                emissionRate: 0,
                emitter: new bmgl.SphereEmitter(0.1),
                bursts: bursts,
                lifetime: lifetime,
                updateCallback: force,
                modelMatrix: modelMatrix,
                emitterModelMatrix: emitterModelMatrix,
            })
        );
    }

    var xMin = -100.0;
    var xMax = 100.0;
    var yMin = -80.0;
    var yMax = 100.0;
    var zMin = -50.0;
    var zMax = 50.0;

    var colorOptions = [
        {
            minimumRed: 0.75,
            green: 0.0,
            minimumBlue: 0.8,
            alpha: 1.0,
        },
        {
            red: 0.0,
            minimumGreen: 0.75,
            minimumBlue: 0.8,
            alpha: 1.0,
        },
        {
            red: 0.0,
            green: 0.0,
            minimumBlue: 0.8,
            alpha: 1.0,
        },
        {
            minimumRed: 0.75,
            minimumGreen: 0.75,
            blue: 0.0,
            alpha: 1.0,
        },
    ];

    for (var i = 0; i < numberOfFireworks; ++i) {
        var x = bmgl.Math.randomBetween(xMin, xMax);
        var y = bmgl.Math.randomBetween(yMin, yMax);
        var z = bmgl.Math.randomBetween(zMin, zMax);
        var offset = new bmgl.Cartesian3(x, y, z);
        var color = bmgl.Color.fromRandom(
            colorOptions[i % colorOptions.length]
        );

        var bursts = [];
        for (var j = 0; j < 3; ++j) {
            bursts.push(
                new bmgl.ParticleBurst({
                    time: bmgl.Math.nextRandomNumber() * lifetime,
                    minimum: burstSize,
                    maximum: burstSize,
                })
            );
        }

        createFirework(offset, color, bursts);
    }

    var camera = viewer.scene.camera;
    var cameraOffset = new bmgl.Cartesian3(-300.0, 0.0, 0.0);
    camera.lookAtTransform(modelMatrix, cameraOffset);
    camera.lookAtTransform(bmgl.Matrix4.IDENTITY);

    var toFireworks = bmgl.Cartesian3.subtract(
        emitterInitialLocation,
        cameraOffset,
        new bmgl.Cartesian3()
    );
    bmgl.Cartesian3.normalize(toFireworks, toFireworks);
    var angle =
        bmgl.Math.PI_OVER_TWO -
        Math.acos(
            bmgl.Cartesian3.dot(toFireworks, bmgl.Cartesian3.UNIT_Z)
        );
    camera.lookUp(angle);

</script>

</html>                                                                                            
源码