Fixed frame converter

Apps/Sandcastle/gallery/development/HeadingPitchRoll.html → Apps/Sandcastle/gallery/HeadingPitchRoll.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-    <meta name="description" content="Create 3D models using glTF.">
-    <meta name="cesium-sandcastle-labels" content="Development">
+    <meta name="description" content="Use HeadingPitchRoll">
+    <meta name="cesium-sandcastle-labels" content="Tutorials">
     <title>Cesium Demo</title>
     <script type="text/javascript" src="../Sandcastle-header.js"></script>
     <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
@@ -70,9 +70,10 @@ <h1>Loading...</h1>
 var viewer = new Cesium.Viewer('cesiumContainer');
 var canvas = viewer.canvas;
 canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
-canvas.onclick = function() {
-     canvas.focus();
-};
+canvas.addEventListener('click', function() {
+    canvas.focus();
+});
+canvas.focus();
 
 var scene = viewer.scene;
 
@@ -101,13 +102,15 @@ <h1>Loading...</h1>
 var hpRoll = new Cesium.HeadingPitchRoll();
 var hpRange = new Cesium.HeadingPitchRange();
 var speed = 10;
+var deltaRadians = Cesium.Math.toRadians(3.0);
 
 var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
 var speedVector = new Cesium.Cartesian3();
+var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
 
 var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
     url : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
-    modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll),
+    modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
     minimumPixelSize : 128
 }));
 
@@ -128,19 +131,16 @@ <h1>Loading...</h1>
     hpRange.pitch = pitch;
     hpRange.range = r * 50.0;
     camera.lookAt(center, hpRange);
-    update();
 });
 
-document.addEventListener('keyup', function(e) {
-    var deltaRadians = Cesium.Math.toRadians(3.0);
-
+document.addEventListener('keydown', function(e) {
     switch (e.keyCode) {
         case 40:
             if (e.shiftKey) {
                 // speed down
                 speed = Math.max(--speed, 1);
             } else {
-                // pitch down until
+                // pitch down
                 hpRoll.pitch -= deltaRadians;
                 if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
                     hpRoll.pitch += Cesium.Math.TWO_PI;
@@ -150,9 +150,9 @@ <h1>Loading...</h1>
         case 38:
             if (e.shiftKey) {
                 // speed up
-                speed = Math.max(speed++, 100);
+                speed = Math.min(++speed, 100);
             } else {
-                // pitch up until Math.PI/2
+                // pitch up
                 hpRoll.pitch += deltaRadians;
                 if (hpRoll.pitch > Cesium.Math.TWO_PI) {
                     hpRoll.pitch -= Cesium.Math.TWO_PI;
@@ -161,7 +161,7 @@ <h1>Loading...</h1>
             break;
         case 39:
             if (e.shiftKey) {
-                // roll right until Math.PI/2
+                // roll right
                 hpRoll.roll += deltaRadians;
                 if (hpRoll.roll > Cesium.Math.TWO_PI) {
                     hpRoll.roll -= Cesium.Math.TWO_PI;
@@ -208,7 +208,7 @@ <h1>Loading...</h1>
     speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
     position = Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, speedVector, position);
     pathPosition.addSample(Cesium.JulianDate.now(), position);
-    Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, undefined, planePrimitive.modelMatrix);
+    Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, planePrimitive.modelMatrix);
 
     if (fromBehind.checked) {
         // Zoom to model
@@ -217,7 +217,8 @@ <h1>Loading...</h1>
         hpRange.pitch = hpRoll.pitch;
         camera.lookAt(center, hpRange);
     }
-});//Sandcastle_End
+});
+//Sandcastle_End
     Sandcastle.finishedLoading();
 }
 if (typeof Cesium !== "undefined") {

Apps/Sandcastle/gallery/LocalToFixedFrame.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Use localFrameToFixedFrameGenerator for adequate rotation.">
+    <meta name="cesium-sandcastle-labels" content="Tutorials">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+        @import url(../templates/bucket.css);
+    </style>
+    <div id="cesiumContainer" class="fullSize"></div>
+    <div id="loadingOverlay">
+        <h1>Loading...</h1>
+    </div>
+    <div id="toolbar">
+        <table>
+            <tbody>
+                <tr>
+                    <td>Click on the 3D window then use the keyboard to change settings.</td>
+                </tr>
+                <tr>
+                    <td>Heading: <span id="heading"></span>°</td>
+                </tr>
+                <tr>
+                    <td>← to left/→ to right</td>
+                </tr>
+                <tr>
+                    <td>Pitch: <span id="pitch"></span>°</td>
+                </tr>
+                <tr>
+                    <td>↑ to up/↓ to down</td>
+                </tr>
+                <tr>
+                    <td>roll: <span id="roll"></span>°</td>
+                </tr>
+                <tr>
+                    <td>← + ⇧ left/→ + ⇧ right</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer');
+var canvas = viewer.canvas;
+canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
+canvas.addEventListener('click', function() {
+    canvas.focus();
+});
+canvas.focus();
+
+var scene = viewer.scene;
+var camera = viewer.camera;
+var controller = scene.screenSpaceCameraController;
+var r = 0;
+var center = new Cesium.Cartesian3();
+
+var hpRoll = new Cesium.HeadingPitchRoll();
+var hpRange = new Cesium.HeadingPitchRange();
+var deltaRadians = Cesium.Math.toRadians(1.0);
+
+var localFrames = [
+    {
+        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.045000, 5000.0),
+        converter : Cesium.Transforms.eastNorthUpToFixedFrame,
+        comments : 'Classical East North Up\nlocal Frame'
+    },
+    {
+        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.050000, 5500.0),
+        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west'),
+        comments : 'North West Up\nlocal Frame'
+    },
+    {
+        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.040000, 4500.0),
+        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('south', 'up'),
+        comments : 'South Up West\nlocal Frame'
+    },
+    {
+        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.050000, 4500.0),
+        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('up', 'east'),
+        comments : 'Up East North\nlocal Frame'
+    },
+    {
+        pos : Cesium.Cartesian3.fromDegrees(-123.075, 44.040000, 5500.0),
+        converter : Cesium.Transforms.localFrameToFixedFrameGenerator('down', 'east'),
+        comments : 'Down East South\nlocal Frame'
+    },
+];
+
+var primitives = [];
+var hprRollZero = new Cesium.HeadingPitchRoll();
+
+for (var i = 0; i < localFrames.length; i++) {
+    var position = localFrames[i].pos;
+    var converter = localFrames[i].converter;
+    var comments = localFrames[i].comments;
+    var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
+        url : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
+        modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter),
+        minimumPixelSize : 128
+    }));
+
+    primitives.push({primitive : planePrimitive, converter : converter, position : position});
+    var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, hprRollZero, Cesium.Ellipsoid.WGS84, converter);
+    scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
+        modelMatrix : modelMatrix,
+        length : 300.0,
+        width : 10.0
+    }));
+
+    var positionLabel = position.clone();
+    positionLabel.z = position.z + 300.0;
+    viewer.entities.add({
+        position : positionLabel,
+        label : {
+            text : comments,
+            font : '24px Helvetica',
+            fillColor : Cesium.Color.SKYBLUE,
+            outlineColor : Cesium.Color.BLACK,
+            outlineWidth : 2,
+            style : Cesium.LabelStyle.FILL_AND_OUTLINE,
+            verticalOrigin : Cesium.VerticalOrigin.CENTER,
+            HorizontalOrigin : Cesium.HorizontalOrigin.RIGHT
+        }
+    });
+}
+
+primitives[0].primitive.readyPromise.then(function(model) {
+    // Play and loop all animations at half-speed
+    model.activeAnimations.addAll({
+        speedup : 0.5,
+        loop : Cesium.ModelAnimationLoop.REPEAT
+    });
+
+    // Zoom to model
+    r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
+    controller.minimumZoomDistance = r * 0.5;
+    Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
+    var heading = Cesium.Math.toRadians(90.0);
+    var pitch = Cesium.Math.toRadians(0.0);
+    hpRange.heading = heading;
+    hpRange.pitch = pitch;
+    hpRange.range = r * 100.0;
+    camera.lookAt(center, hpRange);
+});
+
+document.addEventListener('keydown', function(e) {
+    switch (e.keyCode) {
+        case 40:
+            // pitch down
+            hpRoll.pitch -= deltaRadians;
+            if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
+                hpRoll.pitch += Cesium.Math.TWO_PI;
+            }
+            break;
+        case 38:
+            // pitch up
+            hpRoll.pitch += deltaRadians;
+            if (hpRoll.pitch > Cesium.Math.TWO_PI) {
+                hpRoll.pitch -= Cesium.Math.TWO_PI;
+            }
+            break;
+        case 39:
+            if (e.shiftKey) {
+                // roll right
+                hpRoll.roll += deltaRadians;
+                if (hpRoll.roll > Cesium.Math.TWO_PI) {
+                    hpRoll.roll -= Cesium.Math.TWO_PI;
+                }
+            } else {
+                // turn right
+                hpRoll.heading += deltaRadians;
+                if (hpRoll.heading > Cesium.Math.TWO_PI) {
+                    hpRoll.heading -= Cesium.Math.TWO_PI;
+                }
+            }
+            break;
+        case 37:
+            if (e.shiftKey) {
+                // roll left until
+                hpRoll.roll -= deltaRadians;
+                if (hpRoll.roll < 0.0) {
+                    hpRoll.roll += Cesium.Math.TWO_PI;
+                }
+            } else {
+                // turn left
+                hpRoll.heading -= deltaRadians;
+                if (hpRoll.heading < 0.0) {
+                    hpRoll.heading += Cesium.Math.TWO_PI;
+                }
+            }
+            break;
+        default:
+    }
+});
+
+var headingSpan = document.getElementById('heading');
+var pitchSpan = document.getElementById('pitch');
+var rollSpan = document.getElementById('roll');
+
+viewer.scene.preRender.addEventListener(function(scene, time) {
+    headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
+    pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
+    rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
+
+    for (var i = 0; i < primitives.length; i++) {
+        var primitive = primitives[i].primitive;
+        var converter = primitives[i].converter;
+        var position = primitives[i].position;
+        Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, converter, primitive.modelMatrix);
+    }
+});
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>

Apps/Sandcastle/gallery/development/3D Models Node Explorer.html

@@ -146,7 +146,7 @@
     return transformations[nodeName];
 });
 
-// these writable computed properties produce individual values for use in the UI 
+// these writable computed properties produce individual values for use in the UI
 ['translationX', 'translationY', 'translationZ', 'rotationHeading', 'rotationPitch', 'rotationRoll', 'scaleX', 'scaleY', 'scaleZ'].forEach(function(p) {
     Cesium.knockout.defineProperty(viewModel, p, {
         get: function() {
@@ -155,7 +155,7 @@
         set: function(value) {
             // coerce values to number
             viewModel.transformation[p] = +value;
-        } 
+        }
     });
 });
 
@@ -164,7 +164,8 @@
     return new Cesium.Cartesian3(viewModel.translationX, viewModel.translationY, viewModel.translationZ);
 });
 Cesium.knockout.defineProperty(viewModel, 'rotation', function() {
-    return Cesium.Quaternion.fromHeadingPitchRoll(viewModel.rotationHeading, viewModel.rotationPitch, viewModel.rotationRoll);
+    var hpr = new Cesium.HeadingPitchRoll(viewModel.rotationHeading, viewModel.rotationPitch, viewModel.rotationRoll);
+    return Cesium.Quaternion.fromHeadingPitchRoll(hpr);
 });
 Cesium.knockout.defineProperty(viewModel, 'scale', function() {
     return new Cesium.Cartesian3(viewModel.scaleX, viewModel.scaleY, viewModel.scaleZ);
@@ -192,17 +193,17 @@
 
 model.readyPromise.then(function(model) {
     var camera = viewer.camera;
-    
+
     // Zoom to model
     var controller = scene.screenSpaceCameraController;
     var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
     controller.minimumZoomDistance = r * 0.5;
-    
+
     var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
     var heading = Cesium.Math.toRadians(230.0);
     var pitch = Cesium.Math.toRadians(-20.0);
     camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
-    
+
     // enumerate nodes and add options
     var options = Object.keys(model._runtime.nodesByName).map(function(nodeName) {
        return {
@@ -214,7 +215,7 @@
     });
     options[0].onselect();
     Sandcastle.addToolbarMenu(options);
-    
+
     // respond to viewmodel changes by applying the computed matrix
     Cesium.knockout.getObservable(viewModel, 'matrix').subscribe(function(newValue) {
         var node = model.getNode(viewModel.nodeName);