Updated

2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
--- a/master/examples/Two
+++ b/master/examples/Two
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Create two canvases on the same page for visualizing different scenes.">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../Build/Unminified/Cesium.js"></script>
+    <script type="text/javascript" src="../Sandcastle-warn.js"></script>
+</head>
+<body data-sandcastle-bucket="bucket-plain.html" data-sandcastle-title="Cesium (standalone)">
+<style>
+    body {
+        background: #000;
+        color: #eee;
+        font-family: sans-serif;
+        font-size: 9pt;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+    .top {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border: none;
+        border-bottom: solid 2px #888;
+        width: 100%;
+        height: 50%;
+    }
+    .bottom {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        border: none;
+        border-top: solid 2px #888;
+        width: 100%;
+        height: 50%;
+    }
+    #topbar {
+        margin: 5px;
+        padding: 2px 5px;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    #bottombar {
+        margin: 5px;
+        padding: 2px 5px;
+        position: absolute;
+        top: 50%;
+        left: 0;
+    }
+</style>
+
+<div id="cesiumContainerTop"></div>
+<div id="cesiumContainerBottom"></div>
+<div id="topbar">Loading...</div>
+<div id="bottombar"></div>
+<script id="cesium_sandcastle_script">
+(function () {
+    "use strict";
+
+    var canvas3D = document.createElement('canvas');
+    canvas3D.className = "top";
+    document.getElementById('cesiumContainerTop').appendChild(canvas3D);
+
+    var canvas2D = document.createElement('canvas');
+    canvas2D.className = "bottom";
+    document.getElementById('cesiumContainerBottom').appendChild(canvas2D);
+
+    var ellipsoid = Cesium.Ellipsoid.WGS84;
+
+    function createScene(canvas) {
+        var scene = new Cesium.Scene(canvas);
+        var primitives = scene.getPrimitives();
+
+        var imageryUrl = '../../../Source/Assets/Textures/';
+        var imageryProvider = new Cesium.SingleTileImageryProvider({
+            url : imageryUrl + 'NE2_LR_LC_SR_W_DR_2048.jpg'
+        });
+
+        var cb = new Cesium.CentralBody(ellipsoid);
+        cb.getImageryLayers().addImageryProvider(imageryProvider);
+
+        primitives.setCentralBody(cb);
+
+        // Prevent right-click from opening a context menu.
+        canvas.oncontextmenu = function () {
+            return false;
+        };
+
+        return scene;
+    }
+
+    var scene3D = createScene(canvas3D);
+    var scene2D = createScene(canvas2D);
+
+    scene3D.skyAtmosphere = new Cesium.SkyAtmosphere();
+    
+    var transitioner = new Cesium.SceneTransitioner(scene2D);
+    transitioner.to2D();
+
+    function render3D() {
+        scene3D.initializeFrame();
+        scene3D.render();
+    }
+    
+    function render2D() {
+        scene2D.initializeFrame();
+        scene2D.render();
+    }
+        
+    function tick() {
+        render3D();
+        render2D();
+        Cesium.requestAnimationFrame(tick);
+    }
+    tick();
+
+    // Resize handler
+    var onResizeScene = function (canvas, scene) {
+        var width = canvas.clientWidth;
+        var height = canvas.clientHeight;
+
+        if (canvas.width === width && canvas.height === height) {
+            return;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+        scene.getCamera().frustum.aspectRatio = width / height;
+    };
+    var onResize = function () {
+        onResizeScene(canvas3D, scene3D);
+        onResizeScene(canvas2D, scene2D);
+    };
+    window.addEventListener('resize', onResize, false);
+    window.setTimeout(onResize, 60);
+
+    document.getElementById('topbar').innerHTML = '3D';
+    document.getElementById('bottombar').innerHTML = '2D';
+}());
+</script>
+</body>
+</html>