Permalink
Browse files

Merge pull request #511 from AnalyticalGraphicsInc/camera-tutorial

Camera Tutorial
  • Loading branch information...
2 parents 03e2e89 + a9fef98 commit 8ef9cf9a3578db2bb45cacd712b0c7f0d2c37080 @pjcozzi pjcozzi committed Feb 13, 2013
Showing with 256 additions and 0 deletions.
  1. +256 −0 Apps/Sandcastle/gallery/Camera Tutorial.html
@@ -0,0 +1,256 @@
+<!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="A starting point for creating Cesium applications (uses Bing imagery).">
+ <title>Cesium Demo</title>
+ <script type="text/javascript" src="../Sandcastle-header.js"></script>
+ <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.2/require.js"></script>
+ <script type="text/javascript">
+ require.config({
+ baseUrl : '../../../Source'
+ });
+ </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html" data-sandcastle-title="Cesium + require.js">
+<style>
+ @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<script id="cesium_sandcastle_script">
+require(['Cesium'], function(Cesium) {
+ "use strict";
+
+ //A real application should require only the subset of modules that
+ //are actually used, instead of requiring the Cesium module, which
+ //includes everything.
+
+ var canvas = document.createElement('canvas');
+ canvas.className = 'fullSize';
+ document.getElementById('cesiumContainer').appendChild(canvas);
+ var scene = new Cesium.Scene(canvas);
+
+ scene.skyAtmosphere = new Cesium.SkyAtmosphere();
+
+ var skyBoxBaseUrl = '../../../Source/Assets/Textures/SkyBox/tycho2t3_80';
+ scene.skyBox = new Cesium.SkyBox({
+ positiveX : skyBoxBaseUrl + '_px.jpg',
+ negativeX : skyBoxBaseUrl + '_mx.jpg',
+ positiveY : skyBoxBaseUrl + '_py.jpg',
+ negativeY : skyBoxBaseUrl + '_my.jpg',
+ positiveZ : skyBoxBaseUrl + '_pz.jpg',
+ negativeZ : skyBoxBaseUrl + '_mz.jpg'
+ });
+
+ var primitives = scene.getPrimitives();
+
+ // Bing Maps
+ var bing = new Cesium.BingMapsImageryProvider({
+ url : 'http://dev.virtualearth.net',
+ mapStyle : Cesium.BingMapsStyle.AERIAL,
+ // Some versions of Safari support WebGL, but don't correctly implement
+ // cross-origin image loading, so we need to load Bing imagery using a proxy.
+ proxy : Cesium.FeatureDetection.supportsCrossOriginImagery() ? undefined : new Cesium.DefaultProxy('/proxy/')
+ });
+
+ var ellipsoid = Cesium.Ellipsoid.WGS84;
+ var centralBody = new Cesium.CentralBody(ellipsoid);
+ centralBody.getImageryLayers().addImageryProvider(bing);
+
+ primitives.setCentralBody(centralBody);
+
+ var transitioner = new Cesium.SceneTransitioner(scene, ellipsoid);
+
+ // create viewport quad with keyboard and mouse instructions
+ var instructions = ['w/s - move forward/backward',
+ 'a/d - move left/right',
+ 'q/e - move up/down',
+ 'left mouse button down plus mouse move changes the look direction'];
+ var options = {
+ font : '20px sans-serif'
+ };
+ var instructionCanvases = [];
+ var instructionCanvas;
+ var width = 0;
+ var height = 0;
+ var margin = 2;
+ for (var i = 0; i < instructions.length; i++) {
+ instructionCanvas = Cesium.writeTextToCanvas(instructions[i], options);
+ instructionCanvases.push(instructionCanvas);
+ width = Math.max(width, instructionCanvas.dimensions.width);
+ height += instructionCanvas.dimensions.height + margin;
+ }
+
+ var instructionQuad = new Cesium.ViewportQuad();
+ instructionQuad.material.destroy();
+ instructionQuad.material = Cesium.Material.fromType(scene.getContext(), Cesium.Material.ImageType);
+ instructionQuad.material.uniforms.image = scene.getContext().createTexture2D({
+ width : width,
+ height : height
+ });
+
+ instructionQuad.rectangle.x = 0;
+ instructionQuad.rectangle.y = canvas.clientHeight - height;
+ instructionQuad.rectangle.width = width;
+ instructionQuad.rectangle.height = height;
+
+ var yOffset = height;
+ for (var j = 0; j < instructionCanvases.length; j++) {
+ instructionCanvas = instructionCanvases[j];
+ yOffset -= instructionCanvas.dimensions.height + margin;
+ instructionQuad.material.uniforms.image.copyFrom(instructionCanvas, 0, yOffset);
+ }
+ primitives.add(instructionQuad);
+
+ scene.getScreenSpaceCameraController().enableRotate = false;
+ scene.getScreenSpaceCameraController().enableTranslate = false;
+ scene.getScreenSpaceCameraController().enableZoom = false;
+ scene.getScreenSpaceCameraController().enableTilt = false;
+ scene.getScreenSpaceCameraController().enableLook = false;
+
+ var handler = new Cesium.ScreenSpaceEventHandler(canvas);
+
+ var looking = false;
+ var startMousePosition;
+ var mousePosition;
+
+ handler.setInputAction(function(movement) {
+ looking = true;
+ mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
+ }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+ handler.setInputAction(function(movement) {
+ mousePosition = movement.endPosition;
+ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+ handler.setInputAction(function(position) {
+ looking = false;
+ }, Cesium.ScreenSpaceEventType.LEFT_UP);
+
+ var moveForward = false;
+ var moveBackward = false;
+ var moveUp = false;
+ var moveDown = false;
+ var moveLeft = false;
+ var moveRight = false;
+
+ document.addEventListener('keypress', function(e) {
+ switch (e.keyCode) {
+ case 'w'.charCodeAt(0):
+ moveForward = true;
+ break;
+ case 's'.charCodeAt(0):
+ moveBackward = true;
+ break;
+ case 'q'.charCodeAt(0):
+ moveUp = true;
+ break;
+ case 'e'.charCodeAt(0):
+ moveDown = true;
+ break;
+ case 'd'.charCodeAt(0):
+ moveRight = true;
+ break;
+ case 'a'.charCodeAt(0):
+ moveLeft = true;
+ break;
+ default:
+ break;
+ }
+ }, false);
+
+ document.addEventListener('keyup', function (e) {
+ moveForward = false;
+ moveBackward = false;
+ moveUp = false;
+ moveDown = false;
+ moveRight = false;
+ moveLeft = false;
+ }, false);
+
+ function animate() {
+ var camera = scene.getCamera();
+ var controller = camera.controller;
+
+ if (looking) {
+ var width = canvas.clientWidth;
+ var height = canvas.clientHeight;
+
+ // Coordinate (0.0, 0.0) will be where the mouse was clicked.
+ var x = (mousePosition.x - startMousePosition.x) / width;
+ var y = -(mousePosition.y - startMousePosition.y) / height;
+
+ var lookFactor = 0.05;
+ controller.lookRight(x * lookFactor);
+ controller.lookUp(y * lookFactor);
+ }
+
+ // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
+ var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
+ var moveRate = cameraHeight / 100.0;
+
+ if (moveForward) {
+ controller.moveForward(moveRate);
+ }
+ if (moveBackward) {
+ controller.moveBackward(moveRate);
+ }
+ if (moveUp) {
+ controller.moveUp(moveRate);
+ }
+ if (moveDown) {
+ controller.moveDown(moveRate);
+ }
+ if (moveLeft) {
+ controller.moveLeft(moveRate);
+ }
+ if (moveRight) {
+ controller.moveRight(moveRate);
+ }
+ }
+
+ function tick() {
+ scene.initializeFrame();
+ animate();
+ scene.render();
+ Cesium.requestAnimationFrame(tick);
+ }
+ tick();
+
+ // Prevent right-click from opening a context menu.
+ canvas.oncontextmenu = function() {
+ return false;
+ };
+
+ ///////////////////////////////////////////////////////////////////////////
+ // Example resize handler
+
+ var onResize = function() {
+ 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;
+ };
+ window.addEventListener('resize', onResize, false);
+ onResize();
+
+ canvas.setAttribute('tabindex','0'); // needed to put focus on the canvas
+ canvas.onclick = function () {
+ canvas.focus();
+ };
+
+ Sandcastle.finishedLoading();
+});
+
+</script>
+</body>
+</html>

0 comments on commit 8ef9cf9

Please sign in to comment.