czmlloader

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="expires" content="0">
<script>
function refreshAt(hours, minutes, seconds) {
    var now = new Date();
    var then = new Date();

    if(now.getHours() > hours ||
       (now.getHours() == hours && now.getMinutes() > minutes) ||
        now.getHours() == hours && now.getMinutes() == minutes && now.getSeconds() >= seconds) {
        then.setDate(now.getDate() + 1);
    }
    then.setHours(hours);
    then.setMinutes(minutes);
    then.setSeconds(seconds);

    var timeout = (then.getTime() - now.getTime());
    setTimeout(function() { window.location.reload(true); }, timeout);
}
refreshAt(22,0,0);
</script>
<meta charset="utf-8">

<!-- Use Chrome Frame in IE -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

<!-- Make the application take up the full browser screen and disable user scaling-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<title>Cesium Viewer</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="Cesium/Widgets/CesiumWidget/CesiumWidget.css" media="screen">
<link rel="stylesheet" href="Cesium/Widgets/Animation/Animation.css" media="screen">
<link rel="stylesheet" href="Cesium/Widgets/SceneModePicker/SceneModePicker.css" media="screen">
<link rel="stylesheet" href="Cesium/Widgets/Timeline/Timeline.css" media="screen">
<link rel="stylesheet" href="Cesium/Widgets/Widgets.css" media="screen">


<!-- <script data-dojo-config="async:1,tlmSiblingOfDojo:0" src="../../../ThirdParty/dojo-release-1.8.3-src/dojo/dojo.js"></script> -->
<script src="Cesium/Cesium.js"></script>
<!-- <script src="/Cesium-full-b16/Source/Scene/Scene.js"></script> -->


</head>
<body class="claro" style="background: #000;">

    <div id="cesiumContainer" class="fullWindow"></div>
    <div id="animationContainer" style="position: absolute; bottom: 0; left: 0; padding: 0; width: 169px; height: 112px"></div>
    <div id="timelineContainer" style="position: absolute; bottom: 0; left: 169px; right: 29px; height: 27px; padding: 0; margin: 0; overflow: hidden; font-size: 14px;"></div>
    <div id="sceneModePickerContainer" style="position: absolute; top: 5px; right: 10px; padding: 0; width: 30px; height: 30px"></div>


    <script type="text/javascript">

    // var div = document.getElementById('cesiumContainer');
    // var canvas = document.getElementById('cesiumCanvas');
    // canvas.width = div.scrollWidth;
    // canvas.height = div.scrollHeight;

    var widget = new Cesium.CesiumWidget('cesiumContainer');
    var scene = widget.scene
    // scene.sun = new Sun();
    var objects = new Cesium.DynamicObjectCollection();
    var visualizers = Cesium.VisualizerCollection.createCzmlStandardCollection(scene, objects);


    // initialize clock

    var currentTime = new Cesium.JulianDate();
    var clock = new Cesium.Clock({
        startTime : currentTime.addDays(-0.5),
        stopTime : currentTime.addDays(0.5),
        currentTime : currentTime,
        clockStep : Cesium.ClockStep.SYSTEM_CLOCK_DEPENDENT,
        multiplier: 1
    });

    widget.clock = clock
    // var animationController = new Cesium.AnimationController(clock);

    var clockViewModel = new Cesium.ClockViewModel(clock);
    var viewModel = new Cesium.AnimationViewModel(clockViewModel);
    var animwidget = new Cesium.Animation('animationContainer', viewModel);
    var timelineWidget = new Cesium.Timeline('timelineContainer', clock)


    // scene = new Cesium.Scene("cesiumContainer");

    var czmlfile = "ess.czml";
    function processScenario(file) {
        Cesium.loadJson(file).then(function(czml) {
            Cesium.processCzml(czml, objects, file);
            var availability = objects.computeAvailability();
            clock.startTime = availability.start;
            clock.stopTime = availability.stop;
            clock.clockRange = Cesium.ClockRange.LOOP;
            clock.currentTime = currentTime;
            // animationController.play();
        }, function (e) {
            console.error(e);
        });
    }
    function tick() {
        currentTime = widget.clock.tick()
        visualizers.update(currentTime);
        scene.initializeFrame();
        // animate();
        scene.render(currentTime);
        // if (scene.mode == Cesium.SceneMode.SCENE3D)
        // {
        //     scene.getCamera().controller.rotateLeft(.001);
        // }
        Cesium.requestAnimationFrame(tick);
    }

    // function tick() {
    //     clock.tick();
    //     Cesium.requestAnimationFrame(tick);
    // }
    // Cesium.requestAnimationFrame(tick);
    // processScenario(czmlfile);
    var transitioner = new Cesium.SceneTransitioner(scene);
    var sceneModePicker = new Cesium.SceneModePicker('sceneModePickerContainer', transitioner);

    tick();
    </script>

</body>
</html>